map.createFromObject does not working (no display) and no error.

[notalentgeek]

I am currently creating a small platformer game using Phaser and Tiled. I have trouble implementing object layer in my game.

Here are my codes for the game and the .json map.

this.coinGroup              = game.add.group();this.coinGroup.enabledBody  = true;this.map.createFromObjects  ('LayerObject', 4, 'ImageCoin', 0, true, false, this.coinGroup);

{ "height":18, "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, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 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":18,         "name":"LayerBackground",         "opacity":1,         "type":"tilelayer",         "visible":true,         "width":32,         "x":0,         "y":0        },         {         "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],         "height":18,         "name":"LayerBlock",         "opacity":1,         "type":"tilelayer",         "visible":true,         "width":32,         "x":0,         "y":0        },         {         "draworder":"topdown",         "height":18,         "name":"LayerObject",         "objects":[                {                 "gid":3,                 "height":32,                 "id":10,                 "name":"",                 "properties":                    {                     "type":"playerPortal"                    },                 "rotation":0,                 "type":"",                 "visible":true,                 "width":32,                 "x":512,                 "y":320                },                 {                 "gid":4,                 "height":32,                 "id":11,                 "name":"",                 "properties":                    {                     "sprite":"ImageCoin",                     "type":"coin"                    },                 "rotation":0,                 "type":"",                 "visible":true,                 "width":32,                 "x":96,                 "y":544                },                 {                 "gid":4,                 "height":32,                 "id":13,                 "name":"",                 "properties":                    {                     "sprite":"ImageCoin",                     "type":"coin"                    },                 "rotation":0,                 "type":"",                 "visible":true,                 "width":32,                 "x":96,                 "y":544                },                 {                 "gid":4,                 "height":32,                 "id":14,                 "name":"",                 "properties":                    {                     "sprite":"ImageCoin",                     "type":"coin"                    },                 "rotation":0,                 "type":"",                 "visible":true,                 "width":32,                 "x":96,                 "y":544                },                 ...                 {                 "gid":4,                 "height":32,                 "id":65,                 "name":"",                 "properties":                    {                     "sprite":"ImageCoin",                     "type":"coin"                    },                 "rotation":0,                 "type":"",                 "visible":true,                 "width":32,                 "x":608,                 "y":480                }],         "opacity":1,         "type":"objectgroup",         "visible":true,         "width":32,         "x":0,         "y":0        }], "nextobjectid":66, "orientation":"orthogonal", "properties":    {    }, "renderorder":"right-down", "tileheight":32, "tilesets":[        {         "firstgid":1,         "image":"Tileset1.png",         "imageheight":32,         "imagewidth":224,         "margin":0,         "name":"Tilemap1",         "properties":            {            },         "spacing":0,         "tilecount":7,         "tileheight":32,         "tilewidth":32        }], "tilewidth":32, "version":1, "width":32} 

I am pretty sure there is nothing wrong the 'ImageCoin' since I can display it individually. But this code resulted in blank screen without any object and also no error. What could possibly go wrong?

[notalentgeek]

I still could not manage to find the answer of why map.createFromObjects() is not working in my case. However, I create this workaround that iterate the objects using for loop.

 

Here is the solution.

 

I am not sure whether this kind of method have impact on processing power in long term, so far it is working for me. But let me know if you have better solution to this problem .

[Tilde]

I'm not sure, but this ongoing thread of mine:

 

http://www.html5gamedevs.com/topic/16401-tilemapcreatefromobjects-has-downright-insane-behavior/

 

might have something useful for you. I know that the createFromObjects method assigns a width and height to the sprite based on its properties in the jason. You seem to have those properties, but you also have custom properties such as "type" which might overwrite the variable of the same name that every Sprite has. I doubt that'll screw anything up, but it's good to know that any custom properties on the object will be assigned to the sprite as a variable. At least, that's the intended behavior.

[notalentgeek]

I'm not sure, but this ongoing thread of mine:

 

http://www.html5gamedevs.com/topic/16401-tilemapcreatefromobjects-has-downright-insane-behavior/

 

might have something useful for you. I know that the createFromObjects method assigns a width and height to the sprite based on its properties in the jason. You seem to have those properties, but you also have custom properties such as "type" which might overwrite the variable of the same name that every Sprite has. I doubt that'll screw anything up, but it's good to know that any custom properties on the object will be assigned to the sprite as a variable. At least, that's the intended behavior.

I have tried it (remove the custom properties) and it is still not working. Here is my code in case you wonder (it is not commented tho sorry!) http://pastebin.com/RrBp3yi6 look around line 14 - 16.

[Fabadiculous]

I have a very similar, if not the same, issue.

The only difference is, my map.createFromObjects() function works for my spawnpoint object, but not for my coins. I checked, doublechecked and triple checked, and the code is the same with the only difference being the gid, sprite displayed and group.

Here are the two functions I used:

map.createFromObjects('Objects', 7, '',0,true,false, respawn);
map.createFromObjects('Objects', 6, 'coin',0,true,false, coinGroup);

The respawn one works, the coins don't, unless I declare coinGroup by saying this.coinGroup, even though I declared the group as just coinGroup not this.coinGroup.

Even when the coins do display, I cannot use the callAll function on them. I tried to get an animation to play, but it doesn't work. No error is produced, it just doesn't work.

Here are my callAll functions:

coinGroup.callAll('animations.add', 'animations', 'spin', spinFrames, 10, true);
coinGroup.callAll('animations.play', 'animations', 'spin');

 

I will try the solution above, but it would be nice if I could get the createFromObjects() function working properly.

[Fabadiculous]

I fixed the issue.

I ran a forEach function on my coinGroup and ran console.log('coin'); if the coin existed.

The coins were all spawning as expected. Then, I commented out my tilemap code and tried to spawn them as a group using coinGroup.create().

If worked, but I couldn't see the coins. I then commented out the background and they were all there.They were appearing behind my background tilesprite. So I moved my declaration of the background to the top of my create function and the problem was solved.