PIXI.js 前端动画渲染器初体验


概述 :PIXI.js 前端动画渲染器初体验 PixiJS 是一个超快的2D渲染引擎。它自动侦测使用 WebGL 或者 Canvas。开发者无需专门学习 WebGL 就能感受到强大的硬件加速的力量。

 最近突然对canvas绘图有一些特别的兴趣,看了很多库,被pixi的高性能所惊。可到github上搜索获取(官 网),我们先来看看这是什么鬼东西,怎么用?

 官方解释是基于webgl的绘图库。通过canvas来获取webgl操作接口,这与canvas自身绘图api有何不同呢?答案是canvas本身绘图api由于封装层数太多,造成性能低下。首先无论是canvas还是webgl必然都通过操作系统里的opengl工作的。封装层数越多自然运行越慢啦。

 试试手先

 引入js就不说了,然后继续如下操作:

 const app = new PIXI.Application();//创建应用

 document.body.appendChild(app.view);//把应用添加到页面

//把随时要用到图片放到缓存中

 app.loader.add('obj', 'obj.png').load((loader, resources) => {

    // 创建 精灵对象(类似flash元件),初始参数是一个纹理图片

    const obj = new PIXI.Sprite(resources.obj.texture);

    const testobj = new PIXI.Sprite(resources.obj.texture);

    // 精灵的初始位置

    obj.x =0;

    obj.y = app.renderer.height / 2;


    testobj.x = app.renderer.width / 2;

    testobj.y = app.renderer.height / 2;

    // 设置 精灵 的中心

    obj.anchor.x = 0.5;

    obj.anchor.y = 0.5;


    // 把 精灵对象 添加到 舞台 类似 flash的元件

    app.stage.addChild(obj);

    app.stage.addChild(testobj);


    let b = new Bump(PIXI);

    // 这是pixi渲染时会调用的函数,可以把动作写在这里

    app.ticker.add(() => {

         obj.rotation += 0.04;

         if (bunny.x<app.renderer.width-obj.width/2) {

          bunny.x+=1;

         }else{

          obj.x-=1;

          obj.position={x:0,y:obj.y}

         }

         //碰撞

         if(b.hit(obj,testobj)){

          // console.log('碰撞')

         }

     });

    let rectangle =new PIXI.Graphics();//画笔工具,类似canvas画图

// rectangle.lineStyle(4, 0xFF3300, 1);

rectangle.beginFill(0x66CCFF);

rectangle.drawRect(0, 0, 64, 64);

rectangle.endFill();

rectangle.x = 170;

rectangle.y = 170;

app.stage.addChild(rectangle);

        //console.log(app)

});


此外要说明的是 PIXI本身是没有碰撞事件的,需要借助其它库,实际上你可以完全自行做碰撞检测(基于精灵),还有就是如果在本地运行会出现图片调用跨域,最好模拟一个服务器环境(有很多搭建工具的,phpstudy什么的)

 效果如下 :



分类: 学习分享

welcome
Top