Pixie - Tutorial 3 - MultiBalls


Mattias Gustavsson:
Pixie - Tutorial 3 - MultiBalls

In the last tutorial, we looked at how to get a ball bouncing on the screen. This time, we'll step it up a bit, and get lots of animated balls going. This will give us a chance to take a good look of some of Pixie's core concepts.

And in this sample, you'll be able to use UP/DOWN cursor keys to increase and decrease the number of balls.

I'll go right ahead and with the code as usual. It's a lot longer this time around, but a lot of it is going to be things we've already looked at, though some of them are rearranged a bit.

And as usual, I'll go through the code in more detail. This time though, I'll be grouping a lot more lines together in my descriptions, and focus on providing details in regards to Pixie, rather than trying to explain all of the code - a lot of the functionality is similar to the last tutorial, Bouncing Ball, anyway.

Line 6-12: This sample will have more than one ball, so we're defining this struct to group together all the data for one ball. We won't need to add fields for position or animation frame, as we'll need to store that in the sprite anyway, so we'll just get it from there.

Line 15-32: When we create a new ball, we're going to have to give its sprite a bitmap (but with a .PIX format - see more below) and proper origin. For this sample, we'll also give it a random start position, and a random color. Pixie sprites default to white, meaning that the will be drawn just like they are in their bitmap. But you can change the color, and it will be multiplied with the original bitmap, which is useful to tint sprites, so you can reuse the same bitmap data with lots of different colors. In this setup code, we also initialize the remaining fields of the Ball struct, to give each ball a random starting direction and speed

Line 35-73: In the previous bouncing ball tutorial, we updated the balls position every frame, and reversed its direction if it reached an edge. We'll have to do the same thing for each ball in this tutorial, and this function does just that. A slight difference though, is that we extract the position from the balls sprite, and reapply it after modifying it - this way, we don't need to store the position of each ball separately. Another difference from the last sample, is that we update the sprites Cel index each frame - sprite bitmaps can be set up to have multiple cels, that can be shown one after the other to achieve animation. SetCel/GetCel is used to control this value, and if we keep changing the Cel value, the sprite keeps animating. We don't have to worry about how many cels the bitmap has - SetCel will automatically adjust the value to be within the valid range, and wrap around when it reaches the end. We can safely pass in any number to SetCel, even negative numbers, and it will always display the right cel.

Line 92: In the last tutorial we used PNG files, which is all well and good, but it's not the best format we can use. Pixie has support for a custom image format with the extension PIX, and you can convert from PNG/JPG/GIF/TGA to PIX by just dragging and dropping your files onto PixiePCT, the Picture Conversion Tool. It is included with Pixie, and you'll find it in the PixieLib/PixiePCT folder. I'll go into more details on how to use the tool later, and also how to use PixView, a simple image viewer for PIX files. The big advantage of using the PIX format is that it loads much faster, takes less memory, and can render a lot faster than loading from raw image files, so it is recommended that you use it at least for your final products.

Line 94-100: Pixie comes with some built-in container classes, and Array is one of them. To use it, you just provide it with the type of object you want to store in it, and it will automatically grow and shrink in size as you add and remove objects. We want to start off with 4 balls, so we just do a loop which adds them like this - and don't remember to call the SetupBall function to initialize each ball properly.

Line 121-136: We want the player to be able to press UP and DOWN to increase and decrease the number of balls. There's no limit on how many you can add, it's just that things will get slower and slower the more you add.

Line 142-145: Just make sure to call UpdateBall for each ball we currently have, to make sure that they move properly.

And that's it for this time - though I'll add a bit more later on about PixView and the PixiePCT - and also go into more detail on how Pixie does rendering, which is not essential, but quite handy to know.

The sample code and required art assets (both the original PNG files and the converted PIX files) as well as a slightly updated version of the engine (a small bug in the PCT tool) can be found here:

Download Pixie v0.9c

And if you try this out, let me know how many balls you can add before you think it's starting to go too slow :-)

Richard Marks:
As always, Mattias, your tutorials are exceptional! :o
Keep em coming! You're breathing some life into this place! ;D

Mattias Gustavsson:
Thanks :-)

I have some more I'd like to write, but I'll have to see how much time I'll have in the next few weeks (moving and starting a new job :D)

Richard Marks:
Quite understandable. :)


[0] Message Index