Pixi.js 超快 HTML5 的 2D webGL Canvas 游戏动画渲染引擎 - 文章教程

Pixi.js 超快 HTML5 的 2D webGL Canvas 游戏动画渲染引擎

发布于 2019-07-16 字数 5295 浏览 2857 评论 0

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

Pixi.js 超快 HTML5 的 2D webGL Canvas 游戏动画渲染引擎

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

Pixi.js 超快 HTML5 的 2D webGL Canvas 游戏动画渲染引擎

主要特性

  • 真正的跨平台:在今天,开发工具跨平台已经不是什么稀奇的事了。不过 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);
}

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

猫性小仙女

文章 1 评论 0

qq_VO6LhT

文章 0 评论 0

猿舌电影

文章 0 评论 0

7556275422

文章 0 评论 0

YYQ_139

文章 0 评论 0