Flash ist ein beliebtes Format für browserbasierte Videospiele, die auf Websites wie Newgrounds und Kongregate zu sehen sind. Während das Flash-Format angesichts wachsender mobiler Apps langsam weniger genutzt wird, werden immer noch viele hochwertige Spiele damit hergestellt. Flash verwendet ActionScript, eine einfach zu erlernende Sprache, mit der Sie die Objekte auf Ihrem Bildschirm steuern können. In diesem wikiHow-Artikel erfahren Sie, wie Sie ein einfaches Flash-Spiel erstellen.
Schritte
Teil 1 von 3: Starten des Prozesses
Schritt 1. Entwerfen Sie Ihr Spiel
Bevor Sie mit dem Programmieren beginnen, ist es hilfreich, eine ungefähre Vorstellung davon zu haben, was Ihr Spiel tun soll. Flash ist am besten für einfache Spiele geeignet. Konzentrieren Sie sich also darauf, ein Spiel zu entwickeln, das nur wenige Mechanismen hat, um die sich der Spieler kümmern muss. Versuchen Sie, ein grundlegendes Genre und einige Mechaniken im Hinterkopf zu haben, bevor Sie mit dem Prototyping beginnen. Weitere Informationen zu den Planungsphasen der Videospielentwicklung finden Sie in diesem Leitfaden. Zu den gängigen Flash-Spielen gehören:
- Endless Runner: Diese Spiele bewegen den Charakter automatisch und der Spieler ist dafür verantwortlich, über Hindernisse zu springen oder anderweitig mit dem Spiel zu interagieren. Der Spieler hat normalerweise nur ein oder zwei Optionen, wenn es um die Steuerung geht.
- Brawler: Diese sind normalerweise seitliches Scrollen und beauftragen den Spieler, Feinde zu besiegen, um voranzukommen. Der Spielercharakter hat oft mehrere Züge, die er ausführen kann, um Feinde zu besiegen.
- Rätsel: Bei diesen Spielen muss der Spieler Rätsel lösen, um jedes Level zu meistern. Diese können vom Match-3-Stil wie Bejeweled bis hin zu komplexeren Rätsellösungen reichen, die normalerweise in Abenteuerspielen zu finden sind.
- RPGs: Diese Spiele konzentrieren sich auf die Entwicklung und den Fortschritt von Charakteren und lassen den Spieler sich durch mehrere Umgebungen mit einer Vielzahl von Feindtypen bewegen. Die Kampfmechaniken variieren stark von Rollenspiel zu Rollenspiel, aber viele sind rundenbasiert. RPGs können deutlich schwieriger zu programmieren sein als ein einfaches Actionspiel.
Schritt 2. Erfahren Sie, was Flash auszeichnet
Flash ist am besten für 2D-Spiele geeignet. Es ist möglich, 3D-Spiele in Flash zu erstellen, aber es ist sehr fortgeschritten und erfordert erhebliche Sprachkenntnisse. Fast jedes erfolgreiche Flash-Spiel war 2D.
Flash-Spiele eignen sich auch am besten für schnelle Sessions. Dies liegt daran, dass die meisten Flash-Spieler spielen, wenn sie ein wenig Freizeit haben, z. B. in Pausen, was bedeutet, dass die Spielsitzungen normalerweise 15 Minuten oder weniger dauern
Schritt 3. Machen Sie sich mit der Sprache ActionScript3 (AS3) vertraut
Flash-Spiele werden in AS3 programmiert, und Sie müssen ein gewisses Grundverständnis dafür haben, wie es funktioniert, um ein Spiel erfolgreich zu erstellen. Sie können ein einfaches Spiel mit einem rudimentären Verständnis des Programmierens in AS3 erstellen.
Es gibt mehrere Bücher über ActionScript, die bei Amazon und anderen Stores erhältlich sind, zusammen mit einer großen Anzahl von Tutorials und Beispielen online
Schritt 4. Laden Sie Flash Professional herunter
Dieses Programm kostet Geld, ist aber der beste Weg, um Flash-Programme schnell zu erstellen. Es stehen andere Optionen zur Verfügung, einschließlich Open-Source-Optionen, die jedoch häufig nicht kompatibel sind oder für die Ausführung derselben Aufgaben länger dauern.
Flash Professional ist das einzige Programm, das Sie zum Erstellen von Spielen benötigen
Teil 2 von 3: Ein einfaches Spiel schreiben
Schritt 1. Verstehen Sie die grundlegenden Bausteine des AS3-Codes
Wenn Sie ein einfaches Spiel erstellen, werden verschiedene Codestrukturen verwendet. Jeder AS3-Code besteht aus drei Hauptteilen:
-
Variablen - So werden Ihre Daten gespeichert. Daten können Zahlen, Wörter (Strings), Objekte und mehr sein. Variablen werden durch den Code var definiert und müssen aus einem Wort bestehen.
var playerHealth:Number = 100; // "var" gibt an, dass Sie eine Variable definieren. // "playerHealth" ist der Variablenname. // "Zahl" ist der Datentyp. // "100" ist der der Variablen zugewiesene Wert. // Alle Actionscript-Zeilen enden mit ";"
-
Ereignishandler - Ereignishandler suchen nach bestimmten Ereignissen und teilen dann dem Rest des Programms mit. Dies ist wichtig für Spielereingaben und sich wiederholende Codes. Ereignishandler rufen normalerweise Funktionen auf.
addEventListener(MouseEvent. CLICK, swingSword); // "addEventListener()" definiert den Eventhandler. // "MouseEvent" ist die Kategorie der Eingabe, auf die gewartet wird. // ". CLICK" ist das spezifische Ereignis in der Kategorie MouseEvent. // "swingSword" ist die Funktion, die aufgerufen wird, wenn das Ereignis eintritt.
-
Funktion - Codeabschnitte, die einem Schlüsselwort zugeordnet sind und später aufgerufen werden können. Funktionen übernehmen den Großteil der Programmierung Ihres Spiels, und komplexe Spiele können Hunderte von Funktionen haben, während einfachere Spiele möglicherweise nur wenige haben. Sie können in beliebiger Reihenfolge sein, da sie nur funktionieren, wenn sie aufgerufen werden.
Funktion swingSword (e:MouseEvent):void; { //Ihr Code gehört hierher } // "Funktion" ist das Schlüsselwort, das am Anfang jeder Funktion erscheint. // "swingSword" ist der Name der Funktion. // "e:MouseEvent" ist ein hinzugefügter Parameter, der anzeigt, dass die Funktion // vom Ereignis-Listener aufgerufen wird. // ":void" ist der Wert, der von der Funktion zurückgegeben wird. Wenn kein Wert // zurückgegeben wird, verwenden Sie:void.
Schritt 2. Erstellen Sie ein Objekt
ActionScript wird verwendet, um Objekte in Flash zu beeinflussen. Um ein Spiel zu erstellen, müssen Sie Objekte erstellen, mit denen der Spieler interagiert. Abhängig von den Leitfäden, die Sie lesen, werden Objekte als Sprites, Schauspieler oder Filmclips bezeichnet. Für dieses einfache Spiel erstellen Sie ein Rechteck.
- Öffnen Sie Flash Professional, falls Sie dies noch nicht getan haben. Erstellen Sie ein neues ActionScript 3-Projekt.
- Klicken Sie im Werkzeugbedienfeld auf das Zeichenwerkzeug Rechteck. Dieses Fenster kann sich je nach Konfiguration von Flash Professional an unterschiedlichen Orten befinden. Zeichnen Sie ein Rechteck in Ihr Szenenfenster.
- Wählen Sie das Rechteck mit dem Auswahlwerkzeug aus.
Schritt 3. Weisen Sie dem Objekt Eigenschaften zu
Wenn Ihr neu erstelltes Rechteck ausgewählt ist, öffnen Sie das Menü "Ändern" und wählen Sie "In Symbol konvertieren". Sie können auch F8 als Tastenkombination drücken. Geben Sie dem Objekt im Fenster "In Symbol konvertieren" einen leicht erkennbaren Namen, z. B. "Feind".
- Suchen Sie das Eigenschaftenfenster. Oben im Fenster wird ein leeres Textfeld mit der Bezeichnung "Instanzname" angezeigt, wenn Sie mit der Maus darüber fahren. Benennen Sie es genauso wie bei der Umwandlung in ein Symbol ("Feind"). Dadurch wird ein eindeutiger Name erstellt, mit dem über AS3-Code interagiert werden kann.
- Jede "Instanz" ist ein separates Objekt, das von Code beeinflusst werden kann. Sie können die bereits erstellte Instanz mehrmals kopieren, indem Sie auf die Registerkarte Bibliothek klicken und die Instanz auf die Szene ziehen. Jedes Mal, wenn Sie eines hinzufügen, wird der Name geändert, um anzuzeigen, dass es sich um ein separates Objekt handelt ("enemy", "enemy1", "enemy2" usw.).
- Wenn Sie auf die Objekte im Code verweisen, müssen Sie lediglich den Instanznamen verwenden, in diesem Fall "enemy".
Schritt 4. Erfahren Sie, wie Sie die Eigenschaften einer Instanz ändern können
Sobald Sie eine Instanz erstellt haben, können Sie die Eigenschaften über AS3 anpassen. Auf diese Weise können Sie das Objekt auf dem Bildschirm verschieben, seine Größe ändern usw. Sie können Eigenschaften anpassen, indem Sie die Instanz eingeben, gefolgt von einem Punkt ".", gefolgt von der Eigenschaft, gefolgt vom Wert:
- Feind.x = 150; Dies beeinflusst die Position des feindlichen Objekts auf der X-Achse.
- Feind.y = 150; Dies beeinflusst die Position des feindlichen Objekts auf der Y-Achse. Die Y-Achse wird vom oberen Rand der Szene berechnet.
- Feind. Rotation = 45; Dreht das feindliche Objekt um 45° im Uhrzeigersinn.
- Feind. SkalaX = 3; Streckt die Breite des feindlichen Objekts um den Faktor 3. Eine (-) Zahl dreht das Objekt um.
- Feind. SkalaY = 0,5; Zerquetscht das Objekt auf die Hälfte seiner Höhe.
Schritt 5. Untersuchen Sie den Befehl trace()
Dieser Befehl gibt die aktuellen Werte für bestimmte Objekte zurück und ist nützlich, um festzustellen, ob alles wie gewünscht läuft. Möglicherweise möchten Sie den Trace-Befehl nicht in Ihren endgültigen Code aufnehmen, aber er ist für das Debuggen nützlich.
Schritt 6. Erstellen Sie ein Basisspiel mit den obigen Informationen
Da Sie nun ein grundlegendes Verständnis der Kernfunktionen haben, können Sie ein Spiel erstellen, in dem der Feind jedes Mal, wenn Sie darauf klicken, seine Größe ändert, bis er keine Gesundheit mehr hat.
var FeindHP:Zahl = 100; // setzt die HP (Gesundheit) des Feindes zu Beginn auf 100. var playerAttack:Number = 10; // legt die Angriffskraft der Spieler fest, wenn sie klicken. Feind.addEventListener(MouseEvent. CLICK, attackEnemy); // Durch direktes Hinzufügen dieser Funktion zum feindlichen Objekt // wird die Funktion nur ausgeführt, wenn auf das Objekt selbst // geklickt wird, im Gegensatz zu einem Klick auf eine beliebige Stelle auf dem Bildschirm. setEnemyLocation(); // Dies ruft die folgende Funktion auf, um den Feind // auf dem Bildschirm zu platzieren. Dies geschieht, wenn das Spiel startet. Funktion setEnemyLocation ():void { Feind.x = 200; // Bewegt den Feind auf 200 Pixel vom linken Bildschirmrand entfernt feind.y = 150; // bewegt den Feind 150 Pixel vom oberen Rand des Bildschirms nach unten Feind.rotation = 45; // dreht den Feind um 45 Grad im Uhrzeigersinn trace("Der X-Wert des Feindes ist", Feind.x, "Der Y-Wert des Feindes ist", Feind.y); // Zeigt die aktuelle Position des Feindes zum Debuggen an } function attackEnemy (e:MouseEvent):void // Dies erzeugt die Angriffsfunktion, wenn der Feind angeklickt wird { FeindHP = FeindHP - playerAttack; // Subtrahiert den Angriffswert vom HP-Wert, // was den neuen HP-Wert ergibt. Feind. SkalaX = FeindHP / 100; // Ändert die Breite basierend auf dem neuen HP-Wert. // Es wird durch 100 geteilt, um es in eine Dezimalzahl umzuwandeln. Feind. SkalaY = FeindHP / 100; // Ändert die Höhe basierend auf dem neuen HP-Wert trace("Der Feind hat", FeindHP, "HP übrig"); //Geben Sie aus, wie viel HP der Feind noch hat }
Schritt 7. Probieren Sie es aus
Nachdem Sie den Code erstellt haben, können Sie Ihr neues Spiel testen. Klicken Sie auf das Menü Steuerung und wählen Sie Film testen. Ihr Spiel beginnt und Sie können auf das feindliche Objekt klicken, um seine Größe zu ändern. Ihre Trace-Ausgaben werden im Ausgabefenster angezeigt.
Teil 3 von 3: Fortgeschrittene Techniken lernen
Schritt 1. Erfahren Sie, wie Pakete funktionieren
ActionScript basiert auf Java und verwendet ein sehr ähnliches Paketsystem. Pakete ermöglichen es Ihnen, Variablen, Konstanten, Funktionen und andere Informationen in separaten Dateien zu speichern und diese Dateien dann in Ihr Programm zu importieren. Diese sind besonders nützlich, wenn Sie ein Paket verwenden möchten, das jemand anderes entwickelt hat und das die Erstellung Ihres Spiels erleichtert.
Weitere Informationen zur Funktionsweise von Paketen in Java finden Sie in diesem Handbuch
Schritt 2. Erstellen Sie Ihre Projektordner
Wenn Sie ein Spiel mit mehreren Bildern und Soundclips erstellen, sollten Sie eine Ordnerstruktur für Ihr Spiel erstellen. Auf diese Weise können Sie Ihre verschiedenen Elemente einfach speichern und verschiedene Pakete zum Abrufen speichern.
- Erstellen Sie einen Basisordner für Ihr Projekt. Im Basisordner solltest du einen Ordner "img" für alle deine Art-Assets, einen "snd"-Ordner für alle deine Sound-Assets und einen "src"-Ordner für alle deine Spielpakete und deinen Code haben.
- Erstellen Sie im Ordner "src" einen Ordner "Game", um Ihre Constants-Datei zu speichern.
- Diese besondere Struktur ist nicht erforderlich, bietet aber eine einfache Möglichkeit, Ihre Arbeit und Materialien zu organisieren, insbesondere bei größeren Projekten. Für das oben beschriebene einfache Spiel müssen Sie keine Verzeichnisse erstellen.
Schritt 3. Fügen Sie Ihrem Spiel Sound hinzu
Ein Spiel ohne Ton oder Musik wird dem Spieler schnell langweilig. Mit dem Ebenen-Werkzeug können Sie Objekten in Flash Sound hinzufügen. Weitere Informationen finden Sie in dieser Anleitung.
Schritt 4. Erstellen Sie eine Konstantendatei
Wenn Ihr Spiel viele Werte hat, die während des gesamten Spiels gleich bleiben, können Sie eine Konstantendatei erstellen, um sie alle an einem Ort zu speichern, damit Sie sie leicht aufrufen können. Konstanten können Werte wie Schwerkraft, Spielergeschwindigkeit und andere Werte enthalten, die Sie möglicherweise wiederholt aufrufen müssen.
-
Wenn Sie eine Constants-Datei erstellen, muss diese in einem Ordner in Ihrem Projekt abgelegt und dann als Paket importiert werden. Angenommen, Sie erstellen eine Constants.as-Datei und platzieren sie in Ihrem Game-Verzeichnis. Um es zu importieren, würden Sie den folgenden Code verwenden:
Paket { Spiel importieren.*; }
Schritt 5. Schauen Sie sich die Spiele anderer an
Während viele Entwickler den Code für ihre Spiele nicht preisgeben, gibt es eine Vielzahl von Projekt-Tutorials und anderen offenen Projekten, die es Ihnen ermöglichen, den Code und seine Interaktion mit Spielobjekten zu sehen. Dies ist eine großartige Möglichkeit, einige fortgeschrittene Techniken zu erlernen, die Ihrem Spiel helfen können, sich abzuheben.
