Drawing
Using GIMP
Now, let's open up GIMP and start drawing!
Now, this is how the main screen looks in GIMP. Just like in most advanced editors, there are a lot of options, most of which we are not going to use, so don't worry if you're a complete beginner at this.
Sprites that we're going to draw are coming in two sizes: 24x26 pixels and 24x24 pixels. The bigger ones are dimensions of the ones in the main menu, while the smaller ones are located in various apps throughout the phone. There are many more different sprite sizes in Ringo firmware, but these are most common, so we're going to draw those.
Starting a new drawing
Before starting a new project, go to Edit -> Preferences. Since we're going to draw pixel-perfect images, we're going to set up a grid. This step is not necessary but it will help you a lot with precision drawing.
Then go to 'Appearance' and check both 'Show grid' boxes.
Click 'OK' and start the drawing.
Color picker is located right below the tools and that's where you'll be able to pick your colors. Pretty simple, pretty easy.
It is not a masterpiece by any means, but it will serve its purpose.
Before saving this icon, it would be good to locate your Snake app folder on the card and rename the 'icon.bmp' to 'icon2.bmp'.
Now go to File -> Export and locate your SD card in the explorer.
Go to the 'Snake' folder and save this file as 'icon.bmp'.
It's also important to set the image to 'Windows BMP image' so that it has a .bmp extension.
In the previous chapter, there was a snippet of code where you could see how are these app icons being drawn.
Here it is once again.
Now, let's see how to convert these images to code.
Select 'Default grid' and set both horizontal and vertical spacing to 1,00 pixels.
Then go to 'Appearance' and check both 'Show grid' boxes.
Click 'OK' and start a new drawing by going to File -> New...
The only thing we need to change here is setting our desired size. For this first example, set the size to 24x26 pixels.
Click 'OK' and start the drawing.
Drawing
Now there are two tools that we are going to use the most. You can find all of the common tools in the upper left corner, just below the toolbar.
Bucket fill tool and pencil tool are located in the middle of the second row.
Bucket tool will help us fill bigger parts of the canvas with one color, while the pencil will color only one pixel at the time.
Bucket tool will help us fill bigger parts of the canvas with one color, while the pencil will color only one pixel at the time.
Color picker is located right below the tools and that's where you'll be able to pick your colors. Pretty simple, pretty easy.
These are pretty much all of the tools you are going to use - so go and make a cool picture!
What we've made in this little tutorial is a replacement icon for the Snake app.
What we've made in this little tutorial is a replacement icon for the Snake app.
It is not a masterpiece by any means, but it will serve its purpose.
Exporting the image to Ringo
Now that our picture is drawn, it's time to export it.
For this step, it's time to insert the SD card from your Ringo into your computer.
Before saving this icon, it would be good to locate your Snake app folder on the card and rename the 'icon.bmp' to 'icon2.bmp'.
Now go to File -> Export and locate your SD card in the explorer.
Go to the 'Snake' folder and save this file as 'icon.bmp'.
It's also important to set the image to 'Windows BMP image' so that it has a .bmp extension.
When you finish the export, eject the SD card from your computer and put it back in your phone.
Restart the phone and that's it - your Snake app just got a new icon!
In the previous chapter, there was a snippet of code where you could see how are these app icons being drawn.
Here it is once again.
We see that we've drawn the bitmap called 'icon.bmp' that is located in the app folder. That process is being repeated for every app that is located on the SD card, which is for every game. Also, these icons are actually being shown in a doubled resolution.
Index 2 at the end of the 182nd row means that the size of the icon is doubled. That's why the icon is taking up 48x52 pixels on your Ringo screen.
Now, let's see how to convert these images to code.