Phaser - Wiederholen Sie drei Hintergrund

Question

Ich habe 3 Hintergrundbilder.

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

Ich versuche 3 in der Nähe Bild von Horizontal zu wiederholen immer

wie ..|bg1|bg2|bg3|bg1|...

Und ein Spieler können sich zu bewegen.

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

Ich versuche tileSprite zu verwenden, aber es nur in einem Hintergrund wiederholen Wie das zu tun?

Ich habe eine Probe hier: http://jsfiddle.net/30t5e4eg/

Answer 1

Sie können die drei Bilder in einem Bitmapdata (Kopie) anschließen und dann eine tileSprite verwenden. Das Problem ist, dass die Bilder in Größe und Farbe unverhältnismäßig sind. Also ich persönlich denke, es ist einfacher, ein einzelnes Bild zu verwenden. Ich fand ein sehr gutes Beispiel im Internet des Benutzers @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); 
} 

Ich weiß immer noch nicht, welche Art von Mobilität, die Sie suchen, so dass nur ich den Code teilen, so dass ich es umsetzen kann in Ihrem Projekt.