| Search Varstudios |
|
|
| Users Online |
 Guests Online: 1
No Members Online
Registered Members: 67
Newest Member: Irredgesy
|
|
| Sponsored Advertising |
|
flash games, free games, online games, games, shmup, shmups, neon game, newgrounds, flash, free internet games, crazy monkey games, crazymonkeygames, varstudios, game development, game developer, pixel monsters, play games
|
|
|
| Tutorial: Moving in 360 Degrees |
Introduction
Quite a few of our games involve moving and shooting in 360 degrees, and I have been asked many times how this is done. Well it actually is very simple, although unfortunately for some, it does involve maths.
You have probably heard of trigonometry (if you haven't then don’t worry), the method of calculating lengths and angles of right angled triangles, well that’s what we are going to use.
Flash allows us to use the various trigonometric functions very easily. The ones we will be needing are:
Math.cos
Math.sin
Math.atan2
Angles
Before we start moving or shooting anything, we need to know about angles. You're probably used to seeing angles measured in degrees, with 360 degrees in a circle, but flash doesn't like degrees, this is where the radian comes in.
Radians are an alternative measure of angles with 2PI radians in a circle. Don't worry too much about this though, we can convert from degrees to radians using code, so really don’t even need to know what a radian is if you don't want to, as long as you know why we aren't using degrees.
The following code allows us to change from degrees to radians, or from radians into degrees.
degrees = radians*(180/Math.PI);
radians = degrees*(Math.PI/180);
Aiming at the Mouse
The first thing you probably want to do is get your character/ship/gun to aim in the direction of the mouse cursor. This is nice and easy.
Draw a ship on the stage and convert it to a movie clip. Give the ship an instance name of "ship" (no quotation marks). Make sure the ship is facing right, this is 0 degrees in flash.
Put this code on the main timeline.
this.onEnterFrame = function() {
var xd = _root._xmouse-_root.ship._x;
var yd = _root._ymouse-_root.ship._y;
var radians = Math.atan2(yd, xd);
var degrees = radians*(180/Math.PI);
ship._rotation = degrees;
};
Test the movie. Your ship should point towards the mouse.
var xd = _root._xmouse-_root.ship._x;
var yd = _root._ymouse-_root.ship._y;
This calculates the x and y distances between the ship and the mouse.
var radians = Math.atan2(yd, xd);
We then use one of our trigonometric functions to get the angle. The angle is in radians, so we need to convert it to degrees.
var degrees = radians*(180/Math.PI);
Thats the code we saw earlier for converting radians to degrees
ship._rotation = degrees;
Finally we set the rotation of the ship to equal the angle.
Moving Towards the Mouse
So now our ship points towards the mouse, but it can't move. Lets do something about that. Add the following code to the code in the last section.
this.onEnterFrame = function() {
var xd = _root._xmouse-_root.ship._x;
var yd = _root._ymouse-_root.ship._y;
var radians = Math.atan2(yd, xd);
var degrees = radians*(180/Math.PI);
ship._rotation = degrees;
ship._x += Math.cos(radians)*5;
ship._y += Math.sin(radians)*5;
};
As you can see we have added two lines that contain the other two trigonometric functions we met earlier.
ship._x += Math.cos(radians)*5;
This takes the angle in radians and used the function Math.cos to find the x component of motion.
ship._y += Math.sin(radians)*5;
This is the same as the last line, except Math.sin is used to find the y component of motion.
You can change the 5 to any number to increase or decrease the speed of the ship, just make sure you change it on both lines to the same number.
Conclusion
So there you have it, motion in 360 degrees, isn't so bad is it? This can be used in many games, so play around with it and see what you can come up with.
|
|
| Comments |
|
No Comments have been Posted.
|
|
| Post Comment |
|
Please Login to Post a Comment.
|
|
|
| Login |
Not a member yet? Click here to register.
Forgotten your password? Request a new one here.
|
|
| Sponsored Advertising |
|
flash games, free games, online games, games, shmup, shmups, neon game, newgrounds, flash, free internet games, crazy monkey games, crazymonkeygames, varstudios, game development, game developer, pixel monsters, play games
|
|
| Member Poll |
|
|
|
|
