pixi.js ¶

安装 ¶

yarn add pixi.js

复制成功

1
2

起步 ¶

<div id="game"></div>
复制成功

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);

复制成功

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

预览 ¶

雪碧图制作 ¶

https://www.codeandweb.com/texturepacker/tutorials/how-to-create-sprite-sheets-and-animations-with-pixijs5

应用雪碧图 ¶

// 创建加载器 全局单例
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(() => {}); 
复制成功

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

预览1 ¶

精灵应用简单动画 ¶

生成雪碧图tuan.json的精灵图格式

progress_01.png
progress_02.png
progress_03.png
progress_04.png

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);
复制成功

1
2
3
4
5
6
7
8

预览2 ¶

添加事件 ¶

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

1
2
3
4
5
6

预览3 ¶

插件 ¶

bump 一个为了游戏准备的完整的2D碰撞函数集。
tink 拖放, 按钮, 一个通用的指针和其他有用的交互工具集。
charm 给Pixi精灵准备的简单易用的缓动动画效果。
dust 创建像爆炸，火焰和魔法等粒子效果。
sound一个加载，控制和生成声音和音乐效果的微型库。包含了一切你需要添加到游戏的声音。