AN1001 - Animation in SHIP

Animation in SHIP

Animation is a common element of many GUIs. Whether a rotating fan, slowly filling indicator, or a glowing element, subtle animations can enhance a GUI and make it more professional and modern.

At the core of every animation is a series of images that, when rotated through in-place one after another, form the impression of an animated object.

Animation in SHIP is the process of cycling through a series of images at a certain rate, making each one visible in sequence with the others invisible.

SHIPTide Project Files for AN1001

Assuming you've downloaded and installed the SHIPTide Rapid GUI Development Environment, pick a target platform and download one of the following projects. Unzip the project to a directory of your choice and open up the project in SHIPTide.

• AN1001 SIM102  ↴ 
• AN1001 SIM110  ↴ 
• AN1001 SIM205  ↴ 
• AN1001 SIM225  ↴ 
• AN1001 Renesas YLCDRX63N  ↴ 

There are many ways to implement animation in SHIP; the attached project uses the concept of "grouped images" and demonstrates 4 different timer modes.

Animation Images

Just like the cartoon drawings you might have drawn as a child on a corner of a book and "flipped" through to animate, these images will be sequentially shown within the runtime SHIPEngine environment. Therefore, as you create the images in Photoshop or your graphics design program of choice, ensure that each image transitions to the next in exactly the right location within the borders of the image boundary.

Creating a set of Animation Images

Each animation image should be exactly the same size -- in this example project the fan images are all exactly 75 pixels square. Here they are, all in fully transparent alpha-blended .png format:

In this example the three fan images are not only the same size (75 x 75 pixels), but the actual drawings within the image boundaries are in exactly the same location just rotated. If one of the fan images were shifted to the right (for example) you would see horizontal jitter in the animation.

This may be a desired effect, for example if you wish to animate an arrow moving from left to right towards a target. But for many animations you will want to pick a drawing center-point and ensure the various versions of the image are centered on that point within the image boundaries.

Image Formats and Optimizations

All images in SHIPTide need to be pre-scaled to the desired size for the GUI. SHIPTide does not scale images because on small LCD screens generic auto-scaling algorithms rarely produce attractive results. Edges often get very jagged and distorted.

Because of the complexity of creating small images, SHIPTide does not attempt to replace high-end graphics design tools -- you will want to use tools like Adobe Photoshop, Fireworks, or Illustrator to develop your icons, backdrops, and images. You can even use Microsoft PowerPoint to generate some images -- beveled buttons are surprisingly easy to create and export in PowerPoint! Illustrator is particularly powerful as you can create your source images in vector format, scale them well, export them to a fixed size and then use an image editing tool like Photoshop to clean up any residual issues.

Small image and icon creation is an art. Sites like Icojam, IconFinder, DryIcons, and many, many more (browser-search for "icons" and you will see!) feature innumerable talented small-image artists -- many can be contracted to develop your images and ensure you have sufficient legal rights to use them.

You will typically use .png or .gif images with transparency so that the animation can alpha-blend on top of any background. While the example project uses a fixed color background, you can change this background color or even layer a background image underneath the fan animation and the fan will rotate and "float" over the background with the background showing through the non-blade part of the fan images. Here is the same fan image over top of an image where you can see the underlying image coming through:

In almost all graphic design tools images can be saved with an 8- or 32-bit color depth, with or without alpha-transparency. Here is a brief chart of the various image formats and their capabilities:

Format	Color Depth (Bits)	Alpha Transparency
BMP	8,32	No
JPG	24	No
GIF	8	Yes
PNG	8,32	Yes

SHIPTide can read and use all these formats. At Serious we generally prefer 8- or 32-bit PNGs -- PNGs are a superset of the other formats.

Try creating your images with 8-bit color depth (with alpha transparency) and see if there is sufficient color depth to create a viable result -- the memory requirements and access times of these smaller 8-bit images are generally advantageous in your runtime GUI environment. For even more speed-sensitive applications, you can pre-blend the image(s) onto the single desired background and save the image as a non-transparent png/gif/jpg/bmp. These image, while not as flexible since they cannot be dropped on top of various backgrounds, will have no transparency channel and will not require run-time alpha blending -- a faster and simpler operation.

In SHIPTide, look in the Project Resources pane and find the three fan images. Click on one of them and examine the properties of the image in the Properties pane:

Grouping the Images

The three fan images, instead of being placed flat in the resources/images area, are placed in a named group. Exploring the project in SHIPTide the group looks like this:

When you group resources like this, you can now use the getChildCount() function in Sail to easily select and assign each of the images in turn to a container at a beat rate driven by a timer.