首页 > 代码库 > pixijs使用教程--基础篇
pixijs使用教程--基础篇
Pixi.js使用WebGL，是一个超快的HTML5 2D渲染引擎。作为一个Javascript的2D渲染器，Pixi.js的目标是提供一个快速的、轻量级而且是兼任所有设备的2D库。提供无缝 Canvas 回退，支持主流浏览器，包括桌面和移动。 Pixi渲染器可以开发者享受到硬件加速，但并不需要了解WebGL。
在线Demo
Pixi.js的GitHub主页上，列举了很多在线Demo。
GitHub：https://github.com/GoodBoyDigital/pixi.js/
官网： http://www.pixijs.com/
API :http://www.goodboydigital.com/pixijs/docs/
官方教程：http://www.goodboydigital.com/pixi-js-tutorial-getting-started/
https://github.com/GoodBoyDigital/pixi.js 打包下载后，解压，在example里边有23个应用示例。
需要说明的是，有些示例需要使用http才能浏览，也就是说file://的方式有些资源是无法显示的。
=========================================================================
// 创建一个PIXI的实例，并展示出来，通常需要六步
// 1：创建一个舞台
// 2：创建一个画布
// 3：把画布插入DOM中
// 4：创建一个精灵
// 5：把精灵加入画布
// 6：把画布加入舞台
// 名词解释
// 舞台(stage):
// A Stage represents the root of the display tree.
// Everything connected to the stage is rendered
// 所有要渲染的对象都必须连接到舞台中才能被显示出来
// 舞台处于整个树形展示结构的最底层，可以理解为背景
// demo :
// var stage = new PIXI.Stage(0xFFFFFF);
//
// 画布(renderer):
// 选用canvas或webGL进行渲染的一个区域
// demo:
// var renderer = PIXI.autoDetectRenderer(400, 300);
//
// 纹理(texture):
// 可以理解成一种包装图片的结构，它本身不能直接用于显示
// 可以通过精灵用于显示
// demo:
// var texture = PIXI.Texture.fromImage("bunny.png");
//
//精灵(sprite):
// 可以直接用于舞台显示的对象,可以理解为DOM中的element.
// 精灵可以直接用图片创建
// 也可以先通过创建纹理，再于纹理创建精灵
// demo :
// 1：var sprite = new PIXI.Sprite.fromImage(‘assets/image.png‘);
// 2：var texture = PIXI.Texture.fromImage("bunny.png");
// var sprite = new PIXI.Sprite(texture);
// sprite.position.x = 30; //没有单位
// sprite.position.y = 20; // 这就和给element设置样式是一样的道理。
// 关于对精灵的操作，参考官方示例
//
// 事件(event)：
// PIXI库在精灵和舞台上提供了事件,用于交互.
// demo:
// stage.click = function(data){
// var event = data.originalEvent
//
// }
// sprite.click = function(data){
// var event = data.originalEvent
// var target = event.target
// //阻止默认行为,sprite.buttonMode = false;
// event.preventDefault();
//
// }
//
// 此外，还有.mousedown,.mouseover,.mouseout,
// .mousemove,.mouseup ,.mouseupoutside ,
// .touchstart,.touchend,.tap
//
// 需要注意的是对于有事件的精灵，通常需要设置sprite.interactive = true
// 对于作按钮用的精灵，需要设置sprite.buttonMode = true;
// 与DOM的事件不同的是，精灵中的事件，是进行了二次封装的，
// 通常需要用var event = data.originalEvent来与普通dom中的event对象保持一至
// 不过又不完全相同，如data.originalEvent.stopPropagation()就不起作用.
// 关于stopPropagation的问题，我问过pixijs的开发者，他答复说stopPropagation是dom中的概念，在webGL中是没有的，所以不能说是pixi的问题。
// 下面使用PIXI库显示一张图片的简单例示：
//
/**
var stage = new PIXI.Stage();
var renderer = PIXI.autoDetectRenderer(400, 300);
document.body.appendChild(renderer.view);
var sprite = new PIXI.Sprite.fromImage(‘bunny.png‘);
stage.addChild(sprite);
*/
//
// 直接贴出上面的代码，在网页上只能看到漆黑的背景而看不到图片
// 这是因为精灵的创建是异步的，必须等加载完图片之后才能把精灵加入舞台中
//
// 这有两种解决方式：
// 第1种就是不断的去刷新舞台。
// 如:
// requestAnimFrame(animate);
// function animate(){
// renderer.render(stage);
// requestAnimFrame(animate);
// }
// 第2种是在图片加载完成的回调中执行。这仅限于不需要重复刷新的精灵、
// 如：
// sprite.texture.baseTexture.on(‘loaded‘,function(){
// renderer.render(stage);
// })
//
// 在项目中实践的时候发现用基于baseTexture的loaded事件有两个问题
// 1：如果图片加载失败怎么办？
// 2：同时加载多张图片的时候，有些没有触发loaded回调
//
// 经过实践，找到一个更加稳妥的办法
// var img = new Image();
// img.src = http://www.mamicode.com/‘bunny.png‘;
// img.onload = function(){
// var baseTexture = new PIXI.BaseTexture(this);
// var texture = new PIXI.Texture(baseTexture);
// var sprite = new PIXI.Sprite(texture);
// stage.addChild(sprite);
// renderer.render(stage);
// }
//批量加载图片的时候实践证明也是适用的。
//最后，请用localhost://xxxxxx的方式进浏览
细心的比较也许你会发现，我和官方的示例不相同，官方使用了requestAnimFrame( animate )，而然我这里没有用，为什么？因为我只是要显示一张图片而已，没有必要不断的去刷新舞台。requestAnimFrame( animate );这个是在精灵有动画的时候才需要用到。当然，如果不考虑性能，对一张静态的图不断的刷新也没有什么问题。
完整的示例：
var stage = new PIXI.Stage(0xFFFFFF); var renderer = PIXI.autoDetectRenderer(400, 300); document.body.appendChild(renderer.view); var sprite = new PIXI.Sprite.fromImage(‘bunny.png‘); stage.addChild(sprite); sprite.texture.baseTexture.on(‘loaded‘,function(){ renderer.render(stage); }) sprite.interactive = true stage.click = stage.tap = function(data){ console.log(data.originalEvent.target); //alert(‘you hit the stage‘) } sprite.mousedown = sprite.touchstart =function(data){ // stop the default event... data.originalEvent.preventDefault(); this.data =http://www.mamicode.com/ data; this.alpha = 0.9; this.dragging = true; console.log(‘mousedown‘); } sprite.mouseup = sprite.mouseupoutside = sprite.touchend = function(data){ this.alpha = 1 this.dragging = false; // set the interaction data to null this.data = http://www.mamicode.com/null; console.log(‘mouseup‘); }; sprite.mousemove = sprite.touchmove = function(data){ if(this.dragging){ var newPosition = this.data.getLocalPosition(this.parent); this.position.x = newPosition.x; this.position.y = newPosition.y; console.log(‘mousemove‘) renderer.render(stage); } } //requestAnimFrame(animate); function animate(){ renderer.render(stage); requestAnimFrame(animate); }
以上创建的是通过pixi创建静止的精灵，及事件邦定。这个在官方没有找到示例，特补充一下。（或许pixi就是为动画而生的，所以没有考虑这种简单的需求了）
如果需要动画效果的精灵，官方提供了多种方法。这里就不再细述了。我目前正在研究这一块，有兴趣的可以和我一起交流！
pixijs使用教程--基础篇