Create an image to map from ObjectLayer

[foobar]

Hello, trying to set a image onto map from the ObjectLayer I’ve created with Tiled.

However the object tile looks like this in the game.

I could I have missed?

Object in Tiled

CreateFromObjects routine
private createPickups() { this.pickupsGroup = this.physics.add.staticGroup(); const pickupsGameObjects = this.map.createFromObjects('Pickups', {}); pickupsGameObjects.forEach((object) => { const sprite = object as Phaser.GameObjects.Sprite; sprite.setVisible(true); sprite.setDepth(9); this.pickupsGroup.add(sprite); }); }

Corresponding config in map:

[code]
{
         "draworder":"topdown",
         "id":13,
         "name":"Pickups",
         "objects":[
                {
                 "gid":4873,
                 "height":32,
                 "id":5,
                 "name":"",
                 "rotation":0,
                 "type":"",
                 "visible":true,
                 "width":32,
                 "x":431,
                 "y":541
                }],
         "opacity":1,
         "type":"objectgroup",
         "visible":true,
         "x":0,
         "y":0
        }, 
[/code]

I have verified I’ve loaded the corresponding tilemap where the image is.

[samme]

You need something like

const pickupsGameObjects = this.map.createFromObjects('Pickups', { key: 'KEY', frame: 'FRAME' });

[foobar]

Thank you for the reply samme.

By providing the tilesetImageKey and frame ends up rendering the whole tileset, not the individual frame, as seen the image.

How the individual objectLayer tile from the tileset could be rendered?

On initialization I’ve added the propsA tileset

...
 this.map.addTilesetImage('propsA')
...

Changed createFromObjects parameters so that it has key and frame in the config.

private createPickups() { 
  this.pickupsGroup = this.physics.add.staticGroup(); 
  const pickupsGameObjects = this.map.createFromObjects('Pickups', { key: 'propsA', frame: 0 });
  pickupsGameObjects.forEach((object) => { 
    const sprite = object as Phaser.GameObjects.Sprite; 
    sprite.setVisible(true); 
    sprite.setDepth(9); 
    this.pickupsGroup.add(sprite); 
  }); 
}

The whole tileset `propsA` is being rendered as seen in the image below.
![whole_tileset_rendered|800x487](upload://xY6C1u45jiZOEKjP10e0JlgeIFP.png)

[samme]

You need to add a spritesheet texture. An easy way is

this.load.image('tileset', 'tileset.png');
this.load.spritesheet('tilesetSprite', 'tileset.png', { frameWidth: W, frameHeight: H });

(Fixed)

[foobar]

Thanks for a suggestion, samme.
However, the config containing frameWidth and frameHeight is not part of XHRSettings and thus is not accepted.

I guess you just had a typo, and loading the spritesheet as below

 this.load.spritesheet('tilesetSprite', 'assets/tilesets/decorative/propsA.png', { frameWidth: 32, frameHeight: 32});

it still renders the whole tileset (the tile below the player) as seen the picture below.

It would be nice to learn to load the image from Object layer

but as a fundamental question, should the frame mapping between objects and the tileset image be done in the code at all? It sounds quite tedious. Could it somehow happen automatically as in tile layers?
I will have several image objects drawn with Tiled tool in the Object layer. I would need to know each of their frame ids in the code, basically hardcode them.

On Tile layers the mapping between tile and image happens automatically with Tiled config (I just load the tileset to the map and it works). So this is not possible with Object layers?

If automatic tileset image mapping is not possible in object layers, just wondering what would be the proper way of creating collectible objects on the map? Could the object layer be just pointers to the Tile Layer, and the Tile Layer contains the collectible images?

[samme]

Yes, I meant spritesheet(), thanks.

You need to use the spritesheet texture (as key) and frame:

this.map.createFromObjects('Pickups', { key: 'tilesetSprite', frame: FRAME });

If you’re using tile objects then you can figure out the correct texture frame from the object’s gid. But for that you will probably have to go through the object layer yourself instead of using createFromObjects().

[foobar]

It seems it won’t work with gid and createFromObjects even the CreateFromObjectLayerConfig accepts gid as a parameter.

The object layer config (gid is 4775) in outdoors1.json:

...
 {
         "draworder":"topdown",
         "id":13,
         "name":"Pickups",
         "objects":[
                {
                 "gid":4775,
                 "height":32,
                 "id":8,
                 "name":"pot",
                 "rotation":0,
                 "type":"pickup",
                 "visible":true,
                 "width":32,
                 "x":422.666666666667,
                 "y":547
                }],
         "opacity":1,
         "type":"objectgroup",
         "visible":true,
         "x":0,
         "y":0
        }, 
...

The method updated with gid 4775. (createFromObjects uses now gid in its config param)

private createPickups() {
    this.pickupsGroup = this.physics.add.staticGroup();

    this.load.image('propsA', 'assets/tilesets/decorative/propsA.png');
    this.load.spritesheet('tilesetSprite', 'assets/tilesets/decorative/propsA.png', { frameWidth: 32, frameHeight: 32});

    const pickupsGameObjects = this.map.createFromObjects('Pickups', { key: 'tilesetSprite', gid: 4775 });
    pickupsGameObjects.forEach((object) => {
      const sprite = object as Phaser.GameObjects.Sprite;
      sprite.setDepth(9);
      this.physics.world.enable(sprite);
      this.pickupsGroup.add(sprite);
    });
  }

No texture found.

What would be the way to go through the object layer and create textures like that, as you mentioned samme?

I tried it like this but then it renders absolutely nothing (not even that black box) in the position of the object.

private createPickups2() {

    this.pickupsGroup = this.physics.add.staticGroup();

    this.load.image('propsA', 'assets/tilesets/decorative/propsA.png');
    this.load.spritesheet('tilesetSprite', 'assets/tilesets/decorative/propsA.png', { frameWidth: 32, frameHeight: 32});
    const layer = this.map.getObjectLayer('Pickups');

    layer.objects.forEach(object => {
      const tObject = object as Phaser.Types.Tilemaps.TiledObject;
      const sprite = this.pickupsGroup.create(tObject.x, tObject.y, '4775', 0, true, true);
      
      // Tried also like this
      // Both variations create ArcadeSprite but nothing renders.
      // const sprite = this.pickupsGroup.create(tObject.x, tObject.y);

      this.pickupsGroup.add(sprite);
    });
  }

ArcadeSprite created:

However, nothing renders