pixi.js ¶
安装 ¶
yarn add pixi.js
复制成功
1
2
2
起步 ¶
<div id="game"></div>
复制成功
1
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
预览 ¶
雪碧图制作 ¶
应用雪碧图 ¶
// 创建加载器 全局单例 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
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
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
2
3
4
5
6