Generating 2d sprites using animated 3d models

SIMULZINE#4-cover-2d-3d-blender

This article describes the workflow used for making 2d sprite textures with the help of 3d animated models and Blender. The resulting 2d animations can be used as assets in games or other applications. In this way, more realistic and easier to produce animations can be embedded in a 2d setting. The trade-off between performance and resolution is something the development team has to deal efficiently with especially when targeting HTML5 mobile games.

A river scene for an HTML5 fishing game

The workflow was developed and used in some HTML5 demo games of a game studio for which i was doing contract work back in 2013. We wanted to make a visually appealing river scene, where the player will repeatedly throw a fishing pole into the water to catch fish. Based on his catch, the player would either win, lose or participate in a mini game. The background image of the scene was chosen by the art director, while i, as the animator, focused mostly on the water, the fishing pole, and the clamp shell.

backdrop of the river scene

figure 1
backdrop of the river scene

3d animated river water

In contrast to ocean water, some specific characteristics of river water are :

  • flow in one direction
  • constant speed
  • smaller surface waves
  • shallow depths

Surprisingly, there are a lot of tutorials about making animated 3d ocean water, but maybe none that focus on the specifics of river water. An additional challenge was the fact that this water animation had to be a seamless loop. It would loop constantly in the scene, giving the impression of a realistic river observed closely from its banks.

To address the above, a simple scene was created in Blender constisting of :

  • a plane with the background image as texture
  • a plane with a sky image as texture
  • a subdivided plane with an ocean modifier applied on it
  • a camera and a light source

the river scene in Blender

figure 2
the river scene in Blender
top panel: general 3d view, bottom panels: camera views right: outliner and ocean modifier

Download the blendfile to understand and use this setup in your own projects.

The river consists of a plane (with an ocean modifier applied) repeated three times in the Y direction. To simulate the river flow, the camera (with its backdrop and the sky) were moved in the Y direction, while the ocean modifier generated the desired water effects. Having in mind that the ocean modifier renders identical waves in every repeated plane, if we start moving the camera (with its backdrop and the sky) from the center of the first plane to the exact center of the next repeated plane, a seamless loopable animation is achieved! Also, the material of the river has a mirror effect similar to most water materials used in 3d. This way it reflects the surrounding environment (in our case the background image and the sky).

a sprite sheet of the river water animation consisting of 29 frames

figure 3
a sprite sheet of the river water animation consisting of 29 frames

3d animated fishing pole and lure

A 3d model of a fishing pole was purchased and then adjusted and animated in Blender. The challenges here were the realistic bending of the flexible pole followed by the dynamic movement of the lure, the correct perspective of fishing in the shore of a river, the impact point/time of the lure in the water and finally some foam effect for the water surface.

the animation of the fishing pole and lure setup in Blender

figure 4
the animation of the fishing pole and lure in Blender

A simple deform modifier and shapekeys were used to animate the fishing pole. The lure, the line and the handle were animated seperately. The splash and foam effect was generated using a particle system triggered at water impact and kept alive until the end of the animation. The animation had two states: an “idle” state (where the lure moves like a pendulum) and a “throw and catch” state. These two states can then be controlled via javascript in the game. Everything was timed to achieve the desired result: about 4 seconds animation, using 75 distinct frames rendered in Blender.

forgotten_database

figure 5
a sprite sheet of the fishing pole animation consisting of 74 frames

3d animated clamp shell with or without a perl inside

For its use in another scene in the game, an animated clamp shell was required that would be either empty or (if the player was lucky) holding a pearl inside. Luckily the 3d model of the shell was provided to us, but the UV texturing had to be done in Blender. The flickering movement of the shell, before it opens wide, was done by simply applying a noise modifier to its rotation f-curves.

the animation of the clamp shell in Blender

figure 6
the animation of the clamp shell in Blender
left top panel: camera view, left bottom panel: the noise modifier on the rotation f-curve, center panel: general 3d view

a sprite sheet of the clamp shell animation consisting of 35 frames

figure 7
a sprite sheet of the clamp shell animation consisting of 35 frames

Rendering and 2d sprite sheet generation

To bring these 3d animations in a 2d game, they have to be rendered frame by frame with the use of alpha channels in the empty space. Also the camera has to be placed in a convenient point of view so as to avoid differences in perspective with the rest of the environment. The rendered images can then be brought in a software like Texturepacker to trim the white space and produce sprite sheets to use in the game platform of choice. Depending on the resolution requirements, these 2d animations can get resource-hungry in terms of file size and rendering performance, so do your math before timing your animation and rendering the frames needed from Blender.

Limitations of HTML5 Game Development for mobile devices

The game was developed in HTML5 Canvas using the CreateJS library and was intended for mobile devices, so we quickly faced the performance limitations of browser games, especially in mobile platforms. Texture sizes, frames per second, device specific errors or preloading/caching methods became part of our regular concerns. Fortunately, the lead developer of the game liked what could be achieved with this workflow and supported the extra development needed to render the realistic 2d sprites efficiently in the demo game setting.

Tools used for this workflow

  • Blender was the 3d animation suite of choice
  • Texturepacker was used for sprite sheet generation
  • CreateJS was the Javascript Canvas Library
  • (Flash Professional Toolkit for CreateJS was used to prepare the demos for this article)