Pixie - Tutorial 2 - Bouncing Ball

(1/2) > >>

Mattias Gustavsson:
Pixie - Tutorial 2 - Bouncing Ball

In the last tutorial, we looked at a minimal Pixie program - Hello World. This time we'll look at something a bit more elaborate: getting a ball to bounce around on the screen. This is a good tutorial, as it shows how to use both static graphics (the background) and moving sprites (the ball).

Just as with the other tutorial, I'll start by showing the entire source code for this sample, and then I will go through the program line by line. This time, however, I won't talk about those lines that are the same (or very similar) to the "Hello World"-program, so make sure that you have had at least a quick look at it, and refer back to it if there's a line that puzzles you and which I haven't provided an explanation for. So, let's roll up our sleeves and get started:

Line 20-21: Yes, this is the first line that is different from the Hello World program. What we do here is to declare a new sprite, called background, and tell it which picture to display. Pixie comes with support for various image file formats - PNG, GIF, JPG and TGA out of the box, but it is easy to add new ones and register them with the engine if you need to. Pixie has got some custom formats as well, which we will touch upon in future tutorials. You don't need to worry about loading the picture - just pass the filename to the sprite like this, and Pixie will automatically load the image, detecting which format it is automatically, and keeping the image around in memory until no sprite is using it anymore. And if you have multiple sprites using the same picture file, it will only be loaded once, and shared among the sprites, so as not to use more memory than necessary.

Line 23-24: This sets up another sprite, this time for the ball, and which picture to use for it. Pixie has full support for alpha-channels, meaning you can have sprites with semi-transparent regions, like the soft shadow surrounding this ball sprite.

Line 25: The default behaviour in Pixie is for sprites to be positioned by their top-left corner. We can see this with the background sprite: when it is positioned at screen coordinate 0,0 (which is assumed unless SetPosition is called), its top-left corner will be placed at screen coordinate 0,0. In some cases though, we might want the sprites center to be something else, like in this case - it makes more sense for the sprite to be positioned by the center of the ball. The picture of the ball is 80x80 pixels, and if we set its origin to 40,40 it will make it positionable from its center, meaning that if we placed it at screen coordinate 0,0 the balls would be placed with its center at the top-left corner of the screen.

Line 26-29: When we're bouncing the ball around, we will be keeping track of four things - the x (or horizontal) and y (or vertical) position on the screen, and how fast the ball is moving in the horizontal and vertical direction. We start off placing the ball at the center of the screen (320,240) and with it moving 3 pixels per frame both towards the right edge of the screen and towards the bottom of the screen.

Line 42: Once per frame update, we call the SetPosition method on our ball sprite, to position the sprite at the correct position - remember, we use the variables ballX and ballY to keep track of where the ball is, and if we don't pass that along to the actual sprite, the ball would just sit still and not move.

Line 44-45: This moves the ball according to the current speed. If we wanted its movement to be independent from the games framerate, we should really take the deltaTime into account when doing this, but it doesn't really matter for this sample, so we'll just keep it simple.

Line 47-69: All of these blocks of code does basically the same thing, but for each of the four edges of the background. In each case, we first check if the ball have moved past the edge in question. If it has, we change it to go in the opposite direction and move it back to be exactly at the edge.

And that's it! Easy, huh? A good thing about Pixie is that it handles a lot of things automatically for you, but it does it in a *very* efficient way, ensuring high performance, and it always allow you to take the control back whenever you need to, and do things in the specific way you want instead of using the automatic systems, which we will see in later tutorials.

You can download the source code and images for this tutorial here:

Download Pixie v0.9c

(they are included in the latest version of Pixie)

We're really done with the tutorial, but I thought I'd end by modifying it a bit to make it more... cool  8) With just some minor adjustments, we can add a nice motion-blur trail to the ball. Let's look at the code first:

I have highlighted the lines that are different from the original Bouncing Ball program, and as you can see, there's not a whole lot that's changed...

Line 23-27: Instead of creating just one sprite for the ball, we create 8 of them - just by putting them in a standard array. We then loop through all of them, and set the origin and the bitmap for each of them.

Line 28: To achieve the appearance of a motion blur trail, we will show 7 of the balls slightly behind the main ball, and with increasing level of transparency the further away from the main ball. In Pixie, you can just call SetAlpha on a sprite, and pass it a value between 0 and 255 to set the level of transparency.

Line 31: We want the main ball (at index 7) to be fully opaque (alpha value of 255)

Line 34-35: I just upped the speed a bit, to make it more in keeping with the motion blur trail

Line 48-52: This loop will just copy the position of the main ball down to each of the trail sprites. By copying one slot every frame update, we'll get the 7 trail balls to follow behind in the trail of the main ball.

Line 53: Finally, we just update the main ball sprite with the current position of the ball, and there we have it: motion blur trails.

I hope you have enjoyed this tutorial, and if you have any questions or comments, I'd be happy to be of help  :)


Richard Marks:
Excellent tutorial Mattias!

I love the motion blur effect! I never would have thought of doing that kind of effect like that.
I guess that is why you're the master programmer  ;D

Thanks for contributing these excellent posts, and for bringing Pixie to NOGDUS!

I've got a request for a Pixie tutorial, if you care to fill requests that is. ;)

I'd like to see a basic pixel*pixel scrolling tile map engine tutorial.

Mattias Gustavsson:
Sure, I can fit one of them in down the line :-) Just to make sure it's useful to you, what exactly do you mean by scrolling tilemap? I mean, what features and characteristics are you looking for? (because as you know, we have such loosely defined terms in the gamedev field - sometimes I think it's a wonder that we can communicate at all :D)

Richard Marks:
:D So true!
Well, lets see.. something along the lines of this, done in Pixie would be useful I think.

But I know that you've got much better implementations of things than I do, so seeing how you would go about such a thing is primarily my interest in this, and I think that its a tutorial that would benefit any Pixie user. :)

Mattias Gustavsson:
Yes, I think it would be quite the useful example :-) I'll cook something up for a later tutorial.


[0] Message Index

[#] Next page