Animierte Figur als Navigation.

Ein weiteres Hobbyprojekt: Der Web-Scroller, der gleichzeitig als Navigation dienen kann. Hintergrund: Die Neugestaltung meiner privaten Homepage [in dieser Form abgelöst seit Oktober 2002].

Wie man eine animierte Figura als Navigation umsetzt

Ich hatte jede Menge Inhalt, aber keine Ahnung, wie ich das gescheit in eine Navigation umwandeln sollte. Irgendwann fiel mir dann ein, dass ich ja noch jede Menge alter Grafiken „auf Halde“ hatte (siehe auch die Arbeitsproben vor 2000). Also habe ich eine Scrollroutine programmiert, die einem Jump’n’Run der guten, alten Zeit stark ähnelt: Der Screen wird aus einzelnen Bausteinen aufgebaut („Tiles“), die dann gescrollt werden. Jedes Tile hat gewisse Eigenschaften (z.B.: „Tür“, „Boden“, „Hindernis“ usw.), die die Aktion der Figur entsprechend beeinflussen. In dem Beispiel weiter unten bleibt die Figur automatisch vor einer Tür stehen. Ein Blick hinter die Kulissen:

Der Anfang: Grafikbausteine („Tiles“)
Jump'n'Run Navigation

Jump’n’Run Navigation

Die Tiles haben alle eine feste Größe. Hier sind es 32×32 Pixel – ein Relikt aus Amiga-Tagen. Natürlich sollten die Teile auch aneinander passen. Der gesamte „Navigations-Level“ besteht aus 8 Hintergrund-Teilen plus den Türen. Mit dieser Methode bleiben die Dateigrößen überschaubar: Die Grafiken haben maximal 16 Farben, lassen sich also mit einer 4-Bit-Palette darstellen.

Die Figur
Jump'n'Run Navigation

Jump’n’Run Navigation

Als nächstes kommt die Figur. Was jetzt grün ist, wird später transparent. Die Animationsphasen werden erstellt. Zu Zeiten des Speichermangels kam es immer darauf an, dass die Animationen möglichst sparsam ausfielen. Gleichzeitig sollten sie natürlich auch so flüssig wie möglich sein. Daher wurden zum Beispiel links/ rechts Animationen in der Regel oft einfach durch den Programmcode gespiegelt, um sie nur einmal im Speicher vorhalten zu müssen.

Jump'n'Run Navigation

Jump’n’Run Navigation

Der Code

Ohne Coding geht es nicht: Hier sieht man einen der wichtigsten Event-Handler: Der Screen wird 50mal in der Sekunde neu aufgebaut. Da keine Gegner o.ä. verwaltet werden müssen, reicht es, den Screen zu scrollen und die Figur zu bewegen. … und wie sieht es dann in der Entwicklungsumgebung aussieht, kann man an den Bildern nachvollziehen. Ich habe den sichtbaren Ausschnitt vergrößert. Man kann erkennen: Links und rechts wird der Bildschirm bereits „vorbereitet“. Ein Tile lappt immer über. Zur Zeit werden knapp 50 Kanäle durch die Tiles belegt. Das ist zwar eine einfache Lösung, aber suboptimal: Was macht man, wenn der Ausschnitt vergößert wird oder Gegner erscheinen? Schüsse? Soll man immer knapp 200-300 Kanäle „auf Abruf“ bereithalten? Nein, natürlich nicht! Es wäre besser, aus allen Tiles ein neues Bild zu erstellen. Dadurch könnte man zwar Kanäle sparen, aber die Kollisionsverwaltung etc. würde erschwert. Das wollte ich mir in diesem Fall ersparen – hier war es nicht nötig. Das Ergebnis: In einem Tag waren die Routinen fertig. Man muß eben immer situationsbezogen abwägen.

Das Ergebnis
Jump'n'Run Navigation

Jump’n’Run Navigation

Ein vergrößerter Ausschnitt. So ungefähr hätte es „damals“, 1991, auf dem Amiga ausgesehen, wenn, ja wenn… die Grafiken entstanden übrigens mit Deluxe Paint II (oder III ?), ein Produkt von Electronic Arts. Ja, die stellten damals nicht nur Sportspiele her! Heute wird ja alles eingesannt, nachbearbeitet, 3D-modelliert… aber früher wurde alles „gepixelt“. Entwickelt wurde der Scroller mit Macromedia Director 8.0

Um das Ergebnis in Aktion zu sehen, hier klicken. [Anm.: Benötigt wird das kostenlose Shockwave-PlugIn.]

Oliver Kilb

Oliver Kilb

Schön, dass ihr vorbeischaut! Viel Spaß auf meiner kleinen Homepage.

Das könnte Dich auch interessieren …

2 Antworten

  1. 16. August 2015

    […] Realisiert wurde diese Form der Navigation wieder mit dem Shockwave-PlugIn, weshalb ich auch eine alternative Form der Navigation anbot, um diejenigen nicht auszuschließen, die kein Shockwave installieren wollten. Die Spielfigur selbst stammt natürlich auch von mir, und über deren Hintergrundgeschichte gibt es bereits einen Artikel auf meiner Homepage. […]

  2. 5. Januar 2017

    […] Spiel ist leider nichts geworden, vielleicht war es aber auch besser so. Einige frühe Grafiken und Animationsstudien haben die Zeit überlebt und wurden schon in einigen Artikeln hier beschrieben. Und einen […]

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.