{
  "frames": {
    "walk-0.png": {
      "frame": { "x": 0, "y": 0, "w": 64, "h": 64 },
      "rotated": false,
      "trimmed": false,
      "spriteSourceSize": { "x": 0, "y": 0, "w": 64, "h": 64 },
      "sourceSize": { "w": 64, "h": 64 },
      "anchor": { "x": 0.5, "y": 0.5 }
    },
    "walk-1.png": {
      "frame": { "x": 64, "y": 0, "w": 64, "h": 64 },
      "rotated": false,
      "trimmed": false,
      "spriteSourceSize": { "x": 0, "y": 0, "w": 64, "h": 64 },
      "sourceSize": { "w": 64, "h": 64 }
    }
  },
  "meta": {
    "app": "TexturePacker",
    "version": "7.0",
    "image": "spritesheet.png",
    "format": "RGBA8888",
    "size": { "w": 256, "h": 256 },
    "scale": "1"
  }
}

{
  "frames": [
    {
      "filename": "walk-0.png",
      "frame": { "x": 0, "y": 0, "w": 64, "h": 64 },
      "rotated": false,
      "trimmed": false,
      "sourceSize": { "w": 64, "h": 64 }
    },
    {
      "filename": "walk-1.png",
      "frame": { "x": 64, "y": 0, "w": 64, "h": 64 }
    }
  ],
  "meta": {
    "image": "spritesheet.png",
    "size": { "w": 256, "h": 256 }
  }
}

import { Application, Assets, Spritesheet, Sprite } from 'pixi.js';

const app = new Application();
await app.init({ width: 800, height: 600, background: '#1a1a2e' });
document.body.appendChild(app.canvas);

// 方式一：使用 Assets 加载（推荐，v8 自动解析）
const sheet = await Assets.load('/image/hero-spritesheet.json');

// 获取单帧纹理
const idleFrame = sheet.textures['idle-0.png'];
const sprite = new Sprite(idleFrame);
sprite.position.set(400, 300);
app.stage.addChild(sprite);

// 方式二：手动加载并解析
const atlasData = await fetch('/image/hero-spritesheet.json').then(r => r.json());
const baseTexture = await Assets.load('/image/hero-spritesheet.png');

const sheet2 = new Spritesheet(baseTexture, atlasData);
await sheet2.parse();

// 通过动画名获取帧序列
const walkFrames = sheet2.animations['walk'];
console.log(walkFrames); // [Texture, Texture, Texture, Texture]

// 精灵表中的动画定义（需要在 JSON 中配置或代码中手动组织）

// 手动组织动画帧
const animations = {
  idle: [
    sheet.textures['idle-0.png'],
    sheet.textures['idle-1.png'],
    sheet.textures['idle-2.png'],
    sheet.textures['idle-3.png'],
  ],
  run: [
    sheet.textures['run-0.png'],
    sheet.textures['run-1.png'],
    sheet.textures['run-2.png'],
    sheet.textures['run-3.png'],
    sheet.textures['run-4.png'],
    sheet.textures['run-5.png'],
  ],
  attack: [
    sheet.textures['attack-0.png'],
    sheet.textures['attack-1.png'],
    sheet.textures['attack-2.png'],
  ],
};

{
  "frames": { ... },
  "animations": {
    "idle": ["idle-0.png", "idle-1.png", "idle-2.png", "idle-3.png"],
    "run": ["run-0.png", "run-1.png", "run-2.png", "run-3.png"]
  },
  "meta": { ... }
}

import { AnimatedSprite } from 'pixi.js';

// 创建 AnimatedSprite
const hero = new AnimatedSprite(sheet.animations['idle']);
hero.anchor.set(0.5);
hero.position.set(400, 300);

// 动画配置
hero.animationSpeed = 0.15; // 值越大播放越快（帧/帧）
hero.loop = true;           // 是否循环
hero.autoUpdate = true;     // 自动跟随 ticker 更新

// 播放控制
hero.play();        // 开始播放
hero.stop();        // 停止
hero.gotoAndPlay(2); // 从第 2 帧开始播放
hero.gotoAndStop(0); // 跳到第 0 帧并停止

app.stage.addChild(hero);

type AnimState = 'idle' | 'run' | 'jump' | 'attack' | 'die';

class CharacterAnimator {
  private sprite: AnimatedSprite;
  private animations: Record<AnimState, Texture[]>;
  private currentState: AnimState = 'idle';
  private isLocked: boolean = false;

  constructor(animations: Record<AnimState, Texture[]>) {
    this.animations = animations;
    this.sprite = new AnimatedSprite(animations.idle);
    this.sprite.anchor.set(0.5);
    this.sprite.animationSpeed = 0.15;
    this.sprite.play();

    // 动画播放完毕回调
    this.sprite.onComplete = () => {
      this.isLocked = false;
      this.play('idle');
    };
  }

  play(state: AnimState, force: boolean = false) {
    if (this.isLocked && !force) return;
    if (this.currentState === state && !force) return;

    this.currentState = state;
    this.sprite.textures = this.animations[state];
    this.sprite.gotoAndPlay(0);

    // 非循环动画锁定状态
    this.isLocked = (state === 'attack' || state === 'die');
  }

  get view(): AnimatedSprite {
    return this.sprite;
  }
}

// 使用
const animator = new CharacterAnimator({
  idle:   sheet.animations['idle'],
  run:    sheet.animations['run'],
  jump:   sheet.animations['jump'],
  attack: sheet.animations['attack'],
  die:    sheet.animations['die'],
});
animator.view.position.set(400, 300);
app.stage.addChild(animator.view);

// 状态切换
app.ticker.add(() => {
  if (input.kb.isDown('ArrowRight')) {
    animator.play('run');
    animator.view.scale.x = 1;
  } else if (input.kb.isDown('ArrowLeft')) {
    animator.play('run');
    animator.view.scale.x = -1;
  } else if (input.kb.wasPressed('Space')) {
    animator.play('attack');
  } else {
    animator.play('idle');
  }
});

hero.onFrameChange = (frame: number) => {
  console.log(`当前帧: ${frame}`);

  // 根据帧触发音效
  if (hero.textures === runTextures && (frame === 1 || frame === 3)) {
    playSound('footstep');
  }

  // 攻击判定帧
  if (hero.textures === attackTextures && frame === 2) {
    checkAttackHitbox();
  }
};

// 播放完成回调
hero.onComplete = () => {
  console.log('动画播放完毕');
};

// 循环回调
hero.onLoop = () => {
  console.log('动画循环');
};

// 手动更新：仅在可见时播放
hero.autoUpdate = false;

app.ticker.add((ticker) => {
  // 仅当在屏幕内时更新动画
  if (hero.x > -100 && hero.x < 900) {
    hero.update(ticker.deltaTime);
  }
});

// 对象池复用：使用 get()/release() 方法管理 AnimatedSprite 实例，
// 避免频繁 new 和 destroy，参考第04章 ContainerPool 模式。

npm install @pixi/dragonbones

import { dragonBones } from '@pixi/dragonbones';

const factory = dragonBones.PixiFactory.factory;
const data = await fetch('/dragonbones/hero_ske.json').then(r => r.json());
const atlasData = await fetch('/dragonbones/hero_tex.json').then(r => r.json());
const image = await Assets.load('/dragonbones/hero_tex.png');

factory.parseDragonBonesData(data);
factory.parseTextureAtlasData(atlasData, image);

const armature = factory.buildArmatureDisplay('Hero');
armature.position.set(400, 500);
armature.animation.play('walk');
app.stage.addChild(armature);

class Character {
  animator: CharacterAnimator;
  sprite: AnimatedSprite;
  facing: 1 | -1 = 1;

  constructor(animator: CharacterAnimator) {
    this.animator = animator;
    this.sprite = animator.view;
  }

  moveRight(speed: number, delta: number) {
    this.sprite.x += speed * delta;
    this.facing = 1;
    this.sprite.scale.x = 1;
    this.animator.play('run');
  }

  moveLeft(speed: number, delta: number) {
    this.sprite.x -= speed * delta;
    this.facing = -1;
    this.sprite.scale.x = -1;
    this.animator.play('run');
  }

  idle() { this.animator.play('idle'); }
  attack() { this.animator.play('attack'); }
}