Tertrack Portal - News

To use the widget, first define the source for the module:

YUI({ modules: { tileset: { fullpath: "http://www.tertrack.com/base/modules/tileset/tileset.js", requires: ["widget"] }, } }).use("tileset", function(Y) {}

Now we define several configuration properties. The property contentBox tells the widget where to render the new map. In the property dimensions we define how big a single tile is with height and width, and then we define how many tiles there are in x and y direction. Optional you can also define how many z layers there will be.

var config_tileset = {}; config_tileset.contentBox = "#tileset_editor"; config_tileset.dimensions = { height : 32, width : 32, x : 10, y : 10, z : 10 };

Now comes the most important part of the map. We define a blueprint for the map and define the file to get the graphics. We use this floor tileset. We already set the tileset size to 32x32 px, so Javascript is gonna use a 32x32 grid to read the tileset. In the blueprint we tell the widget at what position the tile to display is. For example, x:3, y:2 says that the 4th tile in the 3rd row will be used (x:0, y:0 is the first tile in the top left corner). The coordinates in pixel would be 96px,64px.

config_tileset.map = [{ name : "First layer floor", path : "tilesets/Floor01.png", blueprint: [ [{x: 0,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:1,y:1},{x:2,y:1}], [{x: 0,y:2},{x:1,y:2},{x:1,y:2},{x:1,y:2},{x:1,y:2},{x:1,y:2},{x:1,y:2},{x:1,y:2},{x:1,y:2},{x:2,y:2}], [{x: 0,y:2},{x:1,y:2},{x:1,y:2},{x:1,y:2},{x:1,y:2},{x:1,y:2},{x:1,y:2},{x:1,y:2},{x:1,y:2},{x:2,y:2}], [{x: 0,y:2},{x:1,y:2},{x:1,y:2},{x:1,y:2},{x:1,y:2},{x:1,y:2},{x:1,y:2},{x:1,y:2},{x:1,y:2},{x:2,y:2}], [{x: 0,y:2},{x:1,y:2},{x:1,y:2},{x:1,y:2},{x:1,y:2},{x:1,y:2},{x:1,y:2},{x:1,y:2},{x:1,y:2},{x:2,y:2}], (...) [{x: 0,y:3},{x:1,y:3},{x:1,y:3},{x:1,y:3},{x:1,y:3},{x:1,y:3},{x:1,y:3},{x:1,y:3},{x:1,y:3},{x:2,y:3}] ] }];

The map property is an array so you can define several layers of maps with differents tileset files. In the example on this page you can see two fileset, one with the stone path from the code above and one with gras.