Wenn Du am Ende des Tutorials angekommen bist, wird das Ganze tatsächlich Sinn ergeben.

Otaku Mascot unterstützt Bilder in mehreren unterschiedlichen Formaten: Windows Bitmaps (mit der Endung .BMP), .PCX und .BMP (Deluxe Paint). Dies sind die einzigen Bildformate die Otaku Mascot 'versteht'. Es gibt viele, viele verschiedene Malprogramme und jedes davon unterstützt zumindest eins von diesen Formaten.

Wir benutzen in diesem Tutorial Bilder im .gif-Format, weil dies ein html-basiertes Tutorial ist. Das heisst NICHT, dass Otaku Mascot .gif unterstützt, es versteht nur die oben aufgeführten Formate!

Ein Mascot darf höchstens 320 x 200 gross sein, was eigentlich viel zu gross ist, Dir aber viel Platz zum Arbeiten gibt. Ein typisches Mascot ist etwa 80 Pixel breit und um die 150 Pixel hoch. Das ist aber keinesfalls ein festes Limit. Es könnte z.B. auch 150 Pixel breit und 80 Pixel hoch sein. Du solltest Dir nur eins merken: Je grösser die Bilder sind, desto länger wird dein Mascot zum Laden brauchen.

Damit dein Mascot so richtig cool auf deinem Desktop aussieht, hast Du die Möglichkeit , den überflüssigen 'Kasten' um das eigentliche Bild rauszuschneiden, so dass der Hintergrund rund um deinen Charakter zu sehen ist. Für diesen Trick brauchst Du eine einzelne Farbe, die dann die transparente Farbe ist. Alles, was im Bild diese Farbe hat, wird später transparent sein und man wird dort den Hintergrund durchsehen. Otaku Mascot macht automatisch die Farbe des Pixels in der linken oberen Ecke jedes Bildes zur transpartenten Farbe. Das heisst, jedes Bild hat seine eigene transparente Farbe. Das heisst auch, du kannst nichts in die linke obere Ecke zeichnen, was später nicht 'unsichtbar' sein soll, aber das ist nicht wirklich ein Problem. Wenn du unbedingt ein rechteckiges, nicht-transparentes Bild haben willst, mach dein Bild einfach ein bisschen grösser und zeichne dann die erste Zeile des Bildes in der transparenten Farbe.

Mit der Hilfe von Zillia werde Ich Euch zeigen, wie man ein Mascot macht. Für Dein eigenes Mascot benutzt Du natürlich Deine eigenen Bilder.

Die Kunst der Animation ist, ein Bild durch ein anderes, leicht verändertes Bild zu ersetzen, und dies in einer gleichmässigen Geschwindigkeit, so dass der Eindruck von Bewegung entsteht. Bei einem Otaku Mascot ersetzt jedes Bild komplett seinen Vorgänger, so dass du jedes Mal wieder den ganzen Körper zeichnen musst, auch wenn Du nur die Augen verändern willst. Denk daran, wenn Du vorhast, viele Frames (Einzelbilder) zu verwenden.

Wir fangen mit einer für ein Mascot typischen Aktion an, dem Blinzeln. Hier ist die einfachste mögliche Animation, Augen offen und Augen geschlossen.

Das erste Bild soll für etwa 6 Sekunden gezeigt werden, gefolgt von dem zweiten Bild, das etwa 0.1 Sekunden gezeigt werden soll. Dann kommt wieder das erste Bild für 6 Sekunden and dann das zweite usw., usw. Das ist die einfachste Animation, die es im Otaku Mascot Programm gibt. Und so sieht das Ganze im Otaku Mascot Editor aus. Übrigens, im Editor wird die Zeit in Millisekunden berechnet, d.h. in Tausendstel-Sekunden. Eine Sekunde hat 1000 Millisekunden, also sind 6000 Millisekunden 6 Sekunden und 100 Millisekunden sind 0.1 Sekunden (eine Zehntel-Sekunde).

Und so kann eine Animation aussehen:

Sieht ziemlich unnatürlich aus, nicht wahr? Du kannst im Otaku Mascot Programm die Verzögerung für das erste Einzelbild durch einen Zeitrahmen festlegen, so dass Du eine zufällige Verzögerung bekommst, was dann ein bisschen realistischer aussieht. Aber das wahre Problem hier ist, dass die Animation nicht flüssig genug aussieht. Wir können das ändern, indem wir noch ein Zwischenbild einfügen, auf dem die Augen halb geschlossen sind.

Dieses Bild kommt zwischen die ersten zwei Bilder und nochmal nach das letzte Bild. In Otaku Mascot sieht das so aus:

Das ergibt ein sehr viel natürlicheres und ausdrucksstärkeres Blinzeln, wie dieses animierte gif zeigt:

Okay, ein Blinzeln ist ja gut und schön und sieht nett aus, aber nach einer Weile wird es doch langweilig. Lasst uns also noch eine andere Aktion einführen, die nach dem Blinzeln kommt. Diese neue Aktion soll ein trauriger Blick sein, weil Zillia sich ignoriert fühlt.

Sie steckt also ihre Hand in den Mund, ihre Augen schimmern leicht, und dann zieht sie die Hand wieder zurück und nimmt ihre normale Haltung wieder ein. Diese Aktion sieht im Otaku Mascot Editor so aus:

Und so sieht das Resultat aus (Ich habe das Schimmern so eingestellt, dass es sich dreimal wiederholt, so dass Du es besser sehen kannst):

Schreib das Blinzeln und den traurigen Blick zusammen, und dann sieht es im Otaku Mascot Editor so aus:

Und so sieht die Animation dann aus:

Der Effekt mit den schimmernden Augen funktioniert nur, wenn er lang genug wiederholt wird, so dass man auch sehen kann, was passiert. Wir könnten natürlich einfach die Einzelbilder mit den schimmernden Augen (shimmer1.bmp und shimmer2.bmp) so lange wiederholen, wie wir die Sequenz haben wollen, aber das wird zu unübersichtlich. Was wir brauchen ist mehr Kontrolle über den Fluss der Animation, und dafür sind Schleifen gut.

Eine Schleife erlaubt es Dir, eine Sequenz von Einzelbildern eine bestimmte Anzahl von Malen zu wiederholen. Ausserdem kannst Du die Schleife auch so einstellen, dass sie sich eine zufällige Anzahl von Malen wiederholt, was das Ganze interessanter und lebensechter macht.

Lass uns nun das Schimmern der Augen so verändern, dass es sich eine zufällige Anzahl von Malen wiederholt, z.B. 40- bis 80-mal. Diese Aktion sieht nun so im Otaku Mascot Editor aus. Du kannst sehen, wo wir zu Frame 7 springen und die Schleife 40- bis 80-mal wiederholen. Beachte den Farbwechsel nach dem Sprung. Der Wechsel zeigt an, wo eine Aktion endet und eine andere beginnt. Es ist eine Orientierungshilfe, um Dir zu helfen, Dich in einer langen Liste von Frames zurechtzufinden.

Lass und nun ändern, wie oft Zillia blinzelt, bevor sie traurig guckt. Es dauert schliesslich eine Weile, bis sie traurig wird.

Wir werden die Zeit zwischen einem Blinzeln und dem nächsten auf zufällig setzen, und genauso die Anzahl von Malen, die Zillia jedesmal blinzelt. In diesem Fall zeigen wir das Bild mit Zillia's 'Normalzustand' (base.bmp) für 1 bis 10 Sekunden, um die Verzögerung zwischen einem Blinzeln und dem nächsten herzustellen, dann zeigen wir das Blinzeln. Dann wiederholen wir die Sequenz 5- bis 8-mal und zeigen dann die Aktion mit den traurigen Augen.

So sehen die Veränderungen im Otaku Mascot Editor aus. Die neue Schleife für das Blinzeln liegt auf Frame 4.

Und hier ist eine vereinfachte Version als animiertes Gif (Blinzeln, Blinzeln, Blinzeln, traurig, Wiederholung. Die Zeit zwischen den einzelnen Blinzlern ist hier jedesmal anders, um den Effekt zu zeigen):

Ein Otaku Mascot kann eine spezielle Animation als Reaktion auf einen Mausklick zeigen. Zusätzlich kann auch ein Sound während dieser Aktion abgespielt werden, wenn Du willst. In diesem Fall soll Zillia lächeln, wenn Du Dich mit ihr beschäftigt, indem Du auf sie klickst, aber wir wollen keinen Ton.

Dies sind die zwei Bilder, die wir brauchen. Sie fängt an, zu lächeln, hält das Lächeln für eine Weile und hört dann auf zu lächeln. Das sieht so aus im Otaku Mascot Editor:

So sieht die Klick-Animation aus:

Diese Sequenz wird dann ans Ende der anderen Sequenzen gestellt. Der letzte Frame der vorherigen Sequenz wird so eingestellt, dass die Animation immer zurück zum Anfang springt, so dass diese neue Sequenz niemals gezeigt wird.

So sieht die Sequenz aus nachdem sie ans Ende der Hauptsequenz gestellt wurde, und nachdem die Sprünge eingestellt wurden (die neue Sequenz besteht aus den Frames 10 bis 13). Beachte in Frame 9 den Sprung zu Frame 1. Es sind keine Werte angegeben, wie oft der Sprung ausgeführt werden soll. Wenn Du einen Sprung so einstellst, dass sowohl die minimale als auch die maximale Anzahl, die gesprungen werden soll, entweder nicht angegeben oder 0 ist, dann wird der Sprung jedesmal ausgeführt. So gehen wir sicher, dass die Klick-Animation nicht in der normalen Sequenz gezeigt wird.

Als nächstes schalten wir die Klick-Animation an, indem wir 'Click Animation Active' anklicken. Dann stellen wir den 'Rahmen' der Klick-Animation ein, indem wir das erste Bild ("from") der Sequenz und das letzte Bild ("to") der Sequenz angeben. Die Einstellungen für die Klick-Animation sehen im Otaku Mascot Editor so aus:

Wenn wir jetzt auf Zillia klicken, wird sie lächeln - wenigstens für kurze Zeit- und dann zum ersten Bild der normalen Animation zurückkehren.