将边界外的精灵部分包裹到另一侧答案

【问题标题】：wrap a sprite portion outside the boundary to the other side将边界外的精灵部分包裹到另一侧
【发布时间】：2014-09-10 03:24:22
【问题描述】：

我对游戏开发有点陌生。我现在将 Phaserjs 用于我的 html5 游戏。我想将超出边界一侧的精灵部分带到另一侧。我已经通过image docs in Phaser。我不确定如何进行。考虑复制该部分并粘贴到画布上，但游戏对象引用将不一样。此外，复制功能有其限制（从图像左上角复制）。

我通过Phaser examples。但没有得到任何线索。

感谢任何帮助。谢谢。

【问题讨论】：

标签： javascript phaser-framework

【解决方案1】：

如果我正确理解您的问题，您可以尝试以下解决方案：

制作一个等于画布宽度 + 原始精灵宽度的 PNG
将原始精灵放在 png 的任一端（这样在你的 PNG 中就会是 sprite + blank space + sprite
像任何其他精灵一样将其添加到您的游戏中

现在，如果您将精灵部分移出屏幕，它的副本将移动到屏幕中完全相同的 y 点。

可能有更好的解决方案可以处理 spritesheet 动画和碰撞，但这似乎比切割图像的一部分并移动它们更简单。

【讨论】：

【解决方案2】：

这是 jsfiddle：http://jsfiddle.net/m8nj4cjr/

虽然我是 Phaser-framework 的新手，但它使用画布渲染器。我希望画布示例对您有所帮助。

你需要处理两种情况：

Sprite 部分超出画布边界
Sprite 完全超出画布范围

让一个精灵向右移动。如果条件sprite.x + sprite.width > canvas.width 为真，则精灵部分超出范围。在画布的左端渲染部分精灵超出范围。 context.rect(sprite.x - canvas.width, sprite.y, sprite.width, sprite.height);

当精灵完全超出右端边界sprite.x > canvas.width时，将其x位置设置为0。sprite.x = 0

【讨论】：