Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

Tileset (gallery-tileset)

Last Updated: 02/17/10

+ 0 -

Robert Pranschke

YUI Contributor

Created: 02/17/10
Project: YUI 3
License: YUI BSD
YUI Version: 3.0.0
Free for use.

Tilesets is used to create a map of several layers from one or more tilesets source files. You can define a grid and lay out single tiles from that source. You can find a working example here:
http://www.tertrack.com/create.php

To use the tileset widget you have to 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 (height and width) and then we define how many tiles there are in x and y directions. Optional you can define how many z layers there will be.

Then comes the most important part of the map. We define a blueprint for the map and define the file that contains the graphics to display. Check out the working example link from above to see the blueprint in action. Here we already set the tileset size to 32x32 px, so the widget 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.

The map property is an array so you can define several layers of maps with differents tileset files. Check out the link above. If you see it for yourself it's much easier to understand.

Code Sample

YUI().use('gallery-tileset', function(Y) {
 
    var config_tileset = {};
    config_tileset.contentBox = "#tileset_editor";
    config_tileset.dimensions = {
        height : 32,
        width : 32,
        x : 10,
        y : 10,
        z : 10
    };
 
    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}]
        ]
    }];
 
});

YUI().use('gallery-tileset', function(Y) {

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

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}]
        ]
    }];

});

Forum Posts

No forum posts for this module.