Images are the most basic kind of 'graphics' in PlayBasic. This tutorial is an introduction to them.
Introduction to Images in PlayBasic Tutorial
Images are the fundamental graphical unit of PlayBasic, at least, when making 2D sprite-based games. An image is nothing more than a flat 2D … image. I like using .png's but PlayBasic supports other popular formats as well.
Before You Start
Create a new PlayBasic project and save it. It's O.K. if it's blank, just so you have it saved and you know were the source code file is.
You can use images in any number of formats for this tutorial, however, in the event that you don't have a suitable image to use for this tutorial, you can use this simple blue circle :
Save it to the same folder where your PlayBasic source code is.
Images in PlayBasic
PlayBasic refers to images by a number. This number is commonly called the image index. When you load an image into PlayBasic, you can either assign it a specific image index yourself or you can have PlayBasic assign one for you. To keep it simple, we're going to let PlayBasic to do it for us.
The image index is necessary for a common reference between you and PlayBasic. By using an image index, both you and PlayBasic know specifically which image you are referring to when you attempt to do anything with that specific image.
Loading an Image
Before you can display an image to the player of your game you need to load it first. PlayBasic has a convenient function that not only loads the image for you, but automatically assigns it an image index. This function is LoadNewImage(). Here's how it's used :
blueCircle = LoadNewImage("blueCircle.png")
PlayBasic needs to know the filename of the image you want to load. It goes in between the parenthesis. In this case, the filename is blueCircle.png. LoadNewImage() first loads blueCircle.png and then "returns" (spits out) the image index for the image. We need the image index to display the image later, so we store it in the variable blueCircle. There is no need to ever know exactly what number the image index actually is. We can now use the blueCircle variable to refer to the image.
Displaying an Image
You can display the image with DrawImage. It works quite a bit like Dot from the last tutorial, but since it's an image, there are two differences. Before getting into them, here's the line of code that draws and image :
DrawImage blueCircle, x#, y#, true
DrawImage requires four things. First, it needs to know what image to draw, thus, it needs an image index. Since we stored the image index in the blueCircle variable, we can just use it as the image index.
It also needs to know where to draw the image. This is it's x and y position, just like Dot.
Finally, it needs to know if you want it the color black to be transparent. If true, the color black will be transparent, if false, it will not be.
An Example
Here's the entire code to load and display an image in a game loop :
x# = 100
y# = 100
blueCircle = LoadNewImage("blueCircle.png")
Do
Cls 0
DrawImage blueCircle, x#, y#, true
Sync
Loop
First, you'll notice a couple of things. First is that the image is loaded before the game loop starts. You do not want to load the image in the game loop, otherwise the image will be loaded over and over each and every frame drawn. This will slow down your game and eventually eat up tons of memory.
Secondly, that DrawImage is between Cls and Sync. This is one of the golden rules of PlayBasic, which you learned in a previous tutorial :
- Put everything you want the player to see between Cls and Sync.
Otherwise, it will not be seen.
Transparency
To illustrate transparency, I'm going to do something a bit different. Up until now we've used Cls 0.
, of course, being computerese for the color black. Even if the black part surrounding the circle was visible, you couldn't tell it because Cls 0 causes the background to be black. Therefore, we're going to switch to Cls $FFFFFF.
$FFFFFF is computerese for the color white.
Without Transparency
Without transparency, the image of the blue circle appears as it does above, complete with the surrounding black color.
x# = 100
y# = 100
blueCircle = LoadNewImage("blueCircle.png")
Do
Cls $FFFFFF
DrawImage blueCircle, x#, y#, false
Sync
Loop
With Transparency
With transparency, the black part of the image disappears, allowing the background to show through where the black areas would be without transparency.
x# = 100
y# = 100
blueCircle = LoadNewImage("blueCircle.png")
Do
Cls $FFFFFF
DrawImage blueCircle, x#, y#, true
Sync
Loop
A Note
Black is not the only color that can be transparent in an image and you can set another color to be transparent. Black is just the "default" transparent color, so that's what we've used in this tutorial.
