Flashhilfe.de - Flash Community
 
  Flashkurse > Flash 5 > Shooter  
 
 

Seite drucken ::

  Autor: Kai Jansen
Webseite: kaijansen.de
 
Endlich mal ein Kleines Spiel als Flashkurs! Wie baut man einen einfachen Shooter ähnlich dem Suchtspiel Moorhuhn?
 
1)  Als erstes lege die Bühnengröße fest. Die Bühne sollte nicht zu groß sein, damit die Performance geschont wird. Ich habe als Bühnegröße eine Breite von 400 px und eine Höhe von 250 px gewählt.

In der ersten ebene wird der Hintergrund gezeichnet oder ein Hintergrundbild importiert. Achtung, Hintergrundbilder die photorealistisch sind treiben die Dateigröße in die Höhe. Ich habe aus diesem Grund einen selbstgezeichneten und ganz einfachen landschaftlichen Hintergrund direkt in Flash gezeichnet. Vektorgrafiken bieten sich hier an, da diese verhältnismäßig klein sind.
 
 
2)  Wenn der Hintergrund fertig gezeichnet oder importiert ist, sollte diese Ebene abgeschlossen werden, damit sie nicht aus versehen verändert wird.
 
 
3)  Als nächstes benötigen wir unsere potentiellen Ziele. Dazu lege ein neues Symbol an (Strg+F8) gib einen Namen ein und lasse Filmsequenz angewählt (MX 2004: Registrierpunkt ist in der Mitte). In dieser Filmsequenz zeichne jetzt dein Zielobjekt. Ich habe mich im Beispiel an einem Papierflieger versucht. Falls später vor dem Abschuss noch eine Animation folgen soll bei der z.B. der Flieger abstürzt, benötigt man ein Grafiksymbol um damit ein Bewegungstween anzulegen. Markiere aus diesem Grund dein ganzes Objekt und drücke dann F8 um daraus eine Grafik zu machen. Achtung, nicht den selben Namen angeben.
 
 
4)  Wenn dein Objekt fertig gezeichnet ist, dann lege in der Zeitleiste eine neue Ebene über dem Hintergrund an und ziehe dein Objekt aus der Bibliothek auf die Bühne, so das es in dieser Ebene liegt.
 
 
5)  Und dann beginnt auch schon das Scripten für die Bewegung des Objektes. Folgendes ist dabei zu berücksichtigen. Man sollte sich immer im Klaren darüber sein, wie sich ein Objekt bewegen sollte. Es ist sehr hilfreich, sich das sogar genau nieder zur schreiben. Das klingt zwar kindisch und manche werden denken ich kann das auch so, dass ist zwar toll, kann aber auch schief gehen. Und warum schwer machen, wenn es auch einfach geht. Die Gedanken die ich zur Bewegung hatte schreibe ich im folgenden einfach mal nieder:

  • Mein Papierflieger soll entweder von rechts oder von links ins Bild fliegen.
  • Ich möchte das die Geschwindigkeit der Papierflieger variiert und sie sollen sich nicht nur nach vorne, sondern auch nach unten bewegen um einen Sinkflug zu simulieren.
  • Die Höhe, in der, der Flug beginnt, soll variieren.

Wenn ich das ganze in Englisch nieder schreibe, habe ich schon fast den Quellcode! Na ja, ganz so ist es nicht aber fast. Ein paar Gedanken muss ich schon noch anbringen und ein paar Variabelen anlegen.

Wir erinnern uns: "Mein Papierflieger soll entweder von rechts oder von links ins Bild fliegen." Ich benötige also ein Variable, die die Richtung speichert. Da ich mit dem Befehl "random" arbeiten möchte, um die Richtung zufällig zu bestimmen, kann ich nicht "links" oder "rechts" als Werte verwenden sondern begnüge mich mit 0 und 1. Die Variable nenne ich "richtung", da dieser Name eindeutig angibt wofür diese Variable zuständig ist. Daraus resultiert folgendes Script.

ActionScript:
1richtung = random(2);


Damit ich jetzt auch meinem Papierflieger entsprechend positionieren kann, muss ich diese 0 und 1 noch in einer if-Bedingung interpretieren. Hierzu schreibe ich mir die Schleife quasi wieder im Klartext auf:

if richtung gleich 0, dann positioniere mich am linken Rand, else am rechten. Das ganze sieht dann so aus:

ActionScript:
1if (richtung == 0) {
      _x = -50;
} else {
      _x = 450;
}

Oder in Kurzform auch einfach so:

ActionScript:
1_x = (richtung == 0) ? -50 : 450;

Woraus die _x Werte resultieren wird klar wenn man sich die Bühnenmaße und die Maße - bzw. die Hälfte - der Objektbreite ansieht. Vielleicht sollte ich noch erwähnen, dass mein Papierflieger eine Breite von 100 px hat.
 
 
6)  Als nächstes benötigen wir die Y-Positionierung, denn der Papierflieger soll ja nicht immer aus der selben Höhe starten. Das wird ebenfalls über den Befehl "random" gelöst. Der Bereich ist allerdings diesmal etwas eingeschränkter, da ich mich im Beispiel auf den Himmel als Starthöhe beschränken möchte.

ActionScript:
1_y = random(110) + 20;


Durch diese Script erreicht man das der Papierflieger immer im Bereich von 20 px und 130 px startet.
 
 
7)  Da man das Objekt, wenn es sich von rechts nach Links bewegt spiegeln muss, was ich nur über eine negative X-Achsenskalierung erreichen kann, muss ich für _xscale ein ähnliches Script schreiben wie für den X-Wert:

ActionScript:
1_xscale = (richtung == 0) ? 100 : -100;


Die Geschwindigkeit sollte variieren, drum muss auch die Geschwindigkeit mit der Positionierung neu gesetzt werden, das erreichen wir einfach durch:

ActionScript:
1vorwaerts_speed = random(6) + 12;


Da diese Positionierung mehrmals benötigt wird, bietet es sich an daraus eine Funktion zu basteln, und diese Gleich der Klasse MovieClip hinzuzufügen. Dafür gibt es in Flash den Befehl "prototype". Diese Funktion wird in die Hauptzeitleiste, in eine extra dafür angelegte Ebene mit dem Namen "Aktionen" geschrieben.

ActionScript:
1MovieClip.prototype.positionieren = function () {
      this.vorwaerts_speed = random(6) + 12;
      this.richtung = random(2);
      this._x = (this.richtung == 0) ? -50 : 450;
      this._xscale = (this.richtung == 0) ? 100 : -100;
      this._y = random(110) + 20;
     }
 
 
8)  Damit der Papierflieger diese Funktion zu beginn aufruft, bekommt jetzt die Filmsequenzinstanz auf unserer Bühne folgendes Script. Achtung es handelt sich hierbei um eine Objektaktion. Dazu muss das Symbol auf der Bühne angewählt werden und dann das Actionscriptfenster geöffnet werden. Im Actionscriptfenster sollte dann nicht Bildaktion, sondern Objektaktion als Überschrift stehen.

ActionScript:
1onClipEvent (load) {
      positionieren ();
}

Wenn man jetzt den Film veröffentlicht, wird sich der Papierflieger schon positionieren, und zwar links oder rechts vom Bühnenrand.
 
 
9)  Als nächstes kommt die Bewegung nach unten. Wir erinnern uns, was ich mir dazu für Gedanken gemacht habe.
"Ich möchte das die Geschwindigkeit der Papierflieger variiert und sie sollen sich nicht nur nach vorne, sondern auch nach unten bewegen, um einen Sinkflug zu simulieren."
Wir benötigen also einen festen Wert für den Sinkflug. Die Variable legen wir ins erste Schlüsselbild unserer Hauptzeitleiste, zu den anderen Scripten, und rufen diese Später über den absoluten Pfad (_root) auf:

ActionScript:
1runter_speed = 2;
 
 
10)  So, nun sind alle Werte, die wir zum Bewegen benötigen gesetzt. Wir müssen aber noch differenzieren ob die Bewegung nun von links nach rechts oder umgekehrt stattfinden muss. Dazu reicht es einen Zustand abzufragen, denn ist dieser nicht gegeben, ist automatisch das andere der Fall. Das heißt im Klartext soviel wie: "Wenn du rechts beginnst, dann verringere deinen X-Wert (Vorwärtsbewegung) und verringere deinen Y-Wert (Sinkflug)." Was dann zu folgendem Script führt.
ActionScript:
1if (this.richtung == 0) {
      this._x += this.vorwaerts_speed;
      this._y += _root.runter_speed;
}

Diese Abfrage ist für den Flug von links nach rechts. Was jetzt fehlt ist der Flug in die andere Richtung, dieser muss nicht extra abgefragt werden, sondern es reicht ein else. Denn wenn nicht nach rechts geflogen wird, dann muss zwangsläufig nach links geflogen werden. Das fertig Script inkl. des Befehls "prototype", der aus unserem Script dann wieder eine MovieClip-Funktion macht, sieht dann so aus:

ActionScript:
1if (this.richtung == 0) {
      if (this._x < 450) {
            this._x += this.vorwaerts_speed;
            this._y += _root.runter_speed;
      } else {
            positionieren ();
      }
}

Allerdings ist hier noch nicht berücksichtigt was passiert, wenn der Flieger nicht mehr im Bereich der Bühne ist. Wir benötigen also noch eine Abfrage innerhalb dieser Abfrage die etwa folgendes Beinhalten muss.
"Solange der Papierflieger innerhalb der Bühne ist soll er sich bewegen, andernfalls soll er sich neu positionieren!". Was dann zwangsläufig zu diesem Script führt:

ActionScript:
1MovieClip.prototype.bewegen = function () {
      if (this.richtung == 0) {
            if (this._x < 450) {
                  this._x += this.vorwaerts_speed;
                  this._y += _root.runter_speed;
            } else {
                  positionieren ();
            }
      } else {
            if (this._x > -50) {
                  this._x -= this.vorwaerts_speed;
                  this._y += _root.runter_speed;
            } else {
                  positionieren ();
            }
      }
}
 
 
11)  Damit die Bewegung jetzt konstant ausgeführt wird oder gegebenenfalls neu positioniert wird, bekommt unser Papierflieger jetzt zusätzlich zu dem onClipEvent (load) auch noch einen onClipEvent (enterFrame), so dass dann, dass gesamte Script auf unserer Instanz so aussieht:

ActionScript:
1onClipEvent (load) {
      positionieren ();
}
onClipEvent (enterFrame) {
      bewegen ();
}

Dieser Papierflieger wird dann beliebig oft kopiert und auf der Bühne eingefügt. Aber Vorsicht, immer einen anderen Instanznamen angeben. Am Besten durchnummerieren (flieger1, flieger2,flieger3...).

Soweit die Bewegung des Papierfliegers.
 
 
12)  Als nächstes folgt die Erstellung des Fadenkreuzes. Erstelle dazu erneut eine Ebene in der Hauptzeitleiste, die über allen anderen Ebenen liegt. Jetzt erstelle ein neues Symbol (Strg+F8). Nenne das Symbol Fadenkreuz und lasse Filmsequenz angewählt (MX 2004: Registrierpunkt ist in der Mitte). In diese Filmsequenz zeichne nun dein Zielkreuz, in beliebigem Design. Achte aber darauf, dass die Mitte des Kreuzes auch die Mitte des Objektes ist.
 
 
13)  Klicke die eben neu erstellte Ebene in der Hauptzeitleiste an und ziehe die Filmsequenz (das Fadenkreuz) auf die Bühne. Gib diesem Movieclip den Instanznamen "fadenkreuz".
 
 
14)  Diese Instanz bekommt nun folgendes Script (Objektaktion):

ActionScript:
1onClipEvent (load) {
      Mouse.hide();
      this.startDrag(true);
}

Erläuterung:

ActionScript:
1onClipEvent
hatte ich ja bereits erklärt.
ActionScript:
1Mouse.hide()
ist ein Befehl des es erst seit Flash 5 gibt, und der es ermöglicht, den Systemmauszeiger innerhalb des Flashfilms verschwinden zu lassen.
ActionScript:
1this.startDrag(true)
sorgt dafür das die Instanz dem (nicht sichtbaren) Mauszeiger folgt. Das true sorgt dafür, dass das Fadenkreuz immer mittig zum Mauszeiger positioniert ist.
 
 
15)  Wird der Film jetzt veröffentlicht, kann man schon die Papierflieger fliegen sehen und auch die Maus (das Fadenkreuz) folgt den Bewegungen des versteckten Mauszeigers. Aber was fehlt, ist die Trefferabfrage, auch Kollisionsabfrage genannt. Es gibt viele verschiedene Möglichkeiten so eine Abfrage zu realisieren. Eine recht Einfache wäre, in die Objekte eine Schaltfläche einzubauen. In diesem Fall habe ich mich aber, für die in Flash enthaltene Kollisionsabfrage, hitTest entschieden. Mit hitTest kann man abfragen ob ein Objekt ein weiteres Objekt berührt. Es gibt in diesem Fall zwei Möglichkeiten diese Abfrage zu gestalten. Man kann abfragen ob das Objekt (Papierflieger) von der Instanz "fadenkreuz" berührt wird, oder man macht eine genaure Abfrage und kontrolliert die Mausspitze, die ja der Mitte des Fadenkreuzes entspricht. Hier beide Versionen im Vergleich:

ActionScript:
1if (this.hitTest(_root.fadenkreuz)) {
      positionieren();
}

oder eben:


ActionScript:
1if (this.hitTest(_root._xmouse, _root._ymouse, false)) {
      positionieren();
}

Ich habe mich für die genauere Abfrage der Mauskoordinaten entschieden. So das, das komplette Script ebenfalls wieder mit prototype als Funktion angelegt, dann so aussieht:

ActionScript:
1MovieClip.prototype.trefferabfrage = function () {
      if (hitTest(_root._xmouse, _root._ymouse, false)) {
            positionieren();
      }
}
 
 
16)  Diese Kollisionsabfrage muss jetzt auf den Zielobjekten immer dann abgefragt werden, wenn die Maus gedrückt wird. Zu diesem Zweck gibt es einen ClipEvent mit dem Parameter mouseDown. Das komplette Script auf der Papierfliegerinstanz sieht dann so aus:

ActionScript:
1onClipEvent (load) {
      positionieren();
}

onClipEvent (enterFrame) {
      bewegen();
}

onClipEvent (mouseDown) {
      trefferabfrage();
}
 
 
17)  Damit ist das Spiel eigentlich schon fertig. Was nun noch Fehlt ist eine Trefferanzeige und ein zeitliches Limit, damit das Spiel auch irgendwann zu Ende ist. Für Beides wird eine separate Filmsequenz angelegt.
Lege also als wieder eine neue Filmsequenz an und gib ihr den Namen "Treffer". In diese Filmsequenz zeichne jetzt mit Hilfe des Texttools ein Textfeld. Es muss ein dynamisches Textfeld sein, dass keinen Rand hat und das nicht auswählbar ist. Farbe und Schrift kannst du selbst auswählen. Wenn du eine ausgefallene Schrift verwendest, dann binde die Zahlen mit ein. Bei Zahlen solltest du die Ausrichtung verändern. Da ich die Filmsequenz rechts positionieren möchte, schalte ich das Textfeld auf rechtsbündige Darstellung um. Jetzt noch einen Variabelenamen vergeben, z.B. "treffer".
 
 
18)  Ziehe die Filmsequenz in eine neue Ebene, die du zuvor in der Hauptzeitleiste angelegt hast, auf die Bühne. Die Ebene sollte auf jeden Fall über dem Fadenkreuz liegen, damit man die Zahlen immer gut lesen kann. Nenne diese Instanz "treffer_MC".
 
 
19)  Damit zu Beginn des Spiels die Treffer auf 0 stehen, werden diese jetzt noch initialisiert. Aus diesem Grund erweitern wie die Variablen in der Hauptzeitleiste um folgendes:

ActionScript:
1treffer_MC.treffer = 0;
 
 
20)  Um die Variable jetzt konstant hochzählen zu lassen, wenn man getroffen hat, muss die Funktion "trefferabfrage" erweitert werden. Jetzt wird auch sofort klar, worin der Vorteil einer Funktion besteht, denn jetzt muss man das Script nur in der Funktion ändern, und nicht in jeder Papierfliegerinstanz. Das Script für die Abfrage lautet dann also wie folgt:

ActionScript:
1MovieClip.prototype.trefferabfrage = function () {
      if (this.hitTest(_root._xmouse, _root._ymouse, false)) {
            _root.treffer_MC.treffer++;
            positionieren();
      }
}
 
 
21)  Nach dem Veröffentlichen werden jetzt brav die Treffer hochgezählt. Aber noch ist das Spiel nicht zeitlich begrenzt. Das Spiel soll nur 30 Sekunden dauern und es soll von 30 bis 0 heruntergezählt werden. Dazu benötigen wir abermals eine neue Filmsequenz, mit dem Namen "Timer".
Zeichne in diese Filmsequenz wieder ein dynamisches Textfeld. Das Textfeld hat die selben Eigenschaften, wie das von der Trefferanzeige. Nämlich: nur Zahlen sind eingebunden. Und es wird rechtsbündig ausgerichtet. Als Name vergib "time". Vor das dynamische Textfeld zeichne jetzt noch ein statisches Textfeld, in dass du einfach "Time:" schreibst.
 
 
22)  Ziehe diese Filmsequenz jetzt wieder auf die Bühne und ebenfalls wieder in eine neue Ebene. Dann bekommt diese Instanz folgendes Script:

ActionScript:
1onClipEvent (load) {
      this.starttime = getTimer() / 1000;
      this.time = 30;
}
onClipEvent (enterFrame) {
      if (this.time >= 1) {
            this.time = Math.round(30 - ((getTimer() / 1000) - this.starttime));
            this.time = (this.time < 10)? "0" add this.time : this.time;
      } else {
            _root.gotoAndStop("gameover");
      }
}

Erläuterung:

Zu Beginn wird die Zeit auf 30 gesetzt. Dann kommt der onClipEvent (enterFrame ) um die Zeit konstant herunter zu zählen. Solange die Sekunden größer oder gleich 1 sind, sollen sie herunter gezählt werden. Andernfalls soll in der Hauptzeitleiste zum Bild mit der Bildbezeichnung "gameover" gesprungen werden, welches zu diesem Zeitpunkt noch nicht angelegt ist.
 
 
23)  Jetzt muss in der Hauptzeitleiste nur noch der Game Over Screen erstellt werden. Dazu setze erst mal in der Hauptzeitleiste hinter alle Ebenen, außer der Treffer- und der Hintergrundbild-Ebene, ein leeres Schlüsselbild (F7).
 
 
24)  Füge eine neue Ebene ein und schreibe, in einem statischen Textfeld, "Game Over" über den Hintergrund. Natürlich kann man hier auch eine schöne GameOver-Animation erstellen, die abläuft. Der Kreativität sind dabei fast kein Grenzen gesetzt.
 
 
25)  In der Ebene "actions" muss nun das Schlüsselbild angeklickt werden und im Bedienfeldfenster Bild, im Feld Bildbezeichnung, noch "gameover" eingetragen werden, damit das Script funktioniert. Im ersten Schlüsselbild muss jetzt auch noch ein stop() eingetragen werden, damit der Film nicht zu Beginn gleich in den GameOver-Zustand springt. Damit das Spiel neu gestartet werden kann, vergebe im ersten Schlüsselbild ebenfalls eine Bildbezeichnung. Gib "gamestart" ein.
 
 
26)  Damit neu gestartet werden kann, benötigst du jetzt noch eine Schaltfläche, die das Spiel neu startet. Erstelle also ein neues Symbol (Strg+F8) und diesmal eine Schaltfläche. Diese Schaltfläche ziehe ebenfalls, in eine neue Ebene der Hauptzeitleiste, auf die Bühne. Die Schaltfläche darf aber nur im zweiten Bild (Frame) der Hauptzeitleiste liegen, so dass sie wärend des eigentlichen Spiels nicht zu sehen ist. Jetzt gib der Schaltfläche folgendes Script:

ActionScript:
1on (release) {
      gotoAndStop("gamestart");
}
 
 
Fertig) Das Ergebnis siehst Du wenn Du unten auf den Link "anschauen" klickst.


Info) Für Fragen stehen natürlich immer unsere Flash-Foren zu Verfügung!


Drucken) Seite drucken.


Ergebnis anschauen.
Flashkurs "Flash5 :: Shooter" downloaden ( 110.14 KB )


«« zurück   Auswahl   vor »»


Alle Inhalte gehören zu flashhilfe.de
 
 
Partner Webseiten: art-and-law.de  Mediengestalter.info   php-resource.de   phpforum.de   phpwelt.de   Pixelio.de   Scubacube.de  
Haftungsausschluss   Datenschutzerklärung   Hier Werben   Impressum
© 1999-2019 Sebastian Wichmann - Flashhilfe.de