pixi初探笔记（1）

2017-03-13 本文已影响497人 KedAyA

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>
```

<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提供的一个渲染对象
```
 //Create the renderer
var renderer = PIXI.autoDetectRenderer(256, 256);

//Add the canvas to the HTML document
document.body.appendChild(renderer.view);
```
  renderer.view就是我们所熟悉的canvas标签，可以通过renderer.view.style修改canvas的样式，代码通过原生api将canvas添加到dom中
```
// 适应全屏幕
renderer.view.style.position = "absolute";
```

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);
    }

添加后必须渲染才可以看到添加后的结果

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");
}

有了这个接口我们可以非常方便的写载入进度条了

pixi初探笔记（1）

猜你喜欢

热点阅读