![]()  | 
      ![]()  | 
    
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  | 
        ![]()  | 
    
![]()  | 
        Tobias
        Schwinn  | 
        ![]()  | 
    
![]()  | 
        Thilo
        Schwinn  | 
        
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