我似乎不知道如何让动画在移动 Angular 色时工作,当我按下一个键时,动画会播放整个 Sprite 表而不是一行,动画也不会停止我松开了 key 。我希望能够使动画在不同的行中工作,例如,如果我按下向下箭头,我希望仅播放第一行,当我松开时,我希望它停止。
请帮助我使用此代码,以便在我按下不同的键时使用不同的行为我的 Angular 色设置动画,并能够在我放开某个键时停止动画。
正如你所看到的,图像的第一行是当你按下向下键时,第二行是向左键,第三行是右键,第四行是向上键。
我正在使用 Photon Storm 的 Phaser javascript 框架。
JavaScript、game.js:
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', {
preload: preload, create: create, update: update, render: render });
function preload() {
game.stage.backgroundColor = '#ff6288';
game.load.spritesheet('player','reddude.png', 64, 64);
}
var player;
var cursors;
function create() {
game.add.tileSprite(0, 0, 1920, 1920, 'background');
game.world.setBounds(0, 0, 1920, 1920);
game.physics.startSystem(Phaser.Physics.P2JS);
player = game.add.sprite(game.world.centerX, game.world.centerY,
'player');
game.physics.p2.enable(player);
player.animations.add('walk');
player.anchor.setTo(0.5, 1);
cursors = game.input.keyboard.createCursorKeys();
game.camera.follow(player);
}
function update() {
player.body.setZeroVelocity();
if (cursors.up.isDown)
{
player.animations.play('walk', 10, true);
player.body.moveUp(100)
}
else if (cursors.down.isDown)
{
player.animations.play('walk', 10, true);
player.body.moveDown(100);
}
if (cursors.left.isDown)
{
player.animations.play('walk', 10, true);
player.body.velocity.x = -100;
}
else if (cursors.right.isDown)
{
player.animations.play('walk', 10, true);
player.body.moveRight(100);
}
}
function render() {
game.debug.cameraInfo(game.camera, 32, 32);
game.debug.spriteCoords(player, 32, 500);
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Simple Canvas Game</title>
<style>
html {
background: black
}
canvas {
margin: auto;
}
</style>
</head>
<body>
<script src="phaser.js"></script>
<script src="game.js"></script>
</body>
</html>
最佳答案
首先,您需要在create()
中定义多个动画。每个方向一个。
https://phaser.io/docs/2.6.2/Phaser.AnimationManager.html#add
player.animations.add('down', [0,1,2,3]);
player.animations.add('left', [4,5,6,7]);
player.animations.add('right', [8,9,10,11]);
player.animations.add('up', [12,13,14,15]);
然后您需要在update()
中为每个方向播放特定的动画:
https://phaser.io/docs/2.6.2/Phaser.AnimationManager.html#play
https://phaser.io/docs/2.6.2/Phaser.AnimationManager.html#stop
if (cursors.up.isDown){
player.animations.play('up', 10, false);
player.body.moveUp(100);
} else if (cursors.down.isDown) {
player.animations.play('down', 10, false);
player.body.moveDown(100);
} else if (cursors.left.isDown) {
player.animations.play('left', 10, false);
player.body.velocity.x = -100;
} else if (cursors.right.isDown) {
player.animations.play('right', 10, false);
player.body.moveRight(100);
} else {
player.animations.stop(null, true);
}
关于javascript - 带有方向键的 Sprite Sheet 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45569580/