pixi.js学习笔记

程序流程模板

Pixi.js Boilerplate

六连招:

  • staging

  • adding texture

  • setting anchor

  • setting position

  • stage.addChild()

  • rendering with animation

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
33
var renderer = PIXI.autoDetectRenderer(800, 600,{backgroundColor : 0x1099bb});
document.body.appendChild(renderer.view);

// create the root of the scene graph
var stage = new PIXI.Container();

// create a texture from an image path
var texture = PIXI.Texture.fromImage('_assets/basics/bunny.png');

// create a new Sprite using the texture
var bunny = new PIXI.Sprite(texture);

// center the sprite's anchor point
bunny.anchor.x = 0.5;
bunny.anchor.y = 0.5;

// move the sprite to the center of the screen
bunny.position.x = 200;
bunny.position.y = 150;

stage.addChild(bunny);

// start animating
animate();
function animate() {
requestAnimationFrame(animate);

// just for fun, let's rotate mr rabbit a little
bunny.rotation += 0.1;

// render the container
renderer.render(stage);
}

不同框架的封装

React

https://github.com/michalochman/react-pixi-fiber

基础形状

矩形

弧形

圆形

线条

文字

样式

事件

拖动

参考资料

github:

https://github.com/pixijs/pixi.js

API文档:

http://pixijs.download/release/docs/index.html

中文教程:

https://www.bookstack.cn/read/LearningPixi/settingup