Multidmedia (MDM) Zinc 2.5 has some great features to expand the power of your swf file. In this tutorial we will find out how to create a game controlled with a joystick.
Before you start, you will need to download the Joystick_Game_Tutorial.zip which contains the accompanying pig.fla and also screenshots to help you along with this tutorial. Click Here to Download the File.
Let's get started. Open the pig.fla: (fig1) This file has already some movie clips and visual elements inserted (fig2)
STEP ONE � Moving Characters
Select the first frame of the layer named Actions and open the Actions panel (F9)
Type this code:
| function move_farmer() { this._y -= Math.ceil(Math.random()*0.5); if (this._y<-100) { this._y = (660); } if (this.hitTest(_root.pig_mc)) { _root.lost(); } } |
The code creates a function called 'move_farmer' and will be responsible for the movement of the farmer in the game.
The first line in this function defines the y position of the element that will call this function (which we will later assign) and will be the actual value of this position minus (-=) a random number that will be generated to make the farmer go to the top of screen).
In the second line we have a conditional situation - if the value of the y position of our element becomes less than �100 (so the farmer will pass the top of the screen), it will adjust the position of the element to 660, putting the farmer below our screen to restart his movement.
The final function in this code example, is a conditional situation that will check if our element (the farmer) has collided with the character named pig_mc (the collision is detected with the hitTest method). If this situation occurs, it will execute a function named lost, which we will create later in the tutorial.
After the end of our function we will type the following code:
| _root.farmera1.onEnterFrame = move_farmer; _root.farmerb1.onEnterFrame = move_farmer; _root.farmerc1.onEnterFrame = move_farmer; |
This will associate the function named move_farmer to the EnterFrame event handler of our movie clip instances. If you test your file you should now see the farmers moving.
STEP TWO � Creating a Loop
Next, type this code:
| function start() { for (x=2; x<=3; x++) { farmera1.duplicateMovieClip("farmera"+x, x*1, farmera1); _root["farmera"+x]._y = _root["farmera"+(x-1)]._y+200; farmerb1.duplicateMovieClip("farmerb"+x, x*2, farmerb1); _root["farmerb"+x]._y = _root["farmerb"+(x-1)]._y+200; farmerc1.duplicateMovieClip("farmerc"+x, x*5, farmerc1); _root["farmerc"+x]._y = _root["farmerc"+(x-1)]._y+200; farmerd1.duplicateMovieClip("farmerd"+x, x*7, farmerc1); _root["farmerd"+x]._y = _root["farmerd"+(x-1)]._y+200; } |
This code will begin a loop (using the 'for' statement) that starts with a variable named x with an initial value of 2 and the final value of 3.
Inside this loop we first duplicate a movie clip with the named "farmera1" and we give to this duplicate an instance name formed by the text "farmera" and the value of x (creating "farmera2" when x value is 2 and "farmera3" when x value is 3). After the comma we have the depth of this copy and after the next comma we have an optional parameter of duplicate MovieClip that will also duplicate the actions that this clip (in this case the movie_farmer function).
In the second line we are adjusting the y position of the copy _root["farmera"+x]._y (when x is equal to 2 this will be evaluated to root.farmera2._y and when x is equal to 3 root.farmera3._y) to receive as value the result of the following expression: _root["farmera"+(x-1)]._y+200 that is the y position of the previous clip (_root["farmera"+(x-1)]._y) plus 200.
In the following lines we have the same for our others clips (farmerb1,farmerc1 and farmerd1).
STEP THREE � Creating Variables
After this function type the code:
| _root.anima = 0; _root.lifes = 4; _root.points = 0; _root.info.lifes_txt.text = _root.lifes; _root.info.points_txt.text = _root.points; _root.pig_mc._x = 49.7 _root.pig_mc._y = 316.5; _root.dead_mc._x = -500; |
This code is creating variables (_root.anima, root.lifes,root.points) and adjusting their values. We are defining the text of the instance named lifes_txt as the variable _root.lifes, and we are also defining that the text of our instance named points_txt (inside a movie clip named info) will be the variable _root.points.
In the last 3 lines we are adjusting the initial position to our clips pig_mc and dead_mc
STEP FOUR � Creating & Deducting Lives
>
Now type:
| lost = function () { _root.lifes--; _root.info.lifes_txt.text = _root.lifes; _root.dead_mc._x = _root.pig_mc._x; _root.dead_mc._y = _root.pig_mc._y; _root.dead_mc._rotation = _root.pig_mc._rotation; _root.dead_mc.swapDepths(988); _root.pig_mc._x = -1500; _root.dead_mc.gotoAndPlay(2); }; |
Here we have a new function named 'lost' that when called will decrease the value of the root.lifes variable and place the instance named dead_mc in the same position and rotate the pig_mc. It will then change the Depth position of our clip dead_mc to make sure that the clip will be above the farmers clips. We then place our clip pig_mc in the x position �1500 to make sure that it is out of the stage to only let our dead_mc clip in his place. The final line is the timeline of our clip dead_mc to frame 2. The dead_mc movie clip has an animation inside (fig3).
We have some actions inside this clip (that are already typed in the fla that you downloaded). In frame 1 we have the action stop() which prevents this clip playing until it goes to frame 2. In frame 2 we have the action (_root.anima=1) that will change the value of the variable _root.anima to 1.
When this clip reaches its final frame we have the following actions:
| this._x=-1500 _root.anima=0 _root.restart() |
This changes the position of our dead_mc clip (represented by "this") to �1500 (placing him outside the stage), and will change the value of _root.anima variable to 0 and call the function named restart (which we will create later).
Go back to the root of our movie and open again the Actions panel (with the first frame of Actions layer selected). After the existing code, type the following:
| restart = function () { if (_root.lifes>0) { _root.pig_mc._x = 49.7; _root.pig_mc._y = 316.5; _root.pig_mc._rotation = 0; } else { var Result = mdm.Dialogs.promptAdv("Restart ?", "alert") if (Result == true) { start(); } else { mdm.Application.exit(); } } }; |
This will create a function named Restart that will ask if the number of lives represented by the variable root.lifes is bigger than 0. In this situation it will place our pig_mc to the original position and rotation ready to restart the game.
When a user has lost all of his lives, the code will move on to the else statement which will display a prompt using mdm.Dialogs.promptAdv. This command will ask the user if they wish to restart. If the user selects �OK� it will return true, or if the user selects �Cancel� it will return false. If True, the function start() will be called to begin the game again, otherwise it will close the application with the action mdm.Application.exit();
The next step is to make the game controls. After our code type:
| mdm.Input.Joystick.enable(1, "keyboard"); |
This command is assigning an id of the joystick (in this case, joystick 1) and also assigns the type of emulation to execute. In this case, we are using keyboard emulation which maps the movement of the joystick to the keyboard cursor keys.
STEP SEVEN � Assigning Joystick Functions
Now enter the code:
| function onJoystick1Move(xjoy, yjoy) { movement = 20; if (xjoy>0) { // right if (_root.anima == 0) { _root.pig_mc._x += 117; _root.pig_mc._rotation = 0; if (_root.pig_mc._x>=751.7) { _root.points += 10; _root.info.points_txt.text = _root.points; _root.pig_mc._x = 49.7; _root.pig_mc._y = 316.5; } } } if (xjoy<0) { // left _root.pig_mc._x -= 117; _root.pig_mc._rotation = 180; if (_root.pig_mc._x<49.7) { _root.pig_mc._x = 49.7; } } if (yjoy>0) { // down _root.pig_mc._y += 117; _root.pig_mc._rotation = 90; if (_root.pig_mc._y>=559.5) { _root.pig_mc._y = 559.5; } } if (yjoy<0) { // up _root.pig_mc._y -= 117; _root.pig_mc._rotation = 270; if (_root.pig_mc._y<=74.5) { _root.pig_mc._y = 74.5; } } } |
When you move the joystick to the right the xjoy will have a positive value up to 100, when move to left the value will be negative up to �100, when moving the joystick up the yjoy will be a positive value up to 100 and when down it will be a negative up to �100 (fig4)
Our event is called every time the user moves the joystick. When the user moves the joystick to the right (xjoy is greater than 0) It will first ask if the value of the variable root.anima is equal (==) to 0 (this variable will only have a different value when the dead_mc is playing his internal animation).
In this situation, it will increase the actual value of the x position of pig_mc in 117 pixels, adjust the rotation of this mc to 0 (to stay with the face turned to the right), and will also ask if the x position of this clip is equal or bigger than 751.7 (the right area of the stage).
When the user moves the joystick to the left (xjoy is smaller than 0) it will decrease the actual value of x position of pig_mc in 117 pixels, adjust the rotation of this mc to 180 (to stay with the face turned to the left), and will also ask if the x position of this clip is smaller than 49.7 (the left area of the stage).
In this case it will put our clip pig_mc at the position 49.7(preventing this clip from going to the left beyond the visible area).
When the user moves the joystick down (yjoy is bigger than 0) it will increase the actual value of y position of pig_mc in 117 pixels, adjust the rotation of this mc to 90 (to stay with the face turned to down), and will also ask if the y position of this clip is bigger than 559.5 (the bottom area of the stage).
In this case it will put our clip pig_mc at the position 559.5 (preventing this clip from going down beyond the visible area).
When the user moves the joystick up (yjoy is smaller than 0) it will decrease the actual value of y position of pig_mc in 117 pixels, adjust the rotation of this mc to 270 (to stay with the face turned to up), and will ask if the y position of this clip is equal or smaller than 74.5 (the upper area of the stage).
In this situation it will put our clip pig_mc at the position 74.5 (preventing this clip from going up beyond the visible area).
STEP EIGHT � Creating a SWF File
You can now save your file and press Control + Enter to generate a swf file. First thing that we will do is open Zinc and create a new file. In the input file tab, in the Input Source choose our swf file generated (pig.swf) (img5)
Go to Input Devices Tab and choose the Joystick area. Check the Enable Joystick option of Joystick 1 and choose the Emulation Type menu the option Keyboard Emulation.(fig6)
The final step is creating your executable file by clicking on the Build button and testing your file.(fig7) You have now created a Flash game complete with joystick control using Zinc!
)
