Tiles Module (last update 13/04/04) by BRENT SILBY

Description:

This module is responsible for creating and manipulating tiles. Tiles are used to construct backgrounds or platforms. Very similar to tiles, but the are not able to check for collisions etc.

Like the sprite module, the tile module is optimised to use image clipping. This means that all the tiles are in the same image. For gamelib, "frames" are in the horizontal axis, and the vertical axis contains different tiles for other stages. For example, all the tiles needed for stage 1 are contained in the first horizontal strip. Then stage 2 tiles are in the next horizontal strip. This is exactly the same as how sprite frames and animations are stored (see the sprite module).

To use:

The code can be linked in to your script by adding this line to the <HEAD> section of your document:

<script language="Javascript" src="gamelib_tiles.js"></script>

A new tile is created via the following technique:

myTile=new Tl_Tile();

List of methods for tiles


destroy
moveTo
setStage
setFrame
setImage
setOpacity
setXlimits
setYlimits
setZ
swapImage
switchOn
switchOff

List of properties for tiles

stage
frame
height
image
on
opacity
width
value
x
xmin
xmax
y
ymin
ymax
z

List of Global properties for tile library

Tl_linuxcompatible
Tl_xoffset
Tl_yoffset
Tl_totaltiles

Descriptions of methods

Method Parameters Description
destroy (none) This will "destroy" the tile object. After calling this method, the tile will no longer respond to any methods. In actuality, the tile object still exists, and is reused the next time a new tile is generated. The reason the destroy method does not actually destroy the tile (IE, remove all the properties, methods and DOM objects from the document) is to work around the memory leak in IE6 (and possibly IE5), whereby the browser never actually frees up any memory allocated when a DOM object is generated, when that object is destroyed (unless the browser is minimized and maximized again for some bizarre reason!)
moveTo Numeric, Numeric This moves tile to position on screen. * Note: this is relative to the global offsets, unless the tile is static, and tile will only appear if it's property "on" is true or it's static
setXlimits Numeric, Numeric This limits the tile x movement. tile cannot move left further than the first argument, or right further than second argument minus its width. If property "bounces" is true then tile will bounce when it hits its limit
setYlimits Numeric, Numeric This limits the tile y movement. tile cannot move up further than the first argument, or down further than second argument minus its height. If property "bounces" is true then tile will bounce when it hits its limit
setImage String, Numeric, Numeric, Numeric, Numeric

* Note: DO NOT use this method for normal image .src changes if the new image will have the same dimensions, instead use the swapImage() method, which is MUCH faster for this!

sets the tile image. tile images can be in "canvas animation" format, this is a method of animating tiles that radically decreases download times, and incurs almost no CPU overhead. The image will consist of all the frames of animation for the tile. frames (see setFrame() below) are in x axis, and animations (set setAnimation(), setAnimationSpeed()) are in y axis for each frame.

The arguments to this method are passed in the following order:
img = the image src (eg "mypicture.gif") x = width of the frames (frames are the different shapes for the tile) y = height of the frames x2 = number of frames in image y2 = number of animations per frame

"frames" are in the X axis of a canvas image and "animations" are in the Y axis. (See example of tile animation for clarification on this)

swapImage String Swaps the tile's image to a new passed as the argument. You must use setImage() to set the tile's initial image. This method will not resize the image currently in use, and so should only be used to swap between images of the same size unless you don't mind the scaling. On the other hand though, it's very fast!
setFrame Numeric This sets the tile's frame. Each frame can have a number of animations. Using this resets the animation position for a tile to the first animation for the frame (animation position 0). You must set a frame for a tile before it will be displayed at all. If a tile only has one frame, and no animation, use setFrame(0)
setStage Numeric This sets the tile's stage. This method is useful because it enables you to choose a frame in the vertical axis. Suppose, for example, you are generating platforms from tiles. You could store all the platforms tiles for each level in the horizontal axis of the image. The vertical axis could be utilized to change the tiles for different stages. So, for stage 1 in a game, you could setStage(0), and then use setFrame to select tiles along the horizontal axis. Stage 2 tiles could be accessed be setStage(1).
setZ Numeric This sets the tile z-index. tiles with higher values move over those with lower ones
switchOn (none) This switches the tile on. When a tile is created, it is off by default, and so not visible
switchOff (none) This switches the tile off (default)
setOpacity Numeric Sets the opacity of the tile. Range is from 0 to 100, with 0 being invisible. It's probably not a good idea to use this too much in a game, as it affects performance when there are a lot of semi-transparent objects flying around (looks nice though!) This function has no effect with Netscape 4 (browser does not support transparency.)

Descriptions of properties

Property Data Type Read/Write Description
on Boolean R Use this to determine whether the tile is on/off. When off, it's not on screen.
x Numeric R tile's X position (see also Tl_xoffset)
y Numeric R tile's Y position (see also Tl_yoffset)
z Numeric R tile's z position. tiles with higher value will pass over tiles with lower, also if a tile collides with more than one other during a loop, the tile with the highest z index will be reported in the hit property.
xmin Numeric R The minumum allowed x position for tile. tile will either stop or bounce (see bounces) if it hits this limit.
ymin Numeric R The minimum allowed y position for tile. tile will either stop or bounce (see bounces) if it hits this limit.
xmax Numeric R The maximum allowed x position for tile. tile will either stop or bounce (see bounces) if it hits this limit.
ymax Numeric R The maximum allowed y position for tile. tile will either stop or bounce (see bounces) if it hits this limit.
width Numeric R The width of tile
height Numeric R The height of tile
frame Numeric R The current frame being used by an animated tile. Use setFrame() to change.
stage Numeric R The current vertical position for a frame. Use setStage() to change.
image String R The image canvas the tile is using. Its dimensions must be (width*frames) wide and (height*animations) of the tile shape.
opacity Numeric R The opacity level of tile (0-100) Using opacity will obviously impact performance

 

Descriptions of Global properties for tile library

Property Data Type Read/Write Description
Tl_linuxcompatible Boolean R/W If this is set to true, linux compatibility mode is enabled for the tile engine. Setting this to true will enable a workaround to a bug in the Mozilla rendering engine (at the time of writing, the most recent version of Mozilla is 1.1).
Tl_xoffset Numeric R/W (default=0) The origin of the tiles in the x axis. A tile x position is relative to this unless the tile is static. This variable is also the x origin for the mouse object (see mouse docs)
Tl_yoffset Numeric R/W (default=0) the origin of the tiles in the y axis. A tile y position is relative to this unless the tile is static. This variable is also the y origin for the mouse object (see mouse docs)
Tl_totaltiles Numeric R The number of tiles you've created