How do i load object to the tile map?

[zaquanishak]

Hi,
I would like to know how can i attach object to the tile map using IgeTiledComponent? What i mean is to include the object inside my map.js file.

Code: Select all

var map2 = { "height":100,
    "layers":[
        {
            "data":[1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
            "height":100,
            "name":"GrassLine",
            "opacity":1,
            "type":"tilelayer",
            "visible":true,
            "width":100,
            "x":0,
            "y":0
        },

From my understanding, the above code is use for cellsheet. What if i have and object and i would like to include it( such as building)? how do i code it inside the map.js?

Regards,

[xenoglyph]

Don't mess around with the Tiled stuff, just let IGE load it up and do it's thing. After that mount an entity (your building) to the tilemap. Check out 13.1-tilemaps example.

[robaldred]

There are two layer types supported by IgeTiledComponent

* tileLayer
* objectgroup

There are many uses for objectgroup layers, you could use them to define a collision map by creating box2d static bodies.
Here's a couple of real examples I'm using in my game....

This is an example of how I'm using an objectgroup to define spawn points for player entities.

Code: Select all

{
         "height":20,
         "name":"SpawnPoints",
         "objects":[
                {
                 "height":128,
                 "name":"",
                 "properties":
                    {

                    },
                 "type":"",
                 "visible":true,
                 "width":128,
                 "x":124,
                 "y":128
                }, 
                {
                 "height":144,
                 "name":"",
                 "properties":
                    {

                    },
                 "type":"",
                 "visible":true,
                 "width":152,
                 "x":2040,
                 "y":2176
                }],
         "opacity":1,
         "type":"objectgroup",
         "visible":true,
         "width":20,
         "x":0,
         "y":0
        }

Here I'm using another objectgroup to define placement of Trees and other scenery items that I want pixel precision placement rather than tile based. gid is the firstgid of the tile defined in the tilesets object.

Code: Select all

{
         "height":20,
         "name":"Scenery",
         "objects":[
                {
                 "gid":19,
                 "height":0,
                 "name":"",
                 "properties":
                    {

                    },
                 "type":"Tree",
                 "visible":true,
                 "width":0,
                 "x":1576,
                 "y":1148
                }, 
                {
                 "gid":19,
                 "height":0,
                 "name":"",
                 "properties":
                    {

                    },
                 "type":"Tree",
                 "visible":true,
                 "width":0,
                 "x":872,
                 "y":2260
                },
                {
                 "gid":23,
                 "height":0,
                 "name":"",
                 "properties":
                    {

                    },
                 "type":"Bridge",
                 "visible":true,
                 "width":0,
                 "x":372,
                 "y":160
                }],
         "opacity":1,
         "type":"objectgroup",
         "visible":true,
         "width":20,
         "x":0,
         "y":0
        }

Example tileset for above

Code: Select all

"tilesets":[
{
         "firstgid":19,
         "image":"assets\/images\/tree-large.png",
         "imageheight":304,
         "imagewidth":304,
         "margin":0,
         "name":"tree-large",
         "properties":
            {

            },
         "spacing":0,
         "tileheight":304,
         "tilewidth":304
}]

I'm using a free editor called Tiled which exports to JSON, I has some limitations but you can easily tweak it's outputto make it compatible with Ige.

[zaquanishak]

Can u show me how u do it? How u mount it to your backgroundScene? Do u load the object layer same as the tile layer? Do you load the object layer separetly or together with the tile layer? And do you do the same in both client and server?

Regards,

[robaldred]

The objectgroup layer is completely separate to the tilelayer.

It's really simple (I use coffeescript, because there's less clutter, I've included the compiled JS at the bottom)....

Code: Select all

ige.addComponent(IgeTiledComponent)
	.tiled.loadJson tiledMap2, (layerArray, layersById) ->

		texMap = layersById.Ground		

		for object in layersById.Scenery.objects

			# adjust geometry because coordinates in Tiled are bottom left
			# Ige 0,0 is the center of the top left most tile
			x = object.x + texMap._tileWidth/2
			y = object.y - object.width + texMap._tileHeight/2

			# object class mappings
			sceneryClasses = 
				Tree: Tree
				Bridge: Bridge
			objClass = sceneryClasses[object.type]

			newobj = new objClass(width:object.width,height:object.height)
				.originTo(0,1,0)
				.translateTo(x,y,0)
				.createBody()
				.streamMode(1)
				.mount(ige.server.sceneryScene)

		null

Code: Select all

ige.addComponent(IgeTiledComponent).tiled.loadJson(tiledMap2, function(layerArray, layersById) {
  var newobj, objClass, object, sceneryClasses, tileMap, x, y, _i, _len, _ref;
  texMap = layersById.Ground;
  _ref = layersById.Scenery.objects;
  for (_i = 0, _len = _ref.length; _i < _len; _i++) {
    object = _ref[_i];
    x = object.x + texMap._tileWidth / 2;
    y = object.y - object.width + texMap._tileHeight / 2;
    sceneryClasses = {
      Tree: Tree,
      Bridge: Bridge
    };
    objClass = sceneryClasses[object.type];
    newobj = new objClass({
      width: object.width,
      height: object.height
    }).originTo(0, 1, 0).translateTo(x, y, 0).createBody().streamMode(1).mount(ige.server.sceneryScene);
  }
  return null;
});

[zaquanishak]

Hi,
Sorry i really dont understand how u do it?
Below is my tile map file which will load 10x10 tile. How do i insert the layer object in here? Or do i need to create another map just for the layer object?

Code: Select all

var map1 = { "height":100,
    "layers":[
        {
            "data":[
                1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
            "height":10,
            "name":"GrassLayer",
            "opacity":1,
            "type":"tilelayer",
            "visible":true,
            "width":100,
            "x":0,
            "y":0
        },
        {
            "data":[
                5, 0, 0, 0, 0, 0, 0, 0, 0, 0,
                5, 0, 0, 0, 0, 0, 0, 0, 0, 0,
                5, 0, 0, 0, 0, 0, 0, 0, 0, 0,
                5, 0, 0, 0, 0, 0, 0, 0, 0, 0,
                5, 0, 0, 0, 0, 0, 0, 0, 0, 0,
                5, 0, 0, 0, 0, 0, 0, 0, 0, 0,
                5, 0, 0, 0, 0, 0, 0, 0, 0, 0,
                5, 0, 0, 0, 0, 0, 0, 0, 0, 0,
                5, 0, 0, 0, 0, 0, 0, 0, 0, 0,
                5, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            "height":100,
            "name":"DirtLayer",
            "opacity":1,
            "type":"tilelayer",
            "visible":true,
            "width":100,
            "x":0,
            "y":0
        }],
    "orientation":"isometric",
    "properties":
        {

        },
    "tileheight":50,
    "tilesets":[
        {
            "firstgid":1,
            "image":"..\/gaming\/assets\/textures\/tiles\/grassSheet.png",
            "imageheight":50,
            "imagewidth":400,
            "margin":0,
            "name":"grassSheet",
            "properties":
            {

            },
            "spacing":0,
            "tileheight":50,
            "tilewidth":100
        },
        {
            "firstgid":5,
            "image":"..\/gaming\/assets\/textures\/tiles\/dirtSheet.png",
            "imageheight":50,
            "imagewidth":400,
            "margin":0,
            "name":"dirtSheet",
            "properties":
            {

            },
            "spacing":0,
            "tileheight":50,
            "tilewidth":100
        }],
    "tilewidth":100,
    "version":1,
    "width":10
};

if (typeof(module) !== 'undefined' && typeof(module.exports) !== 'undefined') { module.exports = map1; }

[robaldred]

Hi,
Sorry i really dont understand how u do it?

Just add it to the "layers" array

Code: Select all

var map1 = { "height":100,
    "layers":[
        {
            "height":20,
            "name":"SpawnPoints",
            "objects":[
                {
                 "height":128,
                 "name":"",
                 "properties":
                    {

                    },
                 "type":"",
                 "visible":true,
                 "width":128,
                 "x":124,
                 "y":128
                }, 
                {
                 "height":144,
                 "name":"",
                 "properties":
                    {

                    },
                 "type":"",
                 "visible":true,
                 "width":152,
                 "x":2040,
                 "y":2176
                }],
            "opacity":1,
            "type":"objectgroup",
            "visible":true,
            "width":20,
            "x":0,
            "y":0
        },
        {
            "data":[
                1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
            "height":10,
            "name":"GrassLayer",
            "opacity":1,
            "type":"tilelayer",
            "visible":true,
            "width":100,
            "x":0,
            "y":0
        },
        {
            "data":[
                5, 0, 0, 0, 0, 0, 0, 0, 0, 0,
                5, 0, 0, 0, 0, 0, 0, 0, 0, 0,
                5, 0, 0, 0, 0, 0, 0, 0, 0, 0,
                5, 0, 0, 0, 0, 0, 0, 0, 0, 0,
                5, 0, 0, 0, 0, 0, 0, 0, 0, 0,
                5, 0, 0, 0, 0, 0, 0, 0, 0, 0,
                5, 0, 0, 0, 0, 0, 0, 0, 0, 0,
                5, 0, 0, 0, 0, 0, 0, 0, 0, 0,
                5, 0, 0, 0, 0, 0, 0, 0, 0, 0,
                5, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            "height":100,
            "name":"DirtLayer",
            "opacity":1,
            "type":"tilelayer",
            "visible":true,
            "width":100,
            "x":0,
            "y":0
        }],
    "orientation":"isometric",
    "properties":
        {

        },
    "tileheight":50,
    "tilesets":[
        {
            "firstgid":1,
            "image":"..\/gaming\/assets\/textures\/tiles\/grassSheet.png",
            "imageheight":50,
            "imagewidth":400,
            "margin":0,
            "name":"grassSheet",
            "properties":
            {

            },
            "spacing":0,
            "tileheight":50,
            "tilewidth":100
        },
        {
            "firstgid":5,
            "image":"..\/gaming\/assets\/textures\/tiles\/dirtSheet.png",
            "imageheight":50,
            "imagewidth":400,
            "margin":0,
            "name":"dirtSheet",
            "properties":
            {

            },
            "spacing":0,
            "tileheight":50,
            "tilewidth":100
        }],
    "tilewidth":100,
    "version":1,
    "width":10
};

if (typeof(module) !== 'undefined' && typeof(module.exports) !== 'undefined') { module.exports = map1; }

then access it in the same way, via the layersArray or layersById object

[zaquanishak]

Hi rob,
Thanks for your help. But i do get an error when i include my object group as u suggested.
Below is my map

Code: Select all

var map1 = { "height":100,
    "layers":[
        {
            "height":20,
            "name": "SpawnPoints",
            "objects": [
                {
                    "height":128,
                    "name":"",
                    "properties":
                    {
                    },
                    "type":"",
                    "visible": true,
                    "width": 128,
                    "x":124,
                    "y":128
                },
                {
                    "height":144,
                    "name":"",
                    "properties":
                    {
                    },
                    "type": "",
                    "visible": true,
                    "width": 152,
                    "x": 0,
                    "y":0
                }],
            "opacity": 1,
            "type":"objectgroup",
            "visible": true,
            "width":20,
            "x": 0,
            "y":0
        },
        {
            "data":[
                1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
                1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
            "height":10,
            "name":"GrassLayer",
            "opacity":1,
            "type":"tilelayer",
            "visible":true,
            "width":100,
            "x":0,
            "y":0
        },
        {
            "data":[
                5, 0, 0, 0, 0, 0, 0, 0, 0, 0,
                5, 0, 0, 0, 0, 0, 0, 0, 0, 0,
                5, 0, 0, 0, 0, 0, 0, 0, 0, 0,
                5, 0, 0, 0, 0, 0, 0, 0, 0, 0,
                5, 0, 0, 0, 0, 0, 0, 0, 0, 0,
                5, 0, 0, 0, 0, 0, 0, 0, 0, 0,
                5, 0, 0, 0, 0, 0, 0, 0, 0, 0,
                5, 0, 0, 0, 0, 0, 0, 0, 0, 0,
                5, 0, 0, 0, 0, 0, 0, 0, 0, 0,
                5, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            "height":100,
            "name":"DirtLayer",
            "opacity":1,
            "type":"tilelayer",
            "visible":true,
            "width":100,
            "x":0,
            "y":0
        }],
    "orientation":"isometric",
    "properties":
        {

        },
    "tileheight":50,
    "tilesets":[
        {
            "firstgid":1,
            "image":"..\/gaming\/assets\/textures\/tiles\/grassSheet.png",
            "imageheight":50,
            "imagewidth":400,
            "margin":0,
            "name":"grassSheet",
            "properties":
            {

            },
            "spacing":0,
            "tileheight":50,
            "tilewidth":100
        },
        {
            "firstgid":5,
            "image":"..\/gaming\/assets\/textures\/tiles\/dirtSheet.png",
            "imageheight":50,
            "imagewidth":400,
            "margin":0,
            "name":"dirtSheet",
            "properties":
            {

            },
            "spacing":0,
            "tileheight":50,
            "tilewidth":100
        }],
    "tilewidth":100,
    "version":1,
    "width":10
};

if (typeof(module) !== 'undefined' && typeof(module.exports) !== 'undefined') { module.exports = map1; }

and this is how i load it. I try to make it simple as possible as long it can load the map.

Code: Select all

loadMap: function () {
        var self = this;
        ige.tiled.loadJson(map1, function (layerArray, layersById){
            self.log('Success Map Load');
            for (i = 0 ; i < layerArray.length; i++) {
                layerArray[i]
                    .tileWidth(40)
                    .tileHeight(40)
                    .autoSection(20)
                    .mount(ige.client.foregroundScene);
            }
        });
    },

The error i got is Uncaught TypeError: Object #<Object> has no method 'tileWidth' ,'tileHeight' , 'autosection', 'mount' , which is cause by the .tileWidth(40) and so on. So how can i load it without getting this error?

Thanks in advance,
Regards,

[zaquanishak]

Hi,
And another thing rob, i could not call the layersById.SpawnPoints like i could on layersById.Dirtlayer. It will give me undefined value.

Below is the code which i try to call it.

Code: Select all

ige.tiled.loadJson(map1, function (layerArray, layersById){
            self.log('Success Map Load');
            var newObj, objClass, object, sceneryClasses, tileMap, x, y, _i, _len, _ref;
            textMap = layersById.Ground;
            console.log('Ground --' +  layersById.SpawnPoints ); // if i replace the SpawnPoints with DirtLayer it will give me value. But not with the SpawnPoints
            /*for (i = 0 ; i < layerArray.length; i++) {
                layerArray[i]
                    .tileWidth(40)
                    .tileHeight(40)
                    .autoSection(20)
                    .mount(ige.client.foregroundScene);
            }*/
        });

Can u explain to me what is wrong?

Regards,

[robaldred]

Hi, you cannot mount objectlayers like you can tile layers, think of them as meta data only.
you need to constrain the layers you mount to only tileLayers eg:

Code: Select all

if(layerArray[i].type == "tileLayer") {
layerArray[i]
  .tileWidth(40)
  .tileHeight(40)
  .autoSection(20)
  .mount(ige.client.foregroundScene);
}

Also, you need to be using the dev branch of IGE objectgroup layers were not previously added to the layersById object, this is a recent addition.