Home

2D graphics

Game engine

As the game engine I have decided to use Godot since it is growing in popularity, it covers all my necessities and has some advantages over other engines:

  • It is easy to work with, since it contains all the tools needed for the graphics.
  • It allows python programming, so I can re-use most of the code of the server.
  • It is highly configurable.
  • It has a really flexible license so I do not have to worry about it regardless of the use I make.

Objective of the graphical design

The goal with the graphics in this game is to design a pleasant graphics that allow the user to easily identify all the important elements of the game while using as less resources as possible. This means that the focus of the graphics is not to make them realistic or beautiful, but useful.

2D UI

By 2D user interface I am refering to all the elements that are displayed without perspective in the game, its positioning, size, design, colour choices etc.

Inspiration

The inspiration for the layout is almost any game I have played. I am not a professional GUI designer so I have tried to be conservative in this section. The ideas behind this is that if I do the same that most of the games do is it harder to do it wrong and that the user will be able to use the knowledge learned in other games in my game. This is the layout I have chosen:

The main inspiration for the graphical elements used are the old Pokemon games. After watching this video about it’s pixel art I thought that following a similar approach to design the GUI should be way faster and look good. Old Pokemon games for the game-boy colour used a 4 colour palette and a tile system. Each tile was a square of 8x8 pixels.

Pokemon Screenshot

My approach

First I need to create a spreadsheet with all the elements that I will need for creating the UI. The tool chosen to do this is Gimp. The colour palette will be in grey scale to keep thing simple and make sure that the bright gap between the colours is consistent. In this example I have used 20%, 40%, 60% and 80% brightness.

Then, using the program called Tiled I create the GUI elements.

The two main advantages of this approach are:

  • Fast iterations: it is easy and fast to create new UI elements.
  • Fast changes: by modifying the tile set all the UI elements get modified, so if I want to try a new colour palette or more rounded borders I just have to make a fast change in the tile-set image.

The next step is choosing the colour palette. To do this I want to use the hue shifting technique. This is something that still has to be done, this is just a temporary example:

Multiple screen resolutions

For a 720p screen resolution each tile has a size of 8x8 pixels (even if it looks like 4x4). If we want to use the interface in a 1440p screen the UI would look too small, but thanks to the choice of using pixel art I can just scale the image by two, having each tile a size of 16x16 pixels, and it will look exactly the same. The same happens with 1080p screens, but this time the image must be scaled 1.5 times, generating tiles of 12x12.