alexa rank cert Create A 2D Game - Part 3: Graphics & Audio | OnlineDesignTeacher
WHAT'S NEW?
Loading...

Most Popular Topics

Create A 2D Game - Part 3: Graphics & Audio

A character sprite sheet for a 2D game
A character sprite sheet for a 2D game

Once you have completed all the previous steps in the 2D game development process you should be armed with a series of drawings, sketches, plans and notes on exactly what you need for your 2D game - now all you have to do is make them!

But even before then there is one final decision to be made, what style is your game going to be...? You should know what genre the game is and how it will work but there are a variety of graphic styles in which a game can be presented and it is important to  choose a style appropriate for your game. With that said, let's look at our options.

Game Graphics Styles:

The detail of your graphics can range from stick-man drawings to photo realistic or anywhere in between. A selection of possible graphic styles is shown below.

Game Graphics Styles

The list below documents some game using each of the graphics styles...
  • Ultra Basic Graphics - such as stick-man character game - stick-man.
  • Hand Drawn Graphics - Harold, Shank, Closure, Castle Crashers etc.
  • Cartoon Style Graphics - Angry Birds, Cut The Rope, Mario, Sonic etc.
  • Geometric Graphics - Pong, Tron, Pacman, Tetris, Bubble etc.
  • Quirky Graphics - Little Big World, Wego, Rhythm Heaven Fever etc.
  • Anime Graphics - Street Fighter, Pokemon, Suikoden, Tales Series etc.
  • Photo Realistic Graphics - LA Noire, Beyond Two Souls, GTA, Heavy Rain etc.
Can you think of any more? What category would your own games fall into?

Graphics Creation & Set-up:

Once you have decided on the style of graphics that you want for your game the next thing is to create them! If you need help with creating your 2D game graphics see our series of Photoshop Tutorials for guidance. The tutorial on how to use the pen tools are especially useful for creating suitable game graphics. If you do not have Photoshop then try the online photo and image editor Pixlr, it is an excellent and free alternative to Photoshop and has most of the same tools so you can also use it to follow the Photoshop tutorials we provide.

Create Graphics In Scratch...

When creating graphics it is important to know the best file size, file type and colour system to set them up in. As mentioned previously for this series of tutorials we will are recommending the freeware game engine Scratch as the best place to create your first 2D game. Scratch has a large library of graphics to choose from as well as an in built graphics editor which allows the creation of both bitmap and vector graphics. The interactive guide below (made using Scratch) explains how best to make graphics for your 2D game in Scratch.


Create Graphics In Photoshop or Pixlr...

If you still want to use a separate software such as Photoshop or an online editor such as Pixlr to make and import your own graphics to Scratch it is important to know uses a game screen size of 480 x 360 so all graphics should be created with this ratio in mind. For side scrolling, vertical scrolling or top down games graphics can be made in multiples of the 480 x 360 dimensions and then spit into sections before being imported into the game. See the example below.

The level graphics for a 2d side scroller game
The level graphics for a 2d side scroller game

Tip: Like with the character sprite sheet at the top of the page, some game objects will require multiple graphics in order to achieve the illusion of movement.

As games are made for display on screen they should be set up using the RGB (Red Green Blue) Colour System as opposed to the CMYK (Cyan Magenta Yellow Black) Colour System which is for printed graphics. In terms of file types, scratch will accept all the major file types so you need to consider which file type is best suited to each individual graphic. For example .JPG files are best for photographs while .GIF files are best for line drawings.

To help get your started here are 4 great websites where you can source copyright free images/graphics to use in your 2d game.


Game Audio:

The game audio editor in Scratch
The game audio editor in Scratch

In gaming the Audio Engineer creates the soundtrack for a game. This might include music; sound effects to support the game action, such as gunshots or explosions; character voices and other expressions; spoken instructions; and ambient effects, such as crowd noise, vehicles or rain. The soundtrack helps to create a more immersive experience for the player by reinforcing the mood of the game. It can also enhance game play by affecting the tempo and adding emotional depth.

The importance of audio in games should not be underestimated. Background music will set the atmosphere in a game, while in game sound effects can shock or surprise the player, make us laugh or giggle, guide us to as whether an object is useful or harmful, to confirm an action has been processed, warn us of threats or hazards or just add to the in game experience.

Working to a creative brief, the Audio Engineer produces a sound design for the game and, when this has been agreed, realises it. This might involve the composing, scoring and recording of music. They are responsible for sourcing any sound effects that are needed, improving or creating them where necessary. These might be real or imaginary sounds, depending on the type of game. The Audio Engineer then edits, mixes, and masters the music and sounds to produce the soundtrack for the finished game.

Scratch allows for the recording of sounds through a microphone directly into the game and it also has a collection of audio songs and sound effects in it's media library but if what you need cannot be easily recorded or if something suitable in not available in the audio library then try one of the following audio download websites...


Next Up

Once you have created and/or gathered all the graphics and audio files that you need it is time to get programming your 2d game.