2D Games with Kitten-Fu, Part Two

When we left off in part one, you should have had a kitten that skated across the screen forward and backward. This would be awesome for a hover ship, but let's animate our little cat so that its legs move while it is walking. (oh, I'm also using the KFu alpha 13 library now)

The Sprites

We're going to use a sprite sheet for our cat, so that means adding all of our cat's various poses to a single .png file. I'm going to limit myself to 16x16 for each of the kitten's poses, that way I don't have to keep track of what size I made what, and it helps with the retro look too. Kitten-Fu allows you to specify any size you choose, just make sure you keep good track of your sprites if you make them irregular.


You can see four poses of my cat here. The first is the original position from part one, the second is with the right legs extended, the third is with all four legs in the middle. I was purposely vague on which leg was in front for this middle pose so that I didn't need to draw a second center pose. The last position is with the left legs extended. It took me quite a while to get the animation correct. If you are drawing your own sprites, I would recommend that you get the basic shape you want, then code the animation sequence, and then fine tune it when you can see the changes in action. I used a couple of YouTube videos to help me get the leg shapes correct.

My first attempt at animating my cat was in the middle of the night while I was almost asleep. I'm including it here as an example of what not to do!

The Code

So far we've only been working with a KFu stamp, and we really haven't tapped its full potential at all. One of the cooler things a stamp is good for is making "slices". A slice is a piece of a stamp that is cut out and used as a sprite the same way we used the stamp in part one. What makes a slice special is that it doesn't take up more space in memory to use it. We can load one sprite sheet, and then cut multiple slices from it, creating a veritable cornucopia of sprites on the actual screen!

After we add the new kitten poses, we can leave our stamp code the same, but we're going to add our slice code underneath:

  slice kitt1stand(kitt1, 0, 0, 16, 16);

We'll also want to change where we put the kitt1 stamp to refer to the slice instead:

  kitt1stand.put(k1x, k1y);

Now we're going to use an array of slices for our animated kitten. An array is a way to give a list of items numbers rather than names--this can be quite handy as we will see in a moment. In this case, we're going to pre-load all four frames of our animation, and save them as slices.

  slice* kitt1walk[4];
  kitt1walk[0] = new slice(kitt1, 16, 0, 16, 16);
  kitt1walk[1] = new slice(kitt1, 32, 0, 16, 16);
  kitt1walk[2] = new slice(kitt1, 48, 0, 16, 16);
  kitt1walk[3] = new slice(kitt1, 32, 0, 16, 16);

You can see that for each slice above (for the animation and the first pose in kitt1stand) there are a couple different parts:

kitt1stand or kitt1walk[x] are both slice names that we use later to call them into use, and after that are our options in the parentheses. kitt1 refers to the stamp that we set up earlier on line 12 of part one. The series of numbers refer to the x-position and y-position (the top left corner of the slice), and the height and width of the slice. Of course the slices could overlap if we wanted them to, but for now that would make our cat look like a mutant.

We can't just replace kitt1stand with kitt1walk, otherwise our kitten would be animated even while it was standing still, so we need a way to tell if the cat is moving, and only show the animated slice array while that is true.

We already have a walkleft and a walkright variable that is set to true while the cat is moving, so we can just multi-purpose them! The way we're going to solve our animation problem for now is to set a counter that will rotate through the numbers 0-3 every x frames. We'll feed this number into the kitt1walk array and this will flip between all of the slices of the array in order. Add the following code right before you clear the display and begin painting. (and, don't forget to add any relevant variable declarations at the top of the program!)

  // ANIMATION //
  if (framecount%8 == 0) {
    ++anim4;
    if (anim4 >= 4) {
      anim4 = 0;
    }
  }

Then, to make the counter tick, add the following to increment the frame counter every time through the game loop (I added it directly underneath the GAME LOGIC heading.)

  ++framecount;

We can re-use this counter for anything that we want to also run with four frames, as long as we don't mind that it is running in tandem with our cat.

Now that we've set up our animation, let's get it painted to the screen. Add a /// PAINTING /// heading underneath the animation code, and let's add some if statements around where we put kitt1stand. Basically, if walkleft or walkright equal 1, then we display kitt1walk, otherwise we display kitt1stand. I could write out the code for this a little more compactly than I have it below, but since we are about to add flipping, this sets up our statement nicely for that:

  if (walkleft == 1) {
    kitt1walk[anim4]->put(k1x, k1y);
  } else if (walkright == 1) {
    kitt1walk[anim4]->put(k1x, k1y);
  } else {
    kitt1stand.put(k1x, k1y);
  }

If you make your program at this point, you'll notice that the cat, although animated, moves way too fast (even for a ninja cat.) We need a way to slow that kitten down. How about a throttle on the game process? every x frames, we will register a movement. If we were working with smaller pixels, this would be less of a problem, but when your cat moves at 30 pixels per second, and your screen is only 128 pixels across ...

In the GAME LOGIC section, underneath the frame counter, let's stick our movement controls into a throttle of sorts:

  if (framecount%2 == 0) {

Now when you make the file, the cat walks slower but, especially if you're on an older / slower computer, you'll notice that the cat fluctuates in speed depending on your CPU usage. That's because I forgot that we need to use KFu's FPS thingy. To set it up, we need to add the following lines to the top of our actual game code, right after we finish declaring our variables and slices.

  fps framerate(1000/30);
  framerate.start();

Then, at the bottom, right before we flip to the screen, add the following:

  framerate.delay();

we could have named framerate anything, and set the speed to anything we wanted. I can imagine that you could change this number for underwater scenes, or something like that.


Everything should work now except for the fact that your cat can only face one direction! Let's fix that (although, the moonwalking kitten is pretty cool.)

KFu already has options set up to allow for flipping, all we need to do is activate them. First, we need to create a flipped "instance" of our stamp. This creates a complete copy of the stamp in the memory, so don't flip or rotate more than you'll actually need for your program.

Your new stamp declaration should look like this:

  stamp kitt1("kitten1.png", KFU_LOAD_FLIPH | KFU_LOAD_NORMAL);

FLIPH is for flip horizontal, and then NORMAL is so you can load the regular file. If you don't declare any positional variations, KFu assumes you only wanted NORMAL, but as soon as you start declaring variations, you have to tell it exactly what you want.

Do you remember where we made our if statement a bit long winded for our cat animation? Change your slice code to the following for when the cat is walking right:

    kitt1walk[anim4]->put(k1x, k1y, KFU_PUT_FLIPH);

Now, the only remaining 'error' is when your cat stops walking, it always faces left ... Using a variable on the key presses, see if you can flip kitt1stand to face the correct direction after he finishes walking. I have a solution in the code included at the bottom of the post--see if you can figure it out without looking.

So, I lied about showing you how to add another cat, that will have to wait until part three. We'll create a kitten object, and work on the logic that will make kitten-2 follow kitten-1, as well as some grass for them to walk on.

The Files

You can download everything from part 2 here: kittens-02.tar.gz

* * *

2D Games with Kitten-Fu, Part One

As part of the UVOG arcade project, Jeff has been working on a 2d graphics library for C++ called Kitten-Fu. It's cute and fuzzy like a kitten but powerful like a ninja ...

I'm going to be using Kitten-Fu (KFu) and other open software to create a retro, side-scrolling game about ... what else, ninja cats.

As a way of introduction, I am a novice programmer who has dabbled in PHP and AVR Assembler. I'm going to be blogging my very first C++ program during this series.

First, we need to install the KFu library. KFu has a couple of dependencies, so make sure you install them first:

$ sudo apt-get install build-essential libsdl1.2debian libsdl1.2-dev libsdl-image1.2 libsdl-image1.2-dev

Once you have that, go to the Kitten-Fu wiki page and download the latest version of the library. I'm going to be using KFu alpha 10 to start with. After you have the file downloaded, extract it and in a terminal, navigate to the extracted files and type:

$ sudo make install

Now we have access to the KFu C++ libraries and can use them in our program.

Now, let's create a folder for our program to live in, for example: /home/yourName/Programing/kittens

The Sprites

I already know that I want my program to involve cats, and since I'm better at drawing than coding at this point, I'm going to start by drawing a sprite and then worry about getting it to the screen. For sprite creation, I use a program called MTPaint which is a great pixel editor. You can use any graphics program you like.

I drew my first cat at 16 by 16 pixels and in 4 colors, one of which (black) will end up transparent. I saved my sprite as an 8bit .png, which is an indexed file format - perfect for making a retro game. You could also use a 24bit .png which has alpha transparency (various shades of transparent) which lets you have pretty, smooth and curvy edges all at once! Make sure to let the file know that you want the first color to be transparent. In MTPaint this is through the save dialog. Here's a screenshot of my final kitty:

The Code

Okay now let's create our program files. I like to work with Nano, a command line text editor. You should use whichever program you are comfortable with as long as it's a text editor and not a word processor. (ie, not Open Office Writer or AbiWord, but using Kate or Gedit is fine)

In my kittens folder, I create a new file titled kittens.cc with the following contents:

// kittens
#include <unistd.h>
#include "KFu/KFu.h"
using namespace kfu;

This tells me the name of my new program, and that I want to use the KFu library. Save the file and then create another empty file named Makefile. A makefile is a type of script file so that you don't have to type out the compile instructions every time:

all: kittens_norun

kittens_norun: kittens.cc
 g++ -o kittens kittens.cc -lKFu -Wall --pedantic

kittens: kittens_norun
 ./kittens

IMPORTANT: The spaces on lines 4 and 7 are really tabs, make sure you replace them in your code.

Okay, save that, and now let's get that sprite to the screen! Open kittens.cc and add this to your file:

int main(int argc, char* argv[]) {
  screen display(128, 120, 640, 480);
  stamp kitt1("kitten1.png");

  kitt1.put(100, 100);
  display.flip();

  sleep(5);
}

Before we talk about what everything does, let's make sure it works:

$ make kittens

A smallish black screen should pop up and have a little cat standing in the middle of it, and then it should close after 5 seconds. If this didn't happen, look back over all your code, and double check that everything is correct. I do have the project files included at the bottom of this post if you need them.

So, let's take a look at the code we just added. int main(...) { ... } is the wrapper for our actual program. Pretty much everything we do will be included inside of it.

screen display(128, 120, 640, 480); This sets up the parameters of our game screen. The first two numbers are the width and height of the game window. The next two numbers are the width and height of the screen. The game space will expand and center in the available screen space. This lets you change the size of the pixels on the screen. With the setup that we're using, we'll have a fairly small screen, and the pixels will be magnified x4.

stamp kitt1("kitten1.png"); This line sets up our stamp, giving it a name (kitt1) and telling it which file to use.

That's it for the setup, now we get to actually place the kitten on the screen.

kitt1.put(100, 100); Here, we name our stamp, tell it to "put" it to the screen, and tell it the x and y coordinates.

display.flip() is what actually paints the sprites to the screen. Very important, don't leave this out!

The last thing we do is tell it to do nothing for 5 seconds (sleep(5);) and then it gets the the final } and closes our program.

There are two things we need to add to our "game" to make it a bit more functional: movement, and a way to close it when we want rather than only letting it last for 5 seconds. Both of these are going to involve key presses, so let's add those in!

In between the screen set up and where we actually paint the cat, let's add a section:

/// HANDLE EVENTS ///
  while (SDL_PollEvent(&event)) {
    switch (event.type) {
      case SDL_KEYDOWN:
        switch (event.key.keysym.sym) {
          case SDLK_ESCAPE: done = 1; break;
          default: break;
        }
      break;
    }
  }

This basically says, look at all the keys that are down, if you see the escape key get pressed, then done equals 1 and then skip to the end of this section.

You will also need to add the following line to the top of your program, right after int main() { in order to access the SDL event handling.

SDL_Event event;

Now, we need to tell the program that it should should skip on down to the end of the entire program when we press escape.

So, surrounding everything but the first few lines of setup, add a while statement:

int main(int argc, char* argv[]) {
  SDL_Event event;
  screen display(128, 120, 640, 480);
  stamp kitt1("kitten1.png");

  while (!done) {
    ... your code ...
  }
}

We're going to have to set up the variable at the very top of our program, in between main() and the SDL_Event line:

int done = 0;

Now, we can clean up our code by removing sleep(5); as well as #include <unistd.h> since we aren't using them any more.

I guess I should mention that you should be compiling and running your program in between each set of changes so that you see the progression as we go along.

So, let's make that kitten move! Add the following line underneath the escape key press:

case SDLK_LEFT: walkleft = 1; break;

This sets the walkleft variable to 1. Add the walkleft variable underneath the done variable:

int walkleft = 0;

All by itself, that doesn't do anything--we need to use that variable in an if statement in order to change the coordinates of our cat.

First, change kitt1.put(100, 100); to:

kitt1.put(k1x, k1y);

now, let's preset our kitten's coordinates to the bottom right of the screen by setting our variables:

int k1x = 110, k1y = 88;

Now all we have to do is create our if statement and place it right before we put the cat to the screen:

/// GAME LOGIC ///
  if (walkleft == 1) {
    k1x = (k1x - 1);
  }

If you run the file now, you'll notice that the cat smears itself across the screen, we need a way to clear the screen each time we paint. So let's add the following right before we "put" our cat to the screen:

display.clearSurface();

Next, we need to get the kitten to stop moving after you let go of the left arrow. We need to add a whole section to our Handle Events section right after the break; for case SDL_KEYDOWN::

case SDL_KEYUP:
        switch (event.key.keysym.sym) {
          case SDLK_LEFT: walkleft = 0; break;
          default: break;
        }
      break;

To get the kitten to wrap around to the other side, add the following tight after we decrement our x position:

if (k1x < -16) { k1x = 128; }

The numbers I chose here make sure that the kitten disappears off the screen before it re-appears on the other side.

You should be able to add all of the code to move the kitten to the right rather than just the left.

Next time we'll flip the kitten, animate it and add another kitten to follow it around!

The Files

You can download everything from part 1 here: kittens-01.tar.gz

* * *