Fatal编程技术网
  • javascript/
  • Javascript Phaser sprite动画获奖'；不玩

Javascript Phaser sprite动画获奖'；不玩

javascript html animation

Javascript Phaser sprite动画获奖'；不玩,javascript,html,animation,sprite,phaser-framework,Javascript,Html,Animation,Sprite,Phaser Framework,我有一些无法播放的精灵动画，我不明白为什么。我使用的是Phaser的最新版本，但不是社区版 我想在左转时从第1帧转到第0帧 我右转时想从第4帧转到第5帧 我想在静止时在第2帧和第3帧上循环 我做错了什么 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Phaser - Making your first game, p

我有一些无法播放的精灵动画，我不明白为什么。我使用的是Phaser的最新版本，但不是社区版

我想在左转时从第1帧转到第0帧 我右转时想从第4帧转到第5帧 我想在静止时在第2帧和第3帧上循环

我做错了什么

    <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Phaser - Making your first game, part 1</title>
    <script type="text/javascript" src="js/phaser.min.js"></script>
    <style type="text/css">
        body {
            margin: 0;
        }
    </style>
</head>
<body>

<script type="text/javascript">

var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });

function preload() {

  game.load.image('sky', 'assets/sky.png');
  game.load.image('ground', 'assets/platform.png');
  game.load.image('star', 'assets/star.png');
  game.load.spritesheet('speeder', 'assets/speederSpritesheetJets.png', 220, 250, 6);

}

var platforms;

function create() {

  //  We're going to be using physics, so enable the Arcade Physics system
  game.physics.startSystem(Phaser.Physics.ARCADE);

  //  A simple background for our game
  game.add.sprite(0, 0, 'sky');

  // The player and its settings
  player = game.add.sprite(220, game.world.height - 150, 'speeder');

  //  We need to enable physics on the player
  game.physics.arcade.enable(player);

  //  Player physics properties. Give the little guy a slight bounce.
  player.body.bounce.y = 0.2;
  player.body.gravity.y = 300;
  player.body.collideWorldBounds = true;

  //  Our three animations, left, right and forward.
  player.animations.add('left', [1, 0], 0.2, true);
  player.animations.add('right', [4, 5], 0.2, true);
  player.animations.add('forward', [2, 3], 0.2, true);

  cursors = game.input.keyboard.createCursorKeys();

}

function update() {

  //  Collide the player and the stars with the platforms
  var hitPlatform = game.physics.arcade.collide(player, platforms);

  //  Reset the players velocity (movement)
  player.body.velocity.x = 0;

  if (cursors.left.isDown)
  {
    //  Move to the left
    player.body.velocity.x = -300;

    player.animations.play('left');
  } else if (cursors.right.isDown)
  {
    //  Move to the right
    player.body.velocity.x = 300;

    player.animations.play('right');
  } else
  {
    //  Stand still
    player.animations.stop();
    player.animations.play('forward');
    player.body.velocity.y = -300;
    console.log(player.animations.currentAnim.isPlaying);

  }

  //  Allow the player to jump if they are touching the ground.
  if (cursors.up.isDown && player.body.touching.down && hitPlatform)
{
    player.body.velocity.y = -350;
  }
}

</script>

</body>
</html>


Phaser-打造你的第一场比赛，第1部分
身体{
保证金：0；
}
var game=new Phaser.game（800600，Phaser.AUTO，，{preload:preload，create:create，update:update}）；
函数预加载（）{
game.load.image（'sky'，'assets/sky.png'）；
game.load.image（'ground'，'assets/platform.png'）；
game.load.image（'star'，'assets/star.png'）；
game.load.spritesheet（'speeder'，'assets/speederSpritesheetJets.png'，220250,6）；
}
var平台；
函数create（）{
//我们将使用物理，所以启用Arcade物理系统
游戏。物理。启动系统（相位器。物理。拱廊）；
//我们游戏的简单背景
game.add.sprite（0,0，'sky'）；
//播放器及其设置
player=game.add.sprite（220，game.world.height-150，'speeder'）；
//我们需要在播放器上启用物理功能
游戏。物理。街机。启用（玩家）；
//玩家物理属性。给小家伙一点弹跳。
player.body.bounce.y=0.2；
player.body.gravity.y=300；
player.body.collizeWorldBounds=真；
//我们的三个动画，左，右和前进。
player.animations.add（'left'，[1,0]，0.2，true）；
player.animations.add（'right'，[4,5]，0.2，true）；
player.animations.add（'forward'，[2,3]，0.2，true）；
cursors=game.input.keyboard.CreateCursorWorkeys（）；
}
函数更新（）{
//将玩家和明星与平台碰撞
var hitPlatform=game.physics.arcade.collide（玩家，平台）；
//重置玩家速度（移动）
player.body.velocity.x=0；
if（游标。左。isDown）
{
//向左移动
player.body.velocity.x=-300；
player.animations.play（'left'）；
}else if（cursors.right.isDown）
{
//向右移动
player.body.velocity.x=300；
player.animations.play（'right'）；
}否则
{
//站住
player.animations.stop（）；
player.animations.play（'forward'）；
player.body.velocity.y=-300；
console.log（player.animations.currentAnim.isplay）；
}
//如果球员触地，允许他跳跃。
if（cursors.up.isDown&&player.body.topping.down&&hit平台）
{
player.body.velocity.y=-350；
}
}

现在有点让人困惑，因为您可能已经找到了一个Phaser 2示例，并在Phaser 3上进行了尝试。在Phaser 3中，动画被添加到游戏对象中，然后可以在所有精灵之间共享。请参见本示例中的此处：

// this refers to a game object, and player is the sprite

this.anims.create({
    key: 'left',
    frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
    frameRate: 10,
    repeat: -1
});

player.anims.play('left', true);