C++ Allegro 5 Made Easy Tutorial 14 - SpriteSheet Animation [Part 2] Video Lecture | Allegro: A Complete Guide - Game Development

hello everybody so continuing what we
left off so we left off by setting up
our directional buttons or we said draw
equals to true so whenever we have a
drug command so we know when to draw and
when to update so we got our whole XI
drawn like so but what we want to do is
that we want to crop out each individual
image depending on the direction they're
facing so that we get an animation so
how do we do this well for for a level-4
users there was a function called blit
and with the blade you could crop out
certain images like the source X or Y
etc etc well in Allegro 5 there's
something called job al job a map
underscore region now the bitmap the the
region takes a takes a lot of different
parameters and I'll be trying I'll be
going through every single one of the
parameters so the first one is a bitmap
that's simple enough now as you can see
it says float as X 4 that's why float SW
fold SH and there are other parameters I
want we know like the x position Y
position and the flags but these four
ones we don't know the first four ones
you don't know s X's is stands for the
source X so it's basically saying we're
on the image should we start cropping
from ok so for example if I'm if I'm
moving down right and I want to draw
this first frame over here right there
I'm gonna say that the source is gonna
be equal to 0 on my on our whole image
right if our whole imagine our whole
images is a screen ok the 0 0 coordinate
that is at the top left just like with
the rectangle is just like what every
other I think we draw so if I want to
draw this first frame my source X would
be at 0 on my source Y would be at 0
right the next parameter asks for the
source width and source site so since
each individual image is 32 pixels by 32
pixels my source book would be source
b32 and my source my source why would be
32 so then that's basically carpet on my
whole image then for the X&Y is just
basically stating where this particular
image is going to be positioned on the
screen so after I'm done drawing this
image I'm going to want to draw this
image in the middle so I'm gonna
increase the source as X - 32 so the
source X is 32 we're dry and the Y is
equal to zero so we start cropping from
here the width is 32 and the height is
thirty-two sweet crop out this image and
draw a loonie to dry and so on and so
forth so if we go back to our our
program okay this is how we're gonna
handle it so we have our we have our
player and for our source X initial Y so
for source X basically all we want to do
our source X is gonna continue looping
as long as we're moving right songs were
pressing a button so another thing that
we never added yet but I think that we
should add right now is have a variable
called active and set that equal to
false okay so at the beginning of our
timer what we're gonna do is active
equal to true so if they're pressing any
of the directional buttons then active
will stay true if they're not then we'll
set active equals to false okay so
therefore if active is equal to true
that means we're going to be increasing
the source X and source Y right so we're
going to want to include two more of
variables so we're gonna have source X
and source Y and we're going to set both
of them to 0 actually all set I don't
know why my mouse froze okay my mouse
just froze okay that's weird
okay so I'm going to set a source X and
source y equal to zero okay so I know my
source was actually gonna be 32 because
the standing animations are in the
middle column so I want to the original
position to be standing okay so what
we're going to do is we're going to say
that if active
so if active is equal to true then
source X plus equals to the images with
now I want to know if I could do a
pointer to the images with like with a
logo for seems like you can't I think
wait I'll get bitmap with yeah so we're
gonna get the play bitmaps with so we're
gonna add the bitmaps with divided by
the amount of frames so we have three
frames vertically so normally you might
want to store the amount of frames in
there and uh in a variable but we're not
gonna do this for now so basically what
we're gonna what this is saying is that
we're saying source X is going to be
plus equals to the width of the thing
divided by three inches just three
images across it's gonna be a 32 64 like
96 I think it's nicely across or 96
divided by three is equal to 32 so it's
gonna add 32 to it each time and we owe
so we can easily say that we want to
increase it by 32 each time but I'm just
showing you a different method to go
about it so we do source X plus equals
plus equals 32 and then we're gonna have
else so well L source X is equal to 32
and I'll have an if statement because if
our source okay if our source X is
greater than or equal to our our images
with so I'll whole images with player so
if it's greater than equal to the width
and you just want to be said source X
back to 0 right because if our for
source X which is the end of the bitmap
has nothing to draw so for reaches right
here then we just reset it back to zero
okay simple enough so back to our cone
so we have our source X and our source Y
is like our direction okay so we don't
really need a direction or we didn't
really need a source Y bar or whatever
we live with it so for our source X what
we're gonna do is we're just gonna put
source X there and for source Y what
we're gonna do is do direction times
I'll get bitmap height and our image
divided by a 4 since we have 4 frames
for frames going vertically so what is
this thing right here so we're just
saying that direction times that so why
did I put it in this particular order so
if we look at our enum right here it
goes down left right or not so we're
pressing like zero okay the enum starts
at zero and increments by 1 so if our
player is facing down what 0 times 32
that's 0 so it knows that our source Y
is going to be at 0 meaning that we're
going to be cropping on this line with
the pressure in the left key then 1
times 32 equals 32 so source wiser than
the B go to 32 and so on and so forth
for each direction and just so or why do
I keep on opening this ok so just you
guys don't get a bit confused then I'll
just say that source Y is equal to
direction
okay so we have our source Y times our
the players are height divided by 4 and
the width and the width and the height
of it so you can do again the Al get
bitmap height width divided by 3 in blah
blah blah but just save time we'll just
say the width and the height is equal to
32 and the action the x and y position
is equal to x and y and for our flags
we'll set that to no okay so if we run
this program let us see what we get
so right now we have a player standing
on since directions down when we move
our player elements now notice that the
legs and stuff are moving extremely fast
right we're moving slow with the legs
moving extremely fast that's because
we're updating our draw command
60 frames per second so that means it's
updating the legs different speed at 60
frames per second you can I like you can
adjust the timer and such to suit the
needs of what you need but I'm going to
leave that up to you guys for you guys
to figure that out so it's kind of like
a challenge for you guys or a homework
or whatever but that is it for this
tutorial I hope you enjoyed it thanks
for watching and bye