import * as PIXI from "pixi.js";
// 初始化
let app = new PIXI.Application({
  width: 256,
  height: 256,
  antialias: true, // default: false
  transparent: false, // default: false
  resolution: 1, // default: 1
});

// 更新布局
app.renderer.backgroundColor = 0x061639;
app.renderer.autoResize = true;
app.renderer.resize(512, 512);
document.getElementById("game").appendChild(app.view);

复制成功
复制

// 创建加载器 全局单例
const loader = PIXI.Loader.shared;
// 加载器的第二种方式 可创建多个
// const loader = new PIXI.Loader()
//  加载雪碧图
loader.add("assets/sprites.json");

loader.load((loader, resources) => {
  // 获取雪碧图
  let sheet = resources["assets/sprites.json"];
  // 获取单个精灵
  let addgroup = new PIXI.Sprite(sheet.textures["add-group.png"]);
  addgroup.position.set(0, 0);
  app.stage.addChild(addgroup);

  let test = new PIXI.Sprite(sheet.textures["test.png"]);
  test.position.set(100, 100);
  test.scale.set(0.5, 0.5);
  // 设置原点为中心
  test.anchor.set(.5, .5)
  app.stage.addChild(test);
  // 渲染更新
  app.ticker.add(() => {
    test.rotation += 0.01;
  });
});

// 事件
loader.onProgress.add(() => {}); 
loader.onError.add(() => {}); 
loader.onLoad.add(() => {}); 
loader.onComplete.add(() => {}); 
复制成功
复制

let sheet2 = resources["assets/tuan.json"];
let animatedTuan = new PIXI.AnimatedSprite(
  sheet2.spritesheet.animations["progress"]
);
animatedTuan.position.set(0, 0);
animatedTuan.animationSpeed = 0.167;
animatedTuan.play();
app.stage.addChild(animatedTuan);
复制成功
复制

 // 点击
  animatedTuan.interactive = true;
  animatedTuan.buttonMode = true;
  animatedTuan.on("click", (e) => {
    console.log("clicked", e);
  });
复制成功
复制