Rex UI 可滚动面板：无法理解它是如何工作的

Question

我正在使用 Phaser 3 开发游戏，我需要使用某种可滚动面板，所以我选择使用 Rex UI（如果您知道任何替代方案，请告诉我。起初我想使用 Phaser-来自 npm 的列表视图，但它仅在移相器 2 中）。这些插件似乎没有太多文档。文档在此站点上：Notes of Phaser 3。

所以我有我的游戏配置，我正在像这样加载（过于简单）：

import UIPlugin from '../plugins/ui-plugin.js';

const config = {
  // ...
  plugins: {
    scene: [{
      key: 'rexUI',
      plugin: UIPlugin,
      mapping: 'rexUI'
    }]
  }
  // ...
};
const game = new Phaser.Game(config);

在一个场景中我尝试使用它：

export default class MyScene extends Phaser.Scene {
  create() {
    this.rexUI.add.scrollablePanel({
      x: 0, y: 0,
      width: innerWidth,
      height: innerHeight/2,
      scrollMode: 'horizontal',
      panel: {
        child: this.add.container().setSize(2 * innerWidth, innerHeight/2)
        .add(this.itemImage(1))
        .add(this.itemImage(2))
        // ... 
        // (I'm actually using for-loop and save this container in a 
        // separate variable, but I'm over simplifying this snippet)
        mask: false
      },
      slider: {
        track: this.add.graphics({x: 0, y: innerHeight/2 + 10})
        .fillRect(0, 0, innerWidth, 30).fillStyle(SOME_LIGHT_COLOR)
        .setInteractive(
          new Phaser.Geom.Rectangle(0, 0, innerWidth, 30),
          Phaser.Geom.Rectangle.Contains
        ),
        thumb: this.add.graphics({x: 0, y: innerWidth/2 + 10})
        .fillRect(0, 0, 50, 30).fillStyle(SOME_DARK_COLOR)
        .setInteractive(
          new Phaser.Geom.Rectangle(0, 0, 50, 30),
          Phaser.Geom.Rectangle.Contains
        )
      }
    }).layout()
  }

  itemImage(n) {
    return this.add.image((innerHeight/2 + 30) * (n-1), 0, 'item' + n)
    .setDisplaySize(innerHeight/2, innerHeight/2) 
  }
}

有很多问题。首先使用上面的代码我得到了错误：

Uncaught TypeError: this.child.getAllChildren is not a function
    at e.Xo [as resetChildPosition] (<anonymous>:1:205731)
    at e.layout (<anonymous>:1:206243)
    at e.layout (<anonymous>:1:126859)
    at e.layout (<anonymous>:1:126859)
    at e.value (<anonymous>:1:172299)
    at MyScene.create (MyScene.js:117)
    at initialize.create (phaser.min.js:1)
    at initialize.loadComplete (phaser.min.js:1)
    at initialize.h.emit (phaser.min.js:1)
    at initialize.loadComplete (phaser.min.js:1)

如果我删除.layout()，错误就会消失。但是，滚动条上的拇指不在场景中的任何位置，我什至无法滚动容器。 文档没有说明 panel.child、scrolller.track 和 scroller.thumb 中应该包含的确切内容

有人可以帮我解决这个问题吗？

Answer 1

试试这个，只需调用 createTable()：

     me.createTable({
       x: 390,
       y: 410,
       width: 350,
       height: 220,
       rank: [{"score":1520,"userID":1,"userName":"Augustus Nico"},{"score":360,"userID":"_2hzxb91byxw","userName":"lipão"},{"score":250,"userID":3,"userName":"Sarão"},{"score":200,"userID":5,"userName":"Bruna Santini"},{"score":160,"userID":4,"userName":"Paulo Junior"},{"score":100,"userID":2,"userName":"Vilasboas"}]
     });

        const COLOR_PRIMARY = 0x4e342e;
        const COLOR_LIGHT = 0x7b5e57;
        const COLOR_DARK = 0x260e04;
        const COLOR_WHITE = 0xffffff;

        export const createTable = ({ x, y, width, height, rank }) => {
        var scrollablePanel = this.rexUI.add
            .scrollablePanel({
            x: x,
            y: y,
            width: width,
            height: height,
            scrollMode: 0,
            background: this.rexUI.add.roundRectangle(0, 0, 2, 2, 10, COLOR_WHITE),
            panel: {
                child: createGrid(this, rank),
                mask: {
                mask: true,
                padding: 1
                }
            },
            slider: {
                track: this.rexUI.add.roundRectangle(0, 0, 20, 10, 10, COLOR_LIGHT),
                thumb: this.rexUI.add.roundRectangle(0, 0, 0, 0, 13, COLOR_DARK)
            },
            space: {
                left: 10,
                right: 10,
                top: 10,
                bottom: 10,
                panel: 10,
                header: 10,
                footer: 10
            }
            })
            .layout();
        };

        const createGrid = (scene, rank) => {
        var sizer = scene.rexUI.add.gridSizer({
            column: 2,
            row: rank.length,
            columnProportions: 1
        });

        rank.forEach((player, index) => {
            sizer.add(
            scene.createItem(scene, 0, index, player.userName), // child
            0, // columnIndex
            index, // rowIndex
            "center", // align
            0, // paddingConfig
            true // expand
            );
            sizer.add(
            scene.createItem(scene, 1, index, player.score), // child
            1, // columnIndex
            index, // rowIndex
            "center", // align
            0, // paddingConfig
            true // expand
            );
        });

        return sizer;
        };

        const createItem = (scene, colIdx, rowIdx, text) => {
        var item = scene.rexUI.add
            .label({
            background: scene.rexUI.add
                .roundRectangle(0, 0, 0, 0, 0, undefined)
                .setStrokeStyle(2, COLOR_DARK, 1),
            text: scene.add.text(0, 0, text, {
                fontSize: 18,
                fill: "#000"
            }),
            space: {
                left: 10,
                right: 10,
                top: 10,
                bottom: 10,
                icon: 10
            }
            })
            .setDepth(3);
        var press = scene.rexUI.add.press(item).on("pressstart", function() {
            console.log(`press ${text}`);
        });
        return item;
        };