To create a mascot, you will need to prepare the images first. A mascot is essentially an animation and therefore you need think in those terms. An animation is nothing more than a series of images that have small changes from one image to the next. Show these images in order at the right speed and you suddenly have the illusion of motion.

By the time you have finished this tutorial, you will know what this means and how to achieve it.

Otaku Mascot can accept images in several different formats: Windows Bitmap files (ending in .BMP), .PCX files and .LBM (Deluxe Paint). These are the only image formats that Otaku Mascot understands. There are many, many different paint programs and all of these support one or more of these file formats.

Note: in this tutorial, we are using GIF files since this is an HTML-based tutorial. Otaku Mascot does not support GIF, it only reads the formats specified above.

The size of the mascot is limited to 320 x 200, which is rather oversized but does give you plenty of room to work in. A typical mascot will be around 80 pixels wide and around 150 pixels high. However, this is by no means a hard and fast limit. It could be 150 pixels wide and 80 pixels high, for example. One thing to keep in mind is the larger the image, the longer it takes to load.

What makes a mascot look really cool on your desktop is the ability to trim away all the excess rectangle around the image, allowing the background desktop to show throw the outline of the character. This trick requires a single color to be considered transparent. Any place this color exists in the image will be considered transparent and the background will show through. For Otaku Mascot, this transparency is taken from the pixel in the upper left corner of each image. This means each image will get its own transparency color. It also means you can't draw any non-transparent color in the upper left corner of the image but this isn't a burden really. If you insist on a rectangular image, just increase the height of your image by one line and let the top line of the image be transparent.

With the help of Zillia (a creation of Dov Sherman), I'm now going to take you through the process of building a mascot. For your own mascot, you will use your own images, of course.

The art of animation is to replace one image with a slightly different image at a steady rate to give the illusion of motion. In Otaku Mascot, each image completely replaces the previous image so if you have only the eyes changing, the whole body will have to be replaced as well. Keep this in mind if you try to create a lot of frames.

We will start with a typical action for a mascot, eye blinks. Here we have the simplest animation possible, eyes open and eyes closed.

The first image will be shown for about 6 seconds followed by the second image which will be shown for about 0.1 second. This is followed by the first image again for another 6 seconds and the second image, etc., etc. This is the simplest animation you can get in Otaku Mascot. Here is what it looks like in the Otaku Mascot editor. By the way, in the editor, all times are expressed in milliseconds which are thousandths of a second. There are 1000 milliseconds in a second so 6000 milliseconds equals 6 seconds and 100 milliseconds equals 0.1 seconds (a tenth of a second).

And this is what the animation can look like:

Looks rather awkward, yes? One thing you can do in Otaku Mascot is set the delay for the first frame to a range of time so you get a random delay, which will be a little more likelike. But the real problem here is the animation doesn't look smooth enough. We can fix that by introducing an intermediate image which shows the eyes partially closed.

This image is put between the first two images and after the last image. In Otaku Mascot, it looks like this:

This produces a much more likelike and expressive blink, as this animated gif shows:

Okay, a blink is all well and good and looks really nice and all that but it does get a little boring after awhile. So, let's introduce another action which will be shown after the eye blink. This new action will be a sad, wispy-eyed look because she is being ignored.

So she puts her hand in her mouth, her eyes quietly shimmer, and then she withdraws her hand, returning to the normal state. This action looks like this in the Otaku Mascot Editor:

And the results look like this (I have extended the shimmer sequence to three repeats so you can more clearly see it happening):

Put the blink and the sad action together and it looks like this in the Otaku Mascot Editor:

and this is what the animation can look like:

The shimmery eye effect works only if it is repeated long enough so you can see what is going on. We could, I suppose, repeat the shimmery eye frames (shimmer1.bmp and shimmer2.bmp) for as long as we want the sequence to repeat but that gets too unwieldy. What is needed is some control over the flow of animation and that is what a block loop is for.

A block loop will allow you to repeat a sequence of frames a specified number of times. In addition, you can also set up the loop to repeat a random number of times, which makes it more interesting and lifelike.

Let's modify the eye shimmer to repeat a random number of times, say 40 to 80 times. This action now looks like this in the Otaku Mascot editor. You can see where we jump to frame 7 and repeat the loop 40 to 80 times. Note the color change after the jump. This change indicates where one action ends and another begins. It is a landmark to help you find your way around a long list of frames.

Now, let's change the number of times Zillia blinks before she gets all wispy-eyed. It takes her awhile to grow sad, after all.

We will randomize the length of time between blinks and we will randomize the number of times she repeats the blink. In this case, we will hold on the normal state (base.bmp) for 1 to 10 seconds to create the delay between blinks then show the blink. We will then repeat this sequence 5 to 8 times before doing the sad action.

Here is the what the changes look like in the Otaku Mascot Editor. The new loop for the blinks is on frame 4.

And here is a simplified version as an animated GIF (blink, blink, blink, be sad, repeat. The time between blinks is different here just for the effect):

An Otaku Mascot can show a special action in response to a mouse click. In addition, a sound file can be played during this action, if you choose. In this case, we are going to make Zillia smile when the user pays attention to her by clicking on her but not have any sound.

These are the two images needed. She goes into the smile, holds the smile for a while and then goes out of the smile. They will look like this in the Otaku Mascot editor:

This is what the click animation looks like:

This sequence is then added to the end of the other sequences. The last frame of the previous sequence is set to always jump to the beginning so this new sequence will never be seen.

This is what the sequence looks like after adding it to the end of the main sequence and setting the block jumps (the new sequence is frames 10 through 13). Notice in frame 9 the jump to frame 1 but there are no values set for the number of times to jump. If you set a jump and both the minimum and maximum times to jump are not specified or are 0 then the jump will always be taken. This is how we make sure the click animation doesn't get shown in the regular sequence.

Next, we enable the Click Animation with the Click Animation Active check box. Then we set the range of the click animation by setting the first frame ("from") of the new sequence and the last frame ("to") of the sequence. The click animation settings look like this in the Otaku Mascot Editor:

Now, when we click on Zillia, she will smile -- at least for a little while -- then return to her normal routine at the first frame.

Well, that about covers the basics of creating a mascot with Otaku Mascot. Remember, get your images ready and plan your sequences and you will be creating mascots with the best of them!