Frogger-like Game

Frogger-like Game Screenshot

Also available in Japanese, thanks Makoto WATANABE.

In this tutorial, I will show you how easy it is to make a simple game very quickly using the Extended Library. This tutorial assumes that you have a working knowledge of the FreeBASIC language. This game only requires a very small portion of what the Library provides. The code we'll be using here will make the entire process easier to create, faster to code and will eliminate a lot of hassle down the road. Rather than writing a bunch of boiler plate code for loading and manipulating images, we will be using the Extended Library, which provides us with high quality, tested functions and classes. You can download the full source code and images here [8kb]. Let's dive right in.

Here we include several parts of the Graphics module, the Sprite class, the Manipulation module, the BMP file loader and the included color definitions. We also set a couple of options for ext. The first is used to speed up the compile time, since we are not using any of the provided container classes. The second is used because this is a small example and I wanted to keep the dependancies minimal. See the full documentation for a list of other available options.

Now we define some of the magic numbers we're going to use to control things later on.

These are the variables that hold all of the sprites for our game. Arrays are used for objects that have multiple instances. One of the things the Sprite class does is hold the position of itself, which is used for collision detection as well as drawing.

Here we load the image we will use for our hero. Notice how we load one image, then rotate and recolor it as needed.

What do ya know, we'll do the same thing with the cars, logs and lily pads.

Here we setup the playing field graphic and store it for easy placement for when we need to redraw the screen later.

For the last part, before we start looping in the game, we're setting the position for the lily pads so they're displayed in the right place and we'll be able to tell when the hero has won. Continue on to the next part, for great justice!

In the previous part we got the intial portions setup, now we're hitting the meat and potatoes.

This section is where we reset all of the positions and helper variables for a new game. The Sprite class lets you set the position using the x and y location. You can also use a Vector2 if you maintain one seperately, ie, if you are doing some magic to the Sprite's location.

First we draw all of our objects, paying attention to what should be drawn on top of what. We are using the DrawImage method of the Sprite class to draw our objects. The function takes 3 parameters but here we only need two because we're just drawing to the screen. The parameters that end in _dir are the direction each object is facing. We're using the direction as the index into our Sprite to determine which frame to draw. You could also use this as an index into a frame for an animation.

Our logic for object movement is very simple; all moving objects, besides the frog, just bounce back and forth on the screen. We're using the Sprite.update method to change the object's positions. It adds the amount passed to the sprites' position, that's why we pass -(speed) when we want the sprite to move to the left. We are directly setting the frog's position here to make it simpler while the frog is on a log.

This section uses the Sprite class' built-in pixel perfect collision detection to see if the frog has landed on one of the lily pads.

Check for the arrow keys and update the frog's position accordingly.

And then we finish up, checking to see if we got ran over by a car, landed on or missed a log. Then sleep a bit, wait for vsync and do it all over again if the player wants to.

Finally, we clean up what we need to. Remember to always practice safe memory allocation. Notice how we don't destroy any of the images we loaded into the sprites? We don't have to! The sprite class took over responsibility for those images when we loaded them into it.

The Extended Library gives you, the game developer, many high quality tools to make your life easier and your development faster. This simple game just scratches the surface of what is available. I also recommend browsing the API Documentation, every function or class is documented there.

We need your help!

The FreeBASIC Extended Library is always looking for new submissions. Submissions do not necessarily need to be code, in fact our primary concern at the moment is improving the documentation. We feel the best way to improve the documentation is with more tutorials and a User's Guide that combines an overview of the api (the what) of the modules with the why, the how and the when. So if you are handy with a text editor and know your way around a certain part of the library, please help us out by writing a tutorial or an in-depth article about a submodule/class/set of functions. After review, your submission may be added to the User's Guide. Thank you for your time and I hope you enjoy using the FreeBASIC Extended Library as much as we have enjoyed working on it!


See Also: