Tip:
Highlight text to annotate it
X
Hello, I'm Edu for edu4java and this is tutorial number 5 of Android game programming
we are going to see some more of sprite and speed, if you remember we had seen something of speed here
we are going to
see also some animation
we are going to see how to use these graphics. In the last tutorial we had put an animation
but the animation always seems to go
walking to the left and when it goes to the right it looks as if it was Michael Jackson
how are we going to do this?
the first thing we are going to do is, as well as the speed variable x
we are going to put a speed variable y
and
here we are taking care of the x borders, let's take care also of the y borders
let's copy the code from here
don't worry because I will explain this now...
let's replace for this code here
it's similar but a bit more compact
shift+ctrl+f to tidy this up. This is the same as before. The difference is that in just one if
I wrote both and instead of putting minus 5 I multiply for
I put minus what there was so if the direction is positive it will change to negative and it is negative
the speed will be positive. If there is 5 in this side and it goes into a border
it will convert to -5 and it will go on the opposite direction
and with y we do the same
the margin controls are the same
as you can see but there are in the same if
ok, let's try it
as you can see it starts with a speed of 5 in x and 5 in y so it walks in 45º
it bounces back here in x, it goes to -5, it bounces back here
see?
every time we run it, it's going to do the same
to do it a bit more interesting we can make the speed randomic
it will be randomic
let's add this lines
random was explained in my tutorials so I hope you know it already
and what we do is modify these variables. They were initialized to 5 but now
they are initialized automatically. Shift+ctrl+o for the imports
so that random is imported
this is going to draw lots for numbers from 0 to 10
and it is going to substract 5. We are going to get a number between -5
and 5. Speed can be between 0 and 5 for x and between 0 and 5 for y
both positive and negative. Ok, let's try it
see? here it started in 0 for x because you can see there is no lateral movement and 5 for
y. Let's try to run it again
this time
it was 0 in y
strange nuimbers are coming out
here we have speed
of x and y but it is doesn't get to 5
unfortunately this is the end of the easy part
now we are going to learn how to manage animations. We are always using the animation left 1. This is because
we wrote
to always use 1
as we see in this graphic, we don't always wan't to use number 1, for example if the direction
x speed and y speed is (2,-4)
the real direction would be this one
this one, so we should be using this one
which is the
... number 3
if it is (-3,-1)
-3 x speed and -1 y speed we should use this one
if it is (4,1) we should use this one
which is number 2, and if it is something like this, we should use this one
the question is how do we,
for x and y, know which one do we have to use; 0.1,2,3. We need a function
which has as parameters xSpeed and ySpeed and as a result 0,1,2,3
0,1,2,3 corresponding to which one should we use
to create this method I looked at
math.atan2 which returns the radio
in radians, it gives us the angle... basically this function is
to any x,y it gives us the angle, for example here it would give us
this angle here
we have to take into account that we are using in the screen
axis different to the mathematical ones
this x axis is correct but this y one is upside down, if you can see it here
this is how it would be in the mathematical way x and y would go upwards, what does it mean?
when y increments it would be
go upwards and here it goes downwards
then
let's go back to atan2; atan2 gives us the angle from this point
from here, here it would gives us 45º, here 90
in radians; pi over 2
here it would be pi, and this way, if for example the point is over here, it would be this angle that is negative till pi over 2 and minus pi
if we make an analysis
of what do we want to get; when we have (0,-1) we want to have up
when we have (1,0) we want right, when we have (0,1) we want down, when we have (0, -1) we want left
here I've made a table
to make it a bit more clear. Here we have what I have just said; the up with each one. What I did was with this numbers I tried atan(0,1), just to
have a reference. Here the result is pi
we now that pi minus pi they touch, they are the same
when we get near, with positive or negative we end up here
in right it was pi over 2, 0 and 1
if I divide this function with pi over 2 the results are going to be
between 2 and -2
going through 1, 0 and -1. For up it is going to be 2 or -2
for right it is going to be 1, for down 0. Because I need and index to go
from 0 to 3 what I did was to sum 2 to get rid of the negative which give me problems
Here I have a number from 0
to 4, going through 3, 2, 1
With the up we had seen that it was both the 4 and the 0
as I want a number between 0 and 3 and not between 0 and 4 what I do is module 4
as I a result of this, both 0 and 4
are going to give me 0, 4 module 4 is 0
and 0 divide module4 is 0
here I got a number between 0 and
...
0,1,2,3 which were the numbers I wanted for the index. This numbers aren't really the numbers I wanted
with these. What I did was I function...I do all this I told you in the table
I calculate math.atan2, I divide it by
pi over 2 and I sum 2. This gives me a double
to this double I round it off. I round it off so it comes near the numbers. Do you remember that here
I wanted
if they were near here, they come near here. So I do it by rounding off the number. As this is number 1, all the ones which are near go there
all which are near this one, will go there
the rounding off makes them go near. And then I do the module
for the number of rows. In our case 4. The result of this gives me a whole number
between 0 and 3
so that they match up.... as we had seen, here up is going to result here in 0 but the up I need is 3
this is the one which goes up, what I did is
I used a small array and I did a small mapping
in the position 0 I put a 3,which is what I want,in the position 1 I put a 1
which is what I want for up, in the position 2 I put a 0 and in the position 3 a 2
here is the resulting code
you have this function
let's copy it here
this map here wants to create
create constant
let's copy
the map from the same code
I get the comments too
and lastly we have to subsitute here
instead of the 1 which I had shown you
the call to the function
instead of 1 we are going to call the function we have created
let's run it
here you see it, very happy walking downwards
let's see when it get's to the border
if it recalculates the direction, perfect!
let's see another
another...
another animation if it goes in another direction
as this one has the angle nearer to the horizontal it is
taking the animation which goes to the right. Here it bounces back
and takes the animation which goes to the left
ok
this is the most difficult tutorial I've ever done...
...
I hope somebody has understood me.In any case thanks for coming so far to the people who got here
See you in the next tutorial!!