时间戳

首页 > 解决方案 > Phaser 3 中图集的动画问题

javascript - Phaser 3 中图集的动画问题

问题描述

我一直在尝试学习 Phaser 3，以便我可以支持我的学生学习该框架。我已经能够让 spritesheet 工作，但是，我更喜欢使用 json 文件，所以我改用加载图集。无论我尝试什么，我遇到的问题是，当我尝试播放我在 create 方法中创建的动画时，update 方法会出错。

它说，未捕获的类型错误：无法读取未定义的属性“框架”

我正在使用 LeshyLabs https://www.leshylabs.com/apps/sstool/导出我的 json 和 spritesheet

这是我的代码。任何帮助将不胜感激。

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" />
    <title>First Phaser Game</title>
    <script src="//cdn.jsdelivr.net/npm/phaser@3.11.0/dist/phaser.js"></script>
    <style type="text/css">
        body {
            margin: 0;
        }
    </style>
</head>
<body>

<script type="text/javascript">

    var config = {
        type: Phaser.AUTO,
        width: 1200,
        height: 800,
        physics: {
          default: 'arcade',
          arcade: {
              gravity: { y: 300 },
              debug: false
          }
        },
        scene: {
            preload: preload,
            create: create,
            update: update
        }
    };

    var game = new Phaser.Game(config);
    var platforms;
    var cursors;
    var megaman;
    
    function addPlatform(x,y,width){
      for (i=0;i<width;i++){
        platforms.create(x+(i*64), y, 'ground');
      }
    }
    
    function preload()
    {
      this.load.image('bg', 'assets/ripbgzsnes03.png');
      this.load.image('ground', 'assets/platform.png');
      this.load.image('star', 'assets/star.png');
      this.load.image('bomb', 'assets/bomb.png');
      this.load.atlas('megaman', 'assets/spritesheet.png', 'assets/megamansprites2.json');
    }

    function create()
    {
      this.bg = this.add.image(2400,config.height/2,'bg');
      this.bg.displayWidth = 4800;
      this.bg.displayHeight = config.height;
      this.physics.world.bounds.width = 4800;
      platforms = this.physics.add.staticGroup();
      addPlatform(0, 580, 40);
    
      this.physics.add.collider(megaman, platforms);
      this.anims.create({ 
        key:'standing', 
        frames: this.anims.generateFrameNames('stand', {
          prefix:'stand', 
          end:7, 
          zeroPad: 2
        }),
        repeat: -1
      });
      
      megaman = this.physics.add.sprite(100, 450, 'megaman');
      megaman.setCollideWorldBounds(true);

      cursors = this.input.keyboard.createCursorKeys();
        // set bounds so the camera won't go outside the game world
      this.cameras.main.setBounds(0, 0, 4800, config.heightInPixels);
        // make the camera follow the player
      this.cameras.main.startFollow(megaman);
    }

    function update()
    {
      megaman.play('standing')
      // if (cursors.left.isDown)
      // {
      //     megaman.setVelocityX(-250);

      //     // megaman.anims.play('running', true);
      // }
      // else if (cursors.right.isDown)
      // {
      //     megaman.setVelocityX(250);

      //     // megaman.anims.play('running', true);
      // }
      // else
      // {
      //     megaman.setVelocityX(0);
      //     // megaman.play('standing');
      // }

      // if (cursors.up.isDown && megaman.body.touching.down)
      // {
      //     megaman.setVelocityY(-330);
      // }
      
    }

</script>

</body>
</html>

标签： javascriptanimationphaser-framework

解决方案

在您的加载语句中，您正在命名图集'megaman'（名称将是传递给加载方法的第一个参数）。然后，在该anims.create()方法中，您将引用一个调用'stand'来生成框架名称的图集。这就是你变得不确定的原因。

您可以在此处查看使用图集设置动画的示例：Phaser Labs - Animation from Atlas。

同时，如果您将创建方法更改为此，它应该可以工作：

this.anims.create({ 
    key:'standing', 
    frames: this.anims.generateFrameNames('megaman', {
        prefix:'stand', 
        end:7, 
        zeroPad: 2
    }),
    repeat: -1
});

推荐阅读