{"id":32599,"date":"2002-05-03T15:18:00","date_gmt":"2002-05-03T13:18:00","guid":{"rendered":"https:\/\/www.oliver-kilb.de\/www\/?p=32599"},"modified":"2024-11-23T16:11:46","modified_gmt":"2024-11-23T15:11:46","slug":"animierte-figur-als-navigation","status":"publish","type":"post","link":"https:\/\/www.oliver-kilb.de\/www\/2002\/05\/03\/animierte-figur-als-navigation\/","title":{"rendered":"Animierte Figur als Navigation."},"content":{"rendered":"\n

Ein Hobbyprojekt: Der Web-Scroller, der gleichzeitig als Navigation dienen kann. Hintergrund: Die Neugestaltung meiner privaten Homepage [in dieser Form abgel\u00f6st seit Oktober 2002].<\/strong><\/p>\n\n\n\n

Wie man eine animierte Figura als Navigation umsetzt.<\/h2>\n\n\n
\n
\"\"<\/a>
Ausschnitt, 10fach vergr\u00f6\u00dfert<\/figcaption><\/figure>\n<\/div>\n\n\n

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, aus meiner Amiga-Zeit. <\/p>\n\n\n\n

Also habe ich eine Scrollroutine programmiert, die einem Jump’n’Run der guten, alten Zeit stark \u00e4hnelt: Der Screen wird aus einzelnen Bausteinen aufgebaut („Tiles“), die dann gescrollt werden. Jedes Tile hat gewisse Eigenschaften (z.B.: „T\u00fcr“, „Boden“, „Hindernis“ usw.), die die Aktion der Figur entsprechend beeinflussen. <\/p>\n\n\n\n

In dem Beispiel weiter unten bleibt die Figur automatisch vor einer T\u00fcr stehen. Ein Blick hinter die Kulissen.<\/p>\n\n\n\n

Der Anfang: Grafikbausteine („Tiles“).<\/h2>\n\n\n
\n
\"\"<\/a>
Jump’n’Run Navigation<\/figcaption><\/figure>\n<\/div>\n\n\n

Die Tiles<\/a> haben alle eine feste Gr\u00f6\u00dfe. Hier sind es 32×32 Pixel – ein Relikt aus Amiga-Tagen. Nat\u00fcrlich sollten die Teile auch aneinander passen. Der gesamte „Navigations-Level“ besteht aus 8 Hintergrund-Teilen plus den T\u00fcren. Ich habe mich bei alten Spielegrafiken bedient, die ich Anfang der 1990er Jahre gepixelt hatte. Mit ihnen h\u00e4tte ich viel mehr als diesen simplen Gang erstellen k\u00f6nnen.<\/p>\n\n\n\n

Mit der Methode der „Kacheln“ bleiben die Dateigr\u00f6\u00dfen \u00fcberschaubar: Die Grafiken haben maximal 16 Farben, lassen sich also mit einer 4-Bit-Palette darstellen, und mit diesen 8 Kacheln kann ich einen (fast) endlos langen Navigations-„Level“ bauen, inklusive Verzweigungen in Unterbereiche, wenn man durch eine T\u00fcr tritt.<\/p>\n\n\n\n

Die Figur.<\/h2>\n\n\n
\n
\"\"
Jump’n’Run Navigation<\/figcaption><\/figure>\n<\/div>\n\n\n

Als n\u00e4chstes kommt die Figur.<\/p>\n\n\n\n

Was jetzt gr\u00fcn ist, wird sp\u00e4ter transparent. Das geht bei solchen Computergrafiken \u00e4u\u00dferst leicht und effizient, bereits in den 1980er Jahren konnte man eine „transparente Farbe“ definieren. Es musste nicht Gr\u00fcn sein, die Technik ben\u00f6tigt keine besonders auff\u00e4llig Farbe, aber es machte es ein wenig einfacher bei der Erstellung. Die Animationsphasen werden, nachdem sie gepixelt wurden, in den Speicher geladen. Zu Zeiten des Speichermangels kam es immer darauf an, dass die Animationen m\u00f6glichst sparsam ausfielen, d.h. so wenig Farben wie m\u00f6glich verwenden, so wenig Animationsphasen wir m\u00f6glich. Gleichzeitig sollten sie dennoch so fl\u00fcssig wie m\u00f6glich sein.<\/p>\n\n\n\n

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\u00fcssen.<\/p>\n\n\n\n

Der Code.<\/h2>\n\n\n
\n
\"\"<\/a>
Jump’n’Run Navigation<\/figcaption><\/figure>\n<\/div>\n\n\n

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 oder \u00c4hnliches verwaltet werden m\u00fcssen, reicht es, den Screen zu scrollen und die Figur zu bewegen. Sie kann daf\u00fcr auch immer fest in der Mitte stehen bleiben, ohne dass man einen Bereich definiert innerhalb dessen man gehen kann ohne zu scrollen. <\/p>\n\n\n\n

Wie es dann in der Entwicklungsumgebung aussieht, kann man an den Bildern zumindest teilweise nachvollziehen. Ich habe den sichtbaren Ausschnitt weiter unten vergr\u00f6\u00dfert. Man kann erkennen: Links und rechts wird der Bildschirm bereits „vorbereitet“. Ein Tile lappt immer \u00fcber. Zur Zeit werden knapp 50 Kan\u00e4le durch die Tiles belegt. Das ist zwar eine einfache L\u00f6sung, aber suboptimal: Was macht man, wenn der Ausschnitt vergr\u00f6\u00dfert wird oder Gegner erscheinen? Sch\u00fcsse? Soll man immer knapp 200-300 Kan\u00e4le „auf Abruf“ bereithalten? Nein, nat\u00fcrlich nicht! Es w\u00e4re besser, aus allen Tiles ein neues Bild zu erstellen. Dadurch k\u00f6nnte man zwar Kan\u00e4le sparen, aber die Kollisionsverwaltung etc. w\u00fcrde erschwert. Das wollte ich mir in diesem Fall ersparen – hier war es nicht n\u00f6tig. Das Ergebnis: In einem Tag waren die Routinen<\/a> fertig. Man muss eben immer situationsbezogen abw\u00e4gen.<\/p>\n\n\n\n

Das Ergebnis.<\/h2>\n\n\n
\n
\"\"<\/a>
Jump’n’Run Navigation<\/figcaption><\/figure>\n<\/div>\n\n\n

Ein Ausschnitt aus der Entwicklungsumgebung. Man sieht links und rechts die Maskierungen, die sp\u00e4ter den sichtbaren Bereich an den Seiten ins Schwarze laufen lie\u00dfen. Anklicken f\u00fcr eine vergr\u00f6\u00dferte Darstellung. So ungef\u00e4hr h\u00e4tte es „damals“, 1991, auf dem Amiga ausgesehen, wenn, ja wenn…<\/p>\n\n\n\n

Die Grafiken entstanden \u00fcbrigens mit Deluxe Paint II (oder III ?), ein Produkt von Electronic Arts. Ja, die stellten damals nicht nur Sportspiele her! Heute wird ja alles eingescannt, nachbearbeitet, 3D-modelliert… aber fr\u00fcher wurde alles „gepixelt“. Entwickelt wurde der Scroller mit Macromedia Director 8.0.<\/p>\n\n\n

\n
\"\"<\/a>
Figur, doppelte Gr\u00f6\u00dfe.<\/figcaption><\/figure>\n<\/div>\n\n\n

Fr\u00fcher hatte ich hier eine bedienbare Demo verlinkt, aber da das Shockwave-Plugin nicht mehr erh\u00e4ltlich ist, muss ein Screenrecording her, das ich auf die doppelte Gr\u00f6\u00dfe skaliert habe. <\/p>\n\n\n\n

Disclaimer:<\/p>\n\n\n\n

Je nachdem wie man es im Browser anschaut, kann es nochmals skaliert werden, was im Endresultat etwas schwammig aussehen k\u00f6nnte. Das Original l\u00e4uft mit 50 Bildern\/s, und alle 4 Bilder wird zur n\u00e4chsten Animationsphase geschaltet. Das Screenrecording geschah mit 30 Bildern\/s, exportiert wurde der Film mit 25 Bildern\/s – lange Rede, kurzer Sinn: Im Original sieht es fl\u00fcssiger aus als im Video. Steuern konnte man die Figur mit Maus oder Tastatur.<\/p>\n\n\n\n