HTML5的Pixi.js怎么使用

这篇文章主要介绍了HTML5的Pixi.js怎么使用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇HTML5的Pixi.js怎么使用文章都会有所收获，下面我们一起来看看吧。

　　Pixi.js 是一款超快的开源 HTML5 2D 渲染引擎，使用带有 Canvas 回调功能的 WebGL。作为 JavaScript 的 2D 渲染器，Pixi 的目标是，可以提供一个快速且轻量级的 2D 库，并能兼容所有设备。此外让开发者无需了解 WebGL，就可以感受到硬件加速的力量。

　　Pixi.js作为一款开源的HTML5 2D渲染引擎，旨在为开发者提供一个快速且轻量级的2D库，并能兼容所有设备。能够兼容所有设备，简单得说也就是跨平台了，其实说到跨平台的开发工具，为数已经不少了，就小编知道的DevStore平台就已经收录很多了。

　　主要特性

　　真正的跨平台：在今天，开发工具跨平台已经不是什么稀奇的事了。不过 Pixi.js 则是一个可以兼容所有设备的超快 HTML5 2D 渲染引擎，并且拥有 Canvas 回调功能的 WebGL，实现真正的跨平台。

　　交互式多点触控：Pixi不仅支持移动和平板设备，还具有完整的多点触控输入识别，让开发者可以发挥自己的能力去挖掘出它所有的潜力。

　　WebGL过滤器：当使用WebGL时，Pixi允许你使用自己熟悉且现有的过滤器。当然，你也可以使用自己创建的独一无二的过滤器，比如自定位移和半色调效果。

　　着色和混合模式：对设计师来说，会很喜欢这个，Pixi.js允许用户着色和使用混合模式就像其他常见的视觉包比如Photoshop或Flash。

　　渲染器自动检测：这个算是Pixi的一大特色，虽然Pixi是主要作为WebGL 2D渲染器而创建的，但仍支持非WebGL平台。其解决方案就是创建一个Canvas回调系统，只需一次编码，Pixi就可无缝管理回调。

　　简易API：设计直观，易于上手。

　　资源加载：精灵表单、图形、字体和动画数据等都可通过Pixi.js来加载和处理。

　　支持精灵表单(Sprite sheet)。

　　Pixi.js在跨平台特性上有什么过人之处呢？

　　它的独特之处在于其拥有了canvas回调功能的WebGL，使之可以兼容所有设备，并且速度会更快。

　　当使用WebGL时，Pixi允许你使用自己熟悉且现有的过滤器。当然，你也可以使用自己创建的独一无二的过滤器，比如自定位移和半色调效果。

　　Pixi不仅支持移动和平板设备，还具有完整的多点触控输入识别，让开发者可以自由发挥自己的能力去挖掘出它所有的潜力。除此之外，Pixi.js还允许用户着色和使用混合模式。

　　但是 Pixi 最大的一个特色要属渲染器自动检测了。虽然 Pixi 是主要作为 WebGL 2D 渲染器而创建的，但依然支持非WebGL平台。其解决方案就是创建一个Canvas回调系统，只需一次编码，Pixi 就可无缝管理回调了。

　　一款产品界面的美观与否，渲染引擎的选择真真是极重要的。

　　部分示例页面

　　快速使用

　　// 创建pixi的stage

　　var stage = new PIXI.Stage(0x222222);

　　// 创建一个渲染

　　var renderer = PIXI.autoDetectRenderer(400, 300);

　　// 添加到页面

　　document.body.appendChild(renderer.view);

　　requestAnimFrame( animate );

　　以上生成了最简单的pixi，下面创建游戏元素：

　　// 创建添加一个素材

　　var texture = PIXI.Texture.fromImage("img/fist.png");

　　// 使用素材创建一个动画元素

　　var bunny = new PIXI.Sprite(texture);

　　// 居中

　　bunny.anchor.x = .5;

　　bunny.anchor.y = .5;

　　// 移动到游戏屏幕中央

　　bunny.position.x = 200;

　　bunny.position.y = 150;

　　stage.addChild(bunny);

　　最后是动画效果代码：

　　function animate() {

　　requestAnimFrame( animate );

　　//添加旋转效果

　　bunny.rotation += 0.1;

　　//添加缩放效果

　　if(bunny.scale.x>=1){

　　scaleflag = 1;

　　}else if(bunny.scale.x<=0.5){

　　scaleflag = 0;

　　}

　　scaleflag?bunny.scale.x -= 0.05: bunny.scale.x +=0.05;

　　scaleflag?bunny.scale.y -= 0.05: bunny.scale.y +=0.05;

　　renderer.render(stage);

　　}

关于“HTML5的Pixi.js怎么使用”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“HTML5的Pixi.js怎么使用”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。