Jump to content

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

Nikolay Tsenkov

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?



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

  • 2 months later...
  • 1 year later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

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