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

Question

我对游戏开发有点新意。我现在正在使用Phaserjs进行html5游戏。我想将超出边界一侧的精灵部分带到另一边。我经历过image docs in Phaser。我不知道该怎么办。考虑将部分复制并粘贴到画布上但游戏对象引用不一样。此外，复制功能有其限制（从图像的左上角复制）。

我经历了Phaser examples。但没有得到任何线索。

感谢任何帮助。感谢。

Answer 1

如果我理解你的问题，你可以尝试这个解决方案：

• 制作一个PNG，它是画布的宽度+原始精灵的宽度
• 将原始精灵放在png的两端（因此PNG中的sprite + blank space + sprite
• 将其添加到您的游戏中，就像任何其他精灵一样

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

可能有一个更好的解决方案适用于spritesheet动画和碰撞，但这似乎比剪切部分图像并移动它们更简单。

Answer 2

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

尽管我是phaser-framework的新手，但它使用了canvas渲染器。我希望canvas示例能帮到你。

您需要处理两种情况：

1. Sprite部分超出画布范围
2. 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