Sprite Tutorial

In this multi-part tutorial, I will explain how to define sprites and move them around with the arrow
keys. Then, I will explain some very simple collision detection. When I say very simple, I mean it. The
method I will show you requires no math at all, apart from dividing a number in half. I'll also show
how to use sprite animation, rotation, and other cool stuff.

Part One: Defining and Moving Sprites

The full source code is included at the end of the tutorial.

Before we do anything, we'll need to dimension a few variables with "Dim"

Dim backgroundImage, spriteTex1, spriteTex2, sprite1, sprite2, bgSprite 'Sprite

textures and handles
Dim sp2x, sp2y, sp1x, sp1y 'sprite coordinates

Now that we have our variables, why don't we start by loading a background image to display our
sprites over? All images for this tutorial are contained within the default folders of the Basic4GL
application. To load a background image, use the following code:
backgroundImage = LoadTexture("Textures\Background.bmp")
bgSprite = NewSprite(backgroundImage)
SprSetPos(320,240)
SprSetSize(640, 480)
SprSetZOrder(3)

What have we achieved here? Well, we've loaded a sprite. The first line loads the defined
texture(Bitmap image called "Background" in the "Textures" directory) to the backgroundImage
variable so that we can use it in the next line to define the sprite. By setting "bgSprite" to
NewSprite(backgroundImage), we are setting "bgSprite" as the handle to a sprite of the image loaded to
backgroundImage. In order to make the image take up the whole screen, we use SprSetPos(320, 240) to
move the center of the image to the center of the screen. Since the screen is 640 pixels by 480 pixels,
we set the x,y (horizontal, vertical) coordinates to be in the middle of this. After that, we use
SprSetSize(640,480) to make the image the same size as the screen. The final line of that code,
"SprSetZOrder" defines which other sprites it will appear in front of, or behind. Setting it to 3 means
that any sprites with Z Order below 3 will appear above it, and any above 3 will appear behind it.

Now we have our background image, let's load our first sprite. We'll do it almost the same way as we
loaded the background image.
spriteTex1 = LoadTexture("Data\F117.png")
sprite1 = NewSprite(spriteTex1)
SprSetPos(320,240)
SprSetSize(32,32)
SprSetZOrder(1)

Since we are using a 32x32 image, we set the size of the sprite to 32x32. Also, since we want it to
display above the background, we set its Z Order to 1. For now, I'm just setting it to display at 320,
240, but later on, I'll show you how to set its coordinates, or its position, to a variable, allowing it to be
moved around with user input. Let's load one more sprite so that I can show you collision detection in a
later tutorial.
spriteTex2 = LoadTexture("data\asteroid.png")
sprite2 = NewSprite(spriteTex2)
SprSetPos(520,240)
SprSetSize(64,64)
SprSetZOrder(2)

With the next part of code, we're simply setting the values of sp1x, sp1y, sp2x, and sp2y so that when
we use them as the sprites' X and Y coordinates, they will appear in the same location as we originally
defined them. sp1x, or Sprite 1 X, will be 320, because that is where we originally wanted to place
sprite 1. sp1y is Sprite 1 Y, and so on.
sp1x = 320
sp1y = 240
sp2x = 520
sp2y = 240

OK, now it is time for the main loop of the program.

While true
BindSprite(sprite1)
SprSetPos(sp1x, sp1y)
BindSprite(sprite2)
SprSetPos(sp2x, sp2y)

"While true" basically makes the loop run indefinitely, that is, until the application is ended. In order to
work with a specific sprite, you need to bind it using BindSprite. We start off by binding sprite1, then
setting its coordinates to be the values of sp1x, and sp1y. We must then do the same with sprite2, only
with sp2x, and sp2y. Why are we doing this? So that when the values of sp1x and sp1y change, sprite1
will move around. The next block of code, which is still within the main loop, allows us to handle user
input, and changes these sp1x and sp1y values.
if ScanKeyDown(VK_UP) then
sp1y = sp1y-5
end if
if ScanKeyDown(VK_DOWN) then
sp1y = sp1y+5
end if
if ScanKeyDown(VK_LEFT) then
sp1x = sp1x-5
end if
if ScanKeyDown(VK_RIGHT) then
sp1x = sp1x+5
end if

ScanKeyDown is the Basic4GL function that checks which key has been pressed. VK_UP is the up
arrow, VK_DOWN in down arrow, VK_LEFT is left, and VK_RIGHT is right arrow. Based on which
key is pressed, we adjust the sp1x and sp1y values accordingly. If up or down is pressed, then we'll be
changing the Y values. Since Y values increase from top to bottom, we need to subtract from Y to move
up, and add to Y to move down. If right or left is pressed, then we adjust the X Value. X coordinates
increase from left to right, so we add to X to move right, and subtract from it to move right. Then when
the program loops again, it will take these changes values into account when it draws sprite1 and the
sprite will move.
WaitTimer(20)
wend
The second-to-last line (WaitTimer) just slows down the loop a little so that the sprite doesn't shoot off
the screen when you press a button. Finally, with "wend", we end set the end of the main loop, and in
this case, the end of our program. Be sure to save this source code for future sprite tutorials, as they
will take this code and build on it. I hope this tutorial was informative and helpful. There's much more
to come on sprites!
~Stu

Full source code:

Dim backgroundImage, spriteTex1, spriteTex2, sprite1, sprite2, bgSprite, sp1x,
sp1y
Dim sp2x, sp2y

backgroundImage = LoadTexture("Textures\Background.bmp")
bgSprite = NewSprite(backgroundImage)
SprSetPos(320,240)
SprSetSize(640, 480)
SprSetZOrder(3)

spriteTex1 = LoadTexture("Data\F117.png")
sprite1 = NewSprite(spriteTex1)
SprSetPos(320,240)
SprSetSize(32,32)
SprSetZOrder(1)

spriteTex2 = LoadTexture("data\asteroid.png")
sprite2 = NewSprite(spriteTex2)
SprSetPos(520,240)
SprSetSize(64,64)
SprSetZOrder(2)

sp1x = 320
sp1y = 240
sp2x = 520
sp2y = 240

While true
BindSprite(sprite1)
SprSetPos(sp1x, sp1y)
BindSprite(sprite2)
SprSetPos(sp2x, sp2y)
if ScanKeyDown(VK_UP) then
sp1y = sp1y-5
end if
if ScanKeyDown(VK_DOWN) then
sp1y = sp1y+5
end if
if ScanKeyDown(VK_LEFT) then
sp1x = sp1x-5
end if
if ScanKeyDown(VK_RIGHT) then
sp1x = sp1x+5
end if
WaitTimer(20)
wend