Javascript Rex UI可滚动面板：无法理解其工作原理

我正在用Phaser 3制作一个游戏，我需要使用一些可滚动的面板，所以我选择了使用Rex UI（如果你知道任何替代方案，请告诉我。起初我想从npm使用Phaser列表视图，但它只在Phaser 2中）。这些插件似乎没有太多文档。这些文档位于以下网站：

因此，我有我的游戏配置，我像这样加载（过于简化）：

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

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)

Uncaught TypeError:this.child.getAllChildren不是函数
在e.Xo[as RESET CHILD POSITION]（：1:205731）
在东平面图上（：1:206243）
在e.布局处（：1:126859）
在e.布局处（：1:126859）
在e值时（：1:172299）
在MyScene.create（MyScene.js:117）
在initialize.create（phaser.min.js:1）
在initialize.loadComplete时（phaser.min.js:1）
在initialize.h.emit时（phaser.min.js:1）
在initialize.loadComplete时（phaser.min.js:1）

如果我只删除

.layout（）

，错误就会消失。但是，滚动条上的拇指不在场景中的任何地方，我甚至不能滚动容器。 文档没有说明在

面板.child

、

scroller.track

和

scroller.thumb

---

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

试试这个，只要调用createTable（）：

---

尝试此操作，只需调用createTable（）：

---

我还没有使用这些插件，但这里展示了rex的插件codepen.io/rexrainbow，您是如何开始使用它编码的？因为也许最好看看这些例子，然后照搬过去的一些code@nazimboudeffa我只是按照您链接的可滚动面板页面上的示例，并尝试将其更改为我的需要。我看了文件，就这些。我在网上发现的关于这些插件的东西不多OK我做的和你完全一样，所以让我也来看看，如果我找到一种方法来修复你的代码，我会分享一个答案：）我还没有使用这些插件，但这是rex插件codepen.io/rexrainbow的展示。你是如何开始用它编码的？因为也许最好看看这些例子，然后照搬过去的一些code@nazimboudeffa我只是按照您链接的可滚动面板页面上的示例，并尝试将其更改为我的需要。我看了文件，就这些。我在网上找到的关于这些插件的东西不多OK我做的事情和你完全一样，所以让我也来看看，如果我能找到修复你代码的方法，我会分享一个答案：）

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)

     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;
        };