Nicht in der Lage, Sprite in Phaser.js

Question

zu animieren Ich versuche, ein Sprite-Blatt zu verwenden, um ein Zeichen mit den Pfeiltasten zu verschieben, aber es scheint nicht zu funktionieren. Wenn ich den Hintergrund auf größer als 500, 500 einstelle, bewegt sich der Bildschirm mit dem Zeichen, aber ich möchte, dass sich der Charakter frei bewegt, ohne dass sich der Hintergrund mitbewegt.

Was kann ich in meinem Code ändern, um das Zeichen mit den Pfeiltasten verschieben zu lassen? Und machen die Animationen tatsächlich funktionieren?

window.onload = function() { 
    var game = new Phaser.Game(500, 500, Phaser.AUTO, 'phaser-example',{ preload: preload, create: create }); 

    function preload() { 

    game.stage.backgroundColor = '#fc6b84'; 
    game.load.spritesheet('player', 'reddude.png', 64, 64); 

    } 

    function create() { 

    // This simply creates a sprite using the player image we loaded above and positions it at 200 x 200 
    var test = game.add.sprite(250, 250, 'player'); 
    player.animations.add('walk'); 
    player.anchor.setTo(0.5, 1); 
    game.physics.arcade.enable(player); 
    player.body.collideWorldBounds = true; 


    addItems(); 
    addPlatforms(); 

    cursors = game.input.keyboard.createCurosrKeys(); 
    //game set up 
    } 

    function update() { 
    game.physics.arcade.collide(player, platforms); 
    game.physics.arcade.overlap(player, items, itemHandler); 
    game.physics.arcade.overlap(player, badges, badgeHandler); 
    player.body.velocity.x = 0; 

    // is the left cursor key presssed? 
    if (cursors.left.isDown) { 
     player.animations.play('walk', 10, true); 
     player.body.velocity.x = -50 
     player.scale.x = - 1 
    } 
    // is the right cursor key pressed? 
    else if (cursors.right.isDown) { 
     player.animations.play('walk', 10, true); 
     player.body.velocity.x = 50 
     player.scale.x = 1 
    } 
    else if (cursors.up.isDown) { 
     player.animations.play('walk', 10, true); 
     player.body.velocity.y = 50 
     player.scale.y = 1 
    } 
    else if (cursors.down.isDown) { 
     player.animations.play('walk', 10, true); 
     player.body.velocity.y = -50 
     player.scale.y = -1 
    } 
    // player doesn't move 
    else { 
     player.animations.stop(); 
    } 
    } 

} 

Answer 1

Sie fügen eine Sprite-Variable namens test hinzu, aber Sie fügen die Animation zu einer Variablen namens player hinzu. Dies könnte ein Fehler sein, den Sie gemacht haben, ich meine, wo ist var player definiert?

Damit die verschiedenen Animationen funktionieren, müssen Sie jede Animation einzeln zu Ihrer Sprite-Variable hinzufügen. Sie müssen angeben, welche Frames für die "Walking Left" -Animation, welche Frames für die "Walking Up" -Animation usw. sind und separate Animationen erstellen. So etwas wie das:

// define variable globally, outside "create()", so then "update" can also use the variable 
var playersprite; 

// create a sprite in the "create()" function 
// note: playersprite is the variable name and 'player' is the spritesheet name string 
playersprite = game.add.sprite(250, 250, 'player'); 

// add animations to sprite 
playersprite.animations.add('walk_down', [0,1,2,3]); 
playersprite.animations.add('walk_left', [4,5,6,7]); 
playersprite.animations.add('walk_right', [8,9,10,11]); 
playersprite.animations.add('walk_up', [12,13,14,15]); 

Und dann je nach Richtung Spieler bewegen, spielen eine andere Animation.

// when LEFT cursor key presssed 
if (cursors.left.isDown) { 
    playersprite.animations.play('walk_left', 10, true); 
    // etc. 

Answer 2

Sie können eine Kamera machen folgt Ihrem Player. Zuerst Kiste Spieler Sprite dann fügen Sie diese Zeile hinzu:

Sie finden auf diesem Link, was Sie brauchen. https://phaser.io/examples/v2/camera/basic-follow

Auch, sollten Sie nicht Ihre Variable als "var player" anstelle von "var test" innerhalb Create-Funktion deklarieren?