You are here

Chapter 08: Create some graphics

This chapter will not be as detailed as the previous ones, as the graphics neither is what I'm good at nor a core topic in this tutorial. But I will try to cover each step at least briefly.

I have chosen to use Gimp to produce the different graphical elements needed for my app.

It can easily be installed with:

$ sudo apt-get install gimp

When this is complete, start Gimp through the standard Ubuntu start menu.

The objects on the Start Menu

Select File -> Create -> Logos -> Starscape in the Gimp menu.

You can now choose font, color and text size. I used 150 as size, more or less randomly.

After four rounds I have the following images:

Next step is to scale down the images, so they fit the screen of the target device. If best practice should be followed, you should actually produce three different versions of each and every image; one for low resolution devices, one for medium and one for high resolution. I intend to take a shortcut this time though, and only produce images for high resolution devices and let the other devices scale down the images themselves. If it doesn't work, I can always get back and produce the other versions afterwards.

The typical resolutions for Android devices are: QVGA (240×320, low density, small screen) WQVGA (240×400, low density, normal screen) FWQVGA (240×432, low density, normal screen) HVGA (320×480, medium density, normal screen) WVGA800 (480×800, high density, normal screen) WVGA854 (480×854 high density, normal screen).

Given this, I will make my four images 480 pixels wide, so they fill the screen width in portrait mode on WVGA devices.

Select Image -> Scale Image for the JustRoids logotype and scale it down to 480 pixels.

Do the same operation for the three buttons, but scale them to 30 percent instead.

Now all four images have the proper proportions and text sizes I wanted them to, but the three buttons are not 480 pixels wide. So we need to fill them out to that size with transparent color to prevent the device to scale them up when displaying them.

For each one of the three buttons, select Image -> Canvas Size, uncheck the chain-link-symbol that locks the Width/Height ratio, set Width to 480, click Center and then Resize:

When all three are padded to 480 pixels, it is time to open up a file browser.

Locate your project folder, for instance: ~/eclipse-workspace/JustRoids.

Open the subfolder "res" (where all project resources shall be located.)

There you will find "drawable-ldpi", "drawable-mdpi" and "drawable-hdpi" for the different resolution types. But I am taking a shortcut here, and only create a common set of graphics for all types, we need to create a new folder named just "drawable".

When this is done, all our four images shall be saved into this new "drawable" folder.

Select File -> Save and name the images:


Select "Merge Visible Layers", "Export" and "Save" for each image.

The spaceship

At this point, I decided to only make preliminary game graphics for the time being, and ask a friend of mine to add a bit more esthetic graphics at later stage. (I think I have to face it - I don't have the talent to produce any good looking graphics. I'm good at other things.)

So, I will do something really quick that will have to do as ship and missile. I want a 100x100 pixel spaceship and a 20x20 pixel missile, so I start with Gimp; File -> Create -> Logo -> Glowing Hot and write the text "V" in a large font size (100):

After that I open up the Layer toolbox, disable the "V-layer" and the "Background-layer", so that only the "glow" is left:

I crop the image, scale it to 100x100 and turn it upside-down:

Save the image as ship_100.png in your "drawable"-folder.


The missile

Exactly in the same manner as the spaceship, but with the text "." and the final size 20x20:

Save it as missile_20.png.

The asteroid

I happened to stumble upon a very suitable asteroid image on the web, on, were it's creator allows anyone to use the his image as you wish.

I download his image, shift it's color slightly into the red spectra, make the background transparent and scale it down to 100x100 pixels:

Save the resulting image as asteroid_100.png.


This will have to do for the moment. I move on to work in Eclipse, and will perhaps get back to the graphics later on.

Theme by Danetsoft and Danang Probo Sayekti inspired by Maksimer