 |
Welcome To Swish-Designs.co.uk Have a Nice Tuesday
Game Controls - Character Controls 4 Way
Learn how to move a character or object how you want with these game controls
Keyboard Controls
if the controls do not work click on the movie above and try again.
In this sectioin you are going to learn how to create a 4 way game control for your character or object, this means that your character or object will be able to move left, right, up or down.
First Of All
You will need the latest build of swishmax installed on your Computer for this to work.
open swishmax and set the canvas size, for this tutorial i have used 300 x 300 and a frame rate of 25fps.
Step.1
Create your Character or object, for the purpose of this tutorial i have just used a square.
so if you would like to follow suite, using the rectangle tool and whilst holding down the shift key drag out a small square around 30 x 30 pixels, by holding down the shift key whilst dragging out you square this will keep it uniformed. once you have create the square, group it as a sprite and give it a name of Character. Now add the following code to it.
if (Key.isDown(Key.LEFT)) {
/*make your character move left 5 pixels the higher
the faster the character will move*/
this._x = this._x - 5;
}
if (Key.isDown(Key.RIGHT)) {
/*make your character move right 5 pixels the higher
the faster the character will move*/
this._x = this._x + 5;
}
}
If you press Ctrl+T to test your movie in the flash player and then press the left and right arrow keys on your keyboard, you should see your Object / Character move left and right. please not that the code is fully comented, this makes it easy to understand what does what. your movie should work like fig.1 below
Fig.1
Step.2
Ok now you have the character / object moving left and right, lets make it move up and down verticaly, remove line 12 from your exsisting code and add the following underneath what you have left.
/*make your character move up 5 pixels the higher
the faster the character will move*/
this._y = this._y - 5;
}
if (Key.isDown(Key.DOWN)) {
/*make your character move down 5 pixels the higher
the faster the character will move*/
this._y = this._y + 5;
}
}
Ok press Ctrl+T to test your movie in the flash player, use all the arrow keys to move you Character / Object around the play area, you should have something working like fig.2 below.
Fig.2
Step.3
Ok you will notice that if you guide you Character / Object of the stage it will disapear, this is not very good if you are planning on making a game, so you have to add some control to the character, this changes on the type of game you will be making.
Lets say you are making a shoot em up game (space invader style game), where you just move a ship along the bottom of the screen left and right, when you reach the edge of the screen the ship stops. so if you wanted to create a game like that you would have the following code on you Chracter sprite.
if (Key.isDown(Key.LEFT)) {
/*make your character move left 5 pixels the higher
the faster the character will move*/
this._x = this._x - 5;
}
if (Key.isDown(Key.RIGHT)) {
/*make your character move right 5 pixels the higher
the faster the character will move*/
this._x = this._x + 5;
}
//this code checks if it has reached
//the left side of the play area
if (this._x<0) { this._x=0;
}
//this code checks if has reached
//the right side of the play area
if (this._x>270) {
this._x=270;
}
}
If you press Ctrl+T to test your movie in the flash player, and using the left ans right arrow keys you should have something looking like fig.3 below.
Fig.3
Step.4
And if you wanted to make a game like snake where you want the Charater / Object to enter the play area on the opposite side it left from, like in the demo at the top of this page add the following code to your Character / object.
if (Key.isDown(Key.LEFT)) {
/*make your character move left 5 pixels the higher
the faster the character will move*/
this._x = this._x - 5;
}
if (Key.isDown(Key.RIGHT)) {
/*make your character move right 5 pixels the higher
the faster the character will move*/
this._x = this._x + 5;
}
if (Key.isDown(Key.UP)) {
/*make your character move up 5 pixels the higher
the faster the character will move*/
this._y = this._y - 5;
}
if (Key.isDown(Key.DOWN)) {
/*make your character move down 5 pixels the higher
the faster the character will move*/
this._y = this._y + 5;
}
if (this._x<-30) {
this._x=300;
}
if (this._x>330) {
this._x=-30;
}
if (this._y>330) {
this._y=-30;
}
if (this._y<-30) {
this._y=330;
}
}
Now press Ctrl+T to test your movie in the flash player, and using all the arrow keys, you should now have something like fig.4 below.
Fig.4
Ok thats it for Character control tutorial, i hope this has been usefull for you in some way,
if so please consider making a donation to help keep this site running, enabling me to keep bringing more tutorials to this website.
Regards,
Craig.
