Question

我有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但它只在一个背景重复怎么做？

我在这里做了一个示例：http://jsfiddle.net/30t5e4eg/

Answer 1

您可以在BitmapData（副本）中加入3个图像，然后使用tileSprite。问题是图像的大小和颜色都不成比例。所以我个人认为使用单个图像更容易。我在互联网上找到了一个非常好的例子 @lewster32 ：

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);
}

我仍然不知道您正在寻找什么类型的移动设备，因此我只共享代码，以便我可以在您的项目中实现它。

Phaser - 重复三个背景

1 个答案: