Development of interactive book is a pretty hard work. To make a really good product you need to put as much as possible.
Today we want share some of our book development stages and technology that we used.
Let’s talk about animations.
Usually frame-by-frame is used for animation. It is more commonly known as stop-motion animation. It is achieved by manipulating a physical object and making it appear to move on its own by shooting one frame, manipulating the object, then shooting another frame, and so on. In the end you will have a bunch of frames, which needs to change according time.
In some places we used this kind of animation:
But to make a really smooth animation this is not enough (or you’ll need a hundreds of frames, which is not very comfortable).
That’s why we give a try for skeletal animation. This technique is used by constructing a series of ‘bones,’ sometimes referred to as rigging (or skeleton). Each bone in the skeleton is associated with some portion of the character’s visual representation. Skinning is the process of creating this association.
Exploded Doroti’s parts for skeletal animation
Rigging and skinning process
An animation consists just of several frames (poses). Each frame potentially updating the transformation of all the joints in the skeleton. Final step is to interpolate transformations between frames.
Skeletal animation gives us more smoothness and saves a lot of space for our app.
Here is a more complex character which uses skeletal animation:
Spider’s bones hierarchy
OzBook has scenes which requires advanced graphics to be fully impressive. We needed to use “water refraction” or “heat haze (shimmer)” effect in “Lion meets flame ball” and “Witch in water” scenes. It’s quit easy to do this in shaders (glsl). But originally our engine was designed to support older devices as well (for instance – iPhone 3G). So to avoid making two different render mechanisms – we created this effect without using shaders. This can be done in two rendering passes. First one – simple static image, the second one consist of two texture layers which both are applied on the grid with vertex deformation. First layer is the same static texture and the second one is the mask texture which is scrolled up. That’s it!
For more clear view of this effect, here is a video:
