0

我四处寻找在同一个画布中分层对象，但没有找到很多关于它的信息。

目前我已经使用了多画布技术将事物相互叠加

示例：canvas Holder <--- 这包含所有其他画布的加载画布菜单画布游戏画布背景画布

stage = new stage (mainCanvas)并通过以特定顺序将它们添加到“ ”中，我得到了所需的分层

stage.addChild(background);
stage.addChild(game);
stage.addChild(menu);
stage.addChild(loading);

这很好用，但是我想知道如果我在该画布中有 2 个图像，是否有办法更改添加到“游戏”画布的图像的 zIndex？

我在 fieldrunners 游戏中看到过这种事情，游戏遵循类似网格的格式，当你将一个射手放在另一个射手上方的广场上时，它会重新定位在它后面。

http://fieldrunnershtml5.appspot.com/#sd --- 适用于 chrome

有什么想法是怎么做的吗？

谢谢

4

3 回答 3

1

不需要多个画布。当您在画布 2d 中使用游戏时，您通常每秒清除和重绘画布约 60 次。你最后画的东西在上面。因此，为了模拟图层，您可以根据 z-index 对数组中的所有游戏对象进行排序，然后遍历数组中的所有对象，调用它们的绘制方法。

优化这种渲染器的空间很大，但这是使其工作的基本且简单的方法。

于 2012-05-02T10:52:56.010 回答
0

您使用多个画布来实现图层的技术是完全好的方法。您还应该跟踪需要清除/重绘的图层 - 例如map，仅在滚动时刷新或GUI/HUD确实不需要每秒重绘 60 次。

画布中没有 z-index 或对象之类的东西，所有机制都取决于您自己的实现。例如，您可以创建一个要绘制的命令或对象数组 - 然后按 zIndex（或您命名的任何名称）对其进行排序并执行每个元素。

于 2012-05-02T14:51:36.870 回答
0

Acanvas只是像素 - 它没有“层”。

如果要进行视差滚动之类的操作，请将多个画布放在同一个位置，并使用透明度显示后面的画布。

于 2012-05-02T09:20:29.490 回答