pixi初探笔记（1）

pixi.js是一个极快2D渲染引擎，他可以帮助我们制作动画，制作游戏。

• 下载安装
  • git安装
    通过命令行创建一个文件夹 然后cd进入后输入
    git clone [email protected]:pixijs/pixi.js.git
    然后
    git checkout tags/v4.0.0
    切到4.0.0版本的分支 可以看到所需要的pixi.js文件就在bin下面

```
如果可以在控制台看到
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);
    }

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

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

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