Tutorial: How to make a game like Jetman – step 1 – The Jetman
In my first tutorial I will show you how to make a flash game like Jetman.
A simple very famous casual game on facebook and very addictive.
1. First of all you have to download the Adobe Flash IDE: Adobe Flash CS3 or Adobe Flash CS4
We will code the game with ActionScript 3.0 (the programming language of Flash) so you need Adobe Flash CS3 at least.
You can download the free trial version of Adobe Flash here (Mac or Windows) : https://www.adobe.com/cfusion/tdrc/index.cfm?loc=en&product=flash
2. Create your document
- Open Flash.
- Create a new ActionScript 3.0 document.
- On the properties set the framerate to 25fps.
- And set the background color to black.
3. Create Jetman MovieClip
Flash uses graphic objects called MovieClip. So we have to create the Jetman’s MovieClip.
- Click on the Rectangle tool on the tools bar. (on the left)
- Then drag and drop on the stage to create a rectangle about width:50px and height:15px (you can modify your shape dimentions later).
- Select all your shape including the border. You can also use a double click.
- Do a right click on your selected shape and click on Convert to Symbol.
- Write this symbol’s name : Jetman (not jetman or JETMAN).
- Then click OK.
Now you can see your Symbol Jetman into your Library (on the right). If you don’t see the Library Press F11 key.
You have 1 instance of the Jetman symbol on your stage. Good. We just created a MovieClip.
In order to interact with the jetman MovieClip with ActionScript, we have the rename the instance’s name on the stage.
- Click on the Jetman’s instance on the stage.
- Then go to the properties on the bottom and set the instance’s name to jetman (not Jetman or JETMAN) it’s very important.
It’s done! Now we can move the instance with ActionScript.
4. Starting to code
You have differents ways to code with ActionScript. We will use the easier. (Coding into layers)
- Create a new layer on the timeline (Click on the button on the left bottom corner).
- Put the layer on the top: drag and drop the layer.
- You can rename the layer with a double click or Right Click then rename.
- Then select the first frame (here in black).
- Finally go to the windows menu > Actions or press the F9 key.
A new windows is opening : The Actions window. We will to write all our code here.
- Copy and paste this Actionscript 3 code (After codinf into your layer you should see a little a into this frame):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | // Please don't remove this comment. // Code by Benoit Freslon. // Tutorials, Flash games: // http://www.thisisgameplay.com // ////// Game balance // Jetpack's boost speed var speedBoost = -4; // Gravity var gravity = .8; // Speed limit var speedMax = 5; ////// Global variables don't touch those one // Jetman is using his jetpack ? var boost = false; // Jetman's current speed var speed = 0; // 25 times by seconds this function will be launched function jetmanEnterFrame(pEvt) { // If boost == true if (boost) { // The speed changes speed = speedBoost; } else { // Else the gravity decrease jetman's speed speed += gravity; } // If the current speed is to hi if (speed > speedMax) { // Limit the speed speed = speedMax; } // If the current speed is to low else if (speed < -speedMax) { // Limit the speed speed = -speedMax; } // Every frame jetman will move vertically. (y axis) jetman.y += speed; // If jetman is out of the screen if (jetman.y > 450) { jetman.y = 100; } } // Add a event listener to launch the jetmanEnterFrame function every frames jetman.addEventListener(Event.ENTER_FRAME, jetmanEnterFrame); // If the mouse is pressed function mouseDown(pEvt) { // Set boost to true boost = true; } // Id the mouse is released function mouseUp(pEvt) { // Set boost to false boost = false; } // Detecting the mouse inputs (MOUSE_DOWN and MOUSE_UP) on the entire "stage" stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown); stage.addEventListener(MouseEvent.MOUSE_UP, mouseUp); |
- Finally test your game. (hit CTRL+ENTER)
You should see that:
Download the source file here:
[www.thisisgameplay.com]_Jetman_step1.fla
Download the compiled file here:
[www.thisisgameplay.com]_Jetman_step1.swf
Next step the level design… ;)
In: ActionScript, Game Design, Tutorial · Tagged with: actionscript 3, flash, Game Design, jetman, Tutorial
on December 23, 2009 at 22:19
Permalink
looking forward to the rest of it… I had this part done myself, just struggled with the level design part… normally I only find tutorials that are 2+ years old!