How to display a sprite and make animations?


I’m new to Pokitto and getting familiar with the API right now.

What’s the best way to display a sprite on the screen? I tried to convert an image with the img2pok.exe tool (4 bit, 16 colors) to an uint8_t array, but the picture is displayed on the Pokitto in strange colors. I used the display.drawBitmap function from the API.

And how to make sprite animations?

Thanks in advance!

Although the Pokitto’s screen is full 8bpp RGB, most of the Pokitto’s screen modes are paletted for speed reasons.

The reason your image isn’t displayed in the right colours is most likely that you designed it with a palette that’s different to the default palette.

@Pharap Where do I find the default palette and how to load a custom one?

For the colour issue

mygame.display.load565Palette(sprite_pal); //load the palette for the image

img2pok gives you a palette as well as an image. Just change sprite_pal to whatever your palette is called.

example -

const uint16_t sprite_pal[] = { 0,65535,33808,2047,50712,31,1040,65504,63519,63488,33792,32784,16,32768, };

You can only use 1 palette at a time in almost all screen modes. If your colours are wrong, then either your palette isn’t loaded, or your image used a different palette.


There are several built in palettes, all of which can be found defined here:

Though don’t be fooled by the names, it seems paletteCGA is actually the default palette.

@spinal just covered the palette loading so that saves me a job :P.

If in doubt, check the docs.


Thanks! :slight_smile:

How to make a part of a bitmap transparent?

You will need to know the colour number of your transparent part after it’s converted using img2pok, then use mygame.display.setInvisibleColor(x); to set it. Once done, that will be your transparent colour.

1 Like

if i recall @zer0 is on a mac
so you going to have to use this terminal application instead of img2pok (wich is only for windows)

1 Like

actually img2pok can easily run on linux too

sudo apt-get install mono-runtime
sudo apt-get install libmono-system-windows-forms4.0-cil

I want to make a simple test project, where I have a background and a character which moves around. So I have a image of the background, the character in different positions. But I heard I can only load one pallet at the same time, so how to do that with various images? An in the picture above: Can someone explain me what the numbers of the pallet and the numbers of the character itself represent? How does the program come for example from pink (245, 0, 87) to 61450? And what mean the numbers from the character(21, 17, 0, 0…)?

The palette is converted from RGB to pokitto format that should be 565 (5 bit for Red 6 for Green and 5 for Blue). If you ask why, Green is the color our eyes sense better and so the display is tailored to offer a better feel in that range.
21 and 17 is the size of the image (Width and Height) the following number are the indexes of the color used for the pixels.
You should use even sizes or you’ll get glitches for the way the data is stored.
My suggest is to build a palette with all the colors you want to use and then convert the images you need.
Sorry for the short answer. Maybe someone can integrate better.

If source image have transparent color (loading from PNG for example) the transparent color is mapped to the first color in palette. Then you have to setInvisibleColor(0);


Why glitches happens when the size of an image is not even?

because odd numbers are evil (except 1) :smile:

But seriously, at the moment it is just how pokitto works. There is a bug but i dont know if that is going to be solved.


Because if the images are restricted to certain sizes then the code for displaying them can be made faster.

Allowing odd-sized images would require the drawing code to do more work and thus run slower.

So it’s not that it can’t be done, it’s just that there’s a penalty for doing so, and for the moment the consensus is that it’s better to have the restriction. In a future version of the API there might be a drawOddSizedImage function with a warning about using odd sized images being slower, but for now that’s how things are.

1 Like