iPhone Game Blueprints

By Igor Uduslivii
  • Instant online access to over 7,500+ books and videos
  • Constantly updated with 100+ new titles each month
  • Breadth and depth in over 1,000+ technologies
  1. Starting the Game

About this book

Designing and selling games on the iOS platform has become a phenomenon ever since the introduction of the App Store. With mobile gaming taking the World by storm, users are indulging in all different types of games. iPhone Game Blueprints is a hands on guide to both inspire and help developers, graphic designers, and game enthusiasts to create their own games for iOS devices.

Taking a selection of iPhone game "styles" we will learn how to set the foundation and essential functionality for each game. Including thorough explanations of popular games such as puzzles, arcades, and adventures, as well as useful theoretical and technical concepts. iPhone Game Blueprints is your complete guide to creating great iPhone games, from a simple gesture game to a classic shoot 'em up.

iPhone Game Blueprints guides you through the universe of mobile games, starting with the overall information about game ideas, ergonomic aspects, and much more. Then it switches to a description of each particular game type, presenting ready-to-use ideas and applications.

This book will take you through a selection of iPhone game styles and show how to create the foundation and essential functionality for a game of that genre.The examples in this book are only the beginning.

Including a deluge of practical tips, focusing on the best approach to game design, not forgetting to mention the pitfalls. iPhone Game Blueprints will give you the blueprints of several mobile game's essentials cores. Whether you're just getting started with gaming, or want to try a whole different genre of game, these blueprints are everything you need.

Publication date:
December 2013
Publisher
Packt
Pages
358
ISBN
9781849690263

 

Chapter 1. Starting the Game

We live in an amazing time. Not just groups of professionals working in large companies but even ordinary people have access to technical tools that give them the ability to create many wonderful things: they can shoot movies, record sounds, compose music, draw pictures, create stories and poetry, and communicate with people all over the world using procurable devices. The only thing that is needed is an idea and some aspiration. Games are not an exception; in fact, they are the quintessence of all creative intentions: they are stories told with the help of various interactive tools, graphics, music, and animation. And one of those could be your story.

 

Telling a story


The following figure shows the underlying mechanics of how a game tells a story:

The preceding figure has the following three important parts:

  • Synopsis : This is the game idea. It conveys the essence of the game.

  • Plot: It is the description of the protagonist, their goals, conflicts, weapons, prizes, enemies, game settings, and many other things.

  • Storyline: It decides the game levels.

A game is not a novel or a play, so the story is not the most important part of it. But the game idea or synopsis is. Your game should have clear and obvious principles that can be described in a few words. This is the keystone of your game; it must be solid and constant.

Try to start with something simple; you are not a big studio about to produce a new AAA title. Be modest. Use simple rules, graphics, and media.

It is important to remember that a game idea is not always unique. There are tons of games with identical principles and rules: to match-three elements in a row, to save a princess, to defend a base, to shoot enemies, and to win a race (the only exceptions are unique titles with revolutionary new principles of gameplay, but such games appear once in a blue moon as it is very hard to think a new type of reliable and addictive gameplay). To stand out from the crowd, the game needs a plot (or semantic ornamentation ). The volume of information it conveys can differ; games with a complex gameplay (packed with adventure and RPG components) feature screenplays made of hundreds of pages and thousands of lines of text. This includes the main storyline, various side quests, alternative variants of the same events, subplots, and so on. There is an interesting list on gaming at http://gaming.wikia.com/wiki/List_of_longest_video_game_scripts, showing descriptions of some of the longest scripts for modern video games; for instance, Fallout 3 from Bethesda Game Studios has a screenplay made up of 40, 000 lines. But some visual novel games have scripts with more than 1,00,000 lines. This is more than in the movie industry (a traditional film screenplay has about 120 pages (one page per minute) and around 50 to 55 lines of text per page, since the overall number of lines is something close to 6,500). This is not only because the games are longer, but also because they are non-linear. At the same time, simple games, which are reasonable to begin a game developer career with, may have very short plots, barely longer than the synopsis. For instance, it can describe a game setting and some minor notations: an underwater bubble match-three game with a few unique bonus elements. Such type of plot is perfect for small puzzle games because the game's mechanics are clear enough that you only need to describe its graphics—the look and feel.

Stronger efforts on the plot are needed when the figure of the protagonist (the main character) is introduced. In this case, some classic dramatic principles are turned on. The player needs to know something about the character: his motivation, goals, and strong and weak points. Maybe the character's past is unclear (this is a good way to create intrigue), but he should have a recognizable pattern of behavior and some principles and characteristics; in other words, he should have some spirit. In this case, the player would feel as if he/she is with the protagonist. A well-written character needs an appropriate framework in the form of a good story that should be interesting to follow. It is important to note that any genre can have a deep and exciting plot. One of the wonderful examples of great storytelling is a critically acclaimed indie game, Braid (http://braid-game.com/), designed by Jonathan Blow. It features an interesting plot, gameplay and story-driven design as a platformer game with puzzle elements.

It is good to demonstrate the evolution of narrative species in the game. The very first level must start with the synopsis, that is, it should demonstrate the keystone rule of the game: the player should make a single and simple action in one step. Then he/she should be able to see some plot elements, for instance, some bonuses or should meet somebody. And after that, he/she should face the story: game shows him/her the next level.

There is an interesting indie-game project called Storyteller (http://www.storyteller-game.com). It is a puzzle game with a unique main concept: a player needs to create a specific story. He has some plot elements—characters, situations, secrets, and state of mind—and the player's objective is to combine generating dramatic conflicts and climaxes and creating the story. An amazing idea, isn't it? The plot of the game is to create a plot:

Your main enemy is monotony—players don't like routine repetition of identical elements over and over again. Therefore, there must be progress of game elements, either evolutional or revolutionary. For example, the game should become faster, puzzles should become harder, opponents should get more strength, and so on. This is an extensive way to solve the problem. But the more intensive it becomes, the more attractive it is.

The game should be changed more widely, by introducing new settings, props, characters, enemies, and obstacles. The main goal is to not let the player get bored. If he gets the hang of a specific tool, tactic, or weapon, turning the game process into a mechanical routine, the game should change the conditions a little bit to force the player to find some new ways. You should explore the range of abilities your game elements have and use them creatively, surprising the player very often. What will happen if we begin to use the element of the puzzle a bit differently? What will happen if gravity were suddenly turned off? Will the weapon be effective under water? How will element A interact with element B? It is great when a game item has more than one scope. The story becomes more flexible and pleasantly unexpected. People like to be pleasantly surprised.

But try to avoid bad examples of the unexpected things: various forms of deus ex machina. Each twist in the story should be natural and slightly predictable in various premises in the plot. Look at the movies; directors always show a specific object in advance before it is used in a corresponding scene. For example, in the Alfred Hitchcock classic, North by Northwest (1959), the main character played by brilliant Cary Grant first sees an airplane far afield, and then he almost forgets about it. Suddenly, the airplane begins to attack. So, the scheme is simple: drop a hint and only after that initiate some action. It is very important to convince players that a game world is solid, every tiny detail matters, and links between elements are well thought out and designed. A good game is a complex organization of dozens of components working together. They don't create a single event, but a sequence of well-connected situations letting players experience some specific emotions. This is an attempt to create a model of life rather than a calculator with few binary triggers. As it is very important to try to think globally while working with a script, there should be an evolution of events and obvious logical connections between the stages of a story.

A vital issue is realism in games. There is a lot of debate about this by now, mainly because power capacities of CPUs and video chips have increased, and as a result, many more variables and factors can be introduced in gameplay. The question is not only about the graphics, rather about other components of virtual worlds. For instance, 3D objects might have not only an external shell but some naturalistic structure inside; by breaking them into pieces, players might expose some new features of internal materials.

Another example is NPCs, whose psychology and behavior can be more realistic or a player's avatar which has all the features of a human body including weaknesses. The truth is simple; a portion of realism is needed only if it helps to improve gameplay, if it can create some interesting situations, and add some specific experience. In other cases, it may turn a game into a series of boring procedures and events players run away from in real life. In casual and arcade games, an action should not become more complex only because it would become more realistic (simulators are another case).

Video games are more about entertainment than documentary. Since the degree of realism is under the control of game designers, they decide what proportion to choose for better playability. Such a characteristic is not unique for video games only; most of the arts manage reality very freely. Painting, sculpture, music, literature, and movies are not realistic, even if they pretend to be; it is always an interpretation whose main objective is better expression of some authors' intents. Elements of reality are always being changed (within reasonable limits) if it would help to describe or display some things better. Such practice is known as artistic license (also known as poetic license, dramatic license, and so forth). Moreover, the audience is already familiar with and prepared for such tricks, as if they are watching the performance of a magician. Everybody knows that all his actions are tricks and he is not a real mage; they simply want to see a show. Ignoring some simplification and distortion of realistic rules in favor of more attractive quality of a piece of art is known as willing suspension of disbelief or in short, suspension of disbelief . Because of it, players overlook a lot of roughness on screen menu, such as avatars who are capable of carrying tons of weapons in their pockets, cars with infinite fuel supply, indestructible walls, and so on. The only point to note is that the suspension of disbelief is a matter of a delicate concern; any simplification must be compensated with something vivid, or a disappointed audience will be very critical. The following is an example of the plot squares chart.

There is an interesting way to explore the plot and to invent some original situations. I call it plot squares chart . It is based on illustration (or text description) of the basic plot element. For example, it includes the character and its weapon. Then a list of different circumstances should be composed—the more unusual and abstract they are, the better—rotation, showing half of the square, absence of gravity, strong wind, legs instead of arms, entropy, and so forth. There can be dozens of them in the list. After that, you need to put the plot square in each circumstance, fixing what could happen with the character.

There are only a few circumstances shown in the following figure but their list can be longer:

How would he adapt to a new condition? It will let you invent some new details for the story.

More complex plots must be explained in a proper way. Normally, players don't like to read a lot of text in the video games, they don't like long introductions and cut-screens, so it is better to use contextual narration—telling the story while the player is playing the game. The storyline should be cut into small pieces scattered on the game levels. It should not be textual; all the game elements must tell their stories: gameplay mood, character's design, backgrounds, and props. For example, you can display a large portion of text about a spaceship crashed on a planet, or just show an image of the crash at the game background, displaying all the aspects graphically. Not words but the behavior and image of a character can show the fact that it is a negative character. Some cracks on the surface of game object can drop a hint that the object is breakable. Design is an important part of a narrative system.

Dialogues are a good part of the storyline, especially for games with some RPG elements or for adventure quests. They must be short and clear. A small portion of humor can increase their attractiveness. The main problem with dialogues is the necessity of a voiceover; the game needs professionally recorded and mixed voices to sound cogent enough. This problem can be solved by introducing graphic speech bubbles with some text instead of real voices. This can make localization easier too. A sound effect with some balderdash and indecipherable syllables can be added, and sometimes that approach can be very funny. The dialogue system will be expressed better in Chapter 7, Adventure, of this book dedicated to adventure games.

Game development is a knotty process, so you have to accept the fact that the plot, and particularly the story, will be in a state of constant transformation. Some ideas will be dropped for a variety of reasons (for example, they can be unrealizable from a technical point of view or test players will not like them) or your experiments with the game will reward you with new ideas. It is important to know that the gameplay is usually more important than the story; bad game mechanics can ruin a perfect story, so don't worry about some ideas if they do not work well. Try to find new ones instead.

The funny part of the storytelling is the inside jokes or Easter eggs. Sometimes, this is a way to resolve tiny problems with the story. For instance, there is a bunker in the game that needs a name written on a wall. The name can be constructed from your name or it can be an allusion on your favorite movie (remember the Lost TV series, for example), popular Internet memes (recall the famous phrase, a phrase in broken English, "All your base are belong to us"), and so on. Not only can small text be a tribute to something but also level compositions, a character's name or look, and even a sound design.

There is a very popular in-joke in the movie and video game industry; when a character dies screaming, a special sound effect is used known as the Wilhelm scream . Few people know this, but the same scream is used in more than 200 movies. Don't forget that it is always pleasant to make hidden references to other game projects you've done before, for instance, characters from previous games can be turned into props as toys or posters.

 

Characters


The following are the various components in a game:

  • Protagonist: This is the main game character, the persona the player associates himself with. In most cases, it is under direct control of the player.

  • Game trigger : These are the various interactive elements (switches, buttons, and so on) that the player can operate; they may have an effect on the game world or on states of characters.

  • Enemy: These are the characters (or situations or events at abstract level, for example, time can be the enemy too) that are hostile to the main character and its progress in the game. Their main objective is to hinder the player.

  • Friendly/neutral character : This is any persona that has no aggressive plans towards the main character. Usually, this is something extra, walking the game level. Sometimes, they should be protected by the protagonist or they can be player's companions helping to perform some specific tasks.

Some games can be handled without any characters. Most of the puzzle games, for instance, the match-three games, have no persona. Are various color bubbles characters? I don't think so. They are game triggers, I would call them "precharacters" or "character ancestors" because they do interact with the player and perform some actions but their personality, both functional and graphical, is minimal. Their digital soul is small. But there can be the exceptions too, for example, tile-matching game Chuzzle by PopCap Games uses not soulless color triggers but real characters named Chuzzles—shaggy balls with eyes and some personality that are very cute.

A main character is the representation of the player in the game universe; this is his avatar, so he should like its appearance and behavior. This does not mean that the character must be perfect, but he must have some charisma to be attractive. In other words, he should have some unique features.

Frequently, there are characters in the game but no a protagonist. In this case, the game operates with the characters, enemies, and triggers, but the main character is the player himself; he plays the role of an abstract demiurge controlling the game world. For example, most puzzle, tactical, and strategic games do not have any player representation. In this case, the player empathizes with not only one person but the whole game world. The following figure shows a character and its components:

Before designing any type of characters you should think about its graphic look and functionality. Try to create a list of the actions it would perform, starting with the basic ones: walking, jumping, shooting, and so on. This will help you to determine the character's anatomy and dimensions. For example, if he has to collect some items from the ground, he should have arms of a proper length and should be able to bend. If there are going to be ladders in your game, the character should have a constitution letting him climb up and not being stuck by the ladder. The world outside the character must be proportional to him and vice versa.

To design the character right, you need some concept art or sketches to determine its look. Of course, big game studios feature every breathtaking example of concept art and real states of art; everyone wants to buy such images and put them on the wall. But at the first step of development, they are not necessary at all. The sketches can look like some doodles, more important are the ideas that can be written there. Usually every interesting concept is born from a scrawl, sometimes made on a table napkin. So, don't worry about the graphic quality for now; you will need it later, when the working process on sprite or 3D models starts.

 

Levels


The levels are your story and express the plot; they are chapters in your novel told via the game mechanics. So, pay attention to each of them, especially the first ones, because that is the place where the player meets the game. The players should like the beginning to continue playing.

You can start planning the levels on paper, making different notes and sketches. Then it is better to switch to a more flexible tool. For example, it is good to use spreadsheets tools (Microsoft Excel or Calc from the OpenOffice.org package) to create a sketch of a level. That is unusual, but let's break stereotypes because spreadsheets can be very efficient: you can add various colors to cells, copy, paste, and cut them, move some sections of the level, and make some grouping operations. Moreover, you may find the way to save the spreadsheet document in a form that can be recognized by your game, so you will have not a sketch tool, but an improvised level editor!

The following is an example of the level sketched in the spreadsheet application:

Of course, a special level editor is better, especially if it has a test/preview option. This means that the editor should be based on your game engine. Try to make it practical, so that not only you but other people could use it too. Initially, all the level designers can be from your team, but then you can try to offer level creation features to a wider audience. Projects that let users generate content are always in fashion.

 

Naming


It is no secret that the name of a game should be unique, easy to remember and reproduce, and also should be short. Ideally, it must reflect the game's idea and have an emotional tone very close to the game's mood. This is your brand, so pay the maximum attention to it.

The name can be based on the plot of your game and include either the description of the game's situation or one of the character's names. It can include some hints on the game's genre or mechanics. Try not to overthink the name and avoid including various semantic games and rebuses in it (in exceptional cases they are really genius). Try to recall the Tom Hanks movie, That thing you do! (1996), in which there was a pop band that called itself The Oneders, thinking that the audience would know to pronounce it "one-ders". The word was supposed to be wonders, but they thought it was smarter to spell it this way. Of course, they were wrong because all around called them "oh-need-ers".

It is highly possible that all the single-word names will already be taken, but do not get discouraged, because with a double-worded name you have more chances. But try to avoid too-long names. In iTunes Connect Developer Guide, in the chapter Adding New Apps, there is a phrase:

"The app name cannot be longer than 255 bytes and can be no fewer than two characters."

So, 255 bytes is the maximum length of the app name, but most people do not reach that limit. Practically, there is a more important point: the length of a text label situated below the application icon. Subjectively, the title looks more attractive and professional if it can be written in a single row of text (different subtitles and functional words can fill in the second row). The following screenshot illustrates various text labels. Some of them have only one row of text, some use two, and the last one fills up all the lines and features some symbols truncated:

The length of the text label is measured in pixels, not in text characters. Usually it is equal to dozens of letters. If your name includes narrow letters such as I, L, and J, there will be many more characters in the text label (for example, up to 16). In contradistinction, the words with wide letters W, O, and so on would take more space. So, always experiment with various words. The hyphenation algorithm used on the App Store works with phrases, so it breaks down not words into letters, but phrases into single words, this is why it is sometimes difficult to write a few long words in a single line. If the name is longer than both text rows, the name will be truncated, the system will replace some letters with an ellipsis. iOS in its turn writes names of applications in one line without hyphenation. So, if a text label is long, it has been broken off and has got the ellipsis, which looks very unattractive, like a torn dress. That is why some developers try to use abbreviation or short forms of their titles on devices. For example, PopCap had to use a shorter alias for Plants vs. Zombies 2, which was overly long for iOS, so PvZ 2 was used instead. When talking about names for mobile games, the old phrase "less is more" rings true.

Having invented the name, try to check its availability. This can be done by searching for it on Google, App Store, and other popular locations. It is worth checking whether or not your chosen name is already a trademark. Otherwise, if the title (or some of its parts—for example, the term "Tower Defense" is copyrighted) and belongs to somebody, but your published game used it widely, there can be some unpleasant consequences: because of trademark disputes, the application can be removed from App Store. There was a buzz about the puzzle game Edge by Mobigame; despite being a critically acclaimed product, it was removed from App Store a few times because of disputes about the word "Edge" used in the title (http://en.wikipedia.org/wiki/Edge_by_Mobigame).

The availability of a name can be checked via various official online services, for instance, United States Patent and Trademark Office (USPTO) has Trademark Electronic Search System (TESS) on their website http://www.uspto.gov/trademarks/index.jsp. There is a similar system in the United Kingdom, the Intellectual Property Office has search trademarks option on their website http://www.ipo.gov.uk/types/tm.htm. There is also The Office for Harmonization in the Internal Market, which is the registry of trademarks within the European Union. It has a database search on its website too (http://oami.europa.eu/ows/rw/pages/QPLUS/databases/searchCTM.en.do).

You must be prepared for the name to already be taken (there are thousands of games in the world, so many good-looking titles are already used), so always have some alternatives. It is always better to check the name before development, because the name can be introduced in the plot and the story.

If your name is free and you can use, it is necessary to secure it; you must register the Internet domain name (it is better to use the .com address) and create topical accounts on communities on social networking sites. For example, you will need a Facebook page for your game, a YouTube page, a Twitter account, a Tumblr page, and so on. Of course, the main marketplace is the App Store (Google Play, BlackBerry World, and so on too if the game is ported on new platforms); nevertheless, an official website and social media should not be underestimated; they may help the game with additional marketing. On the website, we can embed some YouTube videos: a trailer or some gameplay demonstrations, some descriptions, and examples of artwork, and a blog can be made of developer diaries. Many players like such information very much, especially if they are familiar with previous titles of a developer. Additionally, some extra plot information can be placed on the website to expand the world of the game; this can include image maps of the in-game universe, special web episodes, simple comics, or short novels related to the title. Another good idea is to have small goodies for the audience: wallpapers (both for handheld devices and desktop computers), some images that can be printed as stickers, and some papercraft maybe.

The main idea is to convince current and potential players that you love them a lot. The design of the official page should be simple and clean, concentrating all attention to a central table with the game logo, video, and some text description; an App Store Badge with a link to iTunes is mandatory. The social networking sites are much easier to manage; they only require you to update status periodically to keep the audience up. Various likeable screenshots and illustrations from the game are good. To properly decorate the account, you only need to choose proper avatars and title backgrounds.

 

Working with graphic assets


Strong visual style is one of the important components of a game's success, but it is not the primary component because without a good game idea and its proper implementation, the game would be only a graphical cover. On the other hand, a game with great mechanics and good gameplay but with indifferent artwork may expect only partial success or even failure. Ideally, the graphics is not an ordinary set of beautiful pictures but a tool to establish communication between the game and the player; it tells him the story and demonstrates how the game world works.

The number and types of graphics depend on the game's genre and its complexity. In most simple cases, the game can operate only the graphics rendered by itself. All geometric shapes and even 3D forms are drawn by programming codes, but most modern games use pre-rendered artwork in a form of raster images.

There are several basic types of 2D graphics the games use, which are as follows:

  • Sprites: These are small images being used as different components of the game process. They can display game characters, weaponry, landscape elements, various props, and bonuses. They can also be an integral part of special effects, such as smoke or fire.

  • Animated sprites: These are special form of sprites that help to create an animation. These are series of still images, each of which is displaying a specific phase of an object's movement. Together they are collected into one image sheet. The game plays a particular type of file and the player sees the animation associated with this file.

  • Tiles: This is a special case of ordinary sprites. Tiles are special graphic bricks helping to draw up the game scene. They can be both functional and decorative. In contradistinction to the sprites, the tiles sometimes are only construction material; they do not include any game character. They are collected in tile sheets—files with all the image elements for a certain game level or scene.

  • Textures: These are images that are used as textures for 3D models or for screen backgrounds.

  • Backgrounds: These are images that are used as backdrops for game scenes. Often they are pretty large.

  • GUI elements: This includes all the graphics that are used like a control inside the game. Buttons of different size, switches, radio-buttons, and various panels to display alerts and text are gathered into GUI sheets.

  • Icons: These are GUI icons, achievements, and trophies.

The main principle of a good artwork is simple: solidity. All the elements of graphics must have equal style and quality and should have identical principles of formation. Each of them can have his own color, texture, and details, but all these characteristics must obey the general rule you've designed for your game. Think about the music, a melody (for example, the famous James Bond theme) can be mixed in a hundred ways, can be played faster or slower, or can be rearranged for new genres, but it will still be recognizable because the core is always appreciated. This analogy helps to illustrate that each element made out of the general rule may look fake. The audience will notice that unconsciously and this will reduce the perception of the product's quality.

In the authorized biography by Walter Isaacson of Steve Jobs, there is a wonderful quote by Jobs:

"When you're a carpenter making a beautiful chest of drawers, you're not going to use a piece of plywood on the back, even though it faces the wall and nobody will ever see it."

It is pity, but some developers or designers try to ignore such philosophy; their products have a pretty beautiful facade but ugly backyards; for example, menu pages and some secondary-class game graphics are made slovenly, without any love and attention to the details, as though such components "are facing the wall and nobody sees them". This approach is wrong because your game is not only one game screen but a product with many edges, each of which must be done thoroughly. Otherwise, it shows that you don't like and don't respect your audience, and the product is not professional.

I recommend using a vector-based graphic editor to work with artwork for games. It is a much more flexible and secure way to provide graphics for different resolutions and situations. My favorite tool is Adobe Illustrator, which lets you draw complicated illustrations using graphic tablets; it supports both vector instruments and some useful raster effects. There is truly direct manipulation philosophy, not like the layered one in Photoshop, which lets you edit objects more easily. It has multiple artboards, which is very good for exporting routines (especially together with slices). There are symbols (if you know Flash, you will understand their potential efficiency) and dozens of other pleasant tools.

 

Sprites and tiles


One of the most important characteristics of a sprite image is transparency (also called the alpha channel). The image must be combined with underlying graphics (with backgrounds or other sprites) at the game screen, creating an appearance of a solid picture. Some decades ago, when computers had no such advanced calculating power, the sprites were small, and the simplest form of transparency was used. Each pixel could be turned on or off, so the images featured so called hard edges ; there was no soft transition between a transparent pixel and an opaque one. To mark a zone in the image which would be transparent, a special color was used; usually, it was a color never featured in the drawn artwork, for example, magenta (sometimes developers called it magic pink ). The sprites with such transparency had sharp contour and worked well only on graphic video systems with a small resolution.

Nowadays, most platforms, including mobile devices, support a more complex type of transparency called alpha channel that supports shades of opacity. With this, smooth transitions and translucent elements can be displayed. In most cases, the PNG file format is used for sprites. It is lossless, no pixels will be lost after exporting the image, and by default, the image editing tools create PNGs with a straight (non-premultiplied) alpha channel. The term straight means that pixels have no precalculated data for compositing, the only information is the exact RGB value and the alpha channel (colors and alpha are not interconnected; a value of transparency cannot distort values in color channels). On the other hand, premultiplied type of transparency (color and alpha channels are interconnected and by changing alpha information you also change the RGB values) is in demand, because of its efficiency, natural behavior, and being compression friendly, but PNG by default cannot work with it. This is why some developers try to choose TGA or TIFF, which support both types of alpha channels, or try to find third-party tools to convert the straight alpha channel type of transparency in PNG to premultiplied. Besides normal transparency, game engines can also offer some additional modes when creating the final scene is a bit more complex, which let us create interesting visual effects. For instance, the Multiply mode, where dark pixels of foreground images are added to the background but white ones are ignored, helps to create shadows. A Screen mode is the opposite of Multiply; it lets us light up some elements, creating the illusion of reflections, hotspots, and so on.

iOS devices also support a specific type of texture compression called PowerVR Texture Compression (PVRTC), created especially for effective storing and using of raster images; the files themselves are frequently referred to simply as PVRs. The file format is native for the PowerVR GPU used in iOS devices (and some other platforms, so the format is pretty universal), so it is accurately optimized for graphic hardware and uses advanced methods of data compression (up to 8:1).

PVRTC does not required software-based decompression, images take less volume of memory, there are lesser amounts of data to be transferred, and is managed by the hardware; therefore, the files are rendered much faster than traditional PNG. The performance and thrifty usage of memory resources are the main advantages of the format. But there some disadvantages; first of all, the compression algorithm is lossy, so some portion of graphical information is lost and there can be some visual artifacts. This can be critical for elements that require some pixel accuracy, for instance, UI elements. In this connection, it is wise to strike a compromise and use PNG for static elements with a lot of small fragments but PVRTC for texturing fast objects where the ideal quality is not an issue.

Another problem with PVRTC is some lack of support from popular graphics software; there is no native support for it by default; special plug-ins are needed. Nevertheless, the issue can be solved by compressing tools with the official cross-platform software suite PVRTexTool (http://www.imgtec.com/powervr/insider/powervr-pvrtextool.asp). There are also some specific requirements for images: they should be square and their dimensions must be in the power of two, but in most cases that is not onerous at all. The following screenshot shows the tile sheet from a puzzle game Rail Maze developed by Spooky House Studios UG (haftungsbeschränkt):

The sprites and tiles are not usually stored as single images because there are dozens of sprites in games and the content folder would be crowded with image files. It is more convenient to collate them in special graphic sheets stored in large image files. The sprite sheet (alternatively, texture atlas) is divided into small fragments in which each sprite fits. The size of the fragment depends on the game ; usually, sprite width and height are multiples of eight—something like 64 x 64 pixels or 128 x 64 pixels, 128 x 128 pixels, and so on. The sprite sheets in turn are much larger; their maximum dimensions depend on the specifications of a device as shown in the following table:

Device

Dimensions

iPhone 2G, iPhone 3G

1024 x 1024 pixels

iPhone 3GS, iPhone 4, iPad 1

2048 x 2048 pixels

iPhone 5/5S/5C, iPhone 4, iPad 3, iPad 4, iPad mini

4096 x 4096 pixels

To calculate how much space a sprite sheet in PNG format will occupy in graphics memory, a simple formula can be constructed. Standard bitmaps are used in uncompressed form, so the content is irrelevant; only dimensions matter. It is known that there are four channels in PNG, colors and alpha, each one is described by a byte of data. The formula is as follows:

(Height x Width x 4)/(1024 x 1024) = space in megabytes

For example, a texture of 512 x 512 pixels occupies 1 MB of memory, 1024 x 1024 pixels in turn occupies 4 MB, and so on. To get an idea of hardware resources, including the amount of RAM for iOS devices, it is good to look at the special table published at http://docs.unity3d.com/Documentation/Manual/iphone-Hardware.html.

There are special applications that can help to create and manage sprite sheets, for instance, a very popular tool Texture Packer (http://www.codeandweb.com/texturepacker) designed by Andreas Löw. It supports many compression algorithms, including PVRTC, and works with many actual game engines, such as Cocos 2d, Corona SDK, Sparrow, Unity, and so on. Texture Packer also features a handy drag-and-drop interface, as well as a bunch of various settings for texture sheets, letting us tune them deeply. The great advantage of this application is the ability to convert default PNGs into their analogs with a premultiplied alpha channel.

Alternatively, sheets can be developed in standard graphics editors, such as Adobe Illustrator. The only point to note is that some routine operations are performed manually. According to my experience, it is better to draw and export the sprites (or tiles) one-by-one, and then collect the exported images in the sheet file. In other words, you need to have some files only for drawing sprites (let's call them canvases ) and one file to organize the final illustration in the sheet (let's call it a sprite collector ). First of all, this speeds up the exporting routine: if the source file for the sprite sheet consisted not of linked raster files but real vector illustrations, it would make exporting the final file a much longer process. Secondly, it offers protection from shadow artifacts: images are the sprite sheets that stay tight, so some elements of one illustration would overlap the illustration nearby a little bit for sure. Usually, the edges of soft shadows lean out of the sprite's frames; as a result, some sprites or tiles get unnecessary dark lines. In the sprite collector, there won't be such a problem, because each sprite is already an exported image and has appropriate dimensions.

The dimensions and position of tiles inside sprite sheets should be chosen properly; otherwise, there is some risk of visual artifacts such as thin faded lines at edges caused by compression. They look ugly and are easy noticeable even on Retina displays. Remember that OpenGL likes fours—sizes of texture elements should be multiples of four to achieve better results (this is because, at the time of encoding, an image is split into blocks of 4 x 4 pixels). Some examples of the sizes of texture elements are 64, 128, 256, and so on. It is obligatory to have a grid system in the sheet file. It will help you to determine the exact position and borders of each sprite. The grid should be made of translucent rectangles arranged in chess-board order. This is a much more precise way than a grid based on guides. The rectangles must be placed on a separate layer; this lets you to switch them on and off. One of the advantages of this type of grid is an opportunity to export it with the sprites for testing purposes; for example, to check how the game engine cuts out the sprites from the sprite sheet or how the graphic proportions work in the application. Tools such as Texture Packer successfully automate such procedures.

The basic design rules of good sprites are simple: the illustration should be contrasting and perceptible, and its details should express the element's functions in an unambiguous manner. The player should not have to conjecture what is in front of him. If an element has few states—for example, it is a switch—that means that each state should be thoroughly indicated. The artwork must be most descriptive; don't be afraid to over-describe. The following screenshot shows the grid system used in the Rail Maze game; it helps to determine the borders of tiles and to connect central parts of the tiles properly:

 

Preparing animation


It is impossible to imagine a modern game without animation. The game world should be alive to compel attention. There are two major types of animation: based on programming code and frame based stored in animation sprites. The first type requires some programming algorithm to move or transform a graphic object; in most cases, this is a linear process. An object is moved from location A to location B with predetermined speed, its size is increased, and its alpha channel is changed. Such type of the animation with automatic incrimination is called motion tween in Adobe Flash. At a more complex level, the object has curved trajectories and moves with some acceleration and there is inertia in its movement; the games in which such interpretation is used require advanced control on an element's dynamics; first of all, I'm talking about various physics puzzles.

Frame-based animation on the other hand is a way to beautify the motion. Besides the automatic animation successfully moving a sprite around the screen, the illustration inside the sprite would be still; for example, a character would not step. Several images to illustrate the walking cycle are needed so that the game can form animation sprites. This is a bunch of images, portraying various phases of motion. Modern SDKs usually have rich collections of methods to work with the animation sprites. They can be played in the order in which they are stored in the animation sheet, or they can be organized by using an array with a custom order, which is very useful because more complicated animation sequences can be created with a minimum number of images.

Here are some tricks: if there is a portion of opposing movements (for example, a character is showing up from a hatch and then hides back), the animation sheet can include only half the frames, displaying the motion in one direction; the other part would be constructed from the same frames but played backward. A pause in an animation of given duration can be organized by simple repetition of one of the sprites. Another interesting option of non-linear frames are extra frames, which helps to deal with sameness of animation cycles. Each gesture and movement an object makes in the real world is pretty unique. Take for example a passerby walking in the street, his legs make steps in cycles; the cycles are pretty similar, but not quite the same. There is a beautiful metaphor:

"Sometimes a butterfly lands on the shoulder, so step at this moment is a little bit different."

So, it is good to add the unexpected touch to the animation frame sometimes. It can be done by replacing an ordinary frame with one differing frame that has some small unique detail. There can be several extra frames; the game would choose them randomly.

It is good to animate characters in Adobe Flash and then to export the result as separate still images, finally collecting them into one Adobe Illustrator document and exporting it as an animation sheet. It is worth mentioning about a very interesting tool for creating smooth and natural character animation called Spine (http://esotericsoftware.com/). Its general advantage is that it is a 2D skeletal system with various fragments of a character (head, body, legs, feet, and so on) attached. Positions of bones and their angles are calculated in real time and interpolations are very smooth and correlated with the frame rate; therefore, the motion is very smooth. Moreover, because animation is not tied to strictly defined frames, the system is very flexible; this means that some combination of motions can be easily introduced without redrawing a full sequence of frames. For example, by default in traditional frame-by-frame animation, a character running and the same character running and shooting are two separate sequences, which increases consumption of memory resources and makes animation exporting a bit complex. A skeletal animation has no such complications; various gestures of the character can be combined more easily with minimum memory costs. Of course, this is possible only if a game did not use a raster output of Spine in the form of video files or sprites, but used binary data of virtual bone positions and keyframes stored in special documents instead.

Different special effects are based on animation too. For example, smoke can be created by using a translucent and blurry circle being duplicated around the screen; the opacity of each circle should be reduced softly, but their sizes should be increased.

 

Background


Backgrounds are the essential part of every game without reference to their genres. In order to express game elements in the best possible way, they should have a graphic background. There are two types of backgrounds: static and dynamic. The first ones have a fixed position at the screen, being changeless. The second ones consist of several separate image layers, being mobile to each other. This helps to create various effects; foremost is the illusion of parallax. In this case, each image layer has its own horizontal speed depending upon its imaginary z axis position. Such a type of background is usually used in games with dynamic gameplay: platform games, arcades, actions, racing, and so on. The following is a chart showing screen resolutions of the iPhone/iPad family:

The main difficulty with the backgrounds is their dependence on the screen resolution. There is a wide range of screen dimensions in iOS devices, starting with the legacy of the first generations of the iPhone and finishing with the iPad featuring Retina display. Your game should try to take into consideration all of them (this will be much more problematic if you would want to make an Android port of your game because there are many types of resolutions).

Note

There is a very useful website, http://screensiz.es/, that displays a table with all popular screen sizes (including both iOS devices and Android ones).

As an option, you can try to prepare all the backgrounds you need in advance, letting the game check the current device and choose the proper image file. This is very simple from the programming point of view because the portion of code working with the background is not complicated; it is only needed to display one static image at specific screen coordinates. But that can be a real challenge from the graphic design point of view because a dozen versions of each background should be prepared. Having made minor changes in the backgrounds, you're required to re-export all the versions again. Such an approach also needs some additional disk space for all the backgrounds (however, this is not so problematic; iOS games now can be pretty big). The source file for a background used in the Blueprint 3D game is very wide; it includes extra parts to cover all possible widescreen ratios. The following screenshot shows the background used in Blueprint 3D:

However, if you choose this type of background for your game, try to optimize the process as much as possible. First of all, try to design the background with some reserve. Its canvas can be a little bit larger than the actual screen resolution; it is good to mark it like a 16:9 (or even 21:9) frame, which will save you from all possible shocks the new generation of devices will bring. All the types of backgrounds can be stored in one AI file with several artboards. The first artboard serves iPad; it has resolution of 1024 x 768 pixels (in this example, the landscape orientation of the canvas is used). Being exported in double resolution, this artboard will provide the background for a Retina-based iPad (2048 x 1536 pixels).

The second artboard is placed at exactly the same position at which the first one has but features another height: it is not 768 pixels, but 683 pixels. Are you confused a little bit? You are right: there is no such screen size in the specifications. The secret is simple: this is a graphic billet for the iPhone with screen ratio 3:2 (first four generations of the device). You should export the background by navigating to File | Save for web and entering the correct dimensions—960 x 640 (or 480x320 for pre-Retina models)—in the Image size tab; in other words, 960 x 640 pixels is 93.75 percent of 1024 x 683 pixels. Voilà! An export process becomes a bit easier because you need nearly one illustration to create a background both for iPad and classic iPhone. Starting with iPhone 5, the new type of resolution is used: 1136 x 640 with a rare aspect ratio 71:40. You can try to use the same width of the artboard, introducing the billet with the size 1024 x 577, but such canvas is too narrow, and large parts of the background illustration will be truncated. It is better to create a new artboard with a height equal to 683 pixels but with a larger width equal to 1212 pixels. The exporting routine is still the same: in the Image size tab, the correct dimensions should be specified: 1136 x 640. And don't forget about the potential reserve: a 16:9 screen ratio. I would suggest something like 1360 x 768 or 1366 x 768; the exact accuracy is not important yet. The image would have gigantic width, but it could have a practical purpose too: various promo materials, for example, website promotional blocks often require a wide background. The following screenshot shows the artboard scheme for solid backgrounds:

There is another way to operate the backgrounds, much more flexible and resolution independent. In this case, the background is not a solid image but a collage made from several graphic elements. The game itself manages their position and behavior. Some elements are tiles and let you cover some space with specific texture (the tiles can be real big, about 512 x 512 pixels to fill large rooms without noticeable repetition). A few elements are created to be stretched at the screen; for example, some gradients to create a sky. There are sprites with various props too; each of them has a position proportional to the screen's height and width. Overall, each element has its specific rule to calculate its x and y coordinate. This approach is a little bit harder than the static backgrounds, but it gets rid of bulky and clumsy background files and lets you to implement some dynamic mechanics to the backgrounds and even to make them a little bit interactive.

From an illustration perspective, there should be several varied backgrounds in the game: one for the main menu, special backgrounds for options and about the screen, and so on. But the most important of course are the images for game levels. Try to add a personal touch to each of them. The background should be contrasting enough to make the details on the foreground well marked; the background helps to express all the game elements in an appropriate way. Its color and texture must not dominate because it is only a scene, not a character; the viewer's visual comfort is a primary goal. Try to use decorations and props that are related to the game's plot. This is an additional way to include some narrative in the images. They may not translate direct messages but create some specific mood. Moreover, it is easier to come up with some idea of ornamentation by looking back at the story. What should I put there: a unicorn or a barrel with oil remembering that the game is about robots? Of course the unicorn is perfect! Some sense of irony is always good too.

 

Application icon


The following is a screenshot of Apple's iTunes with a dozen of app icons. The images, not text titles, compel the attention of the viewer:

It is hard to overestimate the value of an application icon for the mobile application, especially for the game. This is one of the most powerful elements of its identity. Generally, people don't read the name of the application on the App Store; they set their eyes on the icon. It has to tell a whole story to them: what is the genre the game based on? Does the game have beautiful graphics? What is the main element of the gameplay? Who is the main character? Is it funny? Many more questions are answered by small graphic images. As the Chinese proverb says:

"One picture is worth ten thousand words."

In our case, we can paraphrase: one app icon is worth dozens of letters in the application name.

Some people try to steal graphic ideas of famous and popular titles trying to ride on someone else's success. That's a pathetic concept. First of all, that is not right from an ethical point of view (don't forget about copyright issues too); also, that behavior can play a nasty trick on your game, because it would look like a secondary class product with a lack of any new and original idea not worth spending money on. Nobody loves copycats. So, that can be a hard strike on your image.

Nevertheless, you may or even have to learn from successful examples. Nobody can stop you from adopting some ideas, but you have to interpret them by yourself. Even a simple story can be told in a thousand ways. Your intonation is very important. Borrowing of some graphic trends can help to embed your game into App Store universe easily and will not make you look like a white crow. Although it is good to be pretty trendy, is bad to be a copy. For example, if there are many applications with glossy graphics and bright colors, you can use that approach, but if there are many icons with the same composition or main element (for example, many match-three applications are using a large image of a crystal or color ball, racing games are using finish flags or wheels, and so on), it is always better to introduce something unique. Otherwise, your icon will sink into the ocean of identical images. So, the application icon can be based on trendy methods (graphic style and colors), but you must pay more attention to details. If everyone around is putting one image of a bubble or ball, you have to put two, three, or add unique and bright special effects (fire, sparkles, and so on). Are there many images of car wheels in racing arcades? You should put an image of a front light of a car. Are all games about zombies using an image of zombie head? Not a problem, use a leg with a caricature bone or an arm! You need to have your own voice. Wherein, you do not to use too unusual tone in order to sound overly original.

To choose the main element of the icon, you need to ask yourself: "what (or who) is your game about?" The answer should be short and clear; otherwise the answer is wrong. It is good to break your game into the logical fragments and try to reflect some of them in icons, searching for good combinations. Use the main gameplay element first, one of the bonuses after that. Does one of the bonuses look great in the game? If the answer is yes, try to use that fragment of the artwork in the icon.

It's desirable to use a graphic style related to the artwork of your game in the icon. If the game is using the cartoon style for images, the app icon is cartoonish too; more realistic game graphics need a photo—a realistic icon.

There is an interesting trend in icon design for iOS: designers trying to compose the image in the peculiar shape of the icon. Its rounded corners are used as a natural contour of a drawn object, so the final result looks like a truly 3D image. Such icons are amazing; they are real works of art. Most appreciated works on Dribbble are usually the icons in such graphic style. They have a giant potential to inspire you. The only problem is the fact that many of those icons were created for portfolios only, they look great, but they are not commercial examples serving real applications. Partly, it can be explained by the fact that such icons usually are only object based; they illustrate a thing, for example, a treasure box or a piece of cake (there are tons of icons portraying sweets), so they are very static. But application icons often need to display a simple scene, to illustrate some motion and interaction of elements or simply to show more than one object. This is why such wonderful pieces of pixel art become dismissed and turn into decorations of portfolios. However, it would still be great to use such an icon for your game if conditions were appropriate. The following are two examples of such graphics:

iOS 7 brings some new aesthetics into application icon design—graphics became flat, there is more interest in simple and smooth shapes and clean colors rather than in photo-realistic illustrations, rich textures, and so on. Most artworks look like vector graphics with solid fill or delicate gradients—the main color accent is made on a bright background; central element of compositions are emphasized by the so-called diagonal shadows; they are pretty long, tilted by 45 degrees, and have no blur effect (or its volume is minimum). Such elements can be generated in Adobe Illustrator by using Blend Tool. You only need to create a primary shape of the shadow, then it should be cloned and its copies are shifted right and down by diagonal trajectory. The opacity level of the copy must be defined as zero; after that, it can be connected with the primary shape by Blend Tool; the number of interpolations can be adjusted via the tool's menu. Another important approach is color; a palette used in iOS 7 is a bit different from the previous era, it is clean and usually has ambivalent visual characteristics; for instance, shades can lie between red and orange, or green and blue.

You should try to avoid including any large portions of text in the icon, particularly the name of the game itself or it will be a sign of bad taste. The application name inside the icon looks silly, because there is an actual name below the icon at the home screen displayed by the system, and together they form a visual tautology. There is another reason too: the long text will be unreadable, being scaled down, notably on pre-Retina devices (don't forget that icons for the first iPhone had a width of 60 pixels).

The only exceptions to the text inside the icon are short service words (up to 4 to 6 letters in length) helping to differentiate one version of the same application from another. I'm talking about such designations such as:

  • HD: This is the high-resolution edition for Retina iPad.

  • Free/Lite: This is the gratis version of the application.

  • PRO/Lux: Usually, this is a denotation for the ad-free version of a free application. It may include extra content too.

If your game is a sequel, its index number can be included in the application icon too; people need to know that this is something new, not the game they've already played before. Furthermore, several icons with indexes on them make it clear that this is not a single game, but a small franchise. This can increase the attractiveness of your title.

Some developers think global and design special graphic elements, uniting app icons of all their applications. They get something like a corporate rule for all the images they produce. That can be a unique background, an element of composition, or a special frame for the application icon. The frame is one of the most common ways to make your game unique, it is easy to create and use, and it can hold the text designations.

You need to think deep about the colors you will use in your app icon. Each color has its own power and psychological meaning. One of the pioneers of abstract art, an art theorist and Russian painter, Wassily Kandinsky, in his book Concerning the Spiritual in Art (1911) notes that cool colors (blue or violet ones, for example) are concentric, they are directed inside an object and move away from a viewer, but warm colors are eccentric; they are directed outside, moving to the viewer:

At the practical level, this means that a main element, painted a bright and warm color, can create a feeling being jumped up from the icon frame (now remember the app icon of the illustrious Angry birds, displaying a red bird). It is an extroverted type of graphic, so it is ideal for games with a pretty fast gameplay, with a lot of action, characters and game elements, in other words it serves various types of arcades, action-oriented puzzles, shooters, races, and so on. Whereas cool and dark colors being used as backgrounds help the main element to shine and be more attractive (roughly speaking, cool backgrounds move away from the viewer, but the warm main elements move toward the viewer, so their speeds are added together resulting in a vivid image). The icon can have only cool and dark colors too; this is good for more static and solitary games with more complicated rules. Blue is an intellectual and introvert color. Violet is a slightly spiritual and mystic color. It is interesting to note that the combination of a cold main element with a warm background is not very common practice because the structure of such elements is not properly stable. So, it is better to make cool (or dark) graphic compositions solid: with cool background and cool foreground; warm elements can be used only as small emphasis points because they are much more active.

Note

Jon Hicks is the talented designer known for rendering the Firefox logo, working on the MailChimp logo, Skype's emoticons, and many other amazing projects. He also is author of the book The Icon Handbook published by Five Simple Steps. On this book's official website, http://iconhandbook.co.uk/reference/chart/, there is a very useful chart, showing specifications on most popular formats of icons, including iOS, Android, Blackberry, and so forth.

Now, let's talk about the craft. The application icons should be rendered very meticulously and professionally. There are several types of image sizes to be included in a final package; it is worth noting that former guidelines were revisited after introduction of iOS 7 in 2013 and icons became a little bit bigger (as did their radiuses). The smallest ones are the legacy of first generations of iOS devices: 60 pixels for iPhone and 76 pixels for iPad. They need attention to each pixel; this is not pixel art, but some aspects of images should be edited at pixel level. The next generation of iOS devices introduced double-sized icons: 120 x 120 pixels and 152 x 152 pixels. But the most challenging is the icon artwork that is used by iTunes, which can have dimensions up to 1024 x 1024 pixels! It's funny when you recall that nearly ten years ago many desktop computers used a screen resolution equal to 1024 x 768 pixels, which was less than the modern single icon has become.

The following screenshot shows the template used for the app icon used in the Rail Maze 2 game developed by Spooky House Studios UG (haftungsbeschränkt):

A special template can be created in Adobe Illustrator to work with app icons. It includes one artboard, a layer with a background (for comfort previewing), several placeholders for icons situated in the layer called content, a grid of slices, and finally the layer called cover with special masks with rounded corners. Some of the most important parts are slices; though they were invented for web design, helping to prepare website's images, they can be used for icon design too. Their major advantage is their ability to slice the artboard on fragments; each of them is saved (via the Save for web option) as a separate file. Moreover, you can control the names of such files by using the Slice Options... panel (Object | Slice | Slice Options...); there is the textfield marked Name. By default, a slice's name is generated automatically (a document name plus some digital indexes), but you can enter the name manually. It is useful to add a shortcut for the Slice Options panel; by default, it has no shortcuts, but it can be done through the special menu in Adobe Illustrator: Edit | Keyboard Shortcuts.... The slices have their nuances; try to draw them in the Pixel Preview mode or periodically pay attention to the Transform panel; the slice should have the exact dimensions without fractions, the coordinates should be integers too. In other cases, some errors with dimensions of exported files can occur; for instance, instead of 60 x 60, you would get 60 x 59 or something like that. Adobe Illustrator automatically creates a folder named Images, where the all saved slices are stored (there can be some graphic garbage too because some slices simply cut out parts of background).

It is important to remember that the application icon in iOS doesn't support transparency; they are opaque square images. Now, famous rounded corners are made by the operating system itself, so you should not include those corners in your artwork!

Tip

Always move from small sizes to larger ones.

This means that first of all the smallest icons should be created, then they can be scaled up and the level of detail can be increased. So, create the iPhone icon of 60 x 60 pixels, try it on device, ask some people about their opinion, check all the details again, make sure that is your image in 100 percent, and then finally start working on the iTunes icon. It will require from you a lot more portraying effort, and proper high-resolution textures and illustrations will be needed. But the effort is worth it because there is nothing like a tasty, well-crafted, and beautiful artwork on your iTunes' page. Yummy!

There are some naming rules for final files. The official iOS App Programming Guide from Apple in the chapter App Icons gives such a description:

  • Icon.png: This is the name for the app icon on the iPhone

  • [email protected]: This is the name for the app icon on the iPhone with Retina display

  • Icon-72.png: This is the name for the app icon on the iPad

  • [email protected]: This is the name for the app icon on the iPad with Retina display

  • iTunesArtwork: This is the name for the app icon on the App Store

  • [email protected]: This is the name for the high resolution app icon on the App Store

 

Achievements


Players like to spend time on games, and they also like to brag about their progress. This is why leaderboards and achievement systems were invented; they help the player to share in-game breakthroughs with some friends and make them public. The leaderboard is a pretty simple system, it displays some score records, operating with player's names and number of received points. A table of achievements in its turn is a more festive thing. It marks all the players' efforts with special rewards: small pictures that play a role of game's milestones. People value any recognition of their efforts so much that each achievement they get in the game makes them happy. The favorite ones are achievements received after a hard gaming scene, for instance, the achievement symbolizing the victory over a big enemy boss or the achievement for special hidden bonuses being collected.

The following screenshot shows different achievements for the Blueprint 3D game, developed by Kostya Stankevych and published by FDG Entertainment:

All the achievements should have a clear and plain description. The players' objective must be easy to catch, something like:

  • Play the tutorial level

  • Solve 10 puzzles

  • Collect 50 stars

  • Unlock the Advanced mode

  • Finish the game at the Medium level

There is an unspoken rule of graphic style these achievement icons are using: the illustration needs to be simple, comprising only flat objects, few colors, high contrast, and outlines and should not have soft shadows or any other raster effects. So, they look almost like a newspaper's comic illustration. Of course you can choose a different approach, but try to avoid a big number of tiny details and complex textures.

The achievements usually have very simple plot: a few recognizable elements from the game in a specific combination and a some large text. Because games are part of entertainment, good sense of humor is always welcomed; for instance, the very scary game Ala n Wake from Remedy Entertainment features very funny achievements, for instance, to discover some coffee thermoses and watch TV shows.

There are some clichés among the achievements: today very popular are various trophy cups, laurel wreaths, coins, gold medals, and other symbols of victory. There's nothing wrong with such images other than that they are boring; therefore, always try to push the limits of your imagination.

Each social gaming network has its own specification of images designed for the achievement table. Gamecenter from Apple, for example, utilizes images in special round frames, so the illustrations have to be properly centered to look nice.

 

Trophies


Trophies are optional, but very expressive, form of reward for the player and comprise various beautiful and well-crafted illustrations the player receives besides the ordinary achievement. In contradistinction to the achievements, the illustrations are displayed one by one, because they are pretty large and have a transparency background (as option). There must be a special trophy room to keep all the trophies, and its decoration may be a bit ceremonial to engage the player's special emotions.

The following screenshot shows different Trophies for the Blueprint 3D game:

 

Banners


The following screenshot shows a large banner promoting Rail Maze developed by Spooky House Studios UG (haftungsbeschränkt):

Your game will need promotion. One of the traditional ways is the graphic banners various advertising systems show. They can be created from the graphics your game is using: main characters, props, backgrounds, bonuses, and so on. All can be used. Don't forget about the text; short and memorable quotes from your game concept and plot are good.

There are a lot of banner formats in both landscape and portrait orientation modes. Some of them look like graphic stripes, while others can be displayed in full screen. Some of the popular formats are: 300 x 250, 468 x 60, 728 x 90, 640 x 960, and 640 x 100. I would recommend that you create the Adobe Illustrator files with several artboards and some basic artwork to export banners.

 

Screenshots


The following screenshot shows the screenshots used by Blueprint 3D game developed by Kostya Stankevych and published by FDG Entertainment:

Screenshots are one of the major promotional elements of your game; they showcase all the advantages of your creation. Of course, there are a lot of examples of when the developer simply submitted a few good images of the gameplay. But that is not enough, and it is better to create special screenshot compositions , including some additional graphic descriptions of the game. Such images look like a small comic strip with a few speech bubbles telling a little story about the game. But always be honest; show and describe only elements that your game actually has. Try not to embellish something too much. Otherwise, the truth will be exposed very quickly and the game will get very bad reviews and ratings.

 

Gameplay videos


It is important to have a video displaying the key elements of your game, in other words, to have a video trailer. The easiest way to do this is by installing screen capture software on your main workstation and grabbing video from your game prototype. You will get the video file with the correct colors and without any geometric distortions. But there is a special problem caused by the fact that mobile games have no screen cursors: input is based on finger touches. So, the video grabbed from the prototype has no element focusing on the user's eye on a specified part of the screen. This can be a problem because the video may look unclear. You need to introduce a graphic image of a hand (or an arrow) to fix this; the image will play the role of pointer; it will simulate player interaction with the game world. It is better to use simple and flat illustration, without any complicated gradients, tiny details, and so on. You have to import that image into video-editing software and adjust its positions; it will require minimum skill in animation (the pointer should hover over the screen from one point to another). There should be an effect for click or touch; for example, for a multi pointed star, the effect will appear for a few moments behind the pointer.

The following figure shows the simplest light box, only a box with white walls:

The more creative and interesting way to make a video is to shoot the actual device (an iPhone or an iPad) with the hands of a real player touching the screen. It looks more authentic than the screen-capture method, but it has some pitfalls too. In most situations, people take a camera, put an iPhone on a table, start the game and begin shooting uncomfortably holding the camera by a free hand. A result generally is far from perfect: the image is shaky, it is dark and blurry, and the colors are distorted. And the most important point: the skin tone of the hand looks terrible. A viewer may wonder why a zombie with blue and unsightly skin is playing the game. That is because of bad lighting causing the camera to contort the colors. You need not have a professional lighting system and all those softboxes and flash lights, but you must have good table lamps with warm light-bulbs (lamps with joints are the ideal option). The light must be diffused too because glare in this case is not acceptable; it can cover significant elements of the game screen. To produce diffused light you need to have a photography light box. You can buy one (they are not too expensive) or build it yourself. It is easier than you think. First of all, you will need a box; you can take any package of an appropriate size, having verified its height or width to be a good distance for close up. The carton must be strong enough to support a small digital camera; a lens-sized window should be cut out at the top of the box. Large cameras must be used with a tripod installed. This will free your hands at the time of making the video.

The following figure shows a more advanced version of a light box with more efficient lighting:

One of the walls of the light box is open. You can call it the fourth wall , a term that describes a frame the audience in traditional theaters sees the plays through. The inner surface of the box must be close to white in color for effective reflection of light. To keep it simple, you can use white paper or white acrylic, but you have to remember that the surface must be matted. The light sources will be mounted at the opened part of the box. Their positions have to be calibrated in such a way as not to be overlapped by the figure of a person playing the game during the video recording. You do not need unexpected shadows inside the box. There is a more professional approach: instead of paper or paint, a light fabric can be used. In this way, you have to cut out large windows in the side walls of the box and cover them with some white fabric. Then you can use lamps situated on the sides of the box.

You can put some textures on the bottom part of the light box to add some unique touches to the scene, but you have to remember that the efficiency of the light reflection could diminish.

Before the video recording, you have to decide what you want to show the audience; remember that the video should not be boring or too long, and the message must be easy to understand. The video has to be beautiful, bright, and quick. You have to make the viewer say, "wow!" in 1-2 minutes or even less. This means it would be great to express only key components of a gameplay and to use all those elements in your game that you pride the most. Draw up a little story plan, turn on video mode, start recording, and make several takes of the same actions. Soon you will choose the best ones. The video-editing tools will help you throw away all the bad parts of the recorded materials and will let you add some additional elements, for instance, text notes. It is good to put a large logo of the game at the end of the video holding it for about 20-30 seconds; don't forget to include the App Store Badge in the final frames, showing that your game is already in the App Store and can be downloaded right now.

 

Summary


A story in a video game can be on different scales; if the product is simple, it features a small-scale plot, while more complex games may have huge screenplays that might even be the envy of Hollywood. But irrespective of its size, the plot should be solid and well thought out, a narrative should create a connection between the game world and the audience. The game is not just a calculator; it is about experience.

Graphics is part of the narrative as well. First of all, there should a visual idea that unites all fragments of the screen. Assets can be simple and not realistic but must have some structural rules. This makes a picture alive and interesting to follow. When working with graphics, there is a need to operate various types of textures collected into sheets with some resource. There can be some issues with alpha channel, compression quality, or memory management, but they can be prevented or resolved by proper planning. Any game needs some promotion to become popular. At a basic level, this means the presence of an attractive and demonstrative application icon, a catchy name, trailers, and a social media account.

Usability issues are important not only for traditional office software, but games as well. In the next chapter, you will learn how to plan a game comfortable for players. Especially if you care about players with special needs.

About the Author

  • Igor Uduslivii

    Igor Uduslivii is a freelance illustrator and graphic designer with more than a decade's experience in this domain. He specializes in artwork for mobile games and UI graphics such as icons and buttons. Currently, he cooperates with Spooky House Studios UG (haftungsbeschränkt), a game development company that has created popular puzzle titles such as Bubble Explode and Rail Maze.

    Right from his early years, he was passionate about drawing, computers, and video games. As a child, he liked to create illustrations by traditional painting methods as well as designing simple 8-bit games. After completing his studies from the Republican Colegiul de Informatica in Chisinau, Moldova, he began his career as an editor at Electronic Office publishing house, writing articles about new technologies and particularly, computer graphics. In parallel, he started studying Flash technology and animation. After that, he began actively working as a media designer, creating promo animations and Flash games. Igor also worked on the graphical look of software products, designing visual identities and UI elements. Among his clients were Kaspersky Lab, Reasoft, LemonStand, and many others. By now, most of his time is taken up by games. He is working on a full bunch of graphics, such as the application icon, characters, background art, props, textures, and animations.

    He is fond of design as an art form and pursues it as a hobby, developing various concepts in the domain of print and simple industrial design elements. In fact, all the images (except the screenshots for games and the photos) that appear in this book are designed by him. He also worked as the main graphic artist for mobile games such as Blueprint3D, Rail Maze, and Bubble Explode. One of his projects called Jackets and Bookmarks was showcased at the Kleinefabriek exhibition at Amsterdam in 2010.

    Browse publications by this author
Book Title
Access this book, plus 7,500 other titles for FREE
Access now