Blog

Servus und hallo alle miteinander, heute möchte ich mal für alle werdenden Softwareentwickler eine Tutorialreihe beginnen, mit der ihr ein einfaches Flashgame bauen könnt, welches im Stil von dem alten Spieleklassiker R-Type angelehnt ist. Ich werde das Tutorial in mehrere Parts aufsplitten und dies immer die kommenden Wochen ergänzen.

Für diese Tutorialreihe setze ich Grundkenntnisse in Flash und Actionscript voraus. Ursprünglich habe ich das Spiel selbst in meiner Ausbildungszeit zum Softwareentwickler Medieninformatik entwickelt und habe es nun wieder ausgekramt. Fangen wir erstmal ganz einfach an mit einer leeren Szene, die eine Initialklasse "Main.as" bekommt. Was benötigen wir noch? Ich denke ein Raumschiff für den Anfang, einen Laser und natürlich einen Asteroiden als Klasse, mit denen wir arbeiten können. Wer es unbedingt möchte, kann natürlich auch noch einen schönen Sternenhintergrund mit machen, der automatisch scrollt. Hierfür werde ich am Ende der Reihe nochmal ein Tutorial erstellen, wie dies funktioniert. Heute aber werden wir erstmal nur das Schiff auf die Bühne platzieren und ihm schießen beibringen.

Die Bühne bekommt eine Größe von 800 x 500 Pixeln mit einem Schwarzen Hintergrund. Fangen wir also erstmal an mit dem Grundgerüst in der Main Klasse. Hier benötigen wir erstmal grundsätzlich 3 Variabeln, die da wären:

• Das Raumschiff
• Die Laser
• Die Asteroiden

Diese sollten in der gesamten Stage verfügbar sein und deshalb direkt am Anfang der Klasse als Public vars deklariert werden. Bei mir sieht das wie folgt aus:

public var theShip:TheShip;
public var gameOverlay:GameOverlay = new GameOverlay();
public var laserArray:Array = new Array();
public var asteroidArray:Array = new Array();

Hier werden später natürlich noch einige hinzu kommen, aber erstmal reicht das absolut aus. Was muss nun also im Konstruktor gemacht werden? Natürlich, wir müssen das Schiff erstellen, auf die Stage setzen und es auf die Mouse legen, damit wir es mit der Mouse steuern können. Also Objecte erstellen:

theShip = new TheShip(this);
stage.addChild(theShip);
Mouse.hide();
stage.addEventListener(MouseEvent.MOUSE_MOVE,moved);
stage.addEventListener(MouseEvent.CLICK,fireLaser);

Wie man sieht, habe ich auch direkt schon 3 Eventlistener erstellt, die für später wichtig sein werden. In der MOUSE_MOVE Funktion steht folgendes drin, damit die Mouse im Bild nicht überall hingeschoben werden kann aber dennoch die ganze Zeit der Mouse folgt.

function moved(e:Event=null):void {
  if (stage.mouseX > 45 && stage.mouseX < 300) {
    theShip.x = stage.mouseX;
  }
  if (stage.mouseY > 75 && stage.mouseY < 425) {
    theShip.y = stage.mouseY;
  }
}

Und in der MOUSE_CLICK Funktion ist die Logik für das spawnen der Laser vorhanden.

function fireLaser(event:Event):void {
  var laserBlaster:Laser = new Laser(this);
  laserArray.push(laserBlaster);
  addChild(laserBlaster);
}

Wenn dies in der Main.as steht, sind wir auch schon hier quasi fertig. Jetzt müssen wir uns 2 Objekte in der Bibliothek erstellen. Einmal das Raumschiff, wofür ihr ein X-Beliebiges Bild eines Raumschiffes nehmen könnt und einen Laser. Diesen habe ich einfach als ganz kleines Oval gemacht. Wichtig ist, dass das Schiff den Namen TheShip bekommt und für den Export für Actionscript angeklickt ist. Als Klasse geben wir ebenfalls TheShip an. Beim Laser machen wir dies ebenso, nur dass hier der Name bei beidem logischer weise Laser ist. Wenn dies gemacht wurde, gehen wir in die Klasse TheShip, die MovieClip abstrahiert. Wir brauchen am Anfang nun erstmal nur die Referenz zur Stage und ich habe einen kleinen Tween noch gemacht, damit das Schiff am Anfang in die Szene fliegt.

Dies sieht wie folgt aus:

public class TheShip extends MovieClip {
  private var mainClip:MovieClip;
  var shipEntrance:Tween;

  public function TheShip(mainClip:MovieClip) {
    this.mainClip = mainClip;
    shipEntrance = new Tween(this,"x",Elastic.easeOut,-150,100,5,true);
    this.y = 250;
  }
}

Das war's auch schon hierfür und wir gucken uns als letztes noch eben die Laserklasse an:

public class Laser extends MovieClip{
  private var mainClip:MovieClip;
  var laserShooting:Tween;

  public function Laser(mainClip:MovieClip) {    
    this.mainClip = mainClip;
    laserShooting = new Tween(this,"x",None.easeIn,mainClip.theShip.x,mainClip.theShip.x+1000,1,true);            
    this.addEventListener( Event.ENTER_FRAME, laserDispose );
}

  function laserHit() {
    var z:int =0;
    for (var i:int=0; i<mainClip.laserArray.length;i++) {
      if(mainClip.laserArray[i] == this){
        z = i;
        break;
      }
    }
    this.removeEventListener( Event.ENTER_FRAME, laserDispose );
    this.parent.removeChild(this);
    mainClip.laserArray[z] = null;
    mainClip.laserArray.splice(z,1);
  }

  function laserDispose( evt:Event ) {
    laserShooting.resume();
    if (this.x > 899) {
      this.laserHit();
    }
  }
}

Dies sollte nun alles soweit fertig sein. Die Logik dahinter ist wie folgt. Sobald ein Laser auftaucht, durch ein MOUSE_CLICK Event, wird dieser Anfangs in ein Array geschrieben in der Main.as. Im Konstruktor wird der Laser genau in der Mitte des Schiffes gespawned und wird mittels einem Tween gestartet. Wenn der Laser am Ende des Bildes angelangt ist, wird dieser mit der Funktion laserhit entfernt und auch aus dem Array in der Main gelöscht, damit es nicht zu doppelten Lasern oder Nullpointer exceptions kommt.

Wenn ihr dies alles richtig gemacht habt, sollte euer Raumschiff nun eurer Mouse folgen und beim Klicken schießen.

Hierfür reicht das heute erstmal, in den nächsten Wochen kommt dann immer wieder ein neuer Part. Als nächstes werden wir die Asteroiden dazu machen und die erste Kollisionserkennung verbauen. Eine Schöne Restwoche euch allen noch und vorab schonmal frohe Pfingsten, euer Mark!