無法在Phaser.js中動畫Sprite

Question

我正在嘗試使用Sprite工作表來移動箭頭鍵的字符，但似乎沒有工作。如果我將背景設置爲大於500,500，屏幕會與角色一起移動，但我希望角色能夠自由移動，而不會隨背景移動。

我可以在我的代碼中更改哪些字符，以便使用箭頭鍵移動字符？並使動畫實際工作？

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

添加名爲test的精靈變量，但將動畫添加到名爲player的變量。這可能是你犯的一個錯誤，我的意思是var player定義在哪裏？

至於不同的動畫工作，你必須分別添加每個動畫到你的精靈變量。您必須指出哪些幀用於「走左」動畫，哪些幀用於「走起來」動畫等，並創建單獨的動畫。類似這樣的：

// 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]); 

然後根據播放器的移動方向，播放不同的動畫。

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

Answer 2

你可以讓相機跟隨您的播放器。第一箱箱玩家精靈然後添加以下行：

game.camera.follow(player); 

你可以在這個鏈接找到你需要什麼。 https://phaser.io/examples/v2/camera/basic-follow

此外，你不應該聲明你的變量爲「var player」而不是「var test」裏面的創建函數嗎？