Lieber Gast …

… die Inhalte von PSD-Tutorials.de stehen nur registrierten Mitgliedern zur Verfügung. Damit wollen wir den Communitygedanken weiterführen. Als Mitglied trägst du - wenn auch nur im Kleinen - zum Puls der Community bei. Und nur so ist es möglich, weiterhin hochwertige Inhalte für alle bereitzustellen.

Jetzt kostenlos registrieren!

Vorteile der kostenlosen Mitgliedschaft

Mit der kostenlosen und schnell erledigten Registrierung erhältst du viele nachhaltige Vorteile, die wir dir hier in aller Kürze aufzeigen möchten:

  • PSD steht für professionelles Know-how in den Bereichen Bildbearbeitung mit Photoshop, Fotografie, Webentwicklung, Layout- und Vektorbearbeitung, 3D-Bearbeitung mit Cinema 4D und Co.
  • Über 3.000 Tutorials mit druckbarer PDF-Datei und teilweise den zugehörigen Arbeitsmaterialien
  • Mehr als 1.900 Video-Trainings als Stream zur Direktanzeige und zum Download
  • Abruf von über 2.200 Downloads zu Photoshop-Presets, 3D-Modellen, Grußkarten, Texturen & Co
  • Zugriff auf ein sehr aktives Forum mit Antworten im Minutentakt
  • Deine Daten sind sicher. Sie werden nicht weitergegeben! Die Mitgliedschaft kann jederzeit und ohne Aufwand wieder gelöscht werden.
  • Registriere dich bei uns und du erhältst die Selection-DVD mit über 24 Stunden Video-Trainings zu Photoshop, InDesign uvm. als Download gratis (sofern Newsletter aktiviert). 

Reinschnuppern als Gast

Niemand kauft gerne die Katze im Sack, auch wenn sie kostenlos ist. Wir haben eine Handvoll Tutorials und Video-Trainings ausgesucht, die du auch als Gast ohne Registrierung ansehen kannst. Gefallen sie dir, stehen dir nach der Registrierung alle oben genannten Inhalte zur Verfügung.

Jetzt kostenlos registrieren!

Kommentare

  • Portrait von Susan99

    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

    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... :-)

    • Alternative Portrait von Chiisea

      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_

    Thomas_

    22.08.2012 - 07:21

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

  • Alternative Portrait von ragpicker

    ragpicker

    20.08.2012 - 00:10

    Danke für das ausführliche Tutorial

  • Alternative Portrait von Phieno

    Phieno

    19.08.2012 - 18:17

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

    • Alternative Portrait von Chiisea

      Chiisea

      20.08.2012 - 08:30

      Darauf freu ich mich!

  • Alternative Portrait von Zenist

    Zenist

    19.08.2012 - 18:04

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

    • Alternative Portrait von Chiisea

      Chiisea

      19.08.2012 - 18:08

      freut mich zu hören! Danke sehr

  • Portrait von johanna52

    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

    • Alternative Portrait von Chiisea

      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

  • Alternative Portrait von gabphoto

    gabphoto

    19.08.2012 - 17:45

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

  • Alternative Portrait von manja23

    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

    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. :)

  • Alternative Portrait von ACWebmaster

    ACWebmaster

    19.08.2012 - 17:18

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

    • Alternative Portrait von ACWebmaster

      ACWebmaster

      20.08.2012 - 12:12

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

      • Alternative Portrait von Chiisea

        Chiisea

        20.08.2012 - 12:28

        hihi - ja, ist nicht so einfach

  • Portrait von MaoMao

    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

    Fussballpapst

    19.08.2012 - 17:06

    vielen Dank, werde den Shooter mal testen

Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.

Anleitung (Bilder + Extras werden nur für Mitglieder eingeblendet)


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.

Bilder


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).

Bilder


 

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)

Bilder


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.

Bilder


 

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.

Bilder


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.

Bilder


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.

Bilder


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.

Bilder


 

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.

Bilder


 
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.

Bilder


 
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.

Bilder


 
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!

Bilder


 
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.

Bilder


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!

Bilder

vBulletin 0.047 • ZF-App 0.63 • Total 0.678