Description

Tiled is a general purpose tile map editor. It's built to be easy to use, yet flexible enough to work with varying game engines, whether your game is an RPG, platformer or Breakout clone. Tiled is free software and written in C++, using the Qt application framework.

http://www.mapeditor.org

Consider adding inserting Tiled.js

 <script src="extends/Tiled.js"></script>
 <script>
   var canvas = CE.defines("canvas_id").
    extend(Tiled).
    ready(function() {

    });
 </script>

Usage

Constructor

  • scene {CanvasEngine.Scene}

  • el {CanvasEngine.Element}

    The layers are displayed on this element

  • url {String}

    Path to the JSON file of Tiled Map Editor

Example

var canvas = CE.defines("canvas_id").
    extend(Tiled).
    ready(function() {
        canvas.Scene.call("MyScene");
    });

canvas.Scene.new({
    name: "MyScene",
    materials: {
        images: {
            mytileset: "path/to/tileset.png"
        }
    },
    ready: function(stage) {
         var el = this.createElement();
         var tiled = canvas.Tiled.new();

        tiled.ready(function() {
             var tile_w = this.getTileWidth(),
                 tile_h = this.getTileHeight(),
                 layer_object = this.getLayerObject();
             stage.append(el);
        });
        tiled.load(this, el, "map/map.json");
    }
});
  1. mytileset in material object is the name of tileset in Tiled Map Editor
  2. getLayer() retrieves a layer. The name is the same as in Tiled Map Editor

Methods

ready

Calls the function when the layers are drawn

load

Load JSON file and draw layers in the element of the scene. View Tiled class description for more informations (http://canvasengine.net/doc/?p=editor.tiled)

getLayerObject

Retrieves the object layer.

getLayer

Retrieves the layer by its identifier.

getMap

Returns the element containing all the layers

getTileWidth

Returns the width of the map in tiles

getTileHeight

Returns the height of the map in tiles

getWidthPixel

Returns the width of the map in pixels

getHeightPixel

Returns the height of the map in pixels

getDataLayers

Returns the data for each map

getTileInMap

Retrieves the position of a tile to the Tileset according positions X and Y

getTileProperties

Gets the properties of a tile depending on its identifier

getTileProperties

Gets the properties of a tile depending on its positions

Discussion