www.InternetGames.de, Düsi's Internet Playground - Making of WebTrouble

Diese Seite in deutscher Sprache auf www.OnlineSpiele.de

More Games | Download Page DotTrouble | WebTrouble | WebTrouble Heidi Edition | Impressum

The Making of WebTrouble

Here you can, first-hand, learn of all secret ingredients for such a game! :-)

The Creators

	Daniel Schwinn "Düsi" Programing and concept
	Tobias Schwinn "Tobi" Creation of graphics

History

The Graphic Art

The graphics in the game have been designed by Tobias Schwinn. For this our own graphic program "VGAMAL" came into use with which the graphics for numerous games out of the house düsi computer software have been designed already. All graphic components have been converted into gif graphics for the online version.

The whole game is composed out of simple graphic objects of which some are introduced now.

Textures for the Background

First, the textures in the grid areas are the first important components of the game's graphic art. Every of these elements exists in two forms: The basic design and the exposed design when the area has been surrounded.

fill1-0.gif fill1-1.gif

fill16-0.gif fill16-1.gif

fill21-0.gif fill21-1.gif

Graphics for the Streets

The next main component are the graphic elements for the streets on which the figures are walking. These exist in two forms as well: The basic design and the design in cleared condition.

weg1-0.gif weg1-1.gif

weg4-0.gif weg4-1.gif

Graphics for the Figures

For every figure in the game graphics are needed for the different movement phases. An example for all moving phases can be seen beneath. Here is phase 1 (main state) of every figure.

man-1.gif

mon1-1.gif

mon2-1.gif

mon3-1.gif

mon4-1.gif

Graphics for the Levels

The border of the levels and the message windows are graphics as well, here is the status bar on the lower screen as an example.

panele.gif

The Animation

All figures of WebTrouble are moved in an elaborate 12 phase animation. Hereby a flowing motion sequence that is characteristic for this game is created.

As an example, the 12 phases of the one-eyed monster can be seen here. The movement of the pupil in the eye can be followed well from image to image here.

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

The Programming

The programming of WebTrouble in Java was carried out by Daniel Schwinn who had already programmed the version for MS-DOS in Pascal.

During the programming it was clear fast that the 1:1 transfer of the original Pascal program into Java was not possible because Java (Version 1.0) lacks some of the possibilities of Pascal. Because of this some things had to be programed relatively long winded.

Another problem resulted from the fact that Java programs with animation were very slow, even on high-end systems (in 1997). The speed was even slower than an old-fashioned 286 MS-DOS machine. Because of this the shadows under the figures, for example, had to be removed to achieve a reasonable game speed.

In the following some characteristic program sections are introduced that originate directly from the program listing of WebTrouble. Top secret!

Definition of the Levels

Here you can see the definition of the first both levels. For every field the number of the texture or a 0 for a gap in the level are in the table. As you can see the data of the levels is stored especially space-saving as an integer array. Only like this it was possible to incorporate 32 levels in the online version without needing too much memory.

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 },},
...
...

The Initialization at the Game Start

These program parts are especially easy to understand and contain important settings for the game initialization.
At the beginning of a new game firstInit() is called. For example, the 3 lives are allocated here by the command leben = 3 ("leben" is the German word for "life") and the first level is set with level = 1.
The subroutine gameInit() is called before the start of every level. The available time is set with time = 1000 here and after that one or two monsters and the playing figure are put into the level. The line if (level<9) decides that two monsters are used from level 9 and on.

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;
}

The "Eye" of the Monster

The subroutine player_sichtbar() ("sichtbar" is the German word for "visible") checks whether the player can be seen from the specified position. The player is visible to a monster if a direct gaze at the player is possible along a row of dots.
In general this is only possible if the x- or y-position in the coordinate system match. This is first checked with if (player_xp==xpos) and if (player_yp==ypos) respectively. It is then checked for every direction if there is a continuous direct street from the monster to the player. If this is found, then by the return command the number code (1..4) for each direction is passed on to the navigation program of the monster.

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;
    }
  }
}

To keep the loading times short the program has been arranged with preferably few class files. All in all WebTrouble needs 130KB of space on the server, about 100KB of this for the graphic files.

Now we've revealed enough of our little secrets... You shouldn't tell your competitors everything. :-)

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