Simple Car Steering Simulation Tutorial

[Music] hello fellow scratchers do you like car simulations ever wondered how to create simple yet realistic car mechanics in your own scratch games i'm griff patch and today we are going to learn how to do just that a basic front-wheel drive car not only steers from the front but also is powered by the front wheels too this means that the front of the car both points it where to go but also moves in that same direction the back wheels are lazy things and they just happily follow a car length behind wherever the front wheels take them this is a wonderfully simple concept and you absolutely must stay tuned until the very end because i have a real treat for you where we take this idea even further and you're gonna love it i know you will but first let's mock up the movement of these front wheels delete sprite one and create a new sprite naming it front wheels in the costume editor draw up a simple arrow to indicate where the wheels are pointing make sure the start of the arrow is positioned at the sprite center here this will allow it to rotate around this point we'll start when a green flag is clicked create a new variable named zoom for all sprites you'll find it useful to be able to set the size of the car using this later on set it to 2 so we're zoomed in twice as big set size to 100 multiplied by zoom and position the sprite at an x y of zero by zero and in a forever loop and for now remembering the front wheel just points where we want it to go we point the wheel towards the mouse pointer we can test this and yeah that's working as expected so next we'll deal with the forward and back movement add a new custom block for this naming it acceleration with an input variable of joystick y we'll drop this new block into the forever loop and use a neat trick of key up arrow pressed minus key down arrow pressed to give a one for forward and a -1 for backwards watch my other videos for an explanation of this then under the define acceleration hat block simply move zoom multiplied by joystick y we multiplied by zoom here so that the car moves faster when we are zoomed in run the project and test that the forward and backwards arrow keys move the front wheel sprite arrow forward and backwards pretty standard stuff so far but you just wait this is about to get very exciting the front wheels are now maneuverable which is enough to allow us to experiment with adding the rest of the car make a new sprite naming it car body i'll draw a simple outline of the car mine is 58 by 35 pixels but this is all pretty rough make sure it's centered by dragging it until it snaps to the middle i'll just paint on the back and front windows and a roof now select the whole car and while holding the shift key drag it to the right so the center of the costume is between where you would imagine the back wheels to be this is again where the back of the car is to rotate around now in the code when green flag is clicked set the size to 100 multiplied by zoom to allow the car body to be attached to the wheels we need to record how long the distance between the cars front and back wheels is make a new variable named body length and for my car i'll set it to around 34 but you can try different values if things are slightly off more on that later go to front layer and enter a ferro loop now a car's body always follows its front wheels so start by pointing the car at the front wheels then move the car body up to the wheels using a go to front wheels but that will be too close so move back by the body length that is move zero minus body length multiplied by zoom now this is exciting run the project and look at that it's like magic oh cool with these few scripts we have a car that is following the front wheels perfectly i can even move backwards and the back end swings out so realistically you might already have deduced that this is actually the basis some really cool inverse kinesmatics anyhow i digress can you notice a slight lag in the connection between the front and back sprites where the arrow appears to stretch away from the car body this is caused by the car body scripts running before the front wheel scripts and so it is lagging one frame behind the movements to fix this we'll replace the green flag in the car body sprite with a when i receive block making a new event named car body and will get rid of the old green flag block then in the front wheel sprite broadcast car body just before the forever loop that will ensure the front wheel scripts run first then the car body next getting in first with the front wheel scripts is key to ordering the loop execution i will be making a more technical tutorial on this subject later so watch out for that run the project again and there the front wheel arrow is now firmly attached without any stretching okay so this is coming together really quickly now let's add some more realistic acceleration scripts to record the current car speed make a new variable named speed for all sprites and set it to zero then make another new variable named power to record the power of the car's engine and we'll set it to 0.3 you can play with these values to suit your game one more new variable named break for controlling how quickly the car slows down and we'll set that to 0.96 the closer to one this value is the longer the car takes to slow down right we're going to update the accelerate scripts over here we'll use the standard acceleration script so change speed by power multiplied by joystick y to accelerate the car but then set speed to speed multiplied by break to slow the car down the first one is a change the second one is a set don't forget to change the move block to use zoom multiplied by speed we can test this again now oh yeah this is cool the car is feeling much more nippy hmm i think we might need to zoom out a bit as we are quickly running out of space to drive select the front wheel sprite and set zoom to one ah that's a lot better we are much more zoomed out now we just need to make the steering more realistic too we want to simulate a steering wheel that can be turned left and right relative to the car in the front wheel sprite make a new variable named steer for this sprite only and we'll start by setting it to zero now create a new custom block naming it turn with an input of joystick x we'll use it right away with the value key right arrow pressed subtract key left arrow pressed within this define block we'll code steering like we coded acceleration so change steer by 4 multiplied by joystick x 4 is the turning power a larger value gives a faster turn to bring the steering wheel back to the center set steer to steer times by 0.9 okay we want the front wheels to initially point in the same direction as the car body so remove this old point towards mouse and then add in a point in direction careful not to use the point towards here and get the direction of the car body but then we add our new steer variable to this to give the effect of steering relative to the car body yay it's test time ah nice i can turn my steering wheel from the left and right arrows that feels pretty natural and if i use the forward and back keys oh yeah that's what i'm talking about we've suddenly got an awesome car under our control i just love the reversing it's so natural notice how the reverse turning circle is much tighter than when moving forward or it's so cool to play with this is cause for celebration a nice paint job perhaps ah beautiful sporty red so what next have you ever played one of those parking games you know where you have to maneuver a car into a parking slot how about we create something a bit like that start by making a new sprite and i'll name it target to gauge the required parking spot size we can copy in the car costume to our new sprite we'll draw a nice rectangle around it using it as a guide then delete the car and we can center the rectangle i'll name this sprite outline we need a second duplicate costume we'll name it phil that will be used to detect sprite collisions within the parking space draw a filled rectangle well within the first rectangle and then remove the outside rectangle when happy now when the green flag is clicked loop forever first switching to the filled costume and then with an if else check if this filled rectangle is touching the car body if it is say touching otherwise say nothing a quick test shows that this works great but what we really need to know is when the car is fully within the parking space not overlapping the edge of the costume like it currently can to do this duplicate the switch costume and the if nesting them within the first if this time we change the costume to outline so if we are touching the filled area and also touching the outline then we can say touching outline but if we are touching the fill and not touching the outline then we must be fully within the rectangle and we can say win we should remove this last say block now if we test again we get the touching outline as we enter the box but as soon as we are fully within it changes to win that's what we wanted success just switch costume to outline here to ensure it always looks good we don't ever want the filled rectangle to appear only the outline looking very good next up in our game should be adding obstacles to drive around before we create these it would help to better position the car at the start of a level to give us more room to play with in the front wheels sprite after setting zoom broadcast a new message of reset then when i receive reset split off the broadcast car body and add a new broadcast of game on and then when i receive game on continue the rest of the scripts now let's fix the starting position of the car go to minus 180 by minus 60. and point in direction zero that's up lastly we'll also add a stop other scripts in the sprite to the top of the reset receiver to allow us to break out of the game loop below when the level is reset we should do the same in the car body sprite when i receive reset stop other scripts in this sprite we'll also then go to -180 by -80 that's slightly below the other one and point in direction zero facing up then move the set size and body length up into the reset script everything else will leave in the when i receive car body this takes care of all the resetting things nicely if we run the project that should now position the car in the bottom left region of the screen that's a good place to start right now for those obstacles we'll create a new sprite named obstacles enter an xy position of zero to center the sprite and then draw some simple walls first to maneuver around okay so we could do with repositioning our parking space to fit the level so switch to the target sprite and if you can actually grab it i'm afraid it's a bit fiddly then position it to where you want it to be now in the target sprites code at a when i receive game on receiver we need to set up this level so make a new custom block named setup drag it under the receiver and for now we'll simply use a go to block if you are lucky it will be pre-populated with the position of the car's parking space otherwise enter the numbers in to match the x and y shown under the stage view we also need a point in direction to match its direction it's a good idea to set size to 100 times zoom so that the parking space matches our car's size right we won't need this green flag block anymore but before we move from the setup to looking for winds just add a small weight of 0.2 seconds to ensure the level fully resets we don't want to mistrigger a win until we are sure that the car and the parking space have been repositioned then join up the scripts i can just test that running the project does indeed reset the position and yeah it does spring back to where we'd expect to detect the collisions between the car and the obstacle sprite select the car body sprite and add an if touching obstacles at the bottom of the forever loop if we touch then simply broadcast reset that should put us right back to the start of the level we might as well check that out yep certainly can't get through these walls now and driving carefully around the course i should be able to get to the parking space yes i am a master driver i win that is already surprisingly fun so i'd expect now to be taken on to the next level in the front wheels sprite make a new variable named level for all sprites and set it to level 1 after the green flag is clicked back in the target sprite we need to upgrade our winning scripts where we say win broadcast the new message win and we can safely remove all three of these say blocks now a new sprite is needed name it win using the pixel font i'm going to make an appropriate congratulatory message you win so when green flag is clicked go to zero zero then when i receive game on [Music] hide the sprite next when i receive win celebrate by stopping the other scripts in this sprite this will be useful later and show our winning message we should go to the front layer and we'll wait for two seconds now just in case the player is still holding down any keys wait until no keys are pressed we can do this using a not key any pressed before changing level by one that will take us to the next level and then we broadcast reset to set that level up if we test the project on reaching our goal the you win message appears and two seconds later the level resets and look we are on level two apparently only we don't have no level two yet quickly then to the obstacle sprite to design a second level just a little code here when i receive game on switch costume to the level variable then go to x y of 0 0 jump into the costume designer now and let's get drawing costume 2 will be a level of cones for me hmm i may have overdone this one keeping things simple is always a good idea don't just copy me here though do whatever you feel like and have fun now i need to reposition the parking space to match the level when happy click into the target sprite wrap the first scripts in an if and check for level of one now we can duplicate the if for level two and fill in the new positions and rotations something like this let's test i'll just whiz through the first level and wait for it yay we've made it to level two the level costume has switched and the parking space has moved excellent now you should have no difficulty in adding as many levels as takes your fancy hmm hold on though my car is too big to get around this level at all i knew that second level was going to cause me problems so we have a few options here we could redesign the level probably a good idea or perhaps we should shrink our car down even more in the front wheel sprite i'll set zoom to 0.75 and now oh yeah like a pro so to wrap things up quickly if you wanted a reset level key we could do that in the win sprite by adding a when r key pressed stop other scripts in sprite and broadcast reset a level skip key can be done in just the same way but from the l key for example and with a change level by one before the broadcast to reset if you wanted a timer well then i'm sure you could figure out a way but if you want a quick script then make a new timer variable for all sprites then make a new custom block named set timer with an input of time we'll set time to zero under the when i receive game on and within the custom block set the variable timer to time divided by 100. now i want this timer to only begin timing when the car moves forward or back so add a quick wait for 0.1 seconds for the setup to complete and then wait until speed is not equal to zero then reset scratch's timer and enter a forever loop in here we'll use our set timer block and pass in the floor of scratch's timer multiplied by 100 give that a quick run now see the timer is not moving but we can wiggle our wheels around i like that then as soon as we start moving the timer begins crashing the car causes time to reset and then when we complete the level the timer stops it stops because we added a stop other scripts in sprite on the win receiver now one thing i'd like to change is that our car rolls on past the parking space when we win we should probably stop it moving but the choice is yours to stop it in the front wheel sprite under the game on receiver add a wait until before the forever loop waiting until no key is pressed this is actually to ensure the game doesn't accidentally begin after the level resets now add a when i receive win and we will stop other scripts in sprite this should end the main game loop when we have beaten a level and therefore stop the car i'll just complete the level and the car has stopped excellent but hold on shouldn't the level have progressed to level two by now oh gosh i think we have a bug okay after extensive debugging i have found the problem it's here in the target sprite we broadcast win here but this forever loop keeps running after the level is complete and so keeps broadcasting win over and over this in turn keeps the game from ever progressing easy fix though drop in and stop this script that's this script after the broadcast and here we go again and yeah job done but this second level is still a monster seriously this should not be a second level lol one might ragequit so where do we go from here well there are loads of options open to you and you can go to town with designing your levels you might even like to add something that says which way round the car needs to face to trigger the parking some in reverse for example or have flags to collect before you're allowed to park add a high score the best time for each level or even maybe moving obstacles on the level to get past but before we wrap up i want to show you something really really cool this is what i told you about at the beginning do you know we can also simulate articulated trucks with this car physics simulation watch this in the car sprite i'll just duplicate the first costume and redraw it as the front of a truck this is more of a european design with a flat front i need to update the body length variable to account for the shorter length 25 perhaps will do now duplicate the entire car body sprite naming it trailer for the trailer's costume we extend out the original car costume to the right mine is like 90 pixels long or so now this will link onto the back of the truck something like so i need to adjust its starting position to be lower than the car body was minus 150 will do the body length is much longer something like 70 but we can come back and tweak that add a new event receiver and i'll call it trailer update the point towards and go to to make them follow the car body instead of the car wheels lastly in the front wheel sprite add in a broadcast trailer after the other broadcast of car body and test hmm okay so the trailer's body length is too small click back into the trailer sprite and try a bigger value for body length maybe 90. oh no too long i'll go with 85. ah better let's give it a test drive oh man would you look at that that is so cool can you imagine what we could do with this we don't even have to stop at one trailer you could recreate a whole train anyway if you wanted to go on and make levels that work with this trailer then you probably want to make sure the parking space is bigger and longer and also trigger off touching the trailer not the car body any longer but that's up to you but today we will end here but i do have more to share on this subject so look out for a tutorial on that in the near future i do hope you've enjoyed this tutorial and that it's inspired you to create some awesome scratch projects please do smash the like button and don't forget to subscribe to the channel to avoid missing my next exciting video thank you for watching and scratch on [Music] guys [Music] you

Channel: griffpatch

Views: 305,860

Keywords:

Id: IxmOs-Mjmy0

Length: 25min 2sec (1502 seconds)

Published: Mon May 24 2021