pixi.js是一个极快2D渲染引擎，他可以帮助我们制作动画，制作游戏。
- 下载安装
- git安装
通过命令行创建一个文件夹 然后cd进入后输入
git clone git@github.com:pixijs/pixi.js.git
然后
git checkout tags/v4.0.0
切到4.0.0版本的分支 可以看到所需要的pixi.js文件就在bin下面<!doctype html>
- git安装
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
<script src="../pixi.js/bin/pixi.js"></script>
</body>
<script type="text/javascript">
var type = "WebGL"
if(!PIXI.utils.isWebGLSupported()){
type = "canvas"
}
PIXI.utils.sayHello(type)
</script>
</html>
```
如果可以在控制台看到
Pixi.js 4.0.0 - ✰ WebGL ✰ http://www.pixijs.com/ ♥♥♥
那么就代表引入成功了
- 创建renderer和stage
- renderer即渲染器，就是pixi提供的一个渲染对象
renderer.view就是我们所熟悉的canvas标签，可以通过renderer.view.style修改canvas的样式，代码通过原生api将canvas添加到dom中//Create the renderer var renderer = PIXI.autoDetectRenderer(256, 256); //Add the canvas to the HTML document document.body.appendChild(renderer.view);// 适应全屏幕 renderer.view.style.position = "absolute";
- renderer即渲染器，就是pixi提供的一个渲染对象
renderer.view.style.display = "block";
renderer.autoResize = true;
renderer.resize(window.innerWidth, window.innerHeight);
pixi的渲染器默认会使用WebGL进行渲染绘制，因为他更加的快速，不过也可以通过强制设定使用canvas来渲染绘制
// canvas
renderer = new PIXI.CanvasRenderer(256, 256);
// WebGL
renderer = new PIXI.WebGLRenderer(256, 256);
```
- stage即舞台 是pixi的Container对象 包容了所有需要展示的舞台对象
//Create a container object called the `stage`
var stage = new PIXI.Container();
//Tell the `renderer` to `render` the `stage`
renderer.render(stage);
使用渲染器渲染舞台可以将添加到舞台的所有可见元素渲染出来
- loader
因为pixi使用WebGL在GPU渲染图片 所以需要格式化到GPU能处理的格式 所以需要loader的api来加载到cache中
PIXI.loader
.add("images/anyImage.png")
.load(setup);
function setup() {
var sprite = new PIXI.Sprite(
PIXI.loader.resources["images/anyImage.png"].texture
);
}
sprite为创建的精灵对象
也可以用数组方式来加载
PIXI.loader
.add([
"images/imageOne.png",
"images/imageTwo.png",
"images/imageThree.png"
])
.load(setup);
- 展示精灵
var stage = new PIXI.Container(),
renderer = PIXI.autoDetectRenderer(256, 256);
document.body.appendChild(renderer.view);
//Use Pixi's built-in `loader` object to load an image
PIXI.loader
.add("images/cat.png")
.load(setup);
//This `setup` function will run when the image has loaded
function setup() {
//Create the `cat` sprite from the texture
var cat = new PIXI.Sprite(
PIXI.loader.resources["images/cat.png"].texture
);
//Add the cat to the stage
stage.addChild(cat);
//Render the stage
renderer.render(stage);
}
添加后必须渲染才可以看到添加后的结果
- loading
PIXI.loader .add([ "images/one.png", "images/two.png", "images/three.png" ]) .on("progress", loadProgressHandler) .load(setup); function loadProgressHandler(loader, resource) { //Display the file `url` currently being loaded console.log("loading: " + resource.url); //Display the precentage of files currently loaded console.log("progress: " + loader.progress + "%"); //If you gave your files names as the first argument //of the `add` method, you can access them like this //console.log("loading: " + resource.name); } function setup() { console.log("All files loaded"); }
有了这个接口我们可以非常方便的写载入进度条了
