How to set Sprite offsets for isometric objects?
schen7913

I've created a Building object with wade.iso.createObject( objectData ). However, the sprite that I passed in needs to be offset to match its collision map tiles. Unfortunately, I can't seem to set the offset for the 0th sprite.

building.setSpriteOffset( 0, offset ) had no effect at all on the position of the sprite.

I tried modifying building._spriteOffsets directly, but that just lead to errors.

Is there a way to modify isometric sprite offsets?

All 5 Comments
Gio

It's difficult to say without looking at the code, but building.setSpriteOffset( 0, offset ) is correct, provided that building is the SceneObejct that you get from wade.iso.createObject.

Do you want to paste some code here if that doesn't work for you?

schen7913

So, I have a JSON file as follows:

{
    "type": "sprite",
    "name": "town_hall_1",
    "visible": "true",
    "image": "../js/../public/sprites/buildings/town_halls_1.png",
    "size": {"x": 600, "y": 600},
    "pixelPerfectMouseEvents": 255
}

and I create the isometric scene object with

console.log(imageJsonFile);  // imageJsonFile is the filename of the above JSON file.

const objectData = {
    sprites: wade.getJson(imageJsonFile),
    gridSize: {x: 2, z: 2},
    collisionSize: {x: 2, z: 2},
    dontAddToScene: true,
};
const townHall = wade.iso.createObject(objectData, {x: 5, z: -2} );

console.log(townHall.getSpriteOffset(0));
townHall.setSpriteOffset(0, {x: 0, y: -1000} );
console.log(townHall.getSpriteOffset(0));

...
...
...

wade.addSceneObject(townHall);

The console.log statements before and after setting the offset tell me that yes, the offset is indeed changed. But that doesn't show up on screen: the sprite and the collision map still have the same positions relative to each other.

schen7913

So, I want to note my solution to this. Although the documentation for the Sprite object DOES NOT currently mention this, when you pass an object to the Sprite constructor, the object can have the property 'offset' to set the offset of the Sprite relative to its SceneObject.

So when I call wade.iso.createObject(objectData), the objectData.sprites is an array of objects that can be passed to the Sprite constructor. I set the 'offset' property on each of these, and then the offset shows up.

Moral of the story: After creating an isometric object using wade.iso.createObject, don't try to modify it afterward. Include all Animation, Sprite, and SceneObject data in the object passed to wade.iso.createObject. Right now, trying to modify the isometric SceneObject afterwards can lead to unexpected results.

Gio

Thanks for pointing that out. I am going to update the Sprite documentation now, to add the missing information about the offset parameter.

I am surprised by that behavior that you're describing though, I have never experienced it myself. I will try to reproduce it in a simple test project to see what's going on there.

schen7913

I ran into this behavior in a slightly different setting. This time I was setting the sprite offset for an isometric character, after it was created using wade.iso.importScene. I set the sprite offsets as follows:

unit.setSpriteOffset(1, {x: 0, y: 5});
unit.setSpriteOffset(2, {x: 0, y: -50});

The sprite offsets apply -- at first. But as soon as I start moving the character on the isometric map, the sprite offsets are undone, and they go back to their incorrect positions.

Post a reply
Add Attachment
Submit Reply
Login to Reply