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 9

Tutorial 9

GL (very) Basic Tutorial

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

Lesson 9 - Doing the Decorating

Our game is almost finished, wouldn't you say? Sure, so it's not going to win any prizes (apart from a wooden spoon, and I've already got one of them!) but it's a start. So, let's just add a little bit of sparkle to what we've done - and one of the first ways of doing that, is to add a more interesting background.
Ladies and gentlemen, for your viewing pleasure, let me introduce to you, back.bmp! This is a 64x64 pixel graphic, which we will use to brighten up a very dull playing area. We'll also get it to scroll in symapthy with our player movement, so just as we needed 2 variables to hold the position of our player, we'll need another 2 (backx and backy) to hold the position of the background. We'll set them both to 0 for the time being, and we'll adjust it when we know what our player is doing.
So, before we tackle the job of moving the background, let's look at how we are going to display it - take a look in the drawscreen function. Hang on - the DRAWRECT line has gone! And it looks like it has been replaced with:
	LOCAL loopx,loopy
	
	FOR loopx=0-backx TO 640 STEP 64
		FOR loopy=0-backy TO 480 STEP 64
			DRAWSPRITE 3,loopx,loopy
		NEXT
	NEXT
You're right - it has. This works just like tiling wallpaper images, and will fill the visible screen with images starting with a root at 0-backx,0-backy - think of it as a flood fill with a drawing, if you like. There is another command in there, STEP, which means the computer will count in increments of 64 (otherwise it would redraw the graphic at every pixel.)
On with the show now - let's get this background moving. Look in the UpdatePlayer function.
Firstly, we've made an improvement. If you go back to lesson 8 and run the program, the hold, say, down and left, and keep them held down, you will notice that when you reach the edge of the screen, the player keeps trying to walk in that direction, even though we are stopping him. Well, we are going to stop him doing that first off, so, the easiest way of doing that is by changing the test for the boundary of the screen by saying:
	IF px<0
		px=0
		dirx=0
	ENDIF
Therefore, if the player is trying to move left and keeps trying to move left, it stops his movement (as it did before), but now it also sets the x direction to 0. Remember where we said we would only update the animation frame if the player's direction flags were not equal to 0?
Also, our player graphic is decided upon by our pldir flag, and that is determined from the xdir and ydir. So now, if we move straight to the left of the screen, then hold down left and down, it will set the xdir to 0, but leave the ydir flag unaffected, so the flags will indicate that the player is moving down. When we apply it to the other screen edges too, it effectively means our player will only "walk" - that is, and animation will only continue, if the player is actually allowed to walk in that area. It also means, because we have updated our dirx and diry flags to dictate whether our character is actually moving in that direction, as opposed to whether he is trying to move in that direction, that we can use these flags to adjust our background image.
So, we then have these lines:
	backx=backx+dirx
	backy=backy+diry
Note, we are adding the players movement direction to the existing background reference point, but we we subtract this figure from zero at the drawing stage to make sure the background moves in the opposite direction to the player. Now we need to make sure we haven't gone outside the limits of our background tile - remember it is a 64x64 tile, so:
	IF backx<0 THEN backx=63
	IF backx>63 THEN backx=0
	IF backy<0 THEN backy=63
	IF backy>63 THEN backy=0
By now, you should be able to look at that piece of code and understand how it is working, so I won't explain it any further. Now trying running the game. Doesn't it look so much better? Also, try moving off the screen - see how the background stops scrolling? And how the animation stops? In the next lesson, we are going to explain a slight bug that has crept in while doing this. Well, a bug is not the right word - attention to detail is what makes the difference between a good game and a great game.
This lesson has introduced you to one of these details, namely the character animation at the edges of the screen - the next lesson will introduce another one.

http://www.glbasic.com/files/tutorial/ImgLesson9.png