Creating a Game - Step 2
Creating a Game - Step 2This tutorial continues on from the previous one.
In this tutorial I will show you how to check for collisions and how to stop the character from going outside the screen.
If you done as instructed in the last tutorial, you should have a nice and beautiful character that walks around :p
Make sure you have your document opened.
2). Now check to make sure you canvas size is 550 by 400...
If its not, change it.
3). Now select the frame on layer 1 as shown...
Open up the Actions panel...
Your original code should be there from the previous tutorial.
Replace the code with...
Code
var speed:Number = 10; //SET A VARIABLE FOR THE SPEED
character.onEnterFrame = function() { //ON ENTER FRAME
if (Key.isDown(Key.RIGHT)){ //IF SOMEONE PRESSES DOWN RIGHT
this._x += speed; //MOVE BY 10 ON THE X AXIS
} //END OF STATEMENT
if (Key.isDown(Key.LEFT)){ //IF SOMEONE PRESSES DOWN LEFT
this._x -= speed; //MOVE BY -10 ON THE X AXIS
} //END OF STATEMENT
if (Key.isDown(Key.UP)){ //IF SOMEONE PRESSES DOWN UP
this._y -= speed; //MOVE BY -10 ON THE Y AXIS
} //END OF STATEMENT
if (Key.isDown(Key.DOWN)){ //IF SOMEONE PRESSES DOWN
this._y += speed; //MOVE BY 10 ON THE Y AXIS
} //END OF STATEMENT
if (this._x > Stage.width){ //IF X POSITION IS MORE THAN THE CANVAS WIDTH
this._x = 0; //SET THE X POSITION OF THE CHARACTER TO 0
}else if (this._x < 0){ //OTHERWISE IF THE X POSITION IS LESS THAN 0
this._x = Stage.width; //SET THE X POSITION TO THE END OF THE X AXIS OF THE CANVAS
} //END STATEMENT
if (this._y > Stage.height){ //IF THE Y POSITION IS MORE THAN THE CANVAS HEIGHT
this._y = 0; //SET THE CHARACTERS Y POSITION TO 0
}else if (this._y < 0){ //OTHERWISE IF THE Y POSITION IS LESS THAN 0
this._y = Stage.height; //SET THE Y POSITION OF THE CHARACTER TO THE END OF THE Y AXIS
} //END OF STATEMENT
} //END THE 'ON ENTER FRAME'
As you can see, i have added on a part at the end which will check whether the character has crossed the boundaries.
And if they have they will be sent to an appropriate place.
Read the comments for more info.
Now you can test your movie clip.
You should be able to go anywhere you like without going off the screen forever.
4). Now to do a collision. What we are going to do is add a massive black block to the side.
Select the rectangle tool.
Set the properties of the rectangle to the following...
Then draw the rectangle like i drew mine...
Select the rectangle...
Press F8, a dialog box should appear.
Use the settings i used.
Okay now, carring on... with your rectangle selected change the instance name to bigwall
With that done, lets do the collision check.
Click on the frame 1 on layer 1...
Open up the Actions panel...
Now replace the code in the Actions panel with the updated code below...
Code
//ACTIONSCRIPT 2 IS BEING USED
character.onEnterFrame = function() { //ON ENTER FRAME
var speed:Number = 10; //SET A VARIABLE FOR THE SPEED
if (Key.isDown(Key.RIGHT)){ //IF SOMEONE PRESSES DOWN RIGHT
this._x += speed; //MOVE BY 10 ON THE X AXIS
} //END OF STATEMENT
if (Key.isDown(Key.LEFT)){ //IF SOMEONE PRESSES DOWN LEFT
this._x -= speed; //MOVE BY -10 ON THE X AXIS
} //END OF STATEMENT
if (Key.isDown(Key.UP)){ //IF SOMEONE PRESSES DOWN UP
this._y -= speed; //MOVE BY -10 ON THE Y AXIS
} //END OF STATEMENT
if (Key.isDown(Key.DOWN)){ //IF SOMEONE PRESSES DOWN
this._y += speed; //MOVE BY 10 ON THE Y AXIS
} //END OF STATEMENT
if (this._x > Stage.width){ //IF X POSITION IS MORE THAN THE CANVAS WIDTH
this._x = 0; //SET THE X POSITION OF THE CHARACTER TO 0
}else if (this._x < 0){ //OTHERWISE IF THE X POSITION IS LESS THAN 0
this._x = Stage.width; //SET THE X POSITION TO THE END OF THE X AXIS OF THE CANVAS
} //END STATEMENT
if (this._y > Stage.height){ //IF THE Y POSITION IS MORE THAN THE CANVAS HEIGHT
this._y = 0; //SET THE CHARACTERS Y POSITION TO 0
}else if (this._y < 0){ //OTHERWISE IF THE Y POSITION IS LESS THAN 0
this._y = Stage.height; //SET THE Y POSITION OF THE CHARACTER TO THE END OF THE Y AXIS
} //END OF STATEMENT
if (this.hitTest(_root.bigwall)){ //IF CHARACTER HITS THE BIG WALL
this._x -= speed; //MAKE IT STOP COMLPETELY
} //END STATEMENT
} //END THE 'ON ENTER FRAME'
Again ive commented it to help you.
Well now you can try running your movie. If its correct then it should work without flaw.
Heres my flash...
http://www.ragingmortals.com/tutorials/tutorial_02.html
and heres the .fla file...
http://www.ragingmortals.com/tutorials/tutorial_02.fla
I need the .fla for the first tutorial!
Sure no problem. Heres the link... http://www.ragingmortals.com/tutorial/tutorial_01.fla
What should my Movie look like if its working
Well, to help you understand how it should be like when its working try looking at what i got...
http://www.ragingmortals.com/tutorials/tutorial_02.html
I get an actionscript error when I try to test it
Check to see if the code on your Actions panel matches the code that i have provided.
What will you be doing in Step 3 of this tutorial?
Well step 3 will be a little more complicated.
I have not decided what I am going to do for Step 3 but please,
if you want something done please issue a request in the comments section.
However i will definately need to fix the bug that when you walk all the way to the left...
you can go through the wall on the other side. Ill fix that in the next tutorial.
I want an answer which is not here...
Post a comment if you would like to know anything else or want to report any bugs etc.
Thanks for reading this tutorial.
Please do report any bugs found.
Step 3 will probably come later on. Well, when i decide what to do for the next tutorial.
If you would like me to do something for the next tutorial please post a comment.
Posted on Monday 11th August 2008 at 12:29 PM
Creating a Game - Step 3
http://rmb-scripting.com/tutorials.php?tutorial&tid=337
http://rmb-scripting.com/tutorials.php?tutorial&tid=337
Posted on Wednesday 30th July 2008 at 10:29 AM
Heres a link to the previous tutorial:
http://rmb-scripting.com/tutorials.php?tutorial&tid=315
http://rmb-scripting.com/tutorials.php?tutorial&tid=315
Posted on Wednesday 30th July 2008 at 10:27 AM
Hey everyone.
I havnt had any requests yet, and i figured most of this tutorials views must be coming from another site.
So if you have a request but dont want to sign up, you can email me at hotmail_is@hotmail.co.uk
Thanks!
ps. I was thinking of making the next tutorial about going into different maps or giving ur character attributes such as health (plus with something dangerous on the screen which damages your players health).
I havnt had any requests yet, and i figured most of this tutorials views must be coming from another site.
So if you have a request but dont want to sign up, you can email me at hotmail_is@hotmail.co.uk
Thanks!
ps. I was thinking of making the next tutorial about going into different maps or giving ur character attributes such as health (plus with something dangerous on the screen which damages your players health).