Advertisement
  1. Code
  2. Games

Animieren der Spielmenüs und Bildschirmübergängen in HTML5: Ein Leitfaden für Flash-Entwickler

by
Read Time:11 minsLanguages:
This post is part of a series called Shoot-'Em-Up.
Build a Stage3D Shoot-'Em-Up: Terrain, Enemy AI, and Level Data
Activetuts+ Workshop #5: Frantic 2 - Critique

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

HTML5- und Flash-Entwicklung haben zwar viele Gemeinsamkeiten, aber als Flash-Entwickler war es für mich immer noch eine monumentale Aufgabe, meine alten HTML5-Kenntnisse neu zu erlernen. In diesem Tutorial zeige ich Ihnen, wie ich ein animiertes Menü und einen Bildschirmübergang für ein HTML5-Shoot-Em-Up-Spiel erstellt habe.


Endergebnis Vorschau

Schauen Sie sich das Ergebnis an, auf das wir hinarbeiten werden:

The Menu We Will Be Working TowardsThe Menu We Will Be Working TowardsThe Menu We Will Be Working Towards
Klicken Sie hier, um die Demo zu testen

Beachten Sie den Bildlaufhintergrund, die Schiffe, die zu beiden Seiten jedes Menüelements angezeigt und gedreht werden, und die Art und Weise, wie der Bildschirm bei Auswahl einer Option schwarz wird.


Einführung

HTML5 und JavaScript ähneln ActionScript in vielerlei Hinsicht. Syntax, Ereignis-Listener und Methoden überschneiden sich stark. Es gibt jedoch einige sehr deutliche Unterschiede, die ich in diesem Tutorial behandeln werde:

  • Formen zeichnen
  • Bilder zeichnen
  • Intervalle verwenden
  • Animieren
  • Mausereignisse
  • Unterstützung für mehrere Browser hinzufügen

Zu beachten ist, dass in diesem Lernprogramm hauptsächlich Bilder verwendet werden, die mit der Quelle heruntergeladen werden können, oder Sie können Ihre eigenen Bilder verwenden, wenn Sie möchten (Sie müssen die Breiten und Höhen kennen).


Schritt 1: Einrichten

Als erstes müssen wir das <canvas>-Element in den Text einer HTML-Datei einfügen. Erstellen Sie also ein Element namens ShootEmUp.html und fügen Sie Folgendes ein:

Die hervorgehobenen Linien fügen das Canvas-Element ein, wodurch unser eigentliches Menü gerendert wird. In diesem Tutorial finden Sie eine Anleitung zur Leinwand von Grund auf neu.

Es ist schon fast Zeit, JavaScript zu programmieren! Wir haben zwei Möglichkeiten, wohin der Code gehen kann. Es kann innerhalb des HTML-Codes in <script>-Tags oder in einer externen Datei geschrieben werden. Um die Dinge einfach zu halten, schreibe ich den gesamten Code unter das <canvas>-Element. Sie können jedoch auch eine externe Datei verwenden, wenn Sie dies bevorzugen. Denken Sie daran, es zu beschaffen.

Unser nächster Schritt wird darin bestehen, vier Variablen zu erstellen, um das Canvas-Element einfach zu referenzieren.

Wir haben zuerst auf die Variable myCanvas verwiesen und sie so festgelegt, dass sie auf das HTML-Canvas-Element verweist. Eine weitere Variable mit dem Namen context wurde erstellt, um die Canvas-Dimensionalität(2D) zu erhalten. Ähnlich wie bei Flash erstellen wir die letzten beiden Variablen, width und height, um den Zugriff auf die Eigenschaften width und height der Zeichenfläche zu vereinfachen.


Schritt 2: Laden und Zeichnen der Bilder

Wie in ActionScript werden wir Instanzen unserer Bilder erstellen.

Für jede Instanz fehlt ein entscheidender Code - der Quellpfad! Ich habe alle Bilder im Ordner 'Images' im selben Verzeichnis wie die HTML-Datei gespeichert, also:

Bevor wir die Bilder auf die Leinwand zeichnen, erstellen wir vier Arrays, in denen die Positionen und Größen der Schaltflächen gespeichert sind (playImage, instructImage, settingsImage, creditsImage). Diese Arrays werden später verwendet, um eine Mouse-Over-Funktion zu erstellen.

Jetzt können wir die Bilder auf die Leinwand zeichnen; Dies kann innerhalb einer onload-Funktion für jedes Bild erfolgen, eine Onload-Funktion muss jedoch nicht enthalten sein - wir können einfach drawImage() verwenden.

Wenn Sie jetzt testen, sollten Sie ein statisches Bild eines Menüs sehen, dem wir bald Leben einhauchen werden. Das Schiff wurde nicht mit den restlichen Bildern eingezeichnet, da wir es später in einem Mausereignis zeichnen werden. Übrigens, wenn Sie dies bisher noch nicht getan haben, lassen Sie Ihre Variablen oben gruppiert und machen Sie dasselbe mit Funktionen.


Schritt 3: Animieren durch Intervalle

In JavaScript fehlt ein onEnterFrame()-Äquivalent, aber wir können mithilfe eines Intervalls (Timers) problemlos ein eigenes erstellen.

Sie sind möglicherweise verwirrt darüber, wie das Intervall funktioniert, daher werde ich dies kurz erläutern. Das Intervall ruft die Funktion update() alle (1000/frames) Millisekunden auf, um eine reibungslose Aktualisierungsrate zu erzielen. Der Wert von frames steuert die fps. Wenn frames 25 ist, versucht der Browser, update() alle (1000/25=) 40 Millisekunden aufzurufen.

Unser nächster offensichtlicher Schritt ist das Erstellen des Funktions update()

Drei weitere Funktionen wurden gerade aufgerufen. clear() wird verwendet, um die Leinwand zu löschen, da die Leinwand im Gegensatz zu Flash wie das Anbringen von Aufklebern auf einer Tafel funktioniert. Die Bilder können nach dem Platzieren nicht mehr verschoben werden. Die nächste Funktion, move(), wird zum Ändern der Variablenwerte verwendet, die für die Bilder verwendet werden. Schließlich wird draw() aufgerufen, um diese "Aufkleber" zu platzieren.

Einfach ausgedrückt, dieser Code löscht alles innerhalb des Rechtecks, das die Größe der Leinwand hat und aus (0,0), der oberen linken Ecke, gezeichnet wird. Das heißt, es wird die gesamte sichtbare Leinwand gelöscht.

Bevor wir zur nächsten Funktion übergehen, sollten zwei Variablen eingeführt werden. backgroundY ist die Variable für die y-Position des Hintergrundbilds, und die speed wird verwendet, um bei jedem Aktualisierungszyklus von backgroundY zu subtrahieren.

Der Effekt, den wir erzeugen werden, ist ein kontinuierlich scrollender Hintergrund. Das Bild besteht aus zwei identischen Sternenfeldbildern übereinander in einem größeren Bild (das Bild ist doppelt so hoch wie die Leinwand). Wir werden das Bild langsam nach oben verschieben, bis die zweite Hälfte vollständig sichtbar ist, und dann die Position des Bildes auf die erste Hälfte zurücksetzen.

Schließlich haben wir die Funktion draw(). Alle Bilder werden neu gezeichnet, aber eine Änderung ist, dass der y-Wert des bgImage durch die Variable backgroundY ersetzt wurde.

Testen Sie jetzt und bewundern Sie den Hintergrund mit dem sanften Bildlauf.


Schritt 4: Überprüfen der Mausposition

Eine Sache, die HTML5 <canvas> fehlt, ist die Unterstützung für Listener von Bildereignissen, was bedeutet, dass wir nicht einfach playImage.mouseover = function(){} schreiben können. Stattdessen müssen wir die Position der Maus relativ zur Leinwand ermitteln und herausfinden, ob sie sich über einem Objekt befindet.

Die beiden eingeführten Variablen werden verwendet, um die aktuelle Position der Maus zu ermitteln. Wir haben einen Ereignis-Listener wie in ActionScript hinzugefügt, der bei jeder Mausbewegung die Funktion checkPos() aufruft.

Wenn Sie die Werte von mouseX und mouseY jedes Mal benachrichtigen, wenn Sie die Maus bewegen, erhalten Sie die richtige Position. Es gibt jedoch ein Problem: Nicht alle modernen Desktop-Browser unterstützen diese Methode. Um dieses Problem zu lösen, können wir stattdessen den kleinen Hack verwenden:

Dadurch wird überprüft, ob der Browser die Eigenschaften "Seite" oder "Versatz" verwendet, um die Position der Maus zurückzugeben, und die Werte (falls erforderlich) angepasst, um die Mausposition relativ zur Zeichenfläche zu ermitteln.

Erinnern Sie sich jetzt an das Schiff, das wir instanziiert, aber nicht gezeichnet haben? Wir werden dieses statische Bild aufnehmen, es drehen und es erscheinen lassen, wenn wir mit der Maus über die Tasten fahren!

Die ersten vier Variablen sind die gleichen wie zuvor (wir haben zwei Positionen, da es zwei Schiffe geben wird). Die Variable shipVisible wird auf true gesetzt, wenn sich die Maus über einer Schaltfläche befindet. shipSize und shipRotate werden verwendet, um das Schiff vertikal zu skalieren und neu zu positionieren, um die Illusion zu erzeugen, dass es sich dreht. Beachten Sie, dass die Bilder von rechts nach links skaliert werden.

Fügen Sie den Code in die Funktion checkPos() ein. Zuerst durchlaufen wir die Schaltflächen, die es gibt (ich habe den Wert mit buttonX.length herausgefunden). Als nächstes vergleichen wir die mouseX, um festzustellen, ob sie größer als die buttonX der aktuellen Schaltfläche und kleiner als die buttonX + buttonWidth ist - d. h. Innerhalb der horizontalen Grenzen der Schaltfläche. Wir wiederholen dann den Vorgang in einer anderen if-Anweisung für die Y-Werte. Wenn dies alles wahr ist, muss sich die Maus über einer Schaltfläche befinden, also setzen Sie shipVisible auf true:

Und innerhalb der leeren else-Anweisung setzen Sie sie auf false; Es wird dann immer dann aufgerufen, wenn Sie mit der Maus über eine Schaltfläche fahren:

Unter shipVisible = true legen wir die Anfangswerte für shipX und shipY fest und führen die gesamte Skalierung innerhalb der Verschiebungs- und Zeichenfunktionen durch.

Für das erste shipX, das wir links neben der Schaltfläche haben möchten, setzen wir den Wert auf (das X der aktuellen Schaltfläche - die Hälfte der Schiffsbreite), und ich habe es über 2 Pixel nach links verschoben, damit es besser aussieht. Ein ähnlicher Vorgang wird für das erste shipY wiederholt. Für das zweite shipX positionieren wir uns am (X der aktuellen Schaltfläche + Breite dieser Schaltfläche + halbe Schiffsbreite) und setzen dann das Y wie zuvor.

Der schwierige Teil kommt jetzt. Wir müssen das Schiff skalieren und bewegen, um die Skalierung auszugleichen. Schreiben Sie innerhalb der Funktion move() diese if-Anweisung.

Der Code beginnt mit dem Subtrahieren des Werts von shipSize, mit dem das Bild beim Zeichnen skaliert wird. Sobald es Null erreicht, kehrt sich der Prozess um, bis es wieder voll skaliert ist.

Jetzt können wir in die Funktion draw() wechseln. Fügen Sie unter allen anderen Zeichenmethoden die folgende if-Anweisung hinzu.

Die Schiffe werden normal gezeichnet, mit Ausnahme der X-Positionen, die durch Subtrahieren der Hälfte der aktuellen Skala ausgeglichen werden.


Schritt 5: Auf Mausklicks prüfen

Fügen Sie einen weiteren Ereignis-Listener für das Mouseup hinzu und erstellen Sie eine neue Variable für ein zweites Intervall, das wir erstellen werden.

Erstellen Sie die Funktion checkClick().

Wie zuvor prüfen wir, ob die Position der Maus korrekt ist. Jetzt müssen wir das neue Intervall erstellen und die anderen Intervall- und Ereignis-Listener stoppen.

Hier gibt es nichts Neues, außer dass wir eine Funktion namens fadeOut() erstellen müssen. Wir müssen auch eine andere Variable namens time erstellen.

Es hat einige neue Methoden, aber es ist ganz einfach. Da wir alle Ereignis-Listener und das andere Intervall gestoppt haben, ist unser Menü vollständig statisch. Wir zeichnen also wiederholt ein transparentes schwarzes Rechteck über das Menü - ohne es zu löschen -, um die Illusion des Ausblendens zu erzeugen.

Die variable time wird bei jedem Aufruf der Funktion erhöht und sobald sie einen bestimmten Wert erreicht hat (in diesem Fall 20 "Frames"), löschen wir das aktuelle Intervall. Hier habe ich das Menü zurückgesetzt, aber hier würden Sie einen neuen Abschnitt des Menüs zeichnen.

Als letztes ist zu beachten, dass beim Zeichnen von Formen auf der Leinwand der fillStyle mit einem RGB-Wert (rot, grün, blau) festgelegt wird. Wenn Sie transparente Formen zeichnen möchten, verwenden Sie rgba (rot, grün, blau, alpha).

Ich hoffe, das hat den Lernprozess für den Wechsel von der einfachen AS3-Programmierung zur einfachen Canvas-Programmierung ein wenig entmystifiziert. Schreiben Sie einen Kommentar, wenn Sie Fragen haben!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.