Making of the Firebeast (from A Wizard's Odyssey)


Firebeast


The firebeast is one of the more formidable monsters in the labyrinth stages of A Wizard's Odyssey.  As potential heroes quickly find out, it is invulnerable to fire-based attacks.  In fact, only water-based spells can stop the firebeast's relentless charges. 

The picture above shows progressive stages in the monster's design.  The leftmost rendering is a wireframe rendering, which shows how the firebeast's surface has been divided up into sets of triangles.  Every character in the game is first described as a set of triangles because modern graphics cards are very efficient at drawing them. 

The center rendering is a Gouraud-shaded solid rendering.  Gouraud shading is a very common way of drawing solid objects that somewhat hides the object's faceted representation (flat triangles).

The rightmost rendering is a textured rendering.  We have effectively glued artist-drawn images onto each of the triangles to give the firebeast more interesting details without introducing more triangles.

Once the firebeast model is fully textured, we load it up into a custom animator program to define various animation poses. 

Firebeast_animate

This picture shows one frame in which the firebeast is taking a hit.  One of its leg components is translucent because we are editing that part in the animation editor.  After all the animation frames and inter-frame timings are set, we save all the data and load it into the game.  The game can then, based on the mood of the firebeast, choose some animation sequence to play and smoothly transition between the animation frames using a process called interpolation.

Stomp

Here is an in-game scene where the firebeast has just finished a stomp; the stomp releases a shock-wave that propagates very quickly outward.  In response, the player has activated the fire-protection spell which can counter any fire-based attack. 

Hope you enjoyed this behind-the-scenes look at the firebeast's design!

Announcement and SmartSplice Tip

Hello!
 
Two thoughts:
 
1. Digital Staircase wants to see your awesome SmartSplice creations!
We've been really impressed with what you've sent us so far. Keep them coming!
Please send your creations to: submit@digitalstaircase.com
(If you give us permission, we may feature it in a future blog post!)
 
2. SmartSplice Tip: Creating figures and diagrams.

With the new features in SmartSplice 2.0, it is now easy to create figures and diagrams using SmartSplice.  In this tip, we'll give a brief overview of some of these new capabilities. 

Step 1: Load an image from file (here, we chose a photo of a Malaysian marketplace). 

Sc1

Step 2: Tap Extract/Insert, Insert object, and then Figure object.  Choosing Arrow will bring up an arrow to be inserted:

Sc2

Step 3: Double-tap the screen to bring out options (e.g., flip, rotate, color,...).  Here we chose rotate.  The green circle with marked angles pops up to aid in precise rotations.  Drag your finger about the circle's center to rotate.

Sc3


Step 4: Double-tap when done rotating; then drag the arrow and resize it as desired.

Sc4

Step 5: Double-tap the screen again, and choose Color & opacity.  Use the sliders to choose the desired color and opacity of the object being inserted (here, an arrow). 

Sc5


Step 6: Press OK when done.  Press the Insert button to insert the arrow into the image.

Sc6

Step 7:  We'll now want to add some text.  Tap Extract/Insert, Insert object, and then Text.  Tap on the text box that appears and fill in the text you wish to insert.  Press Done on the Keyboard, and then OK to proceed.

Sc7


Step 8: Choose the color, size, and position of the text (as you would for the arrow above).  Press Insert to insert the text into the image.

Sc8

Step 9: Try adding other elements to the image, such as a speech bubble.  The bubble starts out opaque, but can be made semi-transparent by playing with the opacity slider. 

Sc11