javascript 如何在 Phaserjs 中制作无限侧滚动背景?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/21669312/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 21:26:26  来源:igfitidea点击:

How can I make an infinite side scrolling background in Phaserjs?

javascriptphaser-frameworkside-scroller

提问by mage

I'm using phaser.js to make a game and I cannot find any tutorials on how to make the background scroll infinitely. I'd like the background to tile/repeat sideways, and infinitely as the character moves right.

我正在使用 phaser.js 制作游戏,但找不到任何有关如何使背景无限滚动的教程。我希望背景横向平铺/重复,并且随着角色向右移动而无限重复。

I am currently using a camera and having the camera follow the character.

我目前正在使用相机并让相机跟随角色。

Here's my idea about how to do this: Check the position of the camera constantly in update(), and then move it to the beginning of gameplay (the very left) along with the character at that time. I think that this would probably not be a smooth transition though, so I'm wondering if there is a better way to do it.

这是我关于如何执行此操作的想法:在 中不断检查相机的位置update(),然后将其与当时的角色一起移动到游戏开始(最左侧)。我认为这可能不会是一个平稳的过渡,所以我想知道是否有更好的方法来做到这一点。

回答by luschn

This can be done with a tile sprite and by moving "tilePosition":

这可以通过瓷砖精灵和移动“tilePosition”来完成:

var bgtile;

function preload () {
   game.load.image('bgtile', 'bgtile.jpg');
}

function create () {
   bgtile = game.add.tileSprite(0, 0, game.stage.bounds.width, game.cache.getImage('bgtile').height, 'bgtile');
}

function update () {
   bgtile.tilePosition.x -= 1;
}