pixi.js是一個(gè)極快2D渲染引擎铡溪，他可以幫助我們制作動(dòng)畫待牵，制作游戲馒过。
- 下載安裝
- git安裝
通過命令行創(chuàng)建一個(gè)文件夾 然后cd進(jìn)入后輸入
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>
```
如果可以在控制臺(tái)看到
Pixi.js 4.0.0 - ? WebGL ? http://www.pixijs.com/ ???
那么就代表引入成功了
- 創(chuàng)建renderer和stage
- renderer即渲染器坚俗，就是pixi提供的一個(gè)渲染對(duì)象
renderer.view就是我們所熟悉的canvas標(biāo)簽禽作，可以通過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);// 適應(yīng)全屏幕 renderer.view.style.position = "absolute";
- renderer即渲染器坚俗，就是pixi提供的一個(gè)渲染對(duì)象
renderer.view.style.display = "block";
renderer.autoResize = true;
renderer.resize(window.innerWidth, window.innerHeight);
pixi的渲染器默認(rèn)會(huì)使用WebGL進(jìn)行渲染繪制，因?yàn)樗拥目焖倏醭ィ贿^也可以通過強(qiáng)制設(shè)定使用canvas來渲染繪制
// canvas
renderer = new PIXI.CanvasRenderer(256, 256);
// WebGL
renderer = new PIXI.WebGLRenderer(256, 256);
```
- stage即舞臺(tái) 是pixi的Container對(duì)象 包容了所有需要展示的舞臺(tái)對(duì)象
//Create a container object called the `stage`
var stage = new PIXI.Container();
//Tell the `renderer` to `render` the `stage`
renderer.render(stage);
使用渲染器渲染舞臺(tái)可以將添加到舞臺(tái)的所有可見元素渲染出來
- loader
因?yàn)閜ixi使用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為創(chuàng)建的精靈對(duì)象
也可以用數(shù)組方式來加載
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);
}
添加后必須渲染才可以看到添加后的結(jié)果
- 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"); }
有了這個(gè)接口我們可以非常方便的寫載入進(jìn)度條了
