How do sprites work?
How do sprites work?
You may be wondering how do icons and indicators get loaded from Ringo. Are they just imported from the SD card? In which format are they?
Well actually, pretty much everything you see on Ringo is clear code.
Backgrounds, simple shapes, and individual pixels are being drawn directly to the screen and everything else that is a little bit more complex is located in one very specific file called sprites.c.
Well actually, pretty much everything you see on Ringo is clear code.
Backgrounds, simple shapes, and individual pixels are being drawn directly to the screen and everything else that is a little bit more complex is located in one very specific file called sprites.c.
Every icon and image is actually converted in pure code that corresponds with RGB565 bitmap, but more on that a little bit later.
At first, it seems that these are just some random hexadecimal values, but actually they are color codes.
RGB565
There any many different ways the colors are defined digitally. Probably the most popular encoding is RGB, which actually means RED, GREEN, and BLUE. Every color is represented by the mix of those three colors. RGB565 uses a total of 16 bits to code one specific color. 5 bits are used for both red and blue values, while 6 bits are used for the green value. All in all, those 16 bits are represented with a 4-digit hexadecimal number since one hex digit is 4 binary digits. For example, code 0xF800 is translated to RGB(128,0,0) which would translate to clean red. This way of coding is much more memory efficient than RGB888, which uses 8 bits of information for each color, and it still allows for a huge array of different colors.
If you want to learn how to do this conversion manually, click here.
Additionally, there are some simple black icons, that are just represented by 0s and 1s. If the pixel should be black it's set to 1 and if not it's set to 0. These types of sprites are much simpler and take up much less memory, so don't use colored ones unless you have to.
All of these sprites that are located in sprites.c are saved in PROGMEM which is internal phone memory. SD card is not necessary for these to work so you can have a clean phone experience even without the SD card. However, internal memory is very limited, so you always have to make sure not to overfill it with unnecessary things.
So how to get all the way from drawing our first pixel to displaying the bitmap on the phone?
Well, these are the necessary steps:
Well, these are the necessary steps:
- Draw the bitmap inside of a graphic editor
- Convert the bitmap to RGB565 code
- Save that code to sprites.c (or one of the files)
- Draw the bitmap on the display
Alternatively, you can also import direct bitmaps and display them without converting them to the code. However, due to the limited internal memory, this can only be done from the SD card. It is the technique that is used to import icons for games and apps that are added additionally.
This is pretty much all you need to know - now let's get to drawing!