Previous : Index Up : Index Next : Utilisation

Introduction

This part aims to describe how the library works.

The library is useful for games needing a large background, larger than the 92+/V200 screen, in which the screen can be scrolled by down to one pixel at a time.

In this algorithm, the sprite plane (map / level) is a two-dimensional array of char or short; an element of that map is the index of a sprite in an array of 16x16 or 8x8 sprites.
This method has a clear advantage: a sprite can be used multiple times in the map, but the sprite data is defined only once (32 bytes for a 16x16 sprite, 8 bytes for a 8x8 sprite), and a sprite is referenced through its index (1 or 2 bytes depending on the type of the elements in the sprite plane). If the map was not used, then each tile in the map would be 8 or 32 bytes, and the map could become redundant. This way, a lot of space is saved.
Then, drawing the plane on the screen is performed in two steps:
Using an intermediate plane can be seen as unnecessary sometimes, but this method has many advantages. The virtual screen is refreshed only when necessary, when using animated tiles (usually 3 or 4 times per second, i.e. one image out of 5 or 6 for a game running at 20 fps) or when the bounds of the virtual screen are exceeded (which does not happen much more than once or twice per second).
Also, the function drawing the big virtual screen to the real screen can be highly optimized, instead of having to support any size. It is called every cycle and is very fast.

Here is a diagram to help you understand the algorithm:
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
|00|00|00|00|00|00|00|00|01|01|01|00|00|00|00|00|00|00|00|00|
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
|00|00|00|00|00|00|01|01|01|01|01|01|00|00|00|00|00|00|00|00|
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
|00|00|00|00|00|01|01|01|01|01|01|01|01|01|01|00|00|00|00|00|
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
|00|00|00|00|00|01|01|01|01|00|00|01|01|01|01|01|00|00|00|00|
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
|00|00|00|00|01|01|01|01|00|00|00|01|01|01|01|00|00|00|00|00|
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
|00|00|00|00|01|01|01|01|01|01|00|01|01|01|00|00|00|00|00|00|
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
|00|00|00|00|00|01|01|01|01|01|01|01|01|01|01|01|00|00|00|00|
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
|00|00|00|00|00|00|00|00|01|01|01|01|01|01|01|01|01|01|00|00|
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
|00|00|00|00|00|00|00|00|01|01|01|01|01|01|01|01|01|01|01|00|
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
|00|00|00|00|00|00|00|00|00|01|01|01|01|01|01|01|01|00|00|00|
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
|00|00|00|00|00|00|00|00|00|00|00|01|01|01|01|00|00|00|00|00|
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
|00|00|00|00|00|00|00|00|00|00|00|00|01|00|00|00|00|00|00|00|
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
The area we want to draw on the screen is drawn here with red color. In this example, only two different sprites are used, and sprite 1 is in bold so that the shape can be seen more easily. This map could be used in a RPG, to represent an island containing a lake (sprite 0 being water and sprite 1 being land).
Each square represents a 16x16 sprite.
The red area is 272x160 pixels, this means only a part of this area will be drawn on the real screen.

The red area is copied to the big virtual screen, with sprites being drawn from the map indices.
Here is the result on the big virtual screen (not drawn):
              272
     <----------------->
   ^ +-----------------+
   | |    ######       |
   | |   ##########    |
   | |   ####  #####   |
   | |  ####   ####    |
160| |  ###### ###     |
   | |   ###########   |
   | |      ########## |
   | |      ###########|
   | |       ########  |
   | |         ####    |
   v +-----------------+
Sprite 0 is represented by ' ', sprite 1 is represented by '#'.
Now, the only task left is to draw the desired part of the virtual screen to the real screen.
My diagrams aren't precise enough to draw this last step, so I'll draw only a part of the real screen.
Let's say we want to draw the area starting at [35, 21], but the virtual screen contains the map area starting at [32, 0]. Therefore, we have to start fetching the data from the virtual screen at [3, 21].
The result on the real screen will look like:
            16
    <---------------->
  ^ +----------------+----------------+----------------+---------------
  | |             |  |           ^ |  |             |  |             | 
  | |             |  |           | |  |             |  |             | 
  | |             |  |         11| |  |             |  |             | 
16| |      13     |  |           | |  |             |  |             | 
  | |<----------->|  |           v |  |             |  |             | 
  | |-------------+--|-------------+--|-------------+--|-------------+-
  | |             |  |             |  |             |  |             | 
  | |             |  |             |  |             |  |             | 
  v +----------------+----------------+----------------+---------------
    |             |  |             |  |             |  |             | 
    |             |  |             |  |             |  |             | 
    |             |  |             |  |             |  |             | 
    |             |  |             |  |             |  |             | 
    |             |  |             |  |             |  |             | 
    |-------------+--|-------------+--|-------------+--|-------------+-
    |             |  |             |  |             |  |             | 
    |             |  |             |  |             |  |             | 
    +----------------+----------------+----------------+---------------
    |             |  |             |  |             |  |             | 
    |             |  |             |  |             |  |             | 
    |             |  |             |  |             |  |             | 
    |             |  |             |  |             |  |             | 
    |             |  |             |  |             |  |             | 
    |-------------+--|-------------+--|-------------+--|-------------+-
    |             |  |             |  |             |  |             | 
The real screen and the big virtual screen are only shown as 16x16 tile boundaries. The real screen is drawn with black, and the big virtual screen is drawn with light gray.


Previous : Index Up : Index Next : Utilisation