Eine Einführung in FlashPunk Die Grundlagen

Lernen Sie die Grundlagen der Funktionsweise von FlashPunk kennen - eine erstaunliche Bibliothek, mit der Sie Zeit sparen und das perfekte Spiel erstellen können!


Endergebnisvorschau

Werfen wir einen Blick auf das Endergebnis, auf das wir hinarbeiten:

Benutze die Pfeiltasten, um deinen Charakter (den blauen Mann) zu bewegen. Der rotbraune Kerl ist ein NPC. Der schattierte rote Bereich ist eine Gefahrenzone, und das grüne Feld ist eine Schaltfläche. In diesem Lernprogramm erfahren Sie, wie Sie all dies erstellen.


Schritt 1: Was ist FlashPunk??

FlashPunk ist eine ActionScript 3-Bibliothek, die für die Entwicklung von Flash-Spielen erstellt wurde. Grundsätzlich erledigt es alle harte Arbeit für Sie und Sie können sich ganz auf die Entwicklung Ihres Spiels konzentrieren, anstatt sich auf die dahinterliegende Engine zu konzentrieren. Das Beste daran ist, dass Sie nicht mit Flash Pro arbeiten müssen: Sie können alles mit einem kostenlosen Code-Editor wie FlashDevelop machen. Nicht zu vergessen, es ist viel schneller, wenn es um das Zeichnen von Dingen auf dem Bildschirm geht, da Blitting verwendet wird!

Dieses Tutorial behandelt alle Grundlagen von FlashPunk. Danach können Sie mit dieser erstaunlichen Bibliothek ein einfaches Spiel erstellen!


Schritt 2: Initialisierung der Engine

Laden Sie zunächst die neueste Version von FlashPunk von der offiziellen Website herunter (dieses Tutorial verwendet die Version vom 30. August 2011). Legen Sie den Ordner "net" mit seinem gesamten Inhalt in den Ordner "src".

FlashPunk hat eine Klasse namens Motor. Mit dieser Klasse beginnt alles in der Bibliothek. Betrachten Sie es als eine Main Klasse, aber mit speziellem Code zum Einschalten aller Klassen in FlashPunk. Um die Motor Klasse, wir werden das ändern Main Klasse ein bisschen.

 package import net.flashpunk.Engine; [Frame (factoryClass = "Preloader")] Öffentliche Klasse Main erweitert Engine öffentliche Funktion Main (): void 

Nun erweitert sich unsere Klasse Motor. Im Main's Konstruktor, müssen wir die anrufen Motor Konstruktor: Hier werden die wichtigen Informationen zum Spiel festgelegt: Breite, Höhe, Framerate und Angabe, ob die Engine mit einer festen Framerate laufen soll oder nicht.

 öffentliche Funktion Main (): void super (550, 400, 30, false); 

Es gibt eine Funktion, die von der Funktion aus überschrieben werden kann (und muss) Motor Klasse: die drin() Funktion. Es wird nur einmal ausgeführt und initialisiert alles, damit das Spiel funktioniert.

 public function init () überschreiben: void trace ("Das Spiel hat begonnen!"); 

Ich bin mir ziemlich sicher, dass jeder etwas auf den Bildschirm stellen und diesen Motor arbeiten lassen will! Aus diesem Grund werden die nächsten Schritte die Grundlagen der Elemente von FlashPunk behandeln und im Laufe des Tutorials Tiefe hinzufügen.


Schritt 3: Welten und Wesen

In FlashPunk gibt es Elemente, die aufgerufen werden Welten und Entitäten. Dies sind die Hauptelemente der Bibliothek, mit denen Sie vom Anfang bis zum Ende Ihres Spiels arbeiten.

Welten sind ziemlich ähnlich, was allgemein als "Bildschirm" bezeichnet wird. Alles in Ihrem Spiel wird sich in einer Welt abspielen: Das Hauptmenü ist eine Welt, in der Sie Zugriff auf die eigentliche Spielwelt haben, in der Sie einige Feinde bekämpfen und sterben werden, die Sie mit Ihren Spielergebnissen und Ihrem Gegner zum Weltall führt Statistiken darüber, wie gut Sie waren. Mehr über Welten wird später erklärt.

Entitäten sind genau das, was sie zu sein scheinen. Sie leben in einer Welt und tun etwas darin: Ein Knopf ist eine Entität; dein Charakter ist eine Entität; Feinde und Kugeln sind Entitäten. Sie sind die Dinge, die das Spiel zum Leben erwecken.

In Anbetracht dessen werden wir die Spielwelt erstellen (es ist Zeit, später die Hauptmenüwelt zu erstellen, lassen Sie uns zu etwas Action springen!), Indem wir FlashPunk erweitern Welt Klasse:

 Paket import net.flashpunk.World; öffentliche Klasse GameWorld erweitert World öffentliche Funktion GameWorld () 

Nachdem Sie nun eine Welt erstellt haben, müssen Sie FlashPunk mitteilen, dass diese Welt aktiv sein soll. Lass es uns tun Main.as:

 private var _gameWorld: GameWorld; öffentliche Funktion Main (): void super (550, 400, 30, false); _gameWorld = new GameWorld ();  override public function init (): void trace ("Das Spiel hat begonnen!"); FP.world = _gameWorld; 

Und vergessen Sie nicht zu importieren net.flashpunk.FP!


Schritt 4: Ein Objekt hinzufügen und ihm ein Bild geben

Nun, da wir unsere Welt haben, können wir eine Entität schaffen, indem wir das erweitern Entität klasse und füge es unserer Spielwelt hinzu:

 package import net.flashpunk.Entity; öffentliche Klasse GameEntity erweitert Entity öffentliche Funktion GameEntity () 

Und in GameWorld.as:

 private var _gameEntity: GameEntity; öffentliche Funktion GameWorld () _gameEntity = new GameEntity (); add (_gameEntity); 

Beachten Sie, dass die Entität beim Kompilieren und Ausführen des Spiels nicht auf dem Bildschirm angezeigt wird. Das liegt daran, dass es noch kein Bild hat! Jede Entität kann ein Grafikobjekt haben. Diese Grafik kann ein einzelnes Bild sein, ein Spritesheet mit Animationen, gekachelten Bildern - so ziemlich alles.

Wir werden dieses kleine Bild unserer Entität hinzufügen:

Auf die Grafik einer Entität kann mit der zugegriffen werden Grafik Eigentum. So werden wir das Bild darin einfügen! Binden Sie es zuerst ein; dann einfach weitergeben an Bild's Konstruktor und FlashPunk sorgen dafür, dass das in etwas sichtbar wird, das für Sie sichtbar ist. Kompilieren und starten Sie jetzt. Überraschung! Unsere Einheit ist da!

 package import net.flashpunk.Entity; import net.flashpunk.graphics.Image; public class GameEntity erweitert Entity [Embed (source = "/? /img/EntityImage.png")] private const IMAGE: Class; öffentliche Funktion GameEntity () graphic = new Image (IMAGE); 

Das sollten Sie bekommen:


Schritt 5: Bewegen der Entität

Nun, da wir unsere Entität auf dem Bildschirm haben, was ist, wenn wir es bewegen lassen? Jeder Entität hat eine aufgerufene Funktion aktualisieren(), die Sie überschreiben müssen, um zu verwenden. Diese Funktion wird von jeder Welt am Anfang jedes Frames aufgerufen. Wenn Sie Ihre Entität in Bewegung setzen müssen, ist dies der Ort, an dem Sie Ihren Code eingeben!

 public function update () überschreiben: void x + = 10 * FP.elapsed; y + = 5 * FP, abgelaufen; 

Und vergessen Sie nicht zu importieren:

 import net.flashpunk.FP;

Sehen Sie es in Aktion! (Aktualisieren Sie die Seite, wenn Sie hier nichts sehen können.)

Möglicherweise haben Sie die Verwendung von bemerkt FP abgelaufen. FP abgelaufen gibt die seit dem letzten Frame verstrichene Zeit (in Sekunden) an, wodurch es sehr einfach ist, zeitbasierte Bewegungen zu erstellen. Damit dies funktioniert, müssen Sie jedoch den vierten Parameter auf den Wert gesetzt haben MotorKonstruktor zu falsch. Erinnern Sie sich daran (Schritt 2)? Einstellen auf falsch bedeutet, dass FlashPunk mit einem variablen Zeitschritt ausgeführt werden soll wahr bewirkt, dass FlashPunk zu einem festen Zeitschritt ausgeführt wird. Letzteres müssen Sie nicht verwenden FP abgelaufen. Das werden Sie jedes Mal wissen aktualisieren() Funktion wird aufgerufen, ein Frame ist vergangen.


Schritt 6: Verschieben Sie das Objekt mit der Tastatureingabe nach Ihren Wünschen

Wir haben die Entität im letzten Schritt nur in eine Richtung bewegt. Einführung in die Tastatureingabe: Jetzt können Sie das Objekt an die gewünschte Stelle verschieben!

FlashPunk hat eine Klasse namens Eingang die Tastatur- und Mauseingabe übernimmt. In diesem Lernprogramm verwenden wir nur die Tastatureingaben für die Bewegung. Es ist sehr leicht:

 Überschreiben der öffentlichen Funktionsaktualisierung (): void if (Input.check (Key.A) || Input.check (Key.LEFT)) x - = 50 * FP.elapsed;  else if (Input.check (Key.D) || Input.check (Key.RIGHT)) x + = 50 * FP.elapsed;  if (Input.check (Key.W) || Input.check (Key.UP)) y - = 50 * FP.elapsed;  else if (Input.check (Key.S) || Input.check (Key.DOWN)) y + = 50 * FP.elapsed; 

Und die Import-Anweisungen:

 import net.flashpunk.utils.Input; import net.flashpunk.utils.Key;

Eingabe.check () kehrt zurück wahr wenn die Schlüssel als Argument übergeben wird zum Zeitpunkt des Aufrufs der Funktion gedrückt. Es gibt andere sehr nützliche Funktionen, wie z Input.pressed (), die zurückkehrt wahr wenn die Taste zu dem Zeitpunkt gedrückt wurde, zu dem die Funktion aufgerufen wurde (d. h. die Taste war vor einem Frame oben und jetzt herunter), oder Eingabe freigegeben (), was genau das Gegenteil tut.

Eine andere interessante Sache, dass die Eingang Klasse erlaubt es uns, viele Schlüssel unter einem einzigen Namen zu definieren. Zum Beispiel könnten wir definieren Key.UP, Schlüssel.W und Key.I wie "OBEN", und nur nach überprüfen Eingabe.check ("UP"). Auf diese Weise können wir unsere Funktion verbessern:

 öffentliche Funktion GameEntity () graphic = new Image (IMAGE); Input.define ("UP", Key.W, Key.UP); Input.define ("DOWN", Key.S, Key.DOWN); Input.define ("LEFT", Key.A, Key.LEFT); Input.define ("RIGHT", Key.D, Key.RIGHT);  public function update () überschreiben: void if (Input.check ("LEFT")) x - = 50 * FP.elapsed;  else if (Input.check ("RIGHT")) x + = 50 * FP.elapsed;  if (Input.check ("UP")) y - = 50 * FP.elapsed;  else if (Input.check ("DOWN")) y + = 50 * FP.elapsed; 

Und das sollten Sie bekommen:


Schritt 7: Weitere Informationen zu Entitäten

Entitäten können viel mehr als nur sich bewegen und Bilder haben. Lassen Sie uns einen Blick darauf werfen, welche Überraschungen sie halten können!

Entitäten haben eine Eigenschaft aufgerufen Art. Sie können diese Eigenschaft auf eine beliebige Zeichenfolge festlegen. Auf diese Weise können Sie Ihre Entitäten in Gruppen organisieren, was sich im nächsten Schritt (über Welten) als sehr nützlich erweisen wird. Wir können beispielsweise den Entity-Typ auf "GameEntity" setzen:

 öffentliche Funktion GameEntity () graphic = new Image (IMAGE); Input.define ("UP", Key.W, Key.UP); Input.define ("DOWN", Key.S, Key.DOWN); Input.define ("LEFT", Key.A, Key.LEFT); Input.define ("RIGHT", Key.D, Key.RIGHT); type = "GameEntity"; 

Danach haben wir das Nützliche Welt Eigentum und die hinzugefügt() und entfernt () Funktionen. Das Welt Mit property können Sie vom Code der Entität aus auf die Welt zugreifen, nachdem die Entität einer Welt hinzugefügt wurde. Es ist wie das Bühne Eigenschaft in gemeinsamer Flash-Entwicklung; die Funktionen sind wie die ADDED_TO_STAGE und REMOVED_FROM_STAGE Ereignis-Hörer. Hier ist ein Beispiel für die Funktionen, in denen gearbeitet wird GameEntity.as:

 überschreiben public function added (): void trace ("Die Entität wurde der Welt hinzugefügt!"); Spur ("Entitäten in der Welt:" + Welt.Zahl);  öffentliche Funktion außer Kraft setzen (): void trace ("Die Entität wurde aus der Welt entfernt!"); 

Schritt 8: Schauen Sie sich die Welten genauer an

Es ist an der Zeit, die Welten und ihre Funktionsweise näher zu untersuchen. FlashPunk kann nur eine Welt auf einmal ausführen, aber Ihr Spiel kann so viele Welten haben, wie Sie möchten, solange nur eine einzige aktiv bleibt.

Welten haben aktualisieren() Funktionen genauso wie Entitäten, aber ihre Funktion ist etwas anders: Es gibt tatsächlich Code in der Welt Klasse. Das bedeutet, dass Sie anrufen müssen super.update () Jedes Mal, wenn Sie diese Funktion überschreiben.

Welten können nicht nur Entitäten haben Grafik ihnen hinzugefügt. Grafiken sind Bilder, die nicht von Ihnen aktualisiert werden müssen (FlashPunk erstellt immer noch eine Entität, um sie der Welt hinzuzufügen. Daher sendet die Engine immer noch einen Aufruf an aktualisieren() Funktion). Sie können sie hinzufügen, indem Sie anrufen addGraphic ().

Das Wichtigste an Welten ist, dass sie verschiedene Funktionen haben, um bestimmte Entitäten abzurufen: getType (), getClass (), Nimm alle(), getLayer () und bekomme Instanz(). Auf diese Weise können Sie die Welt dazu veranlassen, ein Array aller derzeit im Spiel befindlichen Kugeln zurückzugeben, so dass Sie eine Kollision mit allen Kugeln durchführen können. Sehr praktisch, muss ich sagen!

Sehen Sie sich den hinzugefügten Code an World.as. Wir werden auch ein zweites Bild verwenden:

 [Embed (source = "/? /Img/EntityImage2.png")] private const IMAGE: Class; öffentliche Funktion GameWorld () _gameEntity = new GameEntity (); add (_gameEntity); addGraphic (neues Bild (IMAGE), 0, 50, 50);  public function update () überschreiben: void super.update (); var entityArray: Array = []; getType ("GameEntity", entityArray); für jedes (Entität Entität: Entität in EntitätArray) entity.x = entity.x> 550? 550: entity.x; entity.y = entity.y> 400? 400: entity.y; 

Und vergessen Sie nicht zu importieren net.flashpunk.graphics.Image!

In diesem Code wird der addGraphic () Funktionsaufruf fügt eine weitere Grafik hinzu _gameEntity's Grafik - betrachte es als NPC! - zur Welt in der Position (50, 50). Die Zeilen 23-31 zeigen ein Beispiel für das Abrufen nur Entitäten einer bestimmten Art: Wir rufen an getType () um nur Entitäten vom Typ "GameEntity" zu erhalten (derzeit nur eine Entität). Danach iterieren wir jede abgerufene Entität und verhindern, dass sie die rechte und untere Grenze überschreiten. (Die Entität kann sich also außerhalb des Bildschirms bewegen, aber nicht weit.) Einfach, nicht wahr?


Schritt 9: Animationen

Zeit für etwas interessanteres! FlashPunk unterstützt Animationen aller Art. Alles, was Sie tun müssen, ist, anstatt eine Instanz von zu erstellen Bild, Eine Instanz von erstellen Spritemap. Diese Klasse erhält ein Spritesheet und ermöglicht es Ihnen, Frames zu mappen und Animationen zu verknüpfen.

Betten Sie in unserer Entity-Klasse diese Spritemap ein:

Dann erstellen Sie eine Instanz von Spritemap und übergeben Sie das Spritesheet als Parameter an den Konstruktor. Danach geht es nur noch darum, die hinzufügen() und abspielen() Funktionen!

 [Embed (source = "/? /Img/EntitySheet.png")] private const SHEET: Klasse; private var _timeInterval: Anzahl; public function GameEntity () graphic = new Spritemap (SHEET, 40, 20, onAnimationEnd); Spritemap (Grafik) .add ("Stopped", [0]); Spritemap (Grafik) .add ("Blinken", [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], 24); Input.define ("UP", Key.W, Key.UP); Input.define ("DOWN", Key.S, Key.DOWN); Input.define ("LEFT", Key.A, Key.LEFT); Input.define ("RIGHT", Key.D, Key.RIGHT); type = "GameEntity"; Spritemap (Grafik) .play ("Blinken");  private Funktion onAnimationEnd (): void Spritemap (Grafik) .play ("Stopped"); _timeInterval = 0;  public function update () überschreiben: void _timeInterval + = FP.elapsed; if (_timeInterval> = 3) Spritemap (Grafik) .play ("Blinken");  if (Input.check ("LEFT")) x - = 50 * FP.elapsed;  else if (Input.check ("RIGHT")) x + = 50 * FP.elapsed;  if (Input.check ("UP")) y - = 50 * FP.elapsed;  else if (Input.check ("DOWN")) y + = 50 * FP.elapsed; 

Der Erbauer von Spritemap (Zeile 19) verwendet vier Argumente: eine Quelle, von der eine Grafik abgerufen werden soll, die Breite und Höhe jedes Frames des Spritesheet und eine Rückruffunktion, die aufgerufen wird, wenn die Animation endet (optional). Im GameEntityKonstruktor erstellen wir die Spritemap und definieren Sie zwei Animationen: "Stopped", die nur das erste Bild enthält und mit 0 fps (gestoppt!) ausgeführt wird, und "Blinken", das alle Bilder enthält und mit 24 Bildern pro Sekunde läuft.

Der Rest des Codes dient dazu, alle drei Sekunden die Animation "Blinken" abzuspielen.

Schauen Sie sich unser Entity-Blinken an:


Schritt 10: Kollision

Wenn alles gut läuft, ist es an der Zeit, eine weitere Funktion einzuführen: Kollisionserkennung. FlashPunk verfügt über ein hervorragendes Kollisionserkennungssystem: Alles, was wir tun müssen, ist, Hitboxen für unsere Entitäten zu setzen und die Welt nach Kollisionen zu fragen. Dafür erstellen wir eine weitere Entität namens Box welche die folgende Grafik enthalten wird:

 package import net.flashpunk.Entity; import net.flashpunk.graphics.Image; public class Box erweitert Entity [Embed (source = "/? /img/BoxImage.png")] private const IMAGE: Class; öffentliche Funktion Box () Grafik = neues Bild (IMAGE); setHitbox (60, 60); 

Und drinnen GameWorld.as:

 private var _box: Box; öffentliche Funktion GameWorld () _gameEntity = new GameEntity (); _box = neue Box (); add (_gameEntity); add (_box); _box.x = 200; _box.y = 150; addGraphic (neues Bild (IMAGE), 0, 50, 50); 

Das setHitbox () function setzt ein Rechteck, das als Trefferfeld für die Entität dient. Die ersten beiden Parameter sind die Breite und Höhe der Box. Die nächsten zwei Parameter (optional) sind die Ursprungskoordinaten (x und y) des Rechtecks. Dasselbe für tun GameEntity:

 public function GameEntity () graphic = new Spritemap (SHEET, 40, 20, onAnimationEnd); Spritemap (Grafik) .add ("Stopped", [0]); Spritemap (Grafik) .add ("Blinken", [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], 24); Input.define ("UP", Key.W, Key.UP); Input.define ("DOWN", Key.S, Key.DOWN); Input.define ("LEFT", Key.A, Key.LEFT); Input.define ("RIGHT", Key.D, Key.RIGHT); type = "GameEntity"; Spritemap (Grafik) .play ("Blinken"); setHitbox (40, 20); 

Jetzt, da wir sowohl unsere Einheit als auch die Box mit Hitboxen eingerichtet haben, müssen wir nach Kollisionen in der Weltklasse suchen:

 public function update () überschreiben: void super.update (); var entityArray: Array = []; getType ("GameEntity", entityArray); für jedes (Entität Entität: Entität in EntitätArray) entity.x = entity.x> 550? 550: entity.x; entity.y = entity.y> 400? 400: entity.y;  if (_gameEntity.collideWith (_box, _gameEntity.x, _gameEntity.y)) trace ("Collision!"); 

Das mit etwas zusammenstoßen() Die Funktion überprüft die Kollision mit der als Argument übergebenen Entität, wobei die erste Entität virtuell platziert wird (in diesem Fall), _gameEntity) in der durch das zweite und das dritte Argument angegebenen Position.

Sobald eine Kollision erkannt wird, muss darauf reagiert werden. Wir werden nur die Position des beweglichen Objekts ändern:

 public function update () überschreiben: void super.update (); var entityArray: Array = []; getType ("GameEntity", entityArray); für jedes (Entität Entität: Entität in EntitätArray) entity.x = entity.x> 550? 550: entity.x; entity.y = entity.y> 400? 400: entity.y;  if (_gameEntity.collideWith (_box, _gameEntity.x, _gameEntity.y)) _gameEntity.x = _gameEntity.y = 0; 

Schauen Sie sich das Beispiel an. Versuchen Sie, die Entität in die Box zu verschieben.


Schritt 11: Erstellen einer einfachen Schaltfläche - Hinzufügen eines Bildes

FlashPunk hat standardmäßig keine Schaltflächen. Fast alle Spiele benötigen Knöpfe, also erstellen wir in diesem Schritt einen Taste Klasse. Zunächst einmal hat eine Schaltfläche drei Zustände (wie Sie sie von der allgemeinen Flash-Entwicklung kennen): "Up", "Over" und "Down". Dieses Spritesheet veranschaulicht das:

Und jetzt lass uns die Klasse beginnen:

 package import net.flashpunk.Entity; import net.flashpunk.graphics.Spritemap; public class Button erweitert Entity protected var _map: Spritemap; öffentliche Funktion Taste (x: Number = 0, y: Number = 0) super (x, y);  public function setSpritemap (asset: *, frameW: uint, frameH: uint): void _map = new Spritemap (asset, frameW, frameH); _map.add ("Up", [0]); _map.add ("Over", [1]); _map.add ("Down", [2]); Grafik = _map; setHitbox (frameW, frameH);  override public function render (): void super.render (); 

Das setSpritemap () Funktion setzt eine Spritemap für die Schaltfläche und "Animationen" für die Schaltfläche. Das Bild muss immer zuerst den "Up" -Frame, dann den "Over" -Zustand und dann den "Down" -Frame haben. Es gibt auch einen Anruf an setHitbox (). Die Hitbox wird verwendet, um zu prüfen, ob sich der Mauszeiger über der Schaltfläche der Schaltfläche befindet.


Schritt 12: Erstellen einer einfachen Schaltfläche: Auf / Ab / Abwärtssteuerung, Rückruf

Nachdem der Button nun erfolgreich ein Bild anzeigt, ist es an der Zeit, Steuerelemente nach oben, oben und unten zu erstellen. Wir werden dies tun, indem wir zwei boolesche Attribute erstellen: "over" und "clicked". Wir werden auch feststellen, ob sich der Mauszeiger über dem Trefferfeld der Schaltfläche befindet oder nicht. Fügen Sie diese Funktionen in hinzu Button.as:

 protected var _over: Boolean; protected var _clicked: Boolean; public function update () überschreiben: void if (! world) return;  _over = falsch; _clicked = falsch; if (collidePoint (x - world.camera.x, y - world.camera.y, Input.mouseX, Input.mouseY)) if (Input.mouseDown) mouseDown ();  else mouseOver ();  geschützte Funktion mouseOver (): void _over = true;  geschützte Funktion mouseDown (): void _clicked = true;  public function render () überschreiben: void if (_clicked) _map.play ("Down");  else if (_over) _map.play ("Over");  else _map.play ("Up");  super.render (); 

Und vergessen Sie nicht zu importieren net.flashpunk.utils.Input.

Der Logik folgend aktualisieren(): zunächst beide Attribute (_Klick und _Über) sind auf false gesetzt. Danach prüfen wir, ob sich der Mauszeiger über der Schaltfläche befindet. Ist dies nicht der Fall, bleiben die Attribute falsch und der Button befindet sich im Status "Up". Wenn die Maus vorbei ist, prüfen wir, ob die Maustaste gerade gedrückt ist. Ist dies der Fall, befindet sich die Schaltfläche im Zustand "Ab" und _Klick ist auf wahr gesetzt; Wenn es falsch ist, befindet sich die Schaltfläche im Zustand "Über" und die Schaltfläche _Über Attribut ist auf true gesetzt. Diese Attribute definieren, zu welchem ​​Frame die Spritemap gehen soll.

Diese Schaltfläche ist unbrauchbar, wenn Sie nicht erkennen können, wann der Benutzer sie tatsächlich angeklickt hat. Lassen Sie uns die Klasse ein wenig ändern, um Callback-Funktionen zu unterstützen:

 protected var _callback: Funktion; protected var _argument: *; public function Button (Rückruf: Funktion, Argument: *, x: Number = 0, y: Number = 0) super (x, y); _callback = callback; _argument = Argument;  public function update () überschreiben: void if (! world) return;  _over = falsch; _clicked = falsch; if (collidePoint (x - world.camera.x, y - world.camera.y, Input.mouseX, Input.mouseY)) if (Input.mouseReleased) clicked ();  else if (Input.mouseDown) mouseDown ();  else mouseOver ();  geschützte Funktion clicked (): void if (! _argument) _callback ();  else _callback (_argument); 

Unser Button ist fertig! Mit diesem Code können Sie Ihrer Schaltfläche eine Rückruffunktion (und optional ein Argument) übergeben. Wenn der Benutzer auf die Schaltfläche klickt, wird die Funktion aufgerufen.


Schritt 13: Erstellen einer einfachen Schaltfläche: Hinzufügen zum Bildschirm

Viele Schritte und nichts auf dem Bildschirm? Zeit, dort einen Knopf zu stecken! Es ist so einfach wie das Einfügen dieses Codes GameWorld.as:

 [Embed (source = "/? /Img/ButtonSheet.png")] private const BUTTONSHEET: Klasse; private var _button: Schaltfläche; öffentliche Funktion GameWorld () _gameEntity = new GameEntity (); _box = neue Box (); _button = new Button (onButtonClick, null); _button.setSpritemap (BUTTONSHEET, 50, 40); add (_gameEntity); add (_box); add (_button); _box.x = 200; _box.y = 150; _button.x = 400; _button.y = 200; addGraphic (neues Bild (IMAGE), 0, 50, 50);  private Funktion onButtonClick (): void FP.screen.color = Math.random () * 0xFFFFFF; trace ("Die Schaltfläche wurde angeklickt!"); 

Jetzt müssen Sie nur noch das Projekt kompilieren und der Button ist da!


Schritt 14: Die Konsole

Und jetzt das letzte Feature von FlashPunk, das in diesem Tutorial vorgestellt wird! Das Konsole ist das Debugging-Tool von FlashPunk: Es enthält Protokolle, die den Spuren ähneln. zeigt die Zeit, die benötigt wird, um einen wichtigen Motorschritt auszuführen; und zeigt an, wie viele Objekte auf dem Bildschirm angezeigt werden. Es ist ein großartiges Werkzeug für die Entwicklung Ihres Spiels. Um es zu aktivieren, fügen Sie einfach die folgende Zeile hinzu Main.as:

 public function init () überschreiben: void trace ("Das Spiel hat begonnen!"); FP.console.enable (); FP.world = _gameWorld; 

Um alles darin einzuloggen, verwenden Sie die FP.log () Funktion. Ändern wir das zum Beispiel Spur() Anruf:

 Überschreiben Sie die öffentliche Funktion init (): void FP.console.enable (); FP.log ("Das Spiel hat begonnen!"); FP.world = _gameWorld; 

Das wars so ziemlich! Sie sehen, dass der "Output" -Teil der Debug-Konsole jetzt das Protokoll anzeigt. Sie können fortfahren und alles ändern Spur() ruft in unserem Code Anrufe an FP.log ().


Fazit

Dies ist unsere Einführung in FlashPunk, die die wichtigsten Aspekte dieser erstaunlichen Bibliothek abdeckt: Entitäten, Welten, Bilder und Animationen. Kollision, Tasten, Eingabe und Bewegung. Ich hoffe, Sie werden diese Bibliothek genauso mögen wie ich - sie erleichtert die Arbeit wirklich!