|
Written by Administrator
|
|
Sunday, 07 October 2007 04:37 |
In this tutorial you will learn hot to make the UFO pilot flash game. You can view the result at UFO Pilot
Ok! Let's begin. As usual make a new document. this time it should be 400x300.
In the first keyframe ad the menu. I don't think instructions are necessary so I will just ad the play button. The design to the button is up to you. Make it how ever you like. I recommend makeing it very Sci-Fi. The action to the button should be very simple. Just will make the game to go to the next keyframe.
on(release){
_root.play();
} |
Now create a new keyframe. First we need a nice background. So go to what ever program you like and make a nice space background the same size as the document. Import it into flash and place it on the stage. Convert it into a MovieCLip because we are going to put some code into it.
on(press){
_root.i=-2;
}
on(release){
_root.i=2;
} |
Now let's explain the code: _root.i is a variable that tells us how the UFO will fly. When we press the background it should go up, and when we release the background it should go down. 2 is just the speed. You will see what actually is happening the UFO will go with 2 pixels up or down.
Now we need to create the Obstacle Generator. So create an empty movie clip and place it on the stage. Ad an instance name to it. I called my MC "container".
Now it is time to ad code to it:
onClipEvent (load) {
this.i = 0;
this.j = 0;
this.distance = 0;
getRandom = function (low, high) {
var thisNumber = high-low;
var randomUnrounded = Math.random()*thisNumber;
var randomNumber = Math.round(randomUnrounded);
randomNumber += low;
return randomNumber;
};
} |
Explaining the code:
- this.i and this.j are just simple counters. this.i will control the interval to pun a new object on the stage and this.j the depth of that object.
- this.distance is the distance the UFO has made since the game begin.
- getRandom is function that generates a random number between two given numbers (between low and high).
Now that you know all this lets star to generate the obstacles.
onClipEvent (enterFrame) {
if (_root.joaca == 1) {
this.i++;
this.distance = this.distance+0.1;
_root.distance = int(this.distance);
if (this.i>120) {
no = int(_root.distance/100)+1;
if(no>4){
no=4;
}
this.holder = this.attachMovie("wall"+no, "wall"+j, j);
this.holder._x = 400;
this.holder._y = getRandom(0, 150);
this.j += 1;
this.i = 0;
if (this.j>20) {
this.j = 0;
}
this.holder.onEnterFrame = function() {
if (_root.joaca == 1) {
this._x -= _root.speed;
if (this._x<-50) {
this.unloadMovie();
}
}
};
}
}
} |
Don't have any idea what that code does? let me explain. every frame this code is executed. So if _root.joaca is 1 (if the game is played) than we start to increment this.i with 1. and also the distance with 0.1. now we set the _root.distance to be the int of this.distance (we want the distance to be rounded numbers). Now we are here: if (this.i>120) { what does it do? If this.i is higher than 120 (if 120 frames passed since the last time an obstacle was put on the stage) than we put a new obstacle. We have more than one type of obstacle so no will get the obstacle necesary. In this example I have for types, and every 100m (or what ever distance is that) we change the type to a more complex one.
we are here:
this.holder = this.attachMovie("wall"+no, "wall"+j, j);
this.holder._x = 400;
this.holder._y = getRandom(0, 150);
this.j += 1;
this.i = 0; |
This code will generate a new object using the attachMovie() function. we have in the library MCs that have the linkage identifier wall1, wall2, wall3 and wall4. After we attached it to the stage, we place it outside (so it will enter from the right side) and using the getRandom function we generate at what hight should it be placed. After that we increment this.j and we set this.i to 0;
Now we are here:
this.holder.onEnterFrame = function() {
if (_root.joaca == 1) {
this._x -= _root.speed;
if (this._x<-50) {
this.unloadMovie();
}
}
}; |
Now we need to give some action to the obstacle. In other words make it move. So this is what that code does. if the game is played (if _root.joaca == 1) than we move the obstacle to the left with _root.speed. If the obstacle is out of the stage (if this._x<-50) than we delete it.
This was the most complex part of the game.
Now create a new layer an place some rectangles on top and buttom so the UFO can't go out of the stage. We will need to make them stop the game if the UFO hits them.
onClipEvent (enterFrame) {
if (_root.joaca == 1) {
if (this.hitTest(_root.player)) {
_root.joaca = 0;
}
}
} |
If the game is played we use the hitTest() function to determinate if the player hit the wall. Simple no?
Now we need to create our obstacles. create an obstacle template ( just a rectangle will do...make it look nice). Convert it to and MC and name it wallMC. Now we need to create the obstacle that will be placed on the stage. Create a new MC an name it wall1. Export it for ActionScript and ad the Linkage Identifier "wall1". Now go and edit it. Place the wallMC inside and at the following code:
onClipEvent (enterFrame) {
if (_root.joaca == 1) {
if (_root.advCollision(this, _root.player)) {
if (_root.advCollision(_root.player, this)) {
_root.joaca = 0;
}
}
}
} |
What does it do? Every frame if the game is played it uses the advCollision() function to determinate if the UFO did hit the wall. advCollision() is a function much more powerful and accurate than hitTest(). I searched for something like this and this is the best one I found. You can see the explenations here: http://flashmove.com/forum/showthread.php?t=15513
We could just used the hitTest() function if we had static objects, but I know that you will want to make more complex walls that rotate.
Now create a new layer. Name it AS. This is where we are going to ad some code. In the keyframe put this code:
var i = 2;
var joaca = 1;
var speed = 3;
var distance = 0;
function advCollision(mc1:MovieClip, mc2:MovieClip):Boolean {
var mc1Bounds:Object = mc1.getBounds(mc1);
var mc2Bounds:Object = mc2.getBounds(mc1);
return ((mc1Bounds.xMin<=mc2Bounds.xMax) && (mc1Bounds.xMax>=mc2Bounds.xMin) && (mc1Bounds.yMin<=mc2Bounds.yMax) && (mc1Bounds.yMax>=mc2Bounds.yMin));
}
stop(); |
We set _root.i to 2. And we star playng the game (_root.joaca =1) We set the speed of the walls to 3 and the distance to 0. Next comes the advCollision() function. Read more about it at the link above. After that stop(); so the game stops at this frame.
Now we need to make the player. Create a new MC an name it player. Ad some nice animations to it.
Place it on the stage and ad the code:
onClipEvent (enterFrame) {
if (_root.joaca == 1) {
this._y += _root.i;
}
} |
The final result is here:
http://imghost.ej.am/files/k0k7g17g6yomoynzf06e.swf
|
|
Last Updated ( Sunday, 07 October 2007 04:38 )
|
