www.OnlineSpiele.de, Düsi's Internet-Spielhalle - Making of  WebTrouble 

English version on www.InternetGames.de

Weitere Spiele | Downloadseite DotTrouble | WebTrouble | WebTrouble Heidi-Edition | Impressum


The Making of WebTrouble

Hier erfahrt Ihr aus erster Hand alle geheimen Zutaten zu solch einem Spiel! :-)


Die Macher

Daniel Schwinn
"Düsi"

Programmierung und Konzeption

Tobias Schwinn
"Tobi"

Erstellung der Grafiken


Die Entstehungsgeschichte

1987 Die erste Version von WebTrouble erblickt das Licht der Welt: Unter dem Namen GRID TROUBLE wurde das Spiel von Jürgen Letzel in Assemblersprache für den Computer ENTERPRISE 128 programmiert. Diese Urversion enthält nur eine Art von Monstern und die Grafik ist lediglich 8-farbig.
1993 Das Programm wurde unter dem Namen DOT TROUBLE von Daniel Schwinn in der Programmiersprache Pascal auf den PC übertragen. Hierbei wurden weitere Monster eingeführt und die neue farbenprächtige Grafik von Tobias Schwinn erstellt.
1997 Ein erster Versuch DOT TROUBLE in Java zu programmieren scheitert an Kompatibilitätsproblemen zwischen den verschiedenen Internet-Browsern. Abstürze und Fehlfunktionen ändern sich mit der 2. Nachkommastelle der Browserversion und eine Veröffentlichung des Programmes war nicht zu vertreten.
1999 Ein erneuter Test (mit den Sources von 1997) führt mit den wichtigen aktuellen Browsern zu brauchbaren Ergebnissen. Nach Änderung einiger Kleinigkeiten wird das Programm unter dem Namen WebTrouble auf die WwwSpiele Homepage geladen.

Die Grafik

Die Grafiken im Spiel wurden von Tobias Schwinn entworfen. Hierzu kam unser eigenes Grafikprogramm "VGAMAL" zum Einsatz, mit dem schon die Grafiken für zahlreiche Spiele aus dem Hause düsi computer software entworfen wurden. Alle grafischen Bestandteile des Spieles wurden für die Online-Version in GIF-Grafiken umgewandelt.

Das ganze Spiel wird aus einfachen Grafikelementen zusammengesetzt, von denen jetzt einige vorgestellt werden.

Füllmuster für das Spielfeld

Als wichtige Bestandteile der Spielgrafik sind zunächst die Füllmuster in den zu umrahmenden Feldern zu nennen. Jedes dieser Elemente existiert in 2 Formen: Die Grunddarstellung und die aufgedeckte Darstellung wenn das Feld eingerahmt wurde.


fill1-0.gif

fill1-1.gif

fill16-0.gif

fill16-1.gif

fill21-0.gif

fill21-1.gif

Grafiken für die Wege

Der nächste Hauptbestandteil sind die Grafikelemente für die Wege, auf denen die Spielfiguren laufen. Auch diese existieren jeweils in 2 Formen: Die Grunddarstellung und die Darstellung im abgeräumten Zustand.


weg1-0.gif

weg1-1.gif

weg4-0.gif

weg4-1.gif

Grafiken für die Spielfiguren

Für jede Figur im Spiel werden Grafiken für die verschiedenen Bewegungsphasen benötigt. Ein Beispiel für alle Bewegungsphasen befindet sich weiter unten. Hier ist die Phase 1 (Grundzustand) jeder Figur zu sehen.


man-1.gif

mon1-1.gif

mon2-1.gif

mon3-1.gif

mon4-1.gif

Grafik für das Spielfeld

Der Rand des Spielfeldes und die Meldungsfenster sind ebenfalls Grafiken, als Beispiel zeigen wir hier die Statusleiste vom unteren Bildschirmrand.


panele.gif

Die Animation

Alle Figuren von WebTrouble werden in einer aufwendigen 12-Phasen-Animation bewegt. Hierdurch entsteht ein flüssiger Bewegungsablauf, der für dieses Spiel charakteristisch ist.

Als Beispiel seht Ihr hier die 12 Phasen des einäugigen Monsters. Die Bewegung der Pupille im Auge kann hier sehr gut von Bild zu Bild nachvollzogen werden!

Java-Animation

Phase 1

Phase 2

Phase 3

Phase 4

Phase 5

Phase 6

Phase 7

Phase 8

Phase 9

Phase 10

Phase 11

Phase 12

Die Programmierung

Die Programmierung von WebTrouble in Java erfolgte durch Daniel Schwinn, der schon die Version für MS-DOS in Pascal programmiert hatte.

Bei der Programmierung stellte sich schnell heraus, daß eine 1:1-Umsetzung des ursprünglichen Pascal-Programmes in Java nicht möglich war, da in Java einige Möglichkeiten von Pascal fehlen bzw. diese Dinge extrem umständlich realisiert werden müssen.

Ein weiteres Problem ergab sich daraus, daß Java-Programme mit Animation trotz Pentium sonstnochwas und Beschleunigergrafikkarte von der Geschwindigkeit her langsamer sind als MS-DOS-Programme auf einem 286'er. So musste zum Beispiel der Schatten unter den Figuren eingespart werden damit eine vernünftige Ablaufgeschwindigkeit erreicht wird.

Im Folgenden werden ein paar charakteristische Programmabschnitte vorgestellt, die direkt aus dem Programmlisting von WebTrouble stammen. Streng geheim!

Definition der Levels

Hier ist die Definition der ersten beiden Levels zu sehen. Für jedes Feld ist hier die Nummer des Füllmusters vermerkt oder 0 für eine Lücke im Spielfeld. Wie man sieht, sind die Daten der Levels besonders platzsparend als Integer-Datenfelder abgelegt. Nur so war es möglich, auch in der Online-Version 32 Levels einzubauen.

int[][][] levels = {

  {{11,11,11,11,11,11,11},
  {11,14,12,13,12,14,11},
  {11,14,11,15,11,14,11},
  {11,14,11,15,11,14,11},
  {11,14,12,13,12,14,11},
  {11,11,11,11,11,11,11},},

  {{1 ,1 ,1 ,1 ,1 ,1 ,1 },
  {1 ,3 ,3 ,3 ,3 ,3 ,1 },
  {1 ,0 ,0 ,3 ,0 ,0 ,1 },
  {1 ,0 ,0 ,3 ,0 ,0 ,1 },
  {1 ,2 ,2 ,2 ,2 ,2 ,1 },
  {1 ,1 ,1 ,1 ,1 ,1 ,1 },},
...
...

Die Initialisierung bei Spielstart

Diese Programmstückchen sind besonders leicht zu verstehen und enthalten wichtige Festlegungen für den Spielablauf.
Zum Beginn eines neuen Spieles wird firstInit() aufgerufen - hier werden dann z.B. die 3 Leben zugewiesen durch den Befehl leben = 3 und der erste Level mit level = 1 eingestellt.
Das Unterprogramm gameInit() wird vor dem Start jedes Levels aufgerufen. Hier wird die verfügbare Zeit mit time = 1000 eingestellt und danach werden ein oder zwei Monster sowie der Spieler in das Spielfeld eingesetzt. Durch die Verzweigung if (level<9) wird erreicht, daß ab Level 9 zwei Monster eingesetzt werden.

void firstInit(){
  phase = 1;
  leben = 3;
  playTime = 0;
  level = 1;
  leveltime = 0;
  score = 0;
  score_vergleich = 0;
  monster_counter = 0;
  wait_3=0;
}

void gameInit(){
  time=1000;
  tot=0;
  if (level<9){
    monsters_xp[1]=37;
    monsters_yp[1]=1;
    monsters_ri[1]=1;
    monsters_typ[1]=next_monster();
    monsters_voll=1;
  }else{
    monsters_xp[1]=37;
    monsters_yp[1]=1;
    monsters_ri[1]=1;
    monsters_typ[1]=next_monster();
    monsters_xp[2]=2;
    monsters_yp[2]=19;
    monsters_ri[2]=2;
    monsters_typ[2]=next_monster();
    monsters_voll=2;
  }
  player_xp=2;
  player_yp=1;
  player_ri=4;
}

Das "Auge" der Monster

Das Unterprogramm player_sichtbar() überprüft, ob von einer angegebenen Position aus der Spieler gesehen werden kann. Der Spieler ist für ein Monster sichtbar, wenn ein direkter Blick entlang eines Weges zum Spieler möglich ist.
Generell ist dies nur möglich, wenn die x- oder y-Position im Koordinatensystem übereinstimmt. Dies wird zunächst mit if (player_xp==xpos) bzw. if (player_yp==ypos) überprüft. Danach wird jeweils in Richtung des Spielers entlang der einzelnen Wegsteinchen "gelotet" ob die Position erreicht werden kann. Ist dies möglich, so wird mit dem return-Befehl der Zahlencode (1..4) für die jeweilige Richtung an das Steuerprogramm des Monsters weitergegeben.

int player_sichtbar(int xpos,int ypos){
  if (player_xp==xpos){
    if (player_yp>ypos){
      for (int n=ypos;n<=player_yp;n++){
        if (virt_screen[n][xpos]>=32) {return 0;};
      }
      return 4;
    }else{
      for (int n=player_yp;n<=ypos;n++){
        if (virt_screen[n][xpos]>=32) {return 0;};
      }
      return 2;
    }
  }else{
    if (player_yp==ypos){
      if (player_xp>xpos){
        for (int n=xpos;n<=player_xp;n++){
          if (virt_screen[ypos][n]>=32) {return 0;};
        }
        return 3;
      }else{
        for (int n=player_xp;n<=xpos;n++){
          if (virt_screen[ypos][n]>=32) {return 0;};
        }
        return 1;
      }
    }else{
      return 0;
    }
  }
}

Um die Ladezeiten kurz zu halten wurde das Programm auf möglichst wenige Klassendateien verteilt. Insgesamt benötigt WebTrouble auf dem Server ca. 130 KB Platz, davon etwa 100 KB für die Grafikdaten.


So, jetzt haben wir genug aus dem Nähkästchen geplaudert ... man muss der Konkurenz ja nicht alles im Internet präsentieren. :-)


(c) 1999 by düsi computer software, Daniel Schwinn, Römerturmstrasse 25, D-73547 Lorch