Javascript 相位器-重复三次背景

我有3张背景图片

 game.load.image('bg1', 'https://www.joshmorony.com/wp-content/uploads/2016/04/mountains-back.png');
 game.load.image('bg2', 'https://www.joshmorony.com/wp-content/uploads/2016/04/mountains-mid1.png');
 game.load.image('bg3', 'https://www.joshmorony.com/wp-content/uploads/2016/04/mountains-mid2.png');

我试着永远水平地重复3张附近的图片

像

。| bg1 | bg2 | bg3 | bg1 |……

球员可以继续前进

game.load.image('player', 'http://examples.phaser.io/_site/images/prize-button.png');

我尝试使用tileSprite，但它只在一个背景中重复 怎么做

---

我在这里做了一个示例：

您可以将3个图像合并到一个BitmapData（副本）中，然后使用tileSprite。问题是图像的大小和颜色都不相称。所以我个人认为使用单一图像更容易。我在互联网上找到了一个非常好的用户示例：

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });

var tilesprite,
    cameraPosition,
    lerp,
    cursors, 
    player;

function preload() {
    game.load.crossOrigin = 'anonymous';
    game.load.image('player', 'http://examples.phaser.io/_site/images/prize-button.png');
    game.load.image('bg1', 'https://www.joshmorony.com/wp-content/uploads/2016/04/mountains-back.png');
}

function create() {
    cameraPosition = new Phaser.Point(0, 0);
    lerp = 0.1;
    //A tileSprite is added and fixed to the camera
    tilesprite = game.add.tileSprite(0, 0, game.width, game.height, 'bg1');
    tilesprite.fixedToCamera = true;
    tilesprite.tileScale.set(0.9);

    cursors = game.input.keyboard.createCursorKeys();

    player = game.add.sprite((game.width / 2), (game.height / 2), 'player');
    player.scale.setTo(0.8);

    game.world.setBounds(0, 0, game.width * 5, game.height);
    cameraPosition.setTo(player.x, player.y);
}

function update() {
    if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT))
    {
        player.x -= 4;
    }
    else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT))
    {
        player.x += 4;
    }
    else if (game.input.keyboard.isDown(Phaser.Keyboard.UP))
    {
        player.y -= 4;
    }
    else if (game.input.keyboard.isDown(Phaser.Keyboard.DOWN))
    {
        player.y += 4;
    }
    //This prevents the camera from moving violently or quickly, takes the variable lerp, if its value is very low the movement will be smoother
    cameraPosition.x += (player.x - cameraPosition.x) * lerp;
    cameraPosition.y += (player.y - cameraPosition.y) * lerp;
    //Move the camera to the new point
    game.camera.focusOnXY(cameraPosition.x, cameraPosition.y);
    //This is optional, in this case the background is repeated every time
    tilesprite.tilePosition.x += 5;
    //tilesprite.tilePosition.set(game.camera.x * -1, game.camera.y * -1);
}

---

我仍然不知道您想要什么类型的移动，所以我只共享代码，以便在您的项目中实现它。

我认为在玩家移动时，我们不会使用tileSprite并按代码循环背景