Make a 3D Car Game With Scratch.

by Harintsifa Randriantsizafy in Teachers > 6

1281 Views, 7 Favorites, 0 Comments

Make a 3D Car Game With Scratch.

3d presentation.png
FVA12E2LG7ZLPU7.png
presentation.png
000.png


Hello, today i'm going to teach you how to make a car game with Scratch. I choose this project because somitemes, i have no network and i'm bored, and i noticed that i'm not alone, and many of my friends don't have network too. And one day, there is no network in the entire high school and we had no class, so we went to the library. And scratch was installed in the computer of the library, so i started to make some easy shape and easy blockcode to make a car game(I put a preview of it above) and it was a funny moment. After that, I challenge myself to make the same but better than the first.

So i show you how i made this and I hope you enjoy. I'm trying too, to help you by making easy shape if you don't have Fusion 360 so you can do it on any 3D software design. I add a link in the last step if you want to play to it or just to see. I add an youtube video too to see an overview.

I'm going to put this instructable in the contest: Game Design: student design challenge as a student, 10th grade at: Lycées Publics De Chauny - Site Gambetta, 02300 Chauny, France.

(The presentation image doesn't quite look like the final result.)

Supplies

fusion360screen.png
scratch.png
removebg.png

To make the car game you need:

  • any 3D software, or 2D if you haven't a 3D software for design shapes, personally, i use Fusion 360 but you can use other, it works too.
  • Scratch: you can use it online but you can download too.
  • a software of remove background, I use remove.bg because it is free and easy to use but other works too.

Rule

FHZHT0RLE7447VG.png
F9YXRWJLE7447VU.png

The rule of the game is very simple: catch the apple to increase health and avoid obstacle otherwise you loose health. You loose the game when the health reaches 0. So let's start.

Design of Car

dissociated car1.png
associated car1.png
no remove car.png
remove car.png

The first step is the design of the main element: the car. It is the easier element of the game to do. So I will help you to design this on any 3D software:

  • I advise you to start with a rectangular parallelepiped to the body of the car, an another rectangular parallelepiped or a cube on the first rectangular parallelepiped to make the drivers cabine.
  • Four triangular prisme for more realism, two rectangle for the windshield
  • Two cylinder for the wheel.The weels will protrude a little beyond the widthof the body to be seen from above.

I do the car with the most easier way but you can design your own car with more details and more realistic or draw a car if you use a 2D. Finally take a photo or a screenshot of your design by top view and remove the background.

Design Road

dissociated road1.png
road3d.png
no remove road.png
remove road.png

For the road, it's pretty easy:

  • I recommend you to start with a square, then many white rectangles on the middle as you can see in the photo. Then others rectangles but in yellow and longer than the whites.
  • But like me, you can continue and add more details and more thing as you wish, for example houses, buildings, or just very basic shapes like cylinder, parallelepiped rectangle or cube.
  • For 2D design here, you need to draw a view from above.

Then take a screenshot or a photo of your design at the top and remove the background.

Making Obstacles

dissociated cone1.png
no remove cone.png
remove cone.png

Obstacles are very varied, you need just inspiration and you choose the object you want. Personally, i use a traffic cone because it can easily blent into the landscape. I give you tips to make this if you want:

  • I started with a square for support, then, a cone but if you want more details, you can make it as you wish.
  • If you do it in 2D, make sure that is is visible as an obstacle.

Then take a photo or a screenshot of your design; if you make the cone, take a photo or the screenshot at an angle for that we can clearly see that it's a cone. Then remove the background.


End Screen

no remove game over.png
game over.png

Here, i didn't look far, I just wrote GAME OVER, but if you have a better idea, you can. Again, take a photo or a screenshot of your design, and remove the background.


Programming

newproject.png
scratch.png

Programming is the most togh step of the project. So I advise you to take your time. Personally, I use scratch because it is a very easy programming software and it's avaible for everyone and it's free. So you can open scratch in your web browsing or download scratch.

Car Movement

voitureupload.png
voiturevector.png
move car.png

The first object to programm is the car:

  • First, upload the car without background on scratch, then i recommend you to convert to vector in costume. Here it is not very important but it will be the case in the next images.

You have just to copy the code above. In summary, in this code, when you click on the up arrow, the car moves forward, when you click on the down arrow, the car moves back, when you click on the left arrow, the car moves on the left and finally, when you click on the right arrow the car moves on the right. I show you a video to illustrate it.

Road Animation

roadupload1.png
roadfull.png
roadtrottoir.png
roadmove.png
2roadmove.png

The road is the background, but to animte it, the biggest trap is that we are not going to make it as a background image but a normal sprite.

  • First, upload the road without background, then you will arrange it for it to take up all the space as a background.
  • Then add two features as you can see in the photo as sidewalk, make it with an another color than the road, it will be important later.
  • Then, copy the first code above: in summary, when you click on the green flag,the road moves back and when it reaches the maximal low, it goes up and down again. The video moveroad2 below illustrates it well.
  • Finally, duplicate the sprite, so normally, the code is going to be duplicate too. So here, you have just to change the y position: instead of starting in the middle, it will start from the very top, so both road are going to give a cycle and give the impression of a scrolling landscap. The video move2road below illustrates it well.

Don't forget the code: go to back layer, otherwise, it will not display the car. The vide roadmove1 below show how i found the very bottom, and the very top is just the opposite of it.

Obstacle Move

coneupload.png
conecode1.png
conecode2.png
bothconecode.png

As an obstacle, I use a traffic cone, so I explain you how to move it, but it works with others obstacle.

  • First, upload your obstacle without background, here, without background, there is a white shadow, it's not so bad, we can continue anyway. Change the size so that it doesn't take up too much space but quite visible though.
  • The first code here, show how found the very bottom as shown in the video conemove1below; the second code is the code you have to copy: in summary, when you click on the green flag, the obstacle go down and when it hit the very botttom, it go to the very top, but in random between the twice sidewalks, it is illustrated by the second video..
  • Then, I duplicate the obstacle to give 4 obstacles. The final code are the definitive code, you have just to change the axe x at the start to avoid that they crash on the car from the beginning of the game, so change the code of two obstacles by ine of the code, and the other two, by the other code.

The last video is when you finish the code to this step. I didn't put the obstacles in the same place to increase the difficulty.

Variable

variable.png
start health.png
applecode1.png
applehealth.png

To allow the end of the game, i create a variable health, so it allow an end to the game when it hit 0.

  • So to increase health, i didn't look far, i take just the sprite apple, it is already in scratch so you have just to search it in the sprite and select it or you can design your own sprite or select an other sprite if you don't like. The first code is when the game start, you have 5 health.
  • Then you need to move the apple, it's the second code, it's the same code as the obstacle. It is illustrated by the video below.
  • The last code is when it touch the car, health increases by 2 and the apple goes to the very top but the position is random again.

All of the code above are to the apple only.

Other Health

carhealth2.png
carhealth1.png
carhealth3.png
healthcone.png

I put all the others together because it is short.

  • The first code to avoid that the car go to the dwelling area. So if the car touch the sidewalk, it go back in the middle and lost one health.
  • The second code is when the car touch the cone a cone, you lost a healt and go in the middle, it's the same code in the third code, you have just to duplicate the second code and change the first cone by the other cone.
  • The fourth code is for the cone, in summary when it touch the car, it go back at the very top.

Here I don't have video because it is just theory.

Game Over

gameoverupload.png
gameoverbloccode.png

We are coming to the end of programming. Here it is easy and fast.

  • You have to upload the sprite.
  • In summary the code here says that when health reaches 0 or below 0, stop all and show the sprite game over.

Here, sometimes, the sprite game over is too small so arrange for it to take up a lot of space in size. Don't forget below zero because sometimes, it doesn't go to zero and the game don't stop.

Game Finished

game finish.png

Now, your game is finish. I hope this instructable help you, I attach a video here to show an overview of the game. I know here it is difficult and take a lot of time but you can do this more difficult: for example adding song and so on. I wish you a good game and hope see you later, i hope also i help you or give you inspiration. You can also play to the game here if you want. Bye☺.