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

Diese Seite in deutscher Sprache auf www.OnlineSpiele.de

More Games | Download Page DotValley | WebValley | Game Instructions | Impressum


The Making of WebValley

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


The Creators

Daniel Schwinn
"Düsi"

Programing of the Java version

Tobias Schwinn
"Tobi"

Creation of graphics

Thilo Schwinn

Level design and
programing of the original version

 

History

1987 As a study for a Boulderdash-like game, the original version of WebValley was created on the computer ENTERPRISE 128. Because of specialties of the Enterprise computer it was possible to move a big amount of objects fast, which makes effects like the dropping of various dozens of boulders at the same time possible - even with an 8-Bit CPU at 4 MHz. Trying this out was one of the objective targets of the study. Some characteristic levels in which numerous boulders and diamonds can fall into lower-located mines were created for the concept of "Dot Valley".
1993 The program was completed under the name DOT VALLEY in the programing language Pascal on the PC for MS-DOS by Thilo Schwinn. Hereby new gaming elements were introduced and the 16 color mode graphic art was created by Tobias Schwinn. The technical program parts (graphic and keyboard drivers as well as runtime modules) were programed by Daniel Schwinn.
2000 The conversion into Java by Daniel Schwinn could be done almost routine-like after the experiences that had been gained with WebTrouble. For the Java version the graphics were slightly overworked and were improved in both color mode and resolution.

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.

Boulders and Earth

The biggest part of the level is composed out of the following simple graphic objects. For the earth four different symbols are available to pattern bigger areas more diversified. All game elements have the size 32x32 pixel.


g71.gif .. g74.gif

f6.gif

f8.gif

f16.gif

The Playing Figure (Miner)

For every direction and way of movement of the miner own graphics are needed. Some of them can represantatively be seen here. For each of these graphics more graphics for the appropriate movement phases of the corresponding action exist.


g91.gif

g101.gif

g111.gif

g121.gif

g131.gif

g141.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 numbers in the counter are constructed out of single graphics of which the first five can be seen here.


n1.gif

n2.gif

n3.gif

n4.gif

n5.gif

The Programing

The programing of WebValley in Java was carried out by Daniel Schwinn who had already programed parts of the version for MS-DOS in Pascal.

During the programing of WebValley - as noticed before with WebTrouble - it was not possible to go through a 1:1 transfer of the original Pascal program into Java. Some things had to be realized relatively long winded in Java here as well. The Pascal version contained a jumptable with the moving routines for the graphic objects by which the correct animation routine could be activated extremely fast and directly. In Java this was realized through an extensive switch command.

Another problem emerged from the fact that Java programs with animation are still slower on high-end systems than MS-DOS programs on an old-fashioned 286 machine (in 1999). Performance optimizations like subroutines in inline assemblers or linear access of multidimensional arrays, for example, couldn't be applied correspondingly.

The historical development of one of the program routines is shown in the following. The shown subroutine displays the data (level, score, ...) at the bottom of the gaming area. Each definition of the involved variables and the corresponding routine part is shown. Top secret!

ENTERPRISE Version in Z80 Assembler

This version has been created with the legendary assembler DEVPAC by Hisoft. The programing in a high level language wasn't possible due to speed reasons - the program would have been too slow.
In the routine printsco, direct addresses are calculated in physical video RAM in the register ix. The value to be printed is transferred in the register hl.
After the term zahl_01, for example, graphic data for the cipher "1" is located. Like all other used graphic symbols these are included directly in the program listing as so-called definded bytes in the Enterprise version.

graph     equ #7000 ;Segment ff

score     defw 0
time      defw 0
level     defb 0

...
...

zahl_01   defb #00,#00,#00,#00,#01,#0F,#0F,#08
          defb #02,#0F,#0F,#40,#03,#00,#00,#C0
          defb #03,#00,#00,#C0,#03,#00,#00,#C0
          defb #03,#00,#00,#C0,#03,#00,#00,#C0
          defb #03,#00,#00,#C0,#02,#0F,#0F,#40
          defb #01,#0F,#0F,#08,#02,#0F,#0F,#40
          defb #03,#00,#00,#C0,#03,#00,#00,#C0
          defb #03,#00,#00,#C0,#03,#00,#00,#C0
          defb #03,#00,#00,#C0,#03,#00,#00,#C0
          defb #02,#0F,#0F,#40,#01,#0F,#0F,#08

...
...

printsco  ld hl,(score)
          ld ix,graph+(18*80)+4
          call prnum5
          ld hl,(time)
          ld ix,graph+(18*80)+28
          call prnum4
          ld hl,(level)
          ld h,0
          ld ix,graph+(18*80)+52
          call prnum2
          ret

PC Version in Turbo Pascal

The version in Turbo Pascal is considerably easier to overlook even though there's already a bigger part of the program shown here. Through the variable screen a memory area is accessed, that, structurally, directly pictures the video RAM. The subroutine printstr takes care of the output of a complete number that is passed on as text. The position is passed on with coordinates: In y-direction in lines and in x-direction in multiples of 8 pixels. Here, the program works in numerical values that represent direct addresses in the monitor memory as well.
The function formatnat is used to format numbers as a string before these are displayed.
However, the graphic data for the ciphers aren't defined in the program listing anymore but are loaded in direct byte format as a binary file for the used graphic mode. Of course this is dependent on a specific graphic mode on a specific hardware, in this case VGA or EGA graphic card.

type
  ega_scr=array[0..3,0..199,0..39] of byte;
  ega_handle=^ega_scr;

var
  screen:ega_handle;
  score:longint;
  level:integer;
  tntflag,bombeflag:integer;

...
...

procedure printstr(x,y:integer;s:string);
var
  n:integer;
begin
  for n:=1 to length(s) do begin
    put(screen,x,y,zahlen[ord(s[n])-48]);
    inc(x,2);
  end;
end;

procedure printscore;
begin
  printstr(4,172,formatnat(score,5));
  printstr(19,172,formatnat(prozent,2));
  printstr(27,172,formatnat(tntflag,2));
  printstr(35,172,formatnat(bombeflag,2));
end;

JAVA Version

In the Java version the screen is accessed through the graphic handle BufGr. Here, the program works almost identically as in the Pascal version. Different to both other versions it works with coordinates within the applet. The actual address in video RAM is completely unknown here, the program doesn't even know the exact format of the graphic files or the video RAM. The ciphers have been loaded as single gif images and are drawn with drawImage.
Like this the program can be built identically for different graphic cards and operating systems even though the actual structure of the video RAM is different on different systems.

int prozent;
int score;
int TntAnzahl,BombeAnzahl;
Image[] zahlen = new Image[10];
Graphics BufGr;

...
...

void printstr(int x, int y, String s){
  int nr;
  for (int n=0;n<s.length();n++){
    nr=s.charAt(n)-48;
    BufGr.drawImage(zahlen[nr],x,y,this);
    x+=32;
  }
}

void printscore(){
  printstr(64,344,formatnat(score,5));
  printstr(304,344,formatnat(prozent,2));
  printstr(432,344,formatnat(TntAnzahl,2));
  printstr(560,344,formatnat(BombeAnzahl,2));
}

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