The design phase is important as it’s about the details of your game and the design will give you a plan or roadmap before you start to build it from scratch. Games companies will do proper design documents detailing every aspect of the game. They will have detailed drawings of screens, objects, characters, etc. included.
For our purposes, we can just do a “rough” design of the game, build it, then change the game if we don’t like something.
It’s good to start small, get a working game, then add more levels later on. You can test it with your friends, get feedback, then try to make the game better and more fun to play.
A good idea is to think about where to start and what features you would like for your game. You can do this by a process of brainstorming – i.e. think of anything that comes into your head, write the ideas down and then later on, go through and pick out the good things that you could use from your ideas. You can also draw out your ideas and sketch them on paper. An example below is the brainstorming that I did to create my game.
—– Start of Brainstorming —–
For my first 2D game, I wish to create a space-invaders like game initially just to get the hang of programming a game. I will create a ship of some sort that will hover around the bottom of the screen, maybe let it fly higher later. I will create some alien creatures to shoot and get them to shoot down on me. I will need to figure out sounds and explosions as well. I probably will get the user to use the keyboard to move the spaceship and play the game. I will need to employ a score, and a high score for people to beat, maybe a list of high scorers. I may even get some background music to play if it is not too annoying (something techno maybe?). Depending how motivated I am, I may turn this game more into a Galaga / Galaxian style of game later to get the aliens to move and shoot as well as fly off the screen. Once the user completes a level, I could make things a little harder by speeding things up, introducing new traps, etc.
—–End of brainstorm—-
After your brainstorming session, you are ready to nut out the game design. Note that you come up with a basic design first. Then you can write some code. Afterwards, you will end up changing the game design and adding more details. Then you write more code. And so on. As you can see, game design is pretty much an iterative process (ie. you start with the basics and then you flesh out the details more and more as you get closer to completing your game). Sometimes you may also change your game design because the feature may not be possible to code or it may take too long.
Here is the game design so far (not in any particular order):
- Name of your game
- Design of starting screen
- Design of configuration screen (keyboard assignments, etc)
- A storyline for the game to set it in context
- Design of leaderboard screen to show high scores and save to disk
- Artwork for ship, bullets, aliens, explosions
- Special sounds for shit shooting, alien shooting, alien movement
- Background music while user is playing
- Design of end screen which will include credits
- Program to install the game to the user’s hard disk
- Design of different levels and degree of difficulty
- Scoring – how many points does the user get for shooting the aliens?
- How many ships does the user get before game is over?
- What fonts to use for the text on the screen?
- What background screen to use?
- What screen resolution to use?
- Title screen (before configuration)
- Keys that the player uses to play
- How do the aliens and player ship move?
- Add any special effects?
As you can see, there is a lot of work involved just to make a simple space invaders type game.
I will call it Star Invaders.
Use your favourite 2D paint program to create your graphics. Some examples include Microsoft Paint, Adobe Photoshop, and Gimp (very similar to Photoshop, but free).
You draw everything from scratch in your 2D paint program, use a tablet or pen device to draw electronically, or even draw on paper, then scan it and edit using your paint program.
Below I will detail how I did my graphics for my game. It’s only rough but can be improved later.
Creating a Logo screen
Most games contain a logo screen where the game creator displays their company name and / or logo. Sometimes this is given as an animated logo / image with sound instead of a graphics screen.
I decided to call my logo “RuzzGames” and used Photoshop to create it. It is shown below:
In order to create the above logo screen, I used one of my oil paintings that I created (yes I learnt how to oil paint for about 3 years – found it useful to learn about art and colours). It is the beach scene below and I did it on canvas. Then I used a scanner to import it into the computer – you may notice lines towards the right hand side as the painting did not fit on an A4 scanner – hence had to scan the right hand bit separately.
I then opened my scanned file in Photoshop, and used some of the special effects to distort the painting and create the “grey clouds”. I used a font for the name which has some 3D shadow effects on it. When creating your logo, just be creative and play with the software.
Creating a Menu screen
In our game design, we mentioned that the aim of the game is for the player to shoot some aliens using their spaceship. The menu screen emphasises this and tells the play which keys to use to play the game and how the score is calculated. I created this screen using the existing graphics of the ships and aliens, then putting it together into one graphics image using Photoshop.
Tip: Photoshop (and also Gimp) has a facility to create layers. You can put bits of graphics or text into these layers and it makes it easier to manipulate the whole image. Then make sure you save the file as a Photoshop file to keep the layers in case you need to do some changes later. Finally do a Save As… and save the file as a JPEG (.jpg) file – this deletes all layers, but also compresses the file so that it is not too big for your game (particularly if you have a large amount of graphics).
Creating the game assets – aliens, ship and bullets
Since we are creating a space invaders type game, we need to create a spaceship, some aliens, bullets, etc. I used Microsoft Paint initially and then used Photoshop to touch up the images. I designed the graphics for 640 x 480 resolution, but you can create them for other resolutions if you wish (ie. make them larger). That is why the sprites appear to be very small as many users now use 1024 X 768 or higher as a default resolution on their monitor. They will appear larger if you change your resolution to 640 x 480.
As you will see later when you are actually creating your game, once you have created your graphics, you might need to scale them or create a set of different sizes. If you create your images quite large, you can then always scale it down. If you go small first, your images may be pixelated or blurry if you then scale it up. Vector graphics won’t have this issue, just bitmaps (image files like jpg, png, etc.)
Space Ship and bullet:
Exploding space ship (when hit by an alien bullet):
Aliens and alien bullet:
Note: the image with the yellow X and blue circle is an old DirectX logo from Microsoft – I may not be able to use this in my game, so I will replace it if that is the case.
Note on Image / Artwork Copyright
I have tried to make sure that I create all the graphics / artwork myself so that I can hold the copyright and hence able to sell my game if I wish. You could also use royalty free images as well, but you need to make sure you read the terms and conditions of the licence. Don’t forget if you just go on the Internet to find images, they are usually copyright, and you wouldn’t be able to use them for your game (unless you are a student and building your game for educational purposes only and don’t wish to sell it). Each country has a different copyright law, so you may need to check this.
If you use royalty free images, don’t forget to acknowledge the original creator in your game.
If you look at the screen below, the user (or gamer) will move the ship left and right and the aliens will move left and right across the screen. This was my initial design and you can get a score for each alien hit – the menu screen has the points for each alien.
The screen will display the player’s score, a high score (that could be stored on disk) and the game title (it will change to Star Invaders or I could remove it completely).
The screen also has some dots acting as stars as we are in space. We could decide to just keep them at the same spots, or we could make them randomly appear and disappear at different spots on the screen.
Once we have a functional basic game, we can then enhance it as follows:
- adding more aliens
- making the aliens move more randomly rather than left to right
- making it possible for the player to move the ship up and down as well
- with the functions above, maybe make level one a basic level, then add each feature as the player gets to another level – this could make the player needing to “unlock” a feature by being successful after a set number of levels.
This part is how the user (or gamer) interacts with the game. For our design, we can list the types of input devices to support.
Keys used in this game (keyboard)
This is the same as in the menu screen:
- P to play the game (from the menu)
- left arrow to move left
- right arrow to move right
- Spacebar to fire
- ESC to quit (also used in the menu section as well as the game section)
- Many games use the WASD key combo, so we could also use A to move left and D to move right
Think about what gamepad you wish to support (if any).
For example, I will use the Xbox controller for an Xbox version. I will use the left trigger stick to move the ship and the right trigger button to fire my bullets.
There are two options:
- get the user to drag somewhere to the right of the ship to move it right or drag somewhere to the left of the screen to move the ship to the left. They could tap the screen to shoot.
- provide buttons for the user to press on the screen to move the ship left, right and to shoot
Sound Effects and Music
I have created the following items for the game:
- background music (whilst playing the game)
- sound of alien dropping bullets
- sound of ship firing bullets
- sound of ship’s bullet hitting an alien
- sound of ship’s explosion when the alien’s bullet hits the ship
You can download them below:
I created the sounds by using a synthesiser ( Korg Radius ) and recording the sounds using Audacity (open source software). If you have software such as Garage Band, you could use the software synthesiser instead to create the sounds.
I created the background music using Sony Acid software and a synthesiser with a keyboard. It’s up to you which software you use. Garage Band will do or if you prefer, you can use any other DAW software. I use FL Studio now as my preferred DAW.
See the following image of the Sony Acid software below. It’s an old version, but you can check out the latest version here. It’s owned by Magix now.