Tutorial: Spieleprogrammierung mit Flex Part 1

Dieser Artikel wurde von Hanisch, Timo und Do, Hoang Viet am Mittwoch, 15. August 2012 verfasst. Aktualisiert: 20.11.2013 16:40:53

Der erste Teil vom ActionScript Tutorial, bei dem ein Snake-Klon programmiert wird.

In diesem Tutorial möchten wir euch in ActionScript und den FlashBuilder (4.6) von Adobe einführen. Das Tutorial an sich ist in mehrere Parts unterteilt, wobei jeder Part aufeinander aufbaut und am Ende ein kleiner Snake-Klon entstehen soll.

Dazu werden wir in jedem Teil versuchen auf verschiedene Aspekte von Action-Script einzugehen. Der aktuelle Part wird sich mit dem Einrichten von FlashBuilder unter Windows (andere System sollten jedoch änhlich funktionieren) und einem kleinen "Hello World!"-Programm beschäftigen. Feedback und Kritik sind jederzeit erwünscht!

Was wird für dieses Tutorial benötigt?


Es gibt zwei Sachen, die ihr benötigt:

  • Interesse (und Spaß) an dem Thema
  • Grundkenntnisse der Programmierung: Variablen, Funktionen, EventHandler

Was brauche ich sonst so?

Ihr benötigt FlashBuilder, welchen ihr hier bekommt. Als Student steht euch sogar die Möglichkeit offen hier einen kostenlosen Schlüssel zu erhalten, dazu müsst ihr jedoch euren Studentausweis einscannen und Adobe schicken. Die Freischaltung kann nach Adobe bis zu 2 Wochen dauern. Zusätzlich werdet ihr bei der Installation vom FlashBuilder um eine Registration bei Adobe gebeten (leider nicht optional!).

Ihr braucht zudem noch die aktuellste Flashversion bzw. eine Flashversion mit Debugmodus. Dafür geht ihr auf http://www.adobe.com/support/flashplayer/downloads.html und ladet euch Flash Player 11.3 Plugin content debugger und entsprechend euren Browser eines der beiden Plugins runter herunter (Erhältlich für Windows/Mac/Linux) und installiert diesen.

Hinweis: Es kann vorkommen, dass euer System sagt, dass ihr bereits eine neuere Version und die Installation nicht fortsetzt. Dieses Problem entsteht, weil auf einem PC nur eine Plugin Version installiert werden kann. Dabei wird nicht zwischen Debug oder Release unterschieden. Da die Release Version meisten früher Patches erhält, kommt dieses Phänomen zustande. Daher müsst ihr ggf. die aktuellere Release Version zugunsten der Debug Version deinstallieren.

Besonderheit für Chrome-User: Bei Chrome ist der Flash Player integriert. Adobe hat ein Tutorial veröffentlicht wie die Debug Version unter Chrome dennoch installiert und aktiviert werden kann ( externe Link)

Also los gehts!

Wenn ihr den FlashBuilder installiert habt, startet ihr diesen, dann sollte euere Installation, abgesehen von dem Startfenster, so aussehen:

1.png

Wir wollen zunächst ein Flex-Projekt erstellen. Dazu geht ihr auf Datei -> Neu -> Flex-Projekt. Nun solltet ihr folgenden Bildschirm vor euch haben:

2.png

Dort tragt ihr euren Projektnamen ein, in unserem Fall "Tutorial". Anschließend gehen wir auf "Fertigstellen". Es folgt folgender Bildschirm:

3.png

Nun passen wir den Code ein wenig an um eine einfache "Hello World!"-Applikation zu erhalten.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               width="500"
               height="500"
               creationComplete="init()">
    <fx:Declarations>
        <!-- Platzieren Sie nichtvisuelle Elemente (z. B. Dienste, Wertobjekte) hier -->
    </fx:Declarations>
    <fx:Script><![CDATA[
        public function init() : void {
            trace("Hello World!");
        }
    ]]></fx:Script>
</s:Application>

Um das Ergebnis bewundern zu können, muss der Code kompiliert und anschließend gestartet werden. Hierzu klicken wir auf den Käfer und Flash Builder kümmert sich um alles:

bug.png

Die Applikation wird dann im Debugging Modus gestartet. Dieser Modus ist besonders geeignet um später Fehler im Code zu finden, denn die Ausführung wird von Flash Builder überwacht. Dadurch stehen folgende Features unter anderem zur Verfügung:

  • die Programmausführung kann jederzeit unterbrochen werden,
  • die Werte der Variablen kann von Flash Builder angezeigt werden
  • diverse Anweisungen sind nur im Debugmodus verfügbar
  • Erweiterte Informationen zu aufgetretene Fehlern

Darauf hin sollte euer Standardbrowser starten und einen leeren Bildschirm anzeigen. Wenn ihr nun wieder euren FlashBuilder in den Fokus rückt seht ihr im Ausgabefenster den Text "Hello World!".

4.png

Code im Details

Wollen wir aber nun einmal auf den Code eingehen und diesen näher betrachten. Die erste Zeile

 <?xml version="1.0" encoding="utf-8"?>

ist die übliche XML Deklaration. Das zeigt, dass MXML eine XML-kompatible Sprache ist. Im konkreten Fall nutzen wir XML 1.0 und es wird mit UTF-8 codiert. Die nächste Zeile verkörpert die Anwendung selbst:

<s:Application>
 ...
</s:Application>

Hier werden neben grundlegenden Einstellungen wie etwa Höhe und Breite des SWF Films auch alle Event Handler registiert, beispielsweise creationComplete. Dieses Event wird einmal aufgerufen, nachdem unser SWF fertig geladen ist (mehr dazu später). Die nächsten XML-Tag

<fx:Declarations>...</fx:Declarations>

werden wir nicht benötigen. Daher überspringen wir ihn und kommen gleich zum XML-Tag <fx:Script>

<fx:Script><![CDATA[
    public function init() : void {
        trace("Hello World!");
    }
]]></fx:Script>

Dieser Tag enthält den eigentlichen ActionScript-Code. In unserem Fall die init-Funktion, welche aufgerufen wird, sobald die Applikation fertig geladen ist. [CDATA[ ]] sagt einfach nur aus, dass wir keinen XML-Syntax verwenden. Das ist nötig, da wir eigentlich XML-Code erzeugen, der ActionScript enthält.

Innerhalb von init wird der folgende Befehl ausgeführt:

trace("Hello World!");

trace ist eine Debuganweisung, die eine Konsolenausgabe veranlasst. In diesem Fall "Hello World!". Wird der Film in der Release Variante ausgeführt, werden Debuganweisungen wie trace nicht ausgeführt.

Dies war zunächst einmal eine kurze Einführung. Im zweiten Teil werden wir mit dem Snake-Klon anfangen und zunächst nochmal auf einige wenige grundlegende Dinge von Action-Script eingehen.

 
blog comments powered by Disqus

Google Anzeigen

Neusten Blogeinträgen

  • CSS: Animationen

    CSS3 bietet von Haus aus Möglichkeiten zur Definition von Animationen über die Property animation. Wie es funktioniert zeigen wir in diesem Artikel.

  • CSS: Alternierende Tabellenzeilen

    Um die Lesbarkeit von Tabellen zu steigern, bietet die CSS die Möglichkeit Tabellenzeilen alternierend zu färben. Wie das funktioniert zeigen, wir ...

  • Unity3D: Konsolenausgabe formatieren

    Die Unitykonsole ist einer der meistgenutzten Feature wenn es bei Unity um Fehlersuche und -behandlung geht. Sie wird dabei schnell voll und verli ...

  • Unity3D: Singleton für langsame Operationen

    Operationen wie Object.FindObjectOfType werden in der Dokumentation von Unity3D Entwickler selbst als sehr langsam beschrieben. Aus dem Grund wird ...

  • Unity3D: Optionale Parameter

    Unity3D (4.3.1) unterstützt keine optionale Parameter, wenn die betroffene Skriptdatei in einem Namespace definiert wird.

Popular Threads

Share it on your network