程序流程模板
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);
var stage = new PIXI.Container();
var texture = PIXI.Texture.fromImage('_assets/basics/bunny.png');
var bunny = new PIXI.Sprite(texture);
bunny.anchor.x = 0.5; bunny.anchor.y = 0.5;
bunny.position.x = 200; bunny.position.y = 150;
stage.addChild(bunny);
animate(); function animate() { requestAnimationFrame(animate);
bunny.rotation += 0.1;
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