Indie-Resource.com

Were Back!
http://indie-resource.com/forums/

How do i load object to the tile map?

http://indie-resource.com/forums/viewtopic.php?t=7111

Page 1 of 1

How do i load object to the tile map?

Posted: Tue Oct 01, 2013 9:11 am
by 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,

Re: How do i load object to the tile map?

Posted: Wed Oct 02, 2013 9:39 am
by 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.

Re: How do i load object to the tile map?

Posted: Wed Oct 02, 2013 10:01 am
by 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.

Re: How do i load object to the tile map?

Posted: Wed Oct 02, 2013 10:52 am
by 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,

Re: How do i load object to the tile map?

Posted: Wed Oct 02, 2013 11:29 am
by 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;
});

Re: How do i load object to the tile map?

Posted: Wed Oct 02, 2013 11:46 am
by 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; }

Re: How do i load object to the tile map?

Posted: Wed Oct 02, 2013 11:52 am
by robaldred
zaquanishak wrote: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

Re: How do i load object to the tile map?

Posted: Wed Oct 02, 2013 12:10 pm
by 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,

Re: How do i load object to the tile map?

Posted: Wed Oct 02, 2013 12:29 pm
by 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,

Re: How do i load object to the tile map?

Posted: Wed Oct 02, 2013 12:47 pm
by 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.
All times are UTC
Page 1 of 1

Powered by phpBB® Forum Software © phpBB Limited