The visual graphics are a key part of any game. They are what set the scene, set the tone of the game, and determine whether a game is visually appealing. The level of detail varies greatly between games, from the original pong games which had a simple block bat and ball to modern commercial games which may involve realistic video footage.
In an ideal world, all developers would also be great artists or have an artist that can create the graphics for them. That is not always the case, so this chapter looks at some simple ways of creating graphics suitable for use in games. Even if you have a professional artist, some programmers may create basic images known as programmer art, which is used as a place holder to demonstrate the game prior to the professional artwork being created.
To keep it simple, this book will mainly cover simple pixel art-based characters and simple 2D images. These graphics would be suitable for that retro 1980s feel or consistent with the style used in many indie games. It will also look at some other tools that are useful if you want to create some more complex 2D or 3D graphics.
The level of detail that you include in a game will depend upon your own artistic talent (or that of your graphic designer if part of a multi-person team) and the amount of time devoted to creating the graphics. Even if you are not particularly artistic when it comes to drawings, you can still create some simple cartoon style images. I created the graphics for all the games in this book; while they are unlikely to win any prizes for realism, they show that you can create some simple graphics without needing to be a professional artist.
Creating a Theme
Before you start creating your graphics, you should decide on the style and theme of your graphics. When starting out programming, it is often a good idea to start off with simple images as those work well in the simple Actor objects that Pygame Zero uses. These will also need much less processing power compared to the lifelike characters you see in commercial AAA games. This doesn’t mean your characters need to be lifeless as you can still give the characters their own style and personality.
What kind of environment is the game based in? Games could be based on land, on the sea, or even in space. Each location has its own challenges and advantages regarding the graphics.
Will the graphics be realistic? Graphics can be created that create realism or that can take you to a fantasy world.
Will the game be family friendly? If you want the game to be suitable for young children, then you should avoid violence, bad language, and other inappropriate content. If the game does include some level of violence or destruction, then comic-style violence is more suitable for children than if you use lifelike images. You may consider having a family-friendly mode with more appropriate graphics for younger players.
Can the characters be customized? If the main character is a person, then players may like to choose a character that they can associate with. This may be through providing a different gender, color of skin, hair color, or choice in clothes. If instead the character is an animal or fantasy creature, then maybe there could be an option for different animals or creatures. This can also apply for inanimate objects, in the case of a vehicle, a different make, model, or color.
Having decided on the theme, you can create images for the background and the characters in the game.
File Formats
There are different file formats that can be used for images. The two most common are bitmap and vector formats which will be considered here.
Bitmap Images
The images that have been used so far have all been bitmap images. Bitmap images (also known as raster images) are created as individual pixels which are the smallest individual block of the image. The bitmap defines the color of each of the pixels making up the image.
Simple bitmap image
This is a trivial image. Bitmap images usually consist of a lot more pixels, and so storing the color of each pixel can result in very large file sizes. For example, the background image used in the compass game is 800 x 600 pixels, which is 480,000 pixels. If 3 bytes are used to represent the color (which is typical), then that image would be about 1.4 MB in size. You could prove this yourself by converting the image to a Windows Bitmap (.bmp) image format. To avoid such large file sizes, image formats often support compression.
The two most popular image formats that are used in Pygame Zero are PNG (.png) and JPEG (.jpg). The PNG (Portable Network Graphics) format supports lossless compression. This reduces the file size but keeps all the data in the image intact. The JPEG format (created by Joint Photographic Experts Group) uses lossy compression, which removes some of the information in the file while making it look as close as possible to the original. The lossy compression often makes the files smaller but can result in loss of quality.
JPEG files are good for large images where compression is a priority. This makes them a useful format for photos.
PNG has good compression with no loss of quality and has support for transparency, so it is usually a good choice for game programming.
Vector Images
An alternative to a bitmap image is a vector image. Instead of storing details of each of the pixels, a vector image stores instructions on how to create the image from shapes. In the case of the image previously used in Figure 5-1, the file format would instead describe how to create the image using a rectangle.
Example of a try except exception handling
Pseudo-code is used to describe how a program works. It cannot be run directly in any programming language as it doesn’t have the correct vocabulary or syntax that a normal programming language needs. It is useful for explaining how the code will work.
The shapes can be edited and moved without losing any information where overlapping other shapes.
When zooming in on a shape, it continues to be crisp, whereas a bitmap becomes pixelated.
Usually the file size is smaller.
A popular format for vector images is SVG (Scalable Vector Graphics) which is a generic file format. There are lots of other vector file formats, which are normally associated with a particular editing application (such as ODG which is used in LibreOffice Draw).
Pygame Zero is not able to display these images in the same way that it can with bitmap images. Vector images have to be converted to bitmap images when designing the game, converted using code that can understand the vector image format, or to have code that instructs Pygame Zero to create the images using its built-in shape tools. Each of these methods will be covered in this or the next two chapters.
Useful Tools
There are many tools that can be used to design computer graphics. The examples shown here are all freely available and will work on the Raspberry Pi. For some of these, an example of how to create an image is shown.
LibreOffice Draw
Draw is one of the applications included in the LibreOffice Office suite. It is included by default in the Raspberry Pi NOOBs image and available for other operating systems from the web site www.libreoffice.org/.
Draw is useful for creating 2D vector images, which can then be converted into bitmap images for using in Pygame Zero.
Person sprite image created in LibreOffice Draw
Simple shape drawing tools in LibreOffice Draw
After designing the sprite, it can be exported to a PNG file using the export option. If you tick the “selection” checkbox, then it will just export the selected objects. That can be useful if you create multiple images in the same document.
Inkscape
Car image created in Inkscape
Inkscape is a bit harder to use than LibreOffice Draw, but more powerful. If you are not already familiar with a vector drawing program, then you may like to try LibreOffice Draw first and then use Inkscape when ready to move to the next level. An example of how it works differently is that LibreOffice Draw has a polygon tool for creating irregular polygons, whereas in Inkscape this is achieved by using the pencil tool. To create a polygon, draw the first line, then start each subsequent line from the end of the previous line. When complete, clicking the beginning of the first line will result in a polygon which you can fill with color.
The Inkscape files are saved directly as SVG files which makes them useful for sharing with other applications and the images can be exported as PNG bitmap files for use in Pygame Zero.
GIMP
On other operating systems, you can download a version at www.gimp.org. There are many ways that GIMP can be used for creating graphics. Two examples are shown here, one creating a background image from a drawing or photo and the other showing how it can be used to create simple pixel art suitable for sprites.
Creating a Computer Image from a Drawing or Photo
GIMP with photo of a castle
You will see that there is a transparent area at the top of the image (checkerboard pattern). This is due to the image being resized to achieve the desired aspect ratio.
GIMP layer dialog with new layer
GIMP tools dialog showing free select and fill tools
Selection of castle outline in GIMP
Exported image of the castle
This process is repeated until the appropriate level of detail is achieved. I’ve added a bridge, the road, and a darker green for the far side of the dry moat.
It is also possible to draw onto the image using a pencil or paintbrush. I’ve used the paintbrush tool to add some clouds. These have been drawn using a soft brush on two layers with partial transparency to give it a softer appearance.
Creating a Pixel Art Sprite
An alternative is to create the image completely from scratch using your own imagination. In this example, a simple pixel art sprite of a spacecraft. Start by creating a new image. Set the size to the appropriate level of detail (in this example 32 x 32 pixels), and under the more options dialog, choose the background as transparency.
Creating a pixel art sprite in GIMP
Creating a pixel art sprite in GIMP with a line of symmetry
Pixel art spacecraft
Blender
The tools discussed so far are designed for 2D images. Blender is a 3D design tool. This can be useful for creating 3D games, but that is beyond the scope of this book; instead, I will show an example of how it can be used to create a more 3D appearance by applying lighting and shadows to a 3D model and then exporting it as a 2D image.
If running on a Raspberry Pi, then I suggest getting a Raspberry Pi 4 with 4GB of memory; it will run on older versions but is very slow and barely usable. For other operating systems, the program can be downloaded from www.blender.org.
Blender is an incredibly powerful tool, but it can be difficult to learn. It has tools all around the screen with multiple pull-down menus in different places, and the mouse operations work differently to the 2D tools. As a result, it can be very confusing for new users.
If you do learn it, then it can be useful. You may want to start by working through some short tutorials looking at certain aspects rather than trying to take it all in during one project.
Creating a 3D object is beyond the scope of this book, but it may be useful to understand how you can use objects created in Blender in your games. The following steps show how you can export a Blender model as a 2D image suitable for use in a game.
Blender with 3D model of a missile
Blender with Save As Image menu option
Create Using Code
The tools so far have looked at ways of creating images in a tool that are then exported for use in Pygame Zero. An alternative is to generate the image in Pygame Zero using code. This can make use of the shape drawing tools within Pygame Zero.
Screenshot of tank game created using code
The graphics in this game are basic, but more detail could be added to make them more realistic.
Other Sources
If you don’t want to create your own images, then you could get some graphics created by someone else. You will need to check the licenses for the graphics allowing you to use them in your game. Some licenses may put restrictions on how the graphics can be used, modified, and distributed. They may also impose different licenses depending upon whether your game is monetized.
Open Game Art – https://opengameart.org/
Kenny – https://kenney.nl/
Pixabay – https://pixabay.com/
Itch.io free game assets – https://itch.io/game-assets/free
This is not an exhaustive list. A search using an Internet search engine will list other sites with graphics suitable for use in your own games.
Summary
This has shown some common tools that can be used for creating images for use in computer game programming. It is beyond the scope of this book to go into details of how they are used, but it has included an overview of some of the techniques that you may want to use when creating graphics. It has also included a few suggestions of sites that may have suitable graphics that can be used.
The next chapter will look at how colors are used in Pygame Zero and some techniques for using colors in game programming.