Anzeige
Tutorialbeschreibung

Hittest-Shooter mit Adobe Flash

Hittest-Shooter mit Adobe Flash

Dieses Beispiel ist ein Shooter, der mit Hittestobjekten funktioniert. Die Programmierung ist sehr umfangreich und daher weniger für Flash-Neulinge geeignet.

Es ist aber so aufgebaut, dass man es leicht schaffen sollte.
 


Dieses Spiel ist ein ganz einfacher Shooter, der mit AS3 programmiert wurde. Ziel des Spiels soll es sein, das Pony keine Zuckerstangen erwischen zu lassen (zählt Minuspunkte). Fängt das Pony Äpfel, so macht das nichts. Der Punktestand wird nicht verändert. Das Spiel ist aus, sobald die Zeit abgelaufen ist.

 

Schritt 1

Vorbereitung der Arbeitsoberfläche: Meine Bühne ist 550 x 400 px groß. Das ist aber nicht zwingend notwendig und kann auch abgeändert werden.

Wir brauchen insgesamt 9 Ebenen.

EbenenBilder



Wir ziehen in der untersten Ebene mit dem Namen Hintergrund ein Rechteck auf, das mit einem Blauverlauf gefüllt wird. Den Verlauf von oben nach unten laufen lassen.

 
 

Schritt 2

Danach folgen die Wolken. Dafür zeichnen wir mit dem Zeichenstift eine Form, die wie eine Wolke aussieht. Aus diesen Wolken sollen dann nämlich die Objekte runterfallen. Die Form färben wir mit einem radialen Verlauf von Grau nach Weiß ein. Wie machen per Rechtsklick ein Symbol daraus und setzen Instanzen davon auf die Bühne.

Diese können (da sie Instanzen sind) nun nach Belieben vergrößert oder verkleinert und auch farbig abgeändert werden. Wir wollen eine Wolkendecke erreichen, also einfach nach Belieben positionieren. Die Wolken sollen in allen drei Schlüsselbildern, die für das Spiel notwendig sind, vorkommen (siehe Ebenen bei Schritt 1).

WolkenBilder


 
 

Schritt 3

Nun fehlt für den Beginn nur noch der Start und die Einleitung für das Spiel. Also benennen wir eine Ebene in Start um und legen ins erste Schlüsselbild eine kurze Beschreibung und eine Grafik mit Start. Diese Grafik konvertieren wir in einen Movieclip und geben ihm den Instanznamen start_btn.

Die Programmierung dafür lautet wie folgt: (wird ins erste Schlüsselbild in der AS-Zeile geschrieben)

AS 3 CodeBilder



Mit dieser Anweisung sage ich Flash, dass es beim Drücken der Start-Taste in das 2. Frame springen soll. Danach startet das Spiel. Das Stop(); zu Beginn ist wichtig, da sonst alle Bilder auf einmal durchlaufen.

 
 

Schritt 4

Da es hier hauptsächlich ums Programmieren gehen sollte, werde ich auf die weiteren gestalterischen Aspekte nicht weiter eingehen. Zeichnet ein Pony, einen Apfel, eine Zuckerstange und etwas, das wie ein Sack aussehen soll. Konvertiert dies dann wieder in Grafiken.

Pony GrafikBilder


 
 

Schritt 5

Vorbereitung fürs Punktezählen:

Erstellt ein Textfeld, welches dynamisch ist. Benennt es mit punkte_txt. Erstellt auch ein weiteres dynamisches Textfeld mit der Bezeichnung time_txt.

InstanznameBilder



Diese beiden Elemente sollten nur im 2. und 3. Schlüsselbild zu sehen sein!

 

Schritt 6: Instanznamen

Das kann man gar nicht oft genug sagen! Aber jeder Movieclip, der auch über ActionScript angesprochen wird, muss einen eigenen Instanznamen haben. Also alle Elemente, die wir von jetzt an in unser Spiel einbauen, sofort benennen.


(TIPP: Ich nenne meine Text-Objekte immer name_txt, Schaltflächen name_btn und Movieclips name_mc - so weiß ich bei der Programmierung immer noch, was was ist!)

 
 

Schritt 7

Nun geht es ans Eingemachte:

Der gezeichnete Sack soll unser Cursor während des Spiels werden. Dies ist nicht sehr schwierig. Damit wir aber nicht durcheinanderkommen, werde ich die einzelnen Zeilen der Programmierung nacheinander einfügen und euch sagen, in welcher Zeile wir uns jetzt befinden. Richtet deshalb euer Augenmerk nun auf Zeile 16, wo der Mauszeiger beginnt.

Code - MauszeigerBilder



Die Programmierung besagt, dass unser normaler Pfeil unterdrückt wird und stattdessen der Sack folgt. Mauszeiger_mc folgt genau den Koordinaten, die unser Cursor normalerweise haben sollte (wird mit mouseX und mouseY angezeigt). Das = zwischen den beiden setzt die Werte folglich gleich. Durch Enter Frame wird dieser Zustand immer abgefragt. Dies müssen wir dann im 3. Schlüsselbild wieder rückgängig machen. Dazu aber später mehr.

 
 

Schritt 8

Als Nächstes legen wir die Äpfel oben über die Wolken hin. Wo, ist ganz egal, da wir ihnen nachher Zufallswerte zuschreiben werden, die wir jetzt gleich mit Variablen programmieren werden. Diese könnt ihr ganz einfach vor dem Mauszeiger einfügen (Zeile 1-7). Die Var MinHoehe und so weiter sind die Schranken, in denen sich unsere Objekte dann bewegen sollen.

VariablenBilder



Auch können wir bereits den Button Mode für Äpfel und für die Zuckerstangen einstellen (Zeile 9 -14). Dieser soll true sein, was bedeutet, dass man beim Draufklicken eine Hand zu sehen bekommt.

 
 

Schritt 9

Damit die Äpfel und Zuckerstangen runterfallen können, muss die Programmierung wie folgt aussehen. Die grauen Texte sind für eine Programmierung ohne Hittest und können hier unbeachtet weggelassen werden.

ZuckerstangenBilder


 
 

Schritt 10: Der Hittest

Dazu müssen wir erst die Ponys auf die Bühne bringen, die rechts außen positioniert werden. Ich habe jedem Pony einen Bewegungstween verpasst, damit diese über die Bühne „schweben“ können.

Pony TweenBilder


 
 
Danach wird der Code für den Hittest der Ponys geschrieben. Er soll bewirken, dass, wenn ein Apfel das Pony berührt, der Apfel wieder von oben herabfällt. Berührt eine Zuckerstange das Pony, wird sie auch wieder von oben herunterfallen, zieht jedoch einen Punkt ab.

Hittest CodeBilder


 
 
Bei dieser Programmierung muss man folgendes Szenario bedenken: Was soll eigentlich abgefragt werden? Wir möchten, dass etwas passiert, wenn die Ponys berührt werden. Deshalb werden den Ponys Event Listener angehängt. Diese fragen dann ab: Wenn die Zuckerstange das Pony berührt (der Hittest!)(if Bedingung), dann soll mit der Zuckerstange etwas passieren. Nämlich der Punkteabzug und das erneute Herunterfallen derselben.

Für das von oben Herabfallen bei einer Zufallsposition wird eine Position berechnet, die zwischen den Schranken liegt, die wir als Variablen festgelegt haben. Mit Math.random()*(MaxHoehe-MinHoehe)-MinHoehe; wird eine Position gefunden, die in der Höhe außerhalb der Bühne liegt. Selbiges macht man dann auch mit der Breite, damit die Objekte nicht immer an derselben Stelle runterfallen.

Außerdem wird ein Punkt abgezogen; dieser erscheint dann via punkte.toString(); im punkte_txt Feld.

Eine Möglichkeit, das Ganze zu tunen, wäre, den Objekten hierbei noch eine zufällige Rotation mitzugeben.

 

Schritt 11: Treffer

Hierbei geht es darum, was passiert, wenn die Ponys nicht berührt werden. Berühre ich mit dem Sack (Cursor) eine Zuckerstange, so bekomme ich Pluspunkte. Dies muss ich wie folgt programmieren: Der Apfel zieht einen Punkt ab.

Treffer CodeBilder


 
 
Die Denkweise ist hier wieder ähnlich vom Aufbau. Was soll geschehen, wenn der Cursor und die Zuckerstange sich berühren? Es sollen Punkte dazugezählt werden. Und zwar muss hier kein Hittest programmiert werden, es reicht auch ein MouseEvent mit MOUSE_OVER.

Ich habe hier als Upgrade noch die Zeilen 109 bis 114 eingefügt. Diese besagen, dass, wenn man unter 10 Punkten hat, der Sack klein ist (Mauszeiger_mc steht in Frame 2). Bekomme ich mehr als 10 Punkte zusammen, so springt mein mauszeiger_mc in Frame 1 und wird zu einem großen Sack. Dieser Aspekt ist nicht notwendig.

Die neue Zufallsposition wird auch hier wieder mitprogrammiert.

 

Schritt 12: Timer

Jetzt fehlt uns nur noch der Timer als wichtiges Element. Dieser wird üblich programmiert und soll 60 Sekunden abzählen. Nach dieser Zeit soll man ins 3. Schlüsselbild kommen, wo dann alle Eventlistener „removt“ werden müssen. Diese Aktion ist notwendig, da Flash sonst einen Objekt-Nullverweis meldet, weil die Hittest-Objekte auf einmal verschwunden sind. Also lieber eine Code-Zeile mehr schreiben und dafür keine Compiler-Fehler haben!

Timer CodeBilder


 
 
Außerdem müssen wir noch den Mauszeiger zurückgeben (Codezeile 4 und 5) und ein GAME OVER in Frame 3 selbst schreiben, das anzeigt, dass das Spiel vorbei ist.

Code für 3. SchlüsselbildBilder



Damit sollte der Shooter fertig sein und auch funktionieren. Ich hoffe, die Erklärungen waren halbwegs verständlich, wenn auch für Einsteiger sicher nicht einfach nachzuvollziehen.
 
 
Viel Spaß mit dem Beispiel!

VorschaubildBilder

 

DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von laajacky
  • 12.09.2013 - 12:51

Danke ein sehr schönes Tutorial !

Portrait von Susan99
  • 17.10.2012 - 13:41

Ein gutes Tutorial. Auch um den Unterschied zwischen AS2 und AS3 Programmierung nachzuvollziehen. Vielen Dank. LG Susan

Portrait von Dineria
  • 20.09.2012 - 14:25

Danke noch einmal für das tolle Tutorial - habe endlich eine günstige Gelegenheit gefunden, es mit mehr als passenden eigenen Bilder nachzumachen! :-) Dabei hatte ich das Problem, trotz allem Hittest-Compilerfehler nach Ablauf der Zeit zu bekommen... Der Grund dafür war, dass die Spiel-Objekte im 3. Bild keinen Frame besaßen - das sei hiermit noch einmal erwähnt, falls jemand vor demselben Problem steht... :-)

Portrait von Chiisea
  • 20.09.2012 - 14:39

Hallo Dineria!
Ja, das mit dem Compiler Fehler am Schluss habe ich versucht zu beschreiben - ist mir wohl nicht so ganz gelungen ;)
Dennoch freut es mich sehr zu lesen, dass du das Tutorial ausprobiert hast und es auch offenbar entsprochen hat. Würde es gern sehen.
Beste Grüße

Portrait von Thomas_
  • 22.08.2012 - 07:21

Werde ich bei Gelegenheit lesen.
Danke für Deine Mühe

Portrait von ragpicker
  • 20.08.2012 - 00:10

Danke für das ausführliche Tutorial

Portrait von Phieno
  • 19.08.2012 - 18:17

Danke für das ausführliche Tutorial, werde ich sicherlich ausprobieren! Und dann einen Erfahrungsbericht abgeben^^

Portrait von Chiisea
  • 20.08.2012 - 08:30

Darauf freu ich mich!

Portrait von Zenist
  • 19.08.2012 - 18:04

Gut erklärt, das macht Mut und Lust es nachzubauen.
Danke

Portrait von Chiisea
  • 19.08.2012 - 18:08

freut mich zu hören! Danke sehr

Portrait von johanna52
  • 19.08.2012 - 17:57

danke für das sehr ausführliche und sehr gut erklärte Tut - werde das ganze mal mit anderen Bildern und Thema umsetzten

Portrait von Chiisea
  • 19.08.2012 - 18:06

Hallo alle zusammen!

Es freut mich sehr, dass das Tutorial so gut anzukommen scheint :)

Das mit den Ponys ist klarer weise nur meine Umsetzung gewesen, die ja nicht zwingend notwendig ist. Bei Fragen jederzeit und gerne per PM!

Beste Grüße, Chiisea

Portrait von gabphoto
  • 19.08.2012 - 17:45

Das werde ich demnächst ausprobieren. Hoffe, daß es bei mir klappt. Danke schon mal im voraus.

Portrait von manja23
  • 19.08.2012 - 17:28

Vielen Dank! Noch nicht ausprobiert, nur kurz überflogen, aber ich freue mich sehr, dass es aus der Flash-Ecke mal wieder ein (durchaus umfangreiches) Tutorial gibt! :)

Portrait von Sansieju
  • 19.08.2012 - 17:19

Heyho!
Auch von mir einen herzlichen Dank fürs Uppen.
Auch ich bin absoluter Flash-Anfänger, aber scheue mich nicht davor neues (auch anspruchsvolles) auszuprobieren. :)

Portrait von ACWebmaster
  • 19.08.2012 - 17:18

Danke für das Tutorial. Nettes Spiel. :)

Portrait von ACWebmaster
  • 20.08.2012 - 12:12

Die Zuckerstangen sind übrigens garnicht so leicht zu erwischen. ;)

Portrait von Chiisea
  • 20.08.2012 - 12:28

hihi - ja, ist nicht so einfach

Portrait von MaoMao
  • 19.08.2012 - 17:11

Vielen Dank für das Tutorial.

Ich bin Anfänger im Flash, wollte es aber schon lange mal ausprobieren. Werde mich aber daran Versuchen. Mal schauen ob ich es so wie Beschrieben hinkriege.

Portrait von Fussballpapst
  • 19.08.2012 - 17:06

vielen Dank, werde den Shooter mal testen

x
×
×