The Advantages:

There are a couple of advantages in having many frames in one image:

1. It will save on typing extra code when it comes to loading different images that are the same size. You will only need to refer to this image then.
2. It will make animations easier to control within BlitzBasic.

The size of this image is 71x96 (width x height in pixels)
Its important to remember this size and the reason why shall become clear later on.

To load this image into BlitzBasic we would use the following line of code:

Inside of the inverted comers “card.bmp” you would normally put the full location to the file you require.

Add another image:

Now to expand our single image to include other cards we continue creating all of the cards. All of these cards need to be the same size. Remember the image size above? 71x96

Once all of the cards are complete its time to put them together.
For this example I will only use one suit of the cards, the clubs.
But the same principle applies to add the whole deck.

Create a blank image 497 width x 192 height.
With our card size of 71x96 this blank image will be 7 cards wide and 2 cards high.
A total of 14 possible positions for the cards. Although we only use 13 as you will see.

Now click on the first image (Ace of Clubs) press Ctrl+C (copy image)
Go back to the blank image and paste it (Ctrl+V), positioning it up to the top left corner.
You should now have this:

Now that we have our first card in place lets put the second card into place.
This time click on the second image (Two of Clubs) press Ctrl+C (copy image)
Go back to the main image where we will now paste (Ctrl+V) the second image.
Position the second card up against the first card leaving no space.
Now you should have this:

Add all images:

Continue copying and then pasting all of your images like you did above so they end up looking like this:

As you can see not all of the images have to be on the same line.
However each line (except the last) must be filled. If we were to leave a blank where the ‘7 of clubs’ is when it comes to drawing the image to the screen nothing would appear.

To load this image into BlitzBasic we do something a little different to a single image. This is the line of code we would use:

Let’s break this line of code down:

LoadAnimImage – Tells BlitzBasic it is to load an image with more than one frame.
“card.bmp” – Again this is the full location to the file you require.

The numbers:
,71     - This states the width of each image

,96     - This states the height of each image

,0     - This is the first image number of all the images in the image file

This could be changed to any number. Lets say 1, what will then happen is when we draw the image, instead of the first image that is drawn being the Ace we now draw the 2 instead. It’s best to just set this to 0.

,13     - This lets BlitzBasic know how many frames there are in the image. However when we come to draw the images to screen you will see that instead of saying:

     Image 1 is the Ace and Image 13 the King
     We adjust it to:
     Image 0 is the Ace and Image 12 the King

The reason for this is computers don’t count like humans.
Where we start counting from 1. i.e. 1,2,3,4,5,6,7,8,9,10
A computer starts counting from 0. i.e. 0,1,2,3,4,5,6,7,8,9
Both still have 10 numbers though. Things will become clear later when we try and draw an image to the screen and don’t get what we expect.

So far then, we have now got all of our cards into 1 image. The image is saved, and we have told BlitzBasic to load the image. The next step is to display the cards. This would be done differently depending on your project needs.

Time for some working code:

Let’s draw our images to the screen. A simple version.

What is the DrawImage doing?

DrawImage     - Simply tells BlitzBasic to draw an image
cards     - Our cards image
,10     - The X position on screen
,100     - The Y position on screen
,0     - This is the frame number. Play about with this number to draw a different card to the screen.

Summarise:

So to summarise on what we have learned so far.

You know how to load a single image.
You know how to create multiple images and put them into 1 large image.
You know how to load the large image and refer to each individual frame.
You know how to draw to screen any frame from that image.

Well done!

In order to create an animated image we use the same method as used in Part 1. The difference comes when you start coding. There are other methods of creating animations, but this is the most commonly used.

The individual frames:

Exactly the same process that we carried out before. You need to create every image first. This helps if you are quite good with drawing.

This time I will do it with images only, no text (well very little)

Step 1 - Create your images (remember the size):

Step 2 - Add all images into 1 large image

Finally you will have your animation strip complete.
(image reduced for demonstration purposes, to fit on this page)

Lets animate it:

That is just an example of how to run through each frame in order to animate it. To have your animated image move when you press a key or move your mouse requires slightly more complex code. So let try some new code to achieve this.

Movement with Animation:

Now that may seem a little daunting but read the commenting and you should understand what is going on.

Conclusion:

So now you should be able to achieve the following:

Load a single image.
Create multiple images and put them into 1 large image.
Load the large image and refer to each individual frame.
Draw to screen any frame from that image.
Create an animation
Animate your images in BlitzBasic
Move your animations around

Well there we have it, you should now be able to go out and create your own animated images, and then animated them. So lets see your works of art on the Showcase.

I hope this tutorial has help at least someone.

Remember:

Individual frames need to be the same size.

Thanks: Special thanks go out to 2 Bits Short Of A Byte for his work on the code.

• To download the source and art: Click Here.