这些组件都非常好用，但感觉管理上却不是太方便

[woshisheji]

组件一直在应用，感觉非常不错。 唯一感到缺陷的就是无法使用phaser自带的容器管理，每次要进行界面管理，层次排序时候都非常繁琐。

可能这些组件出现在phaser的容器之前的缘故吧

[rexrainbow]

I had used built-in container as base container class before, but it has some issues. For example, built-in container had some input bugs before, although they were fixed. Moreover, mask can't put inside built-in container. See this test case, enable line22-24.

[woshisheji]

经过测试看到你的案例的确位置没有同步，但是经过我自己尝试的没有什么问题。

代码如下：

 let H5object=this;  let 遮罩= {};  let 父容器= {};  let 父背景= {};  let 子容器= {};  let 子背景= {};   父容器 = H5object.add.container(200,  200);   父背景 = H5object.rexUI.add.roundRectangle(0,  0,  200,  200,  4,  0x343434);   父背景.setOrigin( 0,  0);   父容器.add( 父背景);     子容器 = H5object.add.container(0,  100);   子背景 = H5object.rexUI.add.roundRectangle(0,  0,  200,  100,  4,  0x141414);   子背景.setOrigin( 0,  0);   子容器.add( 子背景);     let 需要挡住 = H5object.add.text(10,  50,  '塑料袋咖啡机了看似简单浪费可接受的发了可接受的发了可接受的发', { fontFamily: '宋体', fontSize: 12, color: null, backgroundColor: null });   需要挡住.setOrigin( 0,  0);   子容器.add( 需要挡住);     H5object.tweens.add({targets: 需要挡住,x:  子容器.x - 200,y:  需要挡住.y,ease:  'Sine',duration:  2000, repeat:   - 1,yoyo:  true});     父容器.add( 子容器);     let 碰撞区域 = 父容器.setInteractive(new Phaser.Geom.Rectangle( 0, 0, 200, 80), Phaser.Geom.Rectangle.Contains);   碰撞区域.setInteractive();   H5object.input.setDraggable(碰撞区域,  true);   碰撞区域.on('drag', function (pointer, dragX, dragY) {     父容器.x = dragX;   父容器.y = dragY;   });       let 遮罩外观 = H5object.rexUI.add.roundRectangle(0,  0,  200,  100,  4,  0xeeffee);   遮罩外观.setOrigin( 0,  0);   子容器.add( 遮罩外观);   遮罩外观.visible = false;     let 覆盖对象 = 子容器.mask = new Phaser.Display.Masks.BitmapMask(H5object,  遮罩外观);     父容器.preUpdate = function(time, delta){     覆盖对象.bitmapMask.x = 子容器.localTransform.tx;   覆盖对象.bitmapMask.y = 子容器.localTransform.ty;       }     H5object.add.existing(父容器);     父容器.setPosition( 200,  100);  

//演示图片

------------------ 原始邮件 ------------------ 发件人: "rexrainbow/phaser3-rex-notes" @.>; 发送时间: 2022年6月5日(星期天) 下午3:14 @.>; @.**@.>; 主题: Re: [rexrainbow/phaser3-rex-notes] 这些组件都非常好用，但感觉管理上却不是太方便 (Issue #290)

I had used built-in container as base container class before, but it has some issues. For example, built-in container had some input bugs before, although they were fixed. Moreover, mask can't put inside built-in container. See this test case, enable line22-24.

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: @.***>

[rexrainbow]

After testing from your code, yes it can apply mask at correct place. However, it force mask's position to world position, not related position based on parent-container. That's will be annoying sometimes.. Anyway, excluding the mask issue, you can put whole ui panel and its children into built-in container via uiPanel.addToContainer(p3Container), or put ui panel to layer via sizer.addToLayer(p3Container). Layer also does not have mask issue BTW.

[woshisheji]

你所有的组件都可以用 addToContainer 命令吗，但似乎没有找到命令，是更新过吗

------------------ 原始邮件 ------------------ 发件人: @.>; 发送时间: 2022年6月5日(星期天) 下午4:12 收件人: @.>; 抄送: @.>; @.>; 主题: Re: [rexrainbow/phaser3-rex-notes] 这些组件都非常好用，但感觉管理上却不是太方便 (Issue #290)

从你的代码测试后，是的，它可以应用在正确的地方面具。 然而，它强迫掩码的位置到世界位置，而不是基于父容器的相关位置。有时候会很讨厌。 不管怎样，除了掩码问题，您可以通过以下方式将整个 ui 面板及其子面板放入内置容器uiPanel.addToContainer(p3Container)，或者将 ui 面板设为层路sizer.addToLayer(p3Container). 层也没有蒙版问题 BTW 。

— 直接回复此邮件，在 GitHub 上查看或取消订阅. 您收到这个消息是因为您编写了这个线程。留言 ID @.***与>

[rexrainbow]

In latest version of minify file, or npm package, you can add containerLite and its children to p3-container directly via container.add(containerLite). See this demo, line71.

[woshisheji]

谢谢。不过我都用容器全部做了一次组件。。。

------------------ 原始邮件 ------------------ 发件人: @.>; 发送时间: 2022年10月12日(星期三) 晚上11:01 收件人: @.>; 抄送: @.>; @.>; 主题: Re: [rexrainbow/phaser3-rex-notes] 这些组件都非常好用，但感觉管理上却不是太方便 (Issue #290)

在最新版本的缩小文件或 npm 包中，您可以直接将容器精简版及其子项添加到 p3 容器中。 请参阅此演示，第 71 行。container.add(containerLite)

— 直接回复此电子邮件，在 GitHub 上查看或取消订阅。 您收到此消息是因为您创作了该线程。Message @.***与>

[woshisheji]

尝试了一下的确可以将 containerLite  加入到 container 但是发现一个bug，例如有掩码的时候，则掩码并不能同步坐标过去，导致出现很严重的错位

[rexrainbow]

Mask within built-in container is an issue of phaser3 engine, posted on there

[woshisheji]

关于这个问题，我是知道的。我也想补救，但是在 ui-gridsizer与 ui-gridtable 组件中，我无法获取到掩码对象，无法将它们坐标更新。导致错位了。

[woshisheji]

containerLite 无法设置深度，必须要将里面所有的对象一个个去设置，让人感觉很难受，希望后续组件都可以使用 container 来实现，这样就相当好用，其次还有一个小建议，ui-gridsizer与 ui-gridtable中，滚动条拖动一下希望是刚好一个项目的像素滚动，而不是一点点滚过去，当然这个选择可选项最好了。

[rexrainbow]

Set depth of container and all children :

container.setDepth(value);

Reference

[woshisheji]

经过实际使用，在当前项目的所有组件中，如果将默认的容器放到组件中，那么将会错位~ 虽然的确是可以管理，但错位问题始终无法解决，比如在 高级表格中，我创建了项目，添加进去永远是缺少了当前子项的宽度与高度的一半所在坐标位置，换rex系列的容器则没有这个问题，两个容器之间的不兼容。导致的问题太多了。如果这些组件可以换成官方的容器那该多好啊0 0

[rexrainbow]

I won't change base container (containerLite) to built-in container since they won't be compatible.