https://www.google.com/search?client=firefox-b-1-d&q=pixi+what+is+button+mode

https://github.com/pixijs/pixi-layers

https://developer.aliyun.com/mirror/npm/package/pixi-layers

https://pixijs.io/examples/#/plugin-layers/zorder.js
https://github.com/pixijs/pixi.js/issues/3999

  // root container

  public parallaxStage!: Pixi.Container;

  // Contains HUD, and other entities that don't move when game camera moves

  // Contains game entities that move when game camera pans/zooms. Highly encouraged to have further subdivions.
  public actionStage!: Pixi.Container;
  // Contains a few entities that doesn't move when game camera moves, but located behind action stage entities, e.g. static backgrounds
  public backdropStage!: Pixi.Container;

    this.stage = new Pixi.Sprite();
    this.app.stage.addChild(this.stage);
    this.parallaxStage = new Pixi.Sprite();
    this.stage.addChild(this.parallaxStage);

    this.stage = this.app.stage;
    this.stage.sortableChildren = true;

    this.fixedCameraStage.zIndex = 1;
    this.fixedCameraStage.sortableChildren = true;

    this.actionStage = new Pixi.Sprite();
    this.actionStage.zIndex = 0;
    this.actionStage.sortableChildren = true;
    this.stage.addChild(this.actionStage);
    this.backdropStage = new Pixi.Sprite();
    this.backdropStage.zIndex = -1;
    this.backdropStage.sortableChildren = true;
    this.stage.addChild(this.backdropStage);

        this.parallaxStage.x += 10;

        this.actionStage.x -= 10;

        this.parallaxStage.x -= 10;

        this.actionStage.x += 10;
      }
      if (keyboard.down.Up) {
        this.actionStage.y += 10;
      }
      if (keyboard.down.Down) {
        this.actionStage.y -= 10;

    this.fixedCameraStage.addChild(clickableHud);

    this.backdropStage.addChild(clickableHud);

    clickableHud.alpha = 0.5;

    // clickableHud.alpha = 0.5;

    clickableHud.interactiveChildren = true;
    clickableHud.zIndex = -3;
    clickableHud.buttonMode = true;

    // clickableHud.interactiveChildren = true;
    // clickableHud.zIndex = 31;
    // clickableHud.buttonMode = true;

    const reticle = new Pixi.Graphics();
    this.fixedCameraStage.addChild(reticle);
    reticle.lineStyle(2, 0x999999);
    reticle.drawCircle(this.config.canvasWidth / 2, this.config.canvasHeight / 2, 10);
    reticle.interactive = true;

    this.parallaxStage.addChild(container);

    this.actionStage.addChild(container);

      bunny.addListener('pointerdown', () => {
        window.alert('clicked bunny #' + i);
      });

      // bunny.addListener('pointerdown', () => {
      //   window.alert('clicked bunny #' + i);
      // });