Jump to content

Rotation prop missing on objects loaded from object layer in a tilemap.


Nikolay Tsenkov
 Share

Recommended Posts

This is how I load the tilemap, instantiate a background layer and get the object layer for it:

// preload levelgame.load.tilemap( "tilemap", "assets/levels/tilemap.json", null, Phaser.Tilemap.TILED_JSON );game.load.image( "tiles", "assets/levels/tileset.png" );var map = game.add.tilemap( 'tilemap' );map.addTilesetImage('tile-set', 'tiles');// create background layervar layer = map.createLayer( backgroundLayerName );// get objects from the object layervar levelObjects = map.objects[ objectsLayerName ];levelObjects.forEach( function( element ) {    //...} );

I get the position and name properties, but there is no rotation. I've made sure tiliemap.json has the rotation values for every object.

 

I am trying to use the Arcade physics engine, could this be the reason?

 

Thanks.

Link to comment
Share on other sites

When using arcade physics sprites can still rotate (their collision boxes just can't.)

 

You rotate a phaser sprite via it's "angle" property using degrees (so using values from 0 to 359).

 

Maybe your tilemap properties set rotation (which isn't a sprite property) - this will either create the "rotation" property on the object, but since phaser doesn't know about it, it will not do anything, or it skips setting the property completly, because it isn't available. (Not sure, I think there is a boolean flag to set this behavior.)

 

Anyway: try setting the angle in your tilemap objects.

Link to comment
Share on other sites

Just went through phaser's code for parsing the tilemap... it doesn't know about the rotation prop:

for (var v = 0, len = json.layers[i].objects.length; v < len; v++)    {        //  Object Tiles        if (json.layers[i].objects[v].gid)        {            var object = {                gid: json.layers[i].objects[v].gid,                name: json.layers[i].objects[v].name,                x: json.layers[i].objects[v].x,                y: json.layers[i].objects[v].y,                visible: json.layers[i].objects[v].visible,                properties: json.layers[i].objects[v].properties            };            objects[json.layers[i].name].push(object);        }        else if (json.layers[i].objects[v].polyline)        {            var object = {                name: json.layers[i].objects[v].name,                type: json.layers[i].objects[v].type,                x: json.layers[i].objects[v].x,                y: json.layers[i].objects[v].y,                width: json.layers[i].objects[v].width,                height: json.layers[i].objects[v].height,                visible: json.layers[i].objects[v].visible,                properties: json.layers[i].objects[v].properties            };            object.polyline = [];            //  Parse the polyline into an array            for (var p = 0; p < json.layers[i].objects[v].polyline.length; p++)            {                object.polyline.push([ json.layers[i].objects[v].polyline[p].x, json.layers[i].objects[v].polyline[p].y ]);            }            collision[json.layers[i].name].push(object);            objects[json.layers[i].name].push(object);        }        // polygon        else if (json.layers[i].objects[v].polygon)        {            var object = slice(json.layers[i].objects[v],                               ["name", "type", "x", "y", "visible", "properties" ]);            //  Parse the polygon into an array            object.polygon = [];            for (var p = 0; p < json.layers[i].objects[v].polygon.length; p++)            {                object.polygon.push([ json.layers[i].objects[v].polygon[p].x, json.layers[i].objects[v].polygon[p].y ]);            }            objects[json.layers[i].name].push(object);        }        // ellipse        else if (json.layers[i].objects[v].ellipse)        {            var object = slice(json.layers[i].objects[v],                               ["name", "type", "ellipse", "x", "y", "width", "height", "visible", "properties" ]);            objects[json.layers[i].name].push(object);        }        // otherwise it's a rectangle        else        {            var object = slice(json.layers[i].objects[v],                               ["name", "type", "x", "y", "width", "height", "visible", "properties" ]);            object.rectangle = true;            objects[json.layers[i].name].push(object);        }    }}

Is there an API in Phaser for accessing the raw son, so I can manually get these rotation props (or probably the entire object group layers)?

Link to comment
Share on other sites

I've worked around the issue by a custom build step in my games build process (I'm using grunt). What I do is replicate the rotation prop in object.properties.rotation, since phaser successfully copies .properties.

 

To save some time to anyone that might be struggling with this - here is my procedure (read json, edit, replace the file):

var pathUtils = require('path'),    fs = require('fs')// custom tasksgrunt.task.registerTask( "tilemapEdit", "copy the rotation prop of objects", function() {    var path = pathUtils.resolve( __dirname, "src", "game", "assets", "levels", "tilemap.json" );    if ( fs.existsSync( path ) ) {        var jsonText = fs.readFileSync( path, "utf-8" );        if ( jsonText ) {            console.log( "tilemap.json file successfully read." );            try {                var json = JSON.parse( jsonText ),                    layers = json.layers;                console.log( "tilemap.json file successfully parsed." );                if ( layers && layers.length ) {                    layers.forEach( function(layer) {                        if ( layer.type === "objectgroup" ) {                            var objects = layer.objects;                            if ( objects && objects.length ) {                                objects.forEach( function(object) {                                    if ( object.rotation !== undefined ) {                                        if ( !object.properties ) {                                            object.properties = {};                                        }                                        object.properties.rotation = object.rotation;                                    }                                } );                            }                        }                    } );                    var newJsonText = JSON.stringify( json );                    fs.writeFileSync( path, newJsonText );                    console.log( "tilemap.json file successfully updated with rotation props." );                }            } catch(exception) {                console.error( "Error: tilemap.json isn't a valid JSON" );            }        }    } else {        console.error( "Error: tilemap.json file doesn't exist" );    }} );

I will report the issue to the Phaser team.

 

:)

Link to comment
Share on other sites

Nice workaround.

 

But you are right, phaser should just read in the rotation property from the tiled input.

 

(From the phaser code you posted earlier it does not look that compilcated to do it.)

 

I think you should file a github issue.

Link to comment
Share on other sites

  • 2 months later...

Just to say that the reason it didn't read the rotation property is because it's a brand new feature in Tiled, and didn't exist with the TilemapParser was coded. However I just added it to dev as a conditional, so it will still load Tiled 0.9 format maps as well as 0.11.

Link to comment
Share on other sites

  • 1 year later...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...