15 Animation Tips To Make Your Mobile Games More Engaging

By | March 31, 2015

Popular mobile games invariably boast of smooth, seamless and engaging animations and graphic features. We here present some guidelines that animators should follow, while making a custom 2D/3D game.

Every quarter, a large number of mobile games are released by companies – and only a small fraction of them go on to become hits. More often than not, the chief issue with a flop gaming app is substandard character animation styles and transitions. Both for 2D and 3D games, the importance of including smart and lively sprite animations can hardly be overemphasized. Here are a few pointers to help you give that X-factor to the games you develop:

 

  1. Key frames need to be strong and consistent – In their bid to ensure smooth animations and slide transitions, this aspect is often overlooked by mobile game developers. However, experts have confirmed that, even the presence of a large number of frames cannot make the gameplay attractive and consistent, if the keys are not solid. Smartly implemented keys can depict a host of character actions in a game (crouching, pulling out weapons, moving about, etc.) in as few as 2-3 frames. You need to use silhouettes as well, and make sure that all ‘negative space’ is used up optimally. Everything that is readable should be displayed against the white background layout.
  2. Include pixel art in 2D games – Some opine that pixel art is dated, and they tend to make mobile games appear just a bit tacky. However, it is also true that using pixel art is probably the best way for 2D game developers to show off their creativity. Complex game characters can be created with the help of relatively few blob pixels. For experienced 2D app development experts, creating pixel art is hardly a time-consuming affair. There is one condition though – if a game does not really require creativity (a racing game, for instance), using pixel art is unnecessary.
  3. Bake the drawings – Unless the drawings you create prior to implementing animations are properly baked, exporting them would be a problem. Errors are also likely to be generated when game animators try to export a large number of drawings at once. When you are working in the Morph (or Deform) mode, bake out all drawings before exporting them.
  4. Use Staging to gradually build the game interface – Adding all the game elements to the interface at one go can make things appear cluttered. Using the staging technique would be a much more systematic option. Test each animation element carefully, and keep adding them sequentially to the game interface. This will ensure minimal distraction, and developers would be able to focus on how every element can be optimized further.
  5. Keep characters moving – Even when they are standing/static at a point. Little things, like making an animated character bob up and down, or making the hairs of a character stand up on their ends, can go a long way in adding to the liveliness of a mobile game. There are many other subtle things that relatively new mobile app and game developers miss out on – right from heaving of the chests (breathing) and blinking of the eye, to the movement of the hands (they should never hang limp). Your focus should always be on adding some distinct personality to each game character. Make sure that the characters do not appear to be made up of individual, separate particles.
  6. For 3D games, use Voxel art – What Pixel Art is for 2D mobile games, Voxel (Pixel with Volume) is for their 3D counterparts. You need not look beyond the super-successful Minecraft game to find out how smart usage of voxels can add to the coolness of your games. Each voxel has the additional dimension of depth (in essence, they are like cubes). In a gameplay scenario, there can be several thousands of voxels in the background – color-schemed and properly detailed. It will add just that extra dash of innovativeness and realism to the game.
  7. Scaling the layers – Those new to the domain of mobile app animation tend to make the mistake of using the Transform tool for scaling the layers individually. This, in turn, generally leads to the sizes on the sprite sheets getting messed up. Instead, you should use the Select tool – both for upscaling as well as downscaling the layers. This is particularly important if you are working with relatively large drawings, since they require more texture (in terms of pixels) on the sheets.
  8. Include follow through movements – If the hands of a character abruptly comes to a standstill after, say, hitting an opponent or pitching a ball, that would: a) look odd, and b) hurt the continuity of the game. Remember to include natural follow through animation movements, to make the actions of the characters more believable. While preparing the screen transitions, make sure that the overlapping actions/views are consistent. Leading game developers generally add follow through actions via in-game animation.
  9. Don’t go overboard with the number of frames – Adding as many frames as possible apparently makes the visual element of games richer. Fair enough – but using too many frames can also result in interruptions in the timings of character movements (e.g., the audio features might not be in sync with the visual gameplay). Professional animators from mobile app companies recommend using a limited number of frames, and complementing them with a nice smear. Making a game good-looking is important – but ensuring that it works properly is even more crucial!
  10. Make use of vector graphics – Representing different shapes in a 2D/3D game properly necessitates the use of vector graphics tools for game animation artists. Inkscape and Adobe Illustrator are two top-notch, highly resourceful vector graphics libraries that you can use. If your game development budget allows you to, go for Corel Draw – which allows the creation of more precise graphics. For making 2D games, the Spine skeletal animation tool is extremely handy too. Read up more about the Spine tool here.
  11. Transformations are your friend – A rule of thumb that any good iPhone/Android game follows is that, all the animations have to be relatively lightweight (otherwise, the entire game will be slow and laggy). This is where the importance of Transformations comes into the picture. Skew, Move, Scale and Rotate are some of the animation transformations that you can use to add a natural feel to a game’s animation, without increasing its size much. If required, consider adding more drawing swaps.
  12. Implement ‘Squash-n-Stretch’ effects – Yet another way to add realism to your effects. Let’s consider an example to explain Squash-n-Stretch – when a button/tab is pressed on the game screen, it should display a ‘pressed down’ appearance (gradually returning to the original shape). Apart from UI elements like this, Squash-n-Stretch should also be applied on separate game particles – a bouncing ball, or a character which has just been hit, or a crushed bottle, and the like. This effect replicates the application of pressure on any element in the game interface.
  13. Think big, think ridiculous – App and game developers should always go all out with the sprite animations in 2D games. There is no dearth of games which seem boring and undercooked, simply because the animations are not interesting/eye-catching enough. Your aim should be coming up with animations which will ‘surprise’ and ‘excite’ (the two watchwords) final users. You have the resources – and there is no point in not making full use of it. Why should a fire-breathing dragon in your game generate only a pale bit of flame?
  14. Make sure that the animation timings are correct – A car whizzes through on the road, and the ‘vroom’ sound is audible 5 seconds later! Not a particularly good feature of any mobile racing game, right? For any type of games, designers and animators need to ensure that the timing is completely in sync with the poses (of characters) and the gameplay actions. Things like how long a character would remain suspended in air, or keep rolling, or bounce about, also depend on the animation timing settings. Test your game multiple times, to find out if there are any glitches in this regard.
  15. Pay attention to secondary actions – Secondary actions refer to those little things that bring about an air of completeness in a mobile game scenario. If you are making a character walk (primary action), implement a movement for its hands too (secondary action). While depicting a garden (spelling bee games, anyone?), decide how you will make the plants and flowers move. To provide an immersive experience, you need to create a back buffer, which would preload a frame in background, while the previous one is still being displayed. For seamless secondary actions in gameplay, assets might have to be loaded as well. Right from the flight of birds in the sky, to the movement of grass due to a breeze – you need to be attentive about everything.

3D mobile game animators need to be experts at solid three-dimensional drawing. Do not forget to add some ‘anticipatory movements’ before any action (for example, bending of the knees before a jump), to make the gameplay appear natural. Most movements in a game should follow a regular arc. Do not make your game a riot of colors either – pick 5-6 colors in the main theme, and play around with them.

 

Unless the content of a mobile game appeals to the end-users, it would never be successful – no matter how good its animation features are. However, the above tips can significantly add to the charms of a game – provided the underlying concept is interesting enough.

 

Do you have any other game animation tips to share?