HO-13: Creating a Simple Racing Car Game in Flash

Transcription

1 HO-13: Creating a Simple Racing Car Game in Flash Objectives To learn how to create a simple interactive game and score counter in Flash. To extend your understanding of programming in ActionScript 3.0, including the using of.as files and packages. Setting up the Files The first thing you are going to do is create a background for your movie which looks like a racing track/circuit to which you will add a racing car: 1. First of all you need to download the starter file mpho13_start.zip into a new folder called mpho13. This file contains a number of pre-prepared graphic images that you will use to create the car game. 2. Open the flash file and modify the document so that it is 640 x 500 pixels in dimension and set to 24 fps. Chose a suitable background colour (grey or brown, as this will be the colour of the race track). 3. Save the document as RacingGame.fla in your sub-folder mpho Next create a new ActionScript file and save this as RacingGame.as, in the sub-folder mpho13. Note: So far you have simply added ActionScript code to an Actions layer on the timeline of the main movie. But as you will discover in this handson exercise, you can also create your ActionScript code in a separate.as file. This can then be used to control your Flash movie (.fla file). However, you must remember to save your.as and.fla files in the same folder. Setting up the Car Graphic 5. Open your RacingGame.fla and make sure you have a copy of the Car movieclip in your library as you will need this during the game. Note: this will be called dynamically from the code. 6. Drag a copy of the Ground movieclip from the library on to the stage. As this will form a static background for the game it doesn t have to be generated by your ActionScript code. Set its x and y to 0.0 and give it an instance name: land_mc under properties. Note: if you wanted to, you could create your own track by drawing a green square and erasing the road. Then make sure all the grass is grouped and converted in to a movieclip. You could also add a start/finish line, but not in land_mc as the track must be clear for the hit test. Getting the external code to link 7. Because the ActionScript is contained in an external.as file you will be using public functions and classes enclosed in a package tag. You can think of packages as the directories and subdirectories of class files, helping to organise them. Only one class can be used per package. A package is a special type of namespace (commonly used in.net) that is guaranteed to be known at compile time and organises your class files. Packages give structure, preven duplication of names and allow you to bundle class definitions together, facilitating code sharing. Public/internal/protected/ private are access modifiers. They control which external classes have access to them. 8. Open your.as file and insert the following code package { /*call all event and display libraries*/ import flash.events.*; import flash.display.*; HO-13: Creating a Simple Game in Flash Page 1 of 6

2 9. Similarly to.net and Ajax we have to call/ load the specific libraries we need. (* calls all under the events and display categories). Using "*" in an import statement is like using a wildcard when listing a directory, all the classes/files in that directory are included. 10. Next label the Document class in the properties panel RacingGame in the fla file. Note: that the program offers to add it to the swf if it doesn t match the.as public class or the.as hasn t yet been saved. The Document class must be public, match the file name and the class of the root. Adding car to the stage 11. You now need to call in the Car movieclip from the Library and set its starting position, which you will do within a function. 12. Move to your.as file and insert the following code: package { /*call all event and display libraries*/ import flash.events.*; import flash.display.*; // Create the littlecar MovieClip from Car // Add the littlecar to the stage and give it starter settings addchild(littlecar); littlecar.x = 550; littlecar.y = 370; littlecar.rotation = -90; Movement Cursor Keys 13. The car should now be on the stage but you can t control it. So you need to insert code that enables the user to control the car using the cursor keys. 14. To do this you need to insert the following code under the RacingGame public class: // Set vars for key codes. static const upkey = 38; static const downkey = 40; static const rightkey = 39; static const leftkey = 37; // Set vars to keep track of which keys are pressed. Boolean true or false, true if key pressed. private var keypressedright:boolean; private var keypressedleft:boolean; private var keypressedup:boolean; private var keypresseddown:boolean; // Create the littlecar MovieClip from a pre-made Car() MovieClip in flash HO-13: Creating a Simple Game in Flash Page 2 of 6

3 15. This code assigns the key numbers (ASCII key code values that are used to identify the keys in ActionScript) and sets the keypress variables as Boolean, so it can be only true or false, in this case up or down. 16. Next add the following functions to listen for the key movement: // This function sets the Boolean vars based on whether the relevant key has been pressed public function keydownlistener(e:keyboardevent):void { switch (e.keycode) { case leftkey : keypressedleft=true; case rightkey : keypressedright=true; case upkey : keypressedup=true; case downkey : keypresseddown=true; // This function sets the Boolean vars based on whether the relevant key has not been pressed public function keyuplistener(e:keyboardevent):void { switch (e.keycode) { case leftkey : keypressedleft=false; case rightkey : keypressedright=false; case upkey : keypressedup=false; case downkey : keypresseddown=false; 17. Event Listeners allow objects to become active and listen for specific instructions. This code uses a pair of listeners to look for key press and release. These are called with the public function RacingGame: // Set vars for key codes. static const upkey = 38; static const downkey = 40; static const rightkey = 39; static const leftkey = 37; HO-13: Creating a Simple Game in Flash Page 3 of 6

4 // Set vars to keep track of which keys are pressed. Boolean true or false, true if key pressed. private var keypressedright:boolean; private var keypressedleft:boolean; private var keypressedup:boolean; private var keypresseddown:boolean; // Create the littlecar MovieClip from a pre-made Car() MovieClip in flash // Set event listeners to track key presses for both up and down stage.addeventlistener(keyboardevent.key_down,keydownlistener); stage.addeventlistener(keyboardevent.key_up,keyuplistener); 18. Now these are defined you need to assign some action to these keys to alter the car s movement. You could just +1 to the x or y co ordinates to move the car but creating a speed variable would produce more realistic car movement. You will also rotate the car when the left and right keys are pressed. These in-game adjustments will be added to an event function. Movement Car Speed 19. The next step involves adding a looping function to handle the speed changes, detection of collisions and scoring within the game: // This is the main game/animation loop public function StageController(e:Event):void { // This rotates the car if key is pressed, only works if speed has a value if (keypressedleft) { littlecar.rotation -= speed; if (keypressedright) { littlecar.rotation += speed; // This increases the car's speed if the up key is pressed if (keypressedup) { speed += 1; // Decreases car's speed if down key is pressed, slow decrease for realism if (keypresseddown) { speed -= 1; else { speed *=.9; // Caps speed if (Math.abs(speed) > 20) { speed *=.6; HO-13: Creating a Simple Game in Flash Page 4 of 6

5 // This moves the car forward based on car's angle //Works out angle of car so moves with front first var scangle:number = littlecar.rotation * (Math.PI / 180); // car's angle in radians var ax:number = speed*math.cos(scangle); // Move the car on the X axis var ay:number = speed*math.sin(scangle); // Move the car on the y axis //Hit test with land,! means NOT if (!land_mc.hittestpoint(littlecar.x + ax, littlecar.y + ay, true)) { littlecar.x += ax; littlecar.y += ay; else { //if not touching land free to move speed *= -.3; 20. You then need to initiate this from within the RacingGame function: // Set the game/animation loop stage.addeventlistener(event.enter_frame, StageController); // Set event listeners to track key presses for both up and down stage.addeventlistener(keyboardevent.key_down,keydownlistener); stage.addeventlistener(keyboardevent.key_up,keyuplistener); 21. The car should now freely move within the track lines, but stop at the land edge. This is due to the hit test shown below, so when the land is not touching the car its x and y movement are unrestricted: //Hit test with land if (!land_mc.hittestpoint(littlecar.x + ax, littlecar.y + ay, true)) { littlecar.x += ax; littlecar.y += ay; else { //if not touching land free to move speed *= -.3; PowerUps 22. A hit test can also be used to decipher if the car has hit power up objects, which can be used to give a score or change its speed. 23. In your.fla file create a coin, 20 x 20 pixels in dimension, and convert it to a movieclip called PowerUp. 24. Also create a patch of oil or puddle, 45 x 45 pixels in dimension, and convert it to a movieclip called PowerDown. 25. Next set these as variables, that we can call in within the game, below the car movie variable definitions: 26. Within: HO-13: Creating a Simple Game in Flash Page 5 of 6

6 // Create the littlecar MovieClip from a pre-made Car() MovieClip in flash // Create the coin MovieClip from a pre-made PowerUp() MovieClip in flash var coin:movieclip = new PowerUp(); // Create the oil MovieClip from a pre-made PowerUp() MovieClip in flash var oil:movieclip = new PowerDown(); 27. Within: // Add the littlecar to the stage and give it starter settings addchild(littlecar); littlecar.x = 550; littlecar.y = 370; littlecar.rotation = -90; addchild(coin); coin.x = (Math.random()*560)+40; coin.y = (Math.random()*420)+40; addchild(oil); oil.x = (Math.random()*560)+40; oil.y = (Math.random()*420)+40; 28. Within: public function StageController(e:Event):void { if (coin.hittestobject(littlecar)) { coin.x = Math.random()*400+50; while (land_mc.hittestpoint(coin.x, coin.y, true)) { coin.x = (Math.random()*560)+40; coin.y = (Math.random()*420)+40; //Every PowerUp hit adds to speed speed += 4; if (oil.hittestobject(littlecar)) { oil.x = Math.random()*400+50; while (land_mc.hittestpoint(oil.x, oil.y, true)) { oil.x = (Math.random()*560)+40; oil.y = (Math.random()*420)+40; //Every Puddle hit deducts from speed speed -= 4; 29. You should now be able to interact with powerups/powerdowns whilst the car goes around the track. HO-13: Creating a Simple Game in Flash Page 6 of 6