This 'tutorial', rather an explanation, may take around 20-40 minutes to complete. That's pretty long in my standards, I recommend you take a break at each interval and go downstairs to get some water and have a 5 minute break or so. The reason it's so long is because I'm trying to explain everything I know about the topic of this tutorial, so in essence I'd hope it to be worth the read. Even if you don't understand all of it you will probably be able to remember certain 'key' things about this stuff.
In flash there aren't many Math functions I've seen used, about 9 and here are all of them:
| Code: |
Math.atan2(y,x); Math.ceil(Num2Round); Math.floor(Num2Round); Math.PI; Math.cos(angle); Math.sin(angle); Math.random(); Math.max(x,y); Math.min(x,y); |
PART I Random Numbers, Rounding, Along With Floors and Ceilings.
First we'll start off with something very basic, Math.random() .
Now what Math.random() does is it creates a pseudo-random number. It doesn't affect you at all but its just an interesting fact about as far as I know every random() function in every programming language. What pseudo-random means is that there is a pattern to it, the numbers it outputs really aren't random, if you took enough time (probably days) to look over hundreds of sheets of numbers generated you'd start to see a pattern. Or so I've been told. Anyways it works like a charm, pseudo or not.
Now back to the tutorial. What Math.random() does is output a number from 0 to 1. And it can be in decimal form, I'd be surprised if the number generated isn't in decimal form.
So let's give it whirl. Open up flash and create a new document. For the code put this:
| Code: |
for(i=0;i<5;i++) { trace( Math.random() ); } |
What you should receive is a number between 0 and 1 five times. And all will probably be different.
But if you wanted to say posistion an MC on the screen at a random location do this:
| Code: |
MC._x = Math.random(); MC._y = Math.random(); |
Create an MC with an instance name of MC and run it. Doesn't seem to move far from the top left corner does it? That's because it's from 0 to 1. So to make it have a broader range of possible posistion we multiply it.
So now we do this instead of the last piece of code:
| Code: |
MC._x = Math.random() * Stage.width; MC._y = Math.random() * Stage.height; |
So what it does is multiply whatever number it gets from 0 to 1 times say 500. You'd get a wide array (I don't mean literally in programming terms it generates an array) of possible numbers from 0 to 500.
So how about we try this? We'd say to ourselves that we want our numbers clean because we're neat freaks (or whatever you call them) so we're going to use Math.round() . Try to guess the outcome
. | Code: |
MC._x = Math.round(Math.random()) * Stage.width; MC._y = Math.round(Math.random()) * Stage.height; |
Whats happening is that it's using Math.round which takes 1 parameter to round. The way it rounds is the way that was explained to you (probably) in elementary school. Lets have an example that we get the number 5 and we round it to the nearest 10, it would go to 10 because it's exactly halfway between 0 and 10. If it's below halfway it rounds down. If it's halfway or above it round up. Simple, no?
So it's using that same method on Math.random() and will round it to the nearest one. Which is 0 or 1. And then if you multiply it by say 550, MC._x would become either 0 or 550 because you rounded it.
So basically the lesson learned is do not round random numbers before you multiply them by a number, if you do something like this:
| Code: |
MC._x = Math.round(Math.random() * Stage.width); MC._y = Math.round(Math.random() * Stage.height); |
That's perfectly fine and will in fact keep the decimals off and will keep the end number(s) clean.
Now, there's a very useful trick used with Math.random that will give you a number between a desired minimum and a deseried maximum. Here I'll show you a little example you can try:
| Code: |
MAX = 10; MIN = 2; for(i=0;i<5;i++) { trace( Math.round(Math.random()*(MAX - MIN) + MIN) ); } |
This should output five numbers without decimals, each of them between 2-10. That doesn't exclude 2 and 10 though. It works like a charm.
Onto Math.ceil and Math.floor . Some people fear them (maybe?) but they are extremly easy to understand. They basically take on the same rules as Math.round as they too round to the nearest 1. But the way in which they round are different.
Math.ceil rounds up, so lets say we're rounding to the nearest 10 instead of 1 and we have a number that is 1. Instead of rounding to 0, it rounds to 10 because 10 is higher than 0 and we're rounding in 10's. That doesn't mean we could skip some 10's and go from 1 to 50. The nearest 10, but with Math.ceil it's the nearest 1.
Math.floor is likewise, but it rounds down instead of up.
The way I remember what they do is because the developers knowingly named them Math.ceil and Math.floor based on the way they round. If you look up theres a ceiling, therefore Math.ceil refers to the ceiling because it rounds up. If you look down you'll see the floor, therefore with Math.floor you refer to the floor and so the number will be rounded down.
I know it sounds complicated, but just think about it, Math.ceil(ing) and Math.floor ...
Okay, I'm tired with random numbers and rounding numbers, lets move on shall we?
PART II Angles, Radians, Degrees, Pies, Sines, and Cosines
Here is the code that I'll be explaining in Part 2:
| Code: |
onEnterFrame = function() { myRadians = Math.atan2(_ymouse - MC._y, _xmouse - MC._x); MC._x += Math.cos(myRadians) * 5; MC._y += Math.sin(myRadians) * 5; } |
Uhh, sorry whoevers reading this, I'm not going to explain in every detail this part of the tutorial or the next part because I spent 40 minutes writing these parts and I lost everyhing up to here and I don't feel like re-writiting everything I was explaining. For some reason the damn forums cut it all out and I didn't expect these forums to f**ck up.
Math.atan2 takes two numbers and turns it into an angle. It outputs it in radians. The only thing you need to know about atan2 is the way you put in the numbers to get the angle you want. It should be like this:
Math.atan2(Target._y - Character._y, Target._x - Character._x);
in our case Character is MC and Target is the top left corner of the mouse.
To turn your character you need to convert from radians to degrees.
MC._rotation = (myRadians*180/Math.PI) + 90;
We add 90 to the number after its been converted so that because the mc will probably have been facing upwards when created it will make it turn properly. If it's not turned upwards it won't turn properly. Just replace 90 with the angle that it's facing in degrees. So if it's facing left you should add 180, if facing down 270, if right then you don't need anything and can take away the + sign too.
Now for the sine and cosine the basic structure is this:
MC._x += Math.cos(myRadians) * SPEED;
MC._y += Math.sin(myRadians) * SPEED;
Where 'SPEED' is the amount of pixels per frame to add to x or y with cos and sin respectively.
I created a tutorial demonstrating how this could actually be used (all the trigonmetry explained) which overall gave you a good bullet shooting script, the tutorial was named Basic Shooting Explained
PART III Max and Min
The way to use Max would probably be something along the lines of this:
| Code: |
if(Math.max(MC._x, MC._y) == MC._x) { trace("MC._x was bigger than MC._y"); } else { trace("MC._y was bigger than MC._x"); } |
It just outputs the value of the bigger one.
Min is nearly the same thing but it outputs the value of the smaller one.
I'd rather use this style with the greater than or less than signs because its less messy. And it makes more sense.
| Code: |
MAX = 10; MIN = 2; for(i=0;i<5> MC._y) { trace("MC._x was bigger than MC._y"); } else { trace("MC._y was bigger than MC._x"); } |
That's the end of my tutorial, thank you for taking the time to read it and I hope it's helped you.
discuss this topic to forum
