Saturday, May 14, 2011

Scratch Car Race Game - Part 2

Welcome to Part 2 of our Car Race Game in Scratch.

Click the Green Flag to start and drive counter clockwise around the track. Use the Up Arrow to accelerate forwards, and the Down arrow to reverse. Use the Left and Right Arrows for steering, and Space Bar for brakes.

(The faster you go the tighter the steering, so be careful not to oversteer at higher speeds). If you hit the grass, the car slows down dramatically. The car has a limiter that slows it back down if maximum speed is exceeded.

The car is hard to steer once the speed gets up, and stays at a constant speed until you either brake or hit the grass. Concentrate mainly on steering with the left arrow key, and only tap the up key to go faster as you get better on each lap. It is best to drive the car towards the middle or the outside of the track. Keep practicing until you achieve mastery. You can change the Car script to different number values if you don't like the game as it currently is.

The Car Race game is based on a game by "Spark98" called "Awesome Car Race" which we downloaded from the MIT Scratch site.

You need to complete the Part 1 tutorial, before building this Part 2 game. The above Part 2 game has an Introduction screen added to Part 1, with a menu of three Race tracks that can be selected.

The following YouTube video explains in detail how to build Part 2 of the Passy World Car Race Game.

Note that by adjusting the bottom right hand controls, it can be viewed full screen in HD. (Press Escape to return to this blog page when finished).

In Part 2, the first thing we needed to do was create two more race tracks for the game; these being USA and Japan.

These were built using Adobe Fireworks and its Bezier Curves Pen Tool. It is important to use the exact same shade of green for the grass in these two new tracks, so that the Part 1 slow down in the grass script code on the car still works.

The flags used on the tracks, and on the opening menu, were saved off from Google Images, and then taken into Adobe Fireworks and resized to each be 100 pixels wide.

You will need to get your own flags from Google Images, edit and resize them, and then import them as Sprites into Scratch. You may also need to get your own finish line image from the web, if you have not completed the Part 1 tutorial yet.

Here are the three tracks used in our game. If you would like to use these same ones in your game, then you can click on them, and then save these to your PC using your web browser.

Here is Track 2 - USA.

Here is Track 3 - Japan.

The next thing was to design the background of the Opening Screen Menu for the stage. This was done using the paint sprite function in Scratch, to paint bucket in a background, and then add some text, leaving room for the Car and Flag sprites to be positioned on this opening screen.

The three tracks were then imported one by one, as additional backgrounds for the Stage, and named accordingly.

The next thing was to set up the Car and Finish Line sprite sizes and positions on the Opening Menu Screen. Once we had moved them around with the mouse, we then noted down there x-y coordinates, and programmed these values into their Script code.

We then imported our three 100 pixel wide flags, as three separate sprites, into our Scratch project.

Now we can setup the script for each of these flags. The Japan Flag script is shown below, but all three are basically the same.

The Flag Script's main job is to broadcast a message to the Stage, so that it can change to the Race track for that flag's country.

The Stage then tells the Car and Finish Line sprites what country has been selected for racing.

Here is the completed Stage Script.

And here is the completed Finish Line script, showing how it resizes and positions itself depending on which track has been selected.

Note that the "Skid" sprite script has not been changed at all in Part 2, and is the same as it was in Part 1.

Finally the Car sprite. The new script code we have added for Part 2 is to position the Car on the Intro Menu Screen, and make sure it is not moving.

We then have code for when it receives the message that a certain country's race is starting, so that it is sized and positioned correctly on that country's track.

The rest of the Car Script is the same as it was in Part 1.

Here is the new script code for Part 2 that was added to the Car sprite.

Here is the Car Script code from Part 1 that controls the movement of the car, and was moved to be under the above code as the next part of the Car Sprite script for Part 2.

Here is the last part of the Car Script Code, taken from below the above code, which is the same code that we developed in Part 1.

We obtained the Red Car from a YoYo Games forum on the internet, saved it, then cut it out of the Sprite sheet and resized it to around 50 pixels by 50 pixels.

So that's Part 2 of our Scratch Car Racing Game.

In future extensions we are hoping to build in the following enhancements:

Sound EffectsRandom Oil Slicks that spin the car around on the trackRace only lasts for 10 lapsA "Game Over" MessageDisplay a Best Lap Time ValueA Damage variable for when they hit grass

These enhancements are made in our Part 3 final Car Race tutorial. Click the link below to go to this tutorial.