如何在Phaser中为子弹组对象添加精灵表动画与旋转效果

核心修改点 #

• 修正原Bullet类的继承错误：原代码声明继承Image但构造调用Sprite，统一改为继承Phaser.GameObjects.Sprite才能支持帧动画
• 预加载阶段完成子弹精灵表加载、飞行动画注册
• 子弹激活发射时自动播放动画，根据发射方向设置对应旋转角度
• 子弹超出边界回收时重置动画、移动状态，避免对象复用出现异常
• 改用物理体速度控制子弹移动，替代手动逐帧修改坐标，性能和碰撞稳定性更好

步骤1：资源预加载与动画注册 #

在对应场景的生命周期方法中添加资源加载和动画注册逻辑，注意替换为你自己素材的实际参数：

// 场景preload生命周期：加载子弹精灵表
preload() {
  // 其余原有资源加载逻辑保持不变
  // frameWidth、frameHeight替换为你子弹精灵单帧的实际像素尺寸
  this.load.spritesheet('bullet', '你的子弹精灵表路径.png', {
    frameWidth: 16,
    frameHeight: 16
  });
}

// 场景create生命周期：注册动画、初始化子弹物理组
create() {
  // 注册子弹循环飞行动画
  this.anims.create({
    key: 'bullet_fly',
    // start、end替换为精灵表中子弹动画的实际帧序号范围
    frames: this.anims.generateFrameNumbers('bullet', { start: 0, end: 3 }),
    frameRate: 15,
    repeat: -1 // 无限循环
  });

  // 原有子弹组创建逻辑无需修改
  this.bullets = this.physics.add.group({
    classType: Bullet,
    maxSize: 10,
    runChildUpdate: true,
  });
}

步骤2：重写Bullet自定义类 #

替换原有Bullet类代码，修复继承问题，加入动画播放、角度旋转、状态重置逻辑：

var Bullet = new Phaser.Class({
  Extends: Phaser.GameObjects.Sprite,

  initialize: function Bullet (scene) {
    Phaser.GameObjects.Sprite.call(this, scene, 0, 0, "bullet");
    // 为子弹添加物理体，适配物理组逻辑
    scene.physics.add.existing(this);
    this.speed = Phaser.Math.GetSpeed(250, 1);
    // 初始状态设为失活隐藏
    this.setActive(false);
    this.setVisible(false);
  },

  fire: function (x, y, direcao) {
    this.direcao = direcao;
    // 激活时从头播放飞行动画
    this.play('bullet_fly', true);

    // 按发射方向设置坐标、旋转角度、移动速度
    // 角度基准：子弹精灵默认朝向为右，对应0度
    switch(direcao) {
      case 1: // 向上
        this.setPosition(x, y - 10);
        this.setAngle(-90);
        this.body.setVelocity(0, -this.speed * 1000);
        break;
      case 2: // 向下
        this.setPosition(x, y + 10);
        this.setAngle(90);
        this.body.setVelocity(0, this.speed * 1000);
        break;
      case 3: // 向右
        this.setPosition(x + 10, y);
        this.setAngle(0);
        this.body.setVelocity(this.speed * 1000, 0);
        break;
      case 4: // 向左
        this.setPosition(x - 10, y);
        this.setAngle(180);
        this.body.setVelocity(-this.speed * 1000, 0);
        break;
      default:
        console.log("射击方向参数非法");
        return;
    }

    this.setActive(true);
    this.setVisible(true);
  },

  update: function (time, delta) {
    // 已通过物理体setVelocity设置自动移动，无需手动修改x/y坐标
    // 判断子弹是否超出屏幕边界
    const outOfScreen = this.y < -this.height 
      || this.y > 480 + this.height 
      || this.x < -this.width 
      || this.x > 960 + this.width;
    
    if (outOfScreen) {
      this.setActive(false);
      this.setVisible(false);
      // 回收时停止动画、清空速度，避免复用时状态残留
      this.stop();
      this.body.setVelocity(0, 0);
    }
  }
});

注意事项 #

• 如果你的子弹精灵素材默认朝向不是向右，需要对应调整setAngle的偏移值，比如默认朝上的素材，朝右发射时需要设置90度旋转
• 精灵表帧尺寸、动画帧范围、帧率参数需要根据实际素材调整，不要直接照搬示例数值
• 物理组对象复用时必须重置速度、动画状态，否则会出现上一次发射的移动方向残留、动画跳帧问题

内容的提问来源于stack exchange，提问作者Filipe Cruz