Mobile game development: putting finishing touches on visuals and sound

For my latest mobile game project, I decided to spent more effort on the overall player experience, in particular the visuals and sound. After I worked out the basic gameplay rules and level design, before releasing the game I went back to put some of these finishing touches on.

For the experienced mobile game developer, these types of things are second nature, but for the hobby game developer who is still learning the ropes it can take some time to shift one’s thinking to be player-centric. These refinements also contribute to the game’s overall appearance and can result in more downloads if they are showcased in screenshots and app preview videos. Ultimately, one of the best types of marketing is a game that markets itself with appealing graphics.

In this post I’ll highlight some of the visual improvements I did, followed by some audio and sound ones.

Visual

  1. I used a star field animation rather than a plain background on the screen behind the game board. This took some tweaking to get right, and I ended up using different layers of stars to add depth, with colors and speeds set accordingly. For example, stars that are closer move faster and are brighter looking. The stars also fit well with the ‘meteor’ element which is introduced into the later levels.
  2. I added an animation at the beginning at each level where the tiles fall into place from the left and right sides of the screen.
  3. When a game ends, the tiles fall away off the screen.
  4. Touching and holding the screen causes the tiles in the same column and row to be highlighted up. This has to be done since the actual square being clicked on is usually not visible because the user’s finger covers it. The color of the highlighting is white for valid spaces, and red for invalid ones.
  5. I spent a great deal of time tweaking the animation for when tiles expand or ‘grow’ outwards. I ended up with using a random timing for when tiles appear, and this gives the game a certain chaotic feel I thought was fitting. Also, rather than a tile suddenly appearing, the color grows quickly from the center of the tile.
  6. I added a white square showing the last tile placed by each player, since it’s easy to forget.

Sound/Audio

  1. I added background music which had a retro feel to match with the visuals, and a high-energy feel to make the game more exciting.
  2. I added sounds corresponding to winning or loosing a game.
  3. I added a sound signifying that the user tried to place a tile at an illegal location.
  4. I added a sound for when the tiles fall into place at the beginning of each level.
  5. For each tile appearing as part of the expansion process, I play a chime-like sound that gradually increases pitch.

For the app preview video, I found another high-energy song which I really liked so I used that instead of the game’s actual music. I also shut off the sound effects since I thought they would be distracting. But the visuals are all intact, so if you are interested you can check out the app preview video here.

Visual styles for games

When creating a game, a key element is how you display information to the user visually, and this will have a major influence on implementation times, skills needed, and how easy it is to divide up tasks among multiple developers. In this post I’d like to talk about some of the different categories available, along with each’s pros and cons.

2D

Writing a game that operates in a flat space in two-dimensions is a very common style, and even now I feel it is the most common one, at least for games done by small teams.

With 2D, you have a few different ways to create your assets:

  • Pre-rendered from 3D
  • Hand-drawn (generally requires artistic skill)
  • Drawn in-game (vector, geometrical, etc.)
  • Photographs
  • Mathematically generated

2D games can be further broken down into a few genres depending on the gameplay and constraints of movement. Here are just a few:

  • Static single screen, cannot ‘go’ anywhere (ex: Tetris)
  • Horizontal scroller (ex: Mario)
  • Vertical scroller (conceptually same as the horizontal scroller, though gives a different feel)
  • User is only shown a small piece of a larger map, and can scroll around at will

Pros

  • Spend relatively less time on graphics, compared to 3D
  • Can potentially do all coding in-house without using a third-party engine (though you have that option as well)

Cons

  • Types of games that can be done is limited
  • More and more games are moving to 3D, so it’s easy to look dated with 2D

3D

Writing a game in 3D means that a three-dimensional space is represented, usually with light sources, textures, and a camera of some sort. This is becoming the norm for more and more games, and more and more 3D engines are becoming available for no or low cost.

Pros

  • Nearly unlimited options for game types
  • Can polish graphics to the extent they are photo realistic
  • If done well, can be very intuitive to users

Cons

  • Almost always requires a 3rd-party engine (Unity, etc.), or spending significant time on developing an in-house one
  • 3D-related development and related issues typically take a great deal of time
  • Requires special skills to make textures, models, and animations
  • If done bad, can look even worse than 2D
  • Making intuitive controls can be challenging, depending level of freedom given to the user

Isometric

Isometric is a unique perspective where objects farther away from the camera don’t get smaller. Q*bert was one of the first games with this perspective, and XCom 3 is one of my favorites. You can see a few screenshots of isometric games here.

Isometric can implemented either simple projections so that it is similar to 2D, or can be used by configuring a 3D Engine to appear isometric.

Pros

  • Has a certain ‘nostalgic’ feel to it for those who have been gamers for some time
  • Can look more realistic than 2D, while taking much less effort than 3D

Cons

  • Freedom of camera movement and world construction is limited.

Text only

This is a style for the most part extinct, but was headed by classic games like Zork        in the day.

Pros

  • Spent no time on graphics
  • Prototype very quickly

Cons

  • Severely limits the type of game which can be made
  • Small, niche audience

Sound only

This genre is pretty rare, even more so than text only, but I’ve seen one or two apps on the iOS app store recently that use a combination of high quality sound effects and stereo sound to create a immersive experience.

Pros

  • Spend no time on graphics
  • Can be seen as “creative”

Cons

  • Very limited
  • Requires special skills to properly record sound effects
  • Small audience

Combination styles

The sky is the limit for which styles you mix and match. For example, classic Sierra games used a good mix of 2D graphics with a text-based interface. The Super Smash Brothers series uses 3D but in a mostly 2D way, emulating true 2D fighters like Street Fighter. Some games also use a combination of 2D and 3D, either simultaneously (like showing a 2D map at the same time as traveling through a 3D landscape), or switching between styles in different areas.

Though it’s probably rare, you can even switch styles in the middle of development – starting with a 2D prototype to prove the concept then switching to 3D for final implementation, or falling back to 2D when you realize 3D is not worth the effort for the given gameplay.