So erstellen Sie ein Flash-Spiel: 4 Schritte (mit Bildern)

Inhaltsverzeichnis:

So erstellen Sie ein Flash-Spiel: 4 Schritte (mit Bildern)
So erstellen Sie ein Flash-Spiel: 4 Schritte (mit Bildern)

Video: So erstellen Sie ein Flash-Spiel: 4 Schritte (mit Bildern)

Video: So erstellen Sie ein Flash-Spiel: 4 Schritte (mit Bildern)
Video: Beliebiges Steam Guthaben aufladen (Restguthaben paysafecard) 2024, Kann
Anonim

Flash ist ein beliebtes Format für Browser-Videospiele wie Websites wie Newgrounds und Kongregate. Obwohl das Flash-Format in mobilen Anwendungen dazu neigt, zu wenig genutzt zu werden, gibt es immer noch viele hochwertige Spiele, die weiterhin mit Flash erstellt werden. Flash verwendet ActionScript, eine Sprache, die leicht zu erlernen ist und die Kontrolle über Objekte auf dem Bildschirm bietet. In Schritt 1 unten erfahren Sie, wie Sie ein einfaches Flash-Spiel erstellen.

Schritt

Teil 1 von 3: Erste Schritte

381698 1
381698 1

Schritt 1. Entwerfen Sie das Spiel

Bevor Sie mit dem Codieren beginnen, machen Sie sich eine grobe Vorstellung von Ihrem Spiel. Flash eignet sich am besten für einfache Spiele, also konzentriere dich darauf, Spiele zu entwickeln, die nur sehr wenige Spielmechaniken haben. Definieren Sie das Genre und die Spielmechanik, bevor Sie mit dem Prototyp beginnen. Zu den gängigen Flash-Spielen gehören:

  • Endless Runner: Das Spiel bewegt automatisch Charaktere. Die Spieler müssen über Hindernisse springen oder mit dem Spiel interagieren. Spieler haben normalerweise nur eine oder zwei Steuerungsoptionen.
  • Kämpfer: Das Spiel ist normalerweise seitlich scrollen. Die Spieler müssen den Feind besiegen, um voranzukommen. Der Spielercharakter hat mehrere Züge, um den Feind zu besiegen.
  • Rätsel: Die Spieler müssen Rätsel lösen, um jedes Level zu meistern. Angefangen von der Art, Dreier-Objekte wie Bejeweled zusammenzubringen, bis hin zu komplexen Rätseln wie Abenteuerspielen.
  • RPG: Das Spiel konzentriert sich auf Charakterentwicklung und Fortschritt. Die Spieler bewegen sich durch viele verschiedene Situationen sowie verschiedene Arten von Feinden. Die Kampfmechaniken variieren stark, aber viele dieser Typen sind rundenbasiert. RPGs sind deutlich schwieriger zu programmieren als einfache Actionspiele.
381698 2
381698 2

Schritt 2. Verstehen Sie die Vorteile von Flash

Flash eignet sich am besten für 2D-Spiele. Flash kann gemacht werden, um 3D-Spiele zu erstellen, aber es ist sehr kompliziert und erfordert mehr Wissen. Fast jedes erfolgreiche Flash-Spiel hat ein 2D-Format.

Flash-Spiele eignen sich auch am besten für schnelle Sessions. Dies liegt daran, dass die meisten Spieler spielen, wenn sie wenig Freizeit haben, z. B. in Pausen, was bedeutet, dass die Spielsitzungen normalerweise höchstens 15 Minuten lang sind

381698 3
381698 3

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 sie funktionieren, um erfolgreich Spiele zu erstellen. Sie können einfache Spiele mit einem grundlegenden Verständnis von Code in AS3 erstellen.

Es gibt viele ActionScript-Bücher bei Amazon und anderen Stores, zusammen mit einer Vielzahl von Tutorials und Ereignissen im Internet

381698 4
381698 4

Schritt 4. Laden Sie Flash Professional herunter

Dieses Programm ist ein wenig teuer, aber es ist sehr gut, um schnell Flash-Programme zu erstellen. Es gibt mehrere andere Programmoptionen, einschließlich Open-Source-Programme, die jedoch im Allgemeinen weniger kompatibel sind oder länger dauern, um dieselbe Aufgabe auszuführen.

Flash Professional ist das einzige Programm, das Sie zum Erstellen von Spielen benötigen

Teil 2 von 3: Einfache Spiele schreiben

381698 5
381698 5

Schritt 1. Verstehen Sie die grundlegenden Bausteine des AS3-Codes

Das Basisspiel hat mehrere verschiedene Codestrukturen. Der AS3-Code besteht aus drei Hauptteilen:

  • Variablen - Hier geht es darum, wie Daten gespeichert werden. Daten können Zahlen, Wörter (Strings), Objekte und mehr sein. Variablen werden durch den Var-Code 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 ";"

  • Event-Handler - Der Event-Handler sucht nach bestimmten Ereignissen und benachrichtigt dann den Rest des Programms. Dies ist wichtig für Spielereingaben und wiederholten Code. Ereignishandler rufen normalerweise Funktionen auf.

    addEventListener(MouseEvent. CLICK, swingSword); // "addEventListener()" definiert einen Event-Handler. // "MouseEvent" ist die Kategorie der Eingabe, auf die zu hören ist. // ". CLICK" Ist ein angegebenes Ereignis in der Kategorie MouseEvent. // "swingSword" ist die Funktion, die aufgerufen wird, wenn das Ereignis eintritt.

  • Funktion - Ein Code, der einem Schlüsselwort zugeordnet ist und später aufgerufen werden kann. Funktionen handhaben die meisten Spieleprogrammierungen, und ein komplexes Spiel kann Hunderte von Funktionen haben. Funktionen können in beliebiger Reihenfolge sein, da sie nur funktionieren, wenn sie aufgerufen werden.

    Funktion swingSword(e:MouseEvent):void; { //Ihr Code hier } // "Funktion" ist das Schlüsselwort, das am Anfang jeder Funktion steht. // "swingSword" ist der Name der Funktion. // "e:MouseEvent" ist ein hinzugefügter Parameter, der anzeigt, // dass die Funktion vom Ereignis-Listener aufgerufen wurde. // ":void" ist der von der Funktion zurückgegebene Wert. // Wenn kein Wert zurückgegeben wird, verwenden Sie:void.

381698 6
381698 6

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 die Spieler interagieren können. Je nachdem, welche Anleitung Sie lesen, werden Objekte als Sprites, Schauspieler oder Filme bezeichnet. Für dieses einfache Spiel erstellen Sie ein Rechteck.

  • Öffnen Sie Flash Professional. Erstellen Sie ein neues ActionScript 3-Projekt.
  • Klicken Sie im Werkzeugbedienfeld auf das Zeichenwerkzeug Rechteck. Dieses Fenster kann sich je nach Flash Professional-Konfiguration an einem anderen Ort befinden. Zeichnen Sie ein Rechteck im Szenenfenster.
  • Wählen Sie das Rechteck mit dem Auswahlwerkzeug aus.
381698 7
381698 7

Schritt 3. Legen Sie die Eigenschaften des Objekts fest

Wählen Sie das neu ausgewählte Rechteck aus, gehen Sie zum 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, zum Beispiel "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. Geben Sie ihm denselben Namen wie bei der Umwandlung in ein Symbol ("Feind"). Dadurch entsteht ein eindeutiger Name für die Interaktion über den AS3-Code.
  • Jedes "Ereignis" ist ein separates Objekt, das vom Code beeinflusst werden kann. Sie können mehrfach erstellte Events kopieren, indem Sie auf die Registerkarte Bibliothek klicken und sie in die Szene ziehen. Jedes Mal, wenn ein Ereignis hinzugefügt wird, ändert sich sein Name, um anzuzeigen, dass das Objekt getrennt ist ("enemy", "enemy1", "enemy2" usw.).
  • Wenn Sie im Code auf ein Objekt verweisen, verwenden Sie einfach den Namen des Ereignisses, in diesem Fall "Feind".
381698 8
381698 8

Schritt 4. Erfahren Sie, wie Sie die Eigenschaften eines Ereignisses ändern

Sobald das Ereignis erstellt wurde, können Sie seine Eigenschaften über AS3 festlegen. Auf diese Weise können Sie Objekte verschieben, ihre Größe ändern usw. Sie können eine Eigenschaft anpassen, indem Sie das Vorkommen gefolgt von einem Punkt ".", gefolgt von der Eigenschaft gefolgt vom Wert eingeben:

  • Feind.x = 150; Dies beeinflusst die Position feindlicher Objekte auf der X-Achse.
  • Feind.y = 150; Dies beeinflusst die Position von feindlichen Objekten auf der Y-Achse Die Y-Achse wird vom oberen Rand der Szene berechnet.
  • Feind. Rotation = 45; Dreht feindliche Objekte um 45° im Uhrzeigersinn.
  • Feind. SkalaX = 3; Streckt die Breite des feindlichen Objekts um ein Vielfaches von 3. Das (-) Zeichen dreht das Objekt um.
  • Feind. SkalaY = 0,5; Ändert die Höhe des Objekts auf die Hälfte seiner aktuellen Höhe.
381698 9
381698 9

Schritt 5. Beobachten Sie den Befehl trace()

Dieser Befehl gibt den aktuellen Wert des angegebenen Objekts zurück und ist nützlich, um festzustellen, ob alles wie gewünscht funktioniert. Sie werden den Trace-Befehl wahrscheinlich nicht in Ihren endgültigen Code aufnehmen, aber er kann nützlich sein, um die Quelle des fehlgeschlagenen Codes zu finden.

381698 10
381698 10

Schritt 6. Erstellen Sie das Basisspiel mit den obigen Informationen

Sie haben nun ein grundlegendes Verständnis der Kernfunktionen. Sie können ein Spiel erstellen, bei dem jedes Mal, wenn ein Feind angeklickt wird, die Größe abnimmt, bis der Feind zerstört ist

var FeindHP:Zahl = 100; // Setzt die HP (Gesundheit) des Gegners zu Beginn des Spiels auf 100. var playerAttack:Number=10; // Legt die Angriffskraft des Spielers beim Klicken fest. Feind.addEventListener(MouseEvent. CLICK, attackEnemy); // Durch direktes Hinzufügen dieser Funktion zum feindlichen Objekt // tritt diese Funktion nur auf, wenn auf das Objekt selbst // geklickt wird, und nicht, wenn es irgendwo auf dem Bildschirm klickt. setEnemyLocation(); // 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; // Bewege den Feind 200 Pixel von der linken Seite des Bildschirms Feind.y = 150; // Bewege den Feind vom oberen Rand des Bildschirms 150 Pixel nach unten Feind.rotation = 45; // Drehe den Feind um 45 Grad im Uhrzeigersinn trace("Der x-Wert des Feindes ist", Feind.x, "und der Y-Wert des Feindes ist", Feind.y); // Zeigt die aktuelle Position des Feindes an, um die Fehlerquelle zu finden } function attackEnemy (e:MouseEvent):void // Erzeugt eine Angriffsfunktion, wenn der Feind angeklickt wird { FeindHP = FeindHP - playerAttack; // Subtrahiert den Angriffswert vom HP-Wert, // Erzeugt einen neuen HP-Wert. Feind. SkalaX = FeindHP / 100; // Ändern Sie die Breite basierend auf dem neuen HP-Wert. // Der Wert wird durch 100 geteilt und dann in eine Dezimalzahl umgewandelt. Feind. SkalaY=feindliche HP / 100; // Ändere die Höhe basierend auf dem neuen HP-Wert trace("Gegner haben", Feind-HP, "HP verbleibend"); // Zeigt an, wie viel HP der Feind noch hat }

381698 11
381698 11

Schritt 7. Probieren Sie es aus

Sobald Sie codiert haben, können Sie dieses neue Spiel testen. Klicken Sie auf das Menü Steuerung und wählen Sie Film testen. Das Spiel beginnt und Sie können auf ein feindliches Objekt klicken, um die Größe zu ändern. Die Trace-Ausgabe wird im Ausgabefenster angezeigt.

Teil 3 von 3: Fortgeschrittene Techniken lernen

381698 12
381698 12

Schritt 1. Erfahren Sie, wie Pakete funktionieren

ActionScript basiert auf Java und verwendet ein sehr ähnliches Paketsystem. Mit Paketen können Sie Variablen, Konstanten, Funktionen und andere Informationen in separaten Dateien speichern und diese Dateien dann in das Programm importieren. Dies ist besonders nützlich, wenn Sie Pakete verwenden möchten, die andere Leute entwickelt haben, die das Erstellen von Spielen erleichtern.

Suchen Sie auf Wikihow nach einer Anleitung, um mehr darüber zu erfahren, wie Pakete in Java funktionieren

381698 13
381698 13

Schritt 2. Erstellen Sie den Projektordner

Wenn Sie ein Spiel erstellen, das Bilder und Soundclips enthält, erstellen Sie eine Ordnerstruktur im Spiel. Sie werden es einfacher finden, verschiedene Arten von Elementen zu speichern und verschiedene Pakete zum Aufrufen zu speichern.

  • Erstellen Sie einen Basisordner für Ihr Projekt. Erstellen Sie im Basisordner einen „img“-Ordner für alle Art-Assets, einen „snd“-Ordner für alle Sound-Assets und einen „src“-Ordner für alle Spiel- und Codepakete.
  • Erstellen Sie im Ordner "src" einen Ordner "Games", um die Constants-Datei zu speichern.
  • Diese besondere Struktur ist nicht erforderlich, erleichtert jedoch die Organisation der Arbeit aller Materialien, insbesondere bei größeren Projekten. Für das oben beschriebene einfache Spiel müssen Sie keine Verzeichnisse erstellen.
381698 14
381698 14

Schritt 3. Fügen Sie dem Spiel Sound hinzu

Spiele ohne Ton oder Musik werden Spieler schnell langweilen. Mit dem Ebenen-Werkzeug können Sie Objekten Sound hinzufügen.

381698 15
381698 15

Schritt 4. Erstellen Sie die 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 sammeln, damit sie leicht aufgerufen werden können. Konstanten können Werte wie Schwerkraft, Spielergeschwindigkeit und andere Werte enthalten, die möglicherweise wiederholt aufgerufen werden müssen.

  • Wenn Sie eine Konstantendatei erstellt haben, platzieren Sie sie in einem Ordner im Projekt und importieren Sie sie dann als Paket. Angenommen, Sie erstellen eine Constants.as-Datei und legen sie im Ordner games ab. Verwenden Sie zum Importieren den folgenden Code:

    Paket { Spiel importieren.*; }

381698 16
381698 16

Schritt 5. Schauen Sie sich das Spiel anderer an

Während viele Entwickler ihren Spielcode nicht offenlegen, gibt es eine Vielzahl von Tutorial-Projekten und anderen Open-Source-Projekten, die es Ihnen ermöglichen, Code anzuzeigen und mit Spielobjekten zu interagieren. Dies ist eine großartige Möglichkeit, eine Vielzahl fortgeschrittener Techniken zu erlernen, die Ihrem Spiel helfen können, sich abzuheben.

Empfohlen: