javascript - Phaser 3 游戏衬衫在上衣，裤子在后面

Question

所以我正在使用 Phaser 3 创建一个游戏，最后有一个小好处，那就是允许人们通过选择他们想要的服装来自定义 Angular 色。我能够完成定制，但现在我想知道是否可以让衬衫始终位于顶层，而裤子位于衬衫后面。您可以先选择衬衫或裤子，但第二个选择的任何内容都会与第一个重叠，如下图所示

我希望衬衫始终在上面，裤子始终在下面，无论您先选择衬衫还是先选择裤子，如下图

下面的代码是衬衫在吉祥物上时的位置和尺寸

const topsImages = [
  {
    costUrl: "U10",
    cost: 1.0,
    src: "SLICES/upperpri/sm1.png",
    x: 91,
    y: 40,
    scaleX: 0.54,
    scaleY: 0.54,
  },
  {
    costUrl: "U20",
    cost: 1.0,
    src: "SLICES/upperpri/smartshirt.png",
    x: 91,
    y: 38,
    scaleX: 0.51,
    scaleY: 0.51,
  },
}

下面的代码是将衣服添加到吉祥物上，setDepth是我尝试添加重叠部分。

tabs.on(
  "button.click",
  function (button, groupName, index) {
    filter = button.text;

    if (this._prevTypeButton) {
      this._prevTypeButton.getElement("background").setTint(0xcfe2f3);
    }
    button.getElement("background").clearTint();
    this._prevTypeButton = button;

    let items = GetImagesForFilter(this._prevTypeButton.text).map(
      (item) => {
        return {
          src: item.src,
          costUrl: item.costUrl,
          cost: item.cost,
          key: this._prevTypeButton.text,
          index,
          x: item.x,
          y: item.y,
          scaleX: item.scaleX,
          scaleY: item.scaleY,
        };
      }
    );
    this.getElement("panel").setItems(items).scrollToTop();
  },
  tabs
);
    this.input.on(Phaser.Input.Events.POINTER_DOWN, function (pointer) {
        pantsImages.setDepth(0);
        topsImages.setDepth(1);
    })

Answer 1

您可以使用游戏对象的“深度排序”。

只需定义对象应该在顶部，并使用setDepth函数设置它。:

for example:

• shirts always depth: 2
• t-shirts always depth: 0 (under the pants)
• pants always depth: 1
• hats always depth: 3
• ...

而不是将其设置为显示等。

深度/层文档:https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Layer.html

phaser.io https://phaser.io/examples/v3/view/depth-sorting/z-index 上有一个很好的例子

或者

如果所有衣服都在一个组/列表中，您还可以使用函数 bringToTop、moveUp、moveDown、... 来定位右侧图层上的部分。

...
this.currentOutfitGroup.add(shirt);
this.currentOutfitGroup.add(pants);
...
this.currentOutfitGroup.children.bringToTop(shirt);
...

如示例所示:https://phaser.io/examples/v3/view/depth-sorting/bring-to-top

更新:

澄清一下:应该在 Phaser 游戏对象 ( link to documentation ) 上调用函数 setDepth

如上面的示例所示:

let selectedTop = this.add.image(100, 300, 'top_phaser_key');

在返回的 selectedTop 对象上，您可以设置深度。

信息:在 Javascript 对象列表 topsImages 和 pantsImages 上调用 setDepth 应该会在浏览器控制台中引发错误。就像“...setDepth 不是一个函数...”

从 GitHub 更新 Javascript 代码 (如果您只需要解决方案，请跳转到快速修复):

Just as an Inf: Your code is really long, It could be optimizied with some Phaser Loader like shown here in this example: https://phaser.io/examples/v3/view/loader/file-pack/load-file-pack-from-json

回到问题无法读取未定义的属性(读取“销毁”)，由于发生了很多事情，所以很难查明。 尽管如此:

• 在第 1256 行左右，您在 itemToRemove 上调用 destroy ，该对象未设置(至少在我的测试中)
  • 您可以在第 1137 行执行非空检查链接
• 检查对象的 playerContainer 的长度是否为 1(仅播放器)，因为没有添加任何内容。
• 检查 add 函数，我假设从第 830 行开始:
  • 没有项目被添加到playerContainer
    • 似乎在第 850 - 1132 行的 if/else 语句中，您总是退出，因此不会调用第 1159 行的 playerContainer.add。

由于我不太清楚其中的逻辑，所以加上它需要阅读的内容很多，我只能猜测，您将展示衣服与购买衣服的逻辑混合在一起，如果您无法支付费用一件它不会被添加到容器中，这会导致问题。 (真的只是猜测)

快速修复可能是: 第 1254 行:检查 itemToRemove 如下:

if(!itemToRemove){
    //... hide item 
    reset(filter);
    return;
}

这不是一个优雅的解决方案，但应该可行。

您可以编写一个像这样的重置函数:

function reset(type){
    if(type.toLowerCase() == "top"){
        engineershirttop.setVisible(false);
        smartshirttop.setVisible(false);
        denimshirttop.setVisible(false);
        stripedshirttop.setVisible(false);
        bluecoattop.setVisible(false);
        redcoattop.setVisible(false);
        architecttop.setVisible(false);
        cheftop.setVisible(false);
        firefightertop.setVisible(false);
        medicallabscientisttop.setVisible(false);
        doctortop.setVisible(false);
        lawyertop.setVisible(false);            
    } else if(type.toLowerCase() == "pants"){
        ...
    } ...
}

额外:reset 函数可以在代码的其他部分使用，例如(在第 847+ 行中):

    if (filter == "Top") {
        reset(filter);
        if (costUrl == "U10") {
            engineershirttop.setVisible(true);
            return;
        }else if (costUrl == "U20") {
            smartshirttop.setVisible(true);
        } ...
    ...

这可以为您节省一些代码行。