2017-08-07 40 views
1

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

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

Here is my Image, it is 256x256

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

} 
+0

您的代碼根本不起作用。從這個開始(https://jsfiddle.net/archierocks183/zygz2ksm/17/),並讓它進入工作階段,以獲得更好的幫助 –

回答

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. 
2

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

game.camera.follow(player); 

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

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

+0

謝謝!那是我需要的!但現在我似乎無法弄清楚如何在移動角色時使動畫起作用,當我按下某個按鍵時,動畫會播放整個精靈表而不是一行,但動畫也不會停止放開鑰匙。我希望能夠使動畫在不同的行中工作,例如,如果我按下向下箭頭,我希望第一行只播放,當我放開時,我希望它停止。 – hannacreed

+0

@hannacreed我不知道我是否理解你,這將是很好,你發佈第二個問題的另一個問題,並張貼代碼只與角色動畫,然後告訴我們什麼不按預期工作。 –