Skip to content

Allow detaching z-index from char layer #512

@Annoraaq

Description

@Annoraaq

Currently, character layers define both, the collisions and the rendering order (z-index, depth) of a character.
It should be possible to change the rendering order of characters independently of collisions that come from using character layers.

Proposal

Add an optional "depthLayer" property to the character. This is the name (string) of a layer in Tiled. If depthLayer is set, the rendering order of that character is tied to the rendering order of that tile map layer.

1. Extend CharacterData

File: https://github.com/Annoraaq/grid-engine/blob/master/src/GridEngine.ts#L195

export interface CharacterData extends CharacterDataHeadless {
  // ...

  /**
   * If set, defines the rendering order (z-index, depth) of the character.
   * The rendering order that is given by the character layer is ignored in
   * that case.
   */
  depthLayer?: string;
}

2. Extend GridTilemapPhaser

GridTilemapPhaser needs a method to provide the depth of a particular tile layer.
Something like:

getDepthOfLayer(name: string): number | undefined {
    // We should think about caching this, as it does a linear search through all layers on each update,
    // which can become computationally expensive.
    return this.tilemap.layers.find((l) => l.name === name)?.tilemapLayer.depth;
}

3. Extend GridCharacterPhaser

GridCharacterPhaser needs to consider the depth of that layer in case it was set.

We could give GridCharacterPhaser a depthLayer: string | undefined property and adjust the setSpriteDepth, and setContainerDepth methods accordingly. Something along the lines of:

  private setSpriteDepth(
    sprite: Phaser.GameObjects.Sprite,
    position: LayerVecPos,
  ): void {
    let layerDepth: number | undefined;
    if (this.depthLayer !== undefined) {
      layerDepth = this.tilemap.getDepthOfLayer(this.depthLayer);
    }

    sprite.setDepth(
      (layerDepth ??
        this.tilemap.getDepthOfCharLayer(this.getTransitionLayer(position))) +
        this.getPaddedPixelDepthSprite(sprite),
    );
  }

We also need a new method getDepthLayer(): string and setDepthLayer(name: string|undefined):void in GridCharacterPhaser to allow setting and getting the depth layer after character creation. That makes it necessary to also add public methods to GridEngine.ts: setDepthLayer(charId:string, name: string|undefined):void and getDepthLayer(charId: string): string|undefined.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions