Phaser: [TypeScript] `ObjectLayer.objects` have wrong type

[rootasjey]

Version

• Phaser Version: 3.16.1
  
• Operating system: macOS Mojave 10.14.3
  
• Browser: Any

Description

Hello,

The property Phaser.Tilemaps.ObjectLayer.objects may have the wrong type.

It is currently of type Phaser.GameObjects.GameObject[] but it seems that it should be of another type (possibly Phaser.Tilemaps.ObjectLayer.TiledObjects[] ?) containing properties like id, name, type.

The Phaser JSDoc already specifies what properties should be available from Tiled.

Example Test Code

Due to TypeScript Defs, I can write the following without T.S. error:

const objectsLayer = map.getObjectLayer('UnitsInit');

objectsLayer.objects.map((obj) => {
  obj.destroy();
});

But it will fail at runtime because objects inside objectsLayer.objects are not GameObject but Tiled object with scalar properties.

For further testings, I created a simple working example in this repository.

Additional Information

To solve this, I would eventually create a new type Phaser.Tilemaps.ObjectLayer.TiledObjects with the specified properties in the comment.

I can make a PR for this :)

[photonstorm]

Please go ahead and PR this, but be sure to look at how types are handled in the master branch first. Essentially, you'd add a new type into tilemaps/typedefs and then reference that in the code.

[danielalves]

@rootasjey @photonstorm I'm using the types below:

type TiledObjectCustomPropertyValueType = boolean | number | string;

interface TiledObjectCustomProperty {
  name: string;
  type: 'bool' | 'color' | 'float' | 'file' | 'int' | 'string';
  value: TiledObjectCustomPropertyValueType;
}

class TiledObject {
  id: number;
  name: string;
  type: string;
  visible: boolean;
  x: number;
  y: number;
  width: number;
  height: number;
  rotation: number;
  properties: TiledObjectCustomProperty[];

  constructor(data: TiledObject) {
    this.id = ('id' in data) ? data.id : 0;
    this.name = ('name' in data) ? data.name : '';
    this.type = ('type' in data) ? data.type : '';
    this.visible = ('visible' in data) ? data.visible : false;
    this.x = ('x' in data) ? data.x : 0;
    this.y = ('y' in data) ? data.y : 0;
    this.width = ('width' in data) ? data.width : 0;
    this.height = ('height' in data) ? data.height : 0;
    this.rotation = ('rotation' in data) ? data.rotation : 0;
    this.properties = ('properties' in data) ? data.properties : [];
  }

  get bounds(): Phaser.Geom.Rectangle {
    return new Phaser.Geom.Rectangle(
      this.x,
      this.y,
      this.width,
      this.height
    );
  }

  property(propName: string): TiledObjectCustomPropertyValueType | null{
    const prop = this.properties.find(prop => prop.name === propName);
    return prop ? prop.value : null;
  }
}

Together with the type coercions like this:

map.getObjectLayer('some-layer-id').objects.forEach((obj) => {
      const tiledObjData = obj as unknown as TiledObject;

Hope this helps.

[photonstorm]

Thank you for submitting this issue. We have fixed this and the fix has been pushed to the master branch. It will be part of the next release. If you get time to build and test it for yourself we would appreciate that.