Warning: Undefined array key "keywords_en" in /mnt/web218/a3/28/510129628/htdocs/main.php on line 234 Warning: Undefined array key "description_en" in /mnt/web218/a3/28/510129628/htdocs/main.php on line 235 Warning: Undefined array key "commercials" in /mnt/web218/a3/28/510129628/htdocs/main.php on line 261 Tutorial 3
☰

Tutorial 3

GL (very) Basic Tutorial

aka "so, you want to write a game, do you?"
© 2008 PeeJay

Lesson 3 - First steps to animation

There have been lots of changes to the source code for this one, but nothing too drastic that you won't be able to see what is going on. Firstly, the global variable speed was introduced as explained at the end of the last lesson - if you skipped that, it would be an idea to go back and have a quick look.
Right, let's take the bull by the horns - if you have a quick look at the player.bmp file, you'll notice there are now 8 drawings, one for each direction. This is where things start to get juicy - the idea of having more than one image portraying characters. So, let's look at the source code in lesson 3 and see what has changed
LOADANIM "player.bmp",0,32,32
The LOADSPRITE has gone! Now we are loading an animated image - that is, it contains more than one frame. So, we must tell GL how big are frames are. In this case, the images are 32x32, and there are 8 frames in total (0 to 7 inclusive). Got that? Good - on with the show!
Global pldir=4
Woohoo - a variable to hold the direction the player is facing. We'll start with direction 4 - image 4, or, in fact, the fifth image (bear in mind we start counting from 0) which is the player facing down - the one we are used to.
Now look in the updateplayer function. We have a new chunk of code thus:-
IF diry=-1 AND dirx=0 THEN pldir=0
IF diry=-1 AND dirx=-1 THEN pldir=1
IF diry=0 AND dirx=-1 THEN pldir=2
IF diry=1 AND dirx=-1 THEN pldir=3
IF diry=1 AND dirx=0 THEN pldir=4
IF diry=1 AND dirx=1 THEN pldir=5
IF diry=0 AND dirx=1 THEN pldir=6
IF diry=-1 AND dirx=1 THEN pldir=7
All this is doing is checking the direction we are trying to move in, and setting the pldir variable accordingly. Why? Because we need to know which image to draw according to the direction of movement.
And onto the drawthescreen function
Oooh, what's this?
DRAWRECT 0,0,640,480,RGB(0,150,0)
Well, it was getting hard work seeing our man on a black background all the time, wasn't it? So, let's make him against a green background. The DRAWRECT command draws a rectangle - here, at position (0,0) - ie, the top left, with a width of 640 and a height of 480 (so, the whole screen!) and with a colour equal to RGB(0,150,0).
There's just one more change:
DRAWANIM 0,pldir,px,py
Yep, now our player is an imagestrip - not just a plain image, so we must tell GL which of the images of the strip to use.

Continue

http://www.glbasic.com/files/tutorial/ImgLesson3.png
Please ensure you understand all this completely before proceeding to the next lesson, because then we will add full animation, and it will be messy if you are not comfortable with image strips!
Download the lesson files
Previous Lession
Next Lession