Tip:
Highlight text to annotate it
X
Hello, I'm Edu for Edu4Java and this is tutorial number 4 of Android game programming
we are going to talk about Sprites
a Sprite
is an image
2D
...
bitmap
bitmap type
partially transparent which we normally use to put in a background
sprites are normally used in games, there are several sprites in the screen and they can represent
characters with artificial inteligence
or they can represent the character which we are controlling
another characteristic of the sprites is that they have a position x, y
the position is where it is
the sprite inside the background screen we've been talking about
x is the horizontal coordinate and y is the vertical one
they have also a speed (x,y)
what does it means? if this x speed is positive, when time passes
this speed will be added to the x position and will move the character to the right
if it is negative it will be moved to the right
with y the same. If y is positive the character will go down or up if it is negative
a sprite can contain
an own animation. It can change
it can have small images that change and this is going to look as if they are moving
for example, let's see the bmp for our sprites
in the case of bad1
we can see that in the first line
we have an animation that shows the character walking forward. You can see the arms and the legs
in a different position.
when we print this one first and then this one and then this it is going to look as if it is moving forward
this one to the left, this one to the right and this one upwards
ok, we are going to see how it works
the question would how did I get this? I found a website, this is the url
very interesting
it is in japanese...
as I am not very going with japanese
japanese is not my thing, I have a link here
with the translation
done by Google translater
here we are
this sprite constructor is really good
it gives us a character
...
bold... and we can do whatever we want to it, we can put blonde hair
we can put him
a pink dress
we can put him also some pink ribbons and here we have a character
that could already be a good one, we could also put some wings and download this image
we can save the image and already use for the game. We can also make a bad guy
this girl can transform herself into a bad guy if we put a mask on
we can put some shoulder pads on too
put some vampire wings
...
and a helmet for example
look how it has changed, let's get rid of the dress too
let's put some military dress on
here we have a bad character. I invite you to make your own characters
or just use these ones directly. Click on the right button of the mouse, save image as...
let's save it in the desktop
from the desktop we can drag it to the drawable-mdpi
here we are
let's go back
to...
let's create the sprite class which we have here
which as we were talking before is going to contain...
to implement all this we were talking about
new class...
sprite
as always it is a bit untidy
ok,
we said that everything refering to position and speed is going to be in this class
it is important to notice that in the constructor of our class we are going
to put a pointer to the view (a this when I build it) and a bmp which we are going to print
we have put the border control logic
here we have it in the update method
we are already trying to separate update from onDraw even if the call to update is still in onDraw
and
apart from calculating the borders, as we are going to have our own onDraw we are going to print the canvas
this makes us modify the
the view
here in the view, the speed doesn't exist anymore
and here
we should create
a sprite field
new...
sprite
we are going to pass this, which is this window
and the bmp which we have just created
let's tell him to create a field
here we have the field
and all this code
is not going to be here from now on
all the calculations
and the print isn't either
the only thing we are going to do is
each time we are asked for we are going to ask the sprite to
print it's own image
ok
let's see if it works
oopss, I forgot to change the...
the icon
bad1 was ours
we are going to repeat...
here we are
ok, we have got to the same point of the tutorial
now what we are going to do is instead of 12 images is going to be just one small one and they
are going to alternate
we are going to use this one. We are going to make that this one appears first, then this one and then this one....
this is going to make a small animation
it is going to look as if it goes to the left
or even if it goes to the right
... that is going to be a lot more complicated
for this we are going to modify
the class sprite a little
in the constructor of the class sprite
we are going to add two new fields
they are int...
and
we are going to create two constants
create constant this one and create...
another field
let's tidy up
ok
bmp columns is how many columns are we going to have
if we see the images
they have 3 column characters
and 4 of
rows
then...
the width of our sprite is going to be the size of the bmp
the bitmap divided by the number of columns; 3 and the height is going to be the size of the bitmap divided by the number of rows;4
we are going to need a small code
for the management of
the printing, we are going to use
another printing method
until now we have been using a method
this canvas.drawBitmap we send him an integer but apart from
sending him an integer we could send him rectangles
here as you can see we have rectangle source and rectangle destiny
this means that from the bitmap source I am going to get a rectangle and I am going to print it in another rectangle of
the canvas, the screen, the surface where I am going to keep it
for this we are going to create two rectangles objects
here we are going to
write source
and here
destiny
ctrl+shift+o for imports
the rectangle is going to be created with a position x, y for the upper left corner
with the x, y for the down-right corner. We are going to make a field y to use it in general
we are going to initialize it with zero
we'll leave it here
with the other coordinate
which is x. We leave it prepared even if by now we are only going to use x
currentFrame is going to be
we have been talking of creating an animation. This animation is going to have 3
images
if you remember...
the currentFrame is the one we are going to show. First this one, this one and this one and then we'll start again, this one, this one...
we are going to have a variable of the one showing
the variable is this one, a field.
what we are going to do is to increment the field
in the update method
we increment the field before including it and we make him mode 3
the number of columns, this means that the first time it will be 0, then 1
2, and when we get to 3 it will be 0 again, each time it comes through here it will pass from 0 to
1 and 2
which are going to be the positions
of the graphic
0, 1 and 2
ok, let's see if this was enough
here is our character
notice that it bounced back before getting to the border
it doesn't get to the border
here we have a small mistake
in the cut condition. We are cutting using the total length of the screen minus the width
of the bitmap, but really
the length is the length of our sprite
we are just going to use the width variable
we write a d...
let's try again
here comes our guy, as you can see it goes quicker
because I have incremented the speed of 1 pixel
by tick to 5 pixels by tick
...
and also I have improved the conditions of the border, with the speed we don't want it to pass through so we have to consider the length
of the screen, the width of the character, the width of the screen but also the x speed
for this tutorial I think
time is out!
See you in the next tutorial!!