H5 2D渲染引擎—Pixi.js简介及小demo

简介

Pixi.js是一个快速的轻量级的2D动画渲染引擎，可以在浏览器里创建出丰富的交互式图形、动画和跨平台的游戏及应用程序等，主打支持硬件GPU渲染的WebGL API，如若浏览器不支持WebGL，Pixi则会回退使用Canvas来进行渲染。

PixiJS的官网地址是：http://www.pixijs.com/

PixiJS的开源地址是：https://github.com/pixijs/pixi.js/tree/master

主要特性

真正的跨平台：Pixi.js是一个可以兼容所有设备的超快H5 2D渲染引擎，并且拥有canvas回调功能的WebGL，实现真正的跨平台。
交互式多点触控：Pixi不仅支持移动和平板设备，还具有完整的多点触控输入识别，让开发者可以发挥自己的能力去挖掘出它所有的潜力。
WebGL过滤器：当使用WebGL时，Pixi允许你使用自己熟悉且现有的过滤器。当然，你也可以使用自己创建的独一无二的过滤器，比如自定位移和半色调效果。
着色和混合模式：对设计师来说，会很喜欢这个，Pixi.js允许用户着色和使用混合模式就像其他常见的视觉包比如Photoshop或Flash。
渲染器自动检测：这个算是Pixi的一大特色，虽然Pixi是主要作为WebGL 2D渲染器而创建的，但仍支持非WebGL平台。其解决方案就是创建一个Canvas回调系统，只需一次编码，Pixi就可无缝管理回调。
简易API：设计直观，易于上手。
资源加载：精灵表单、图形、字体和动画数据等都可通过Pixi.js来加载和处理。
支持精灵表单（Sprite sheet）。

举个例子

下面是一个简单的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="libs/pixi.min.js"></script>
<script>
    var app = new PIXI.Application(800, 600, {
        backgroundColor : 0x92edfb,
        // 背景是否设为透明
        transparent: false
    });
    // 将canvas添加到页面中
    document.body.appendChild(app.view);

    // 创建一个图片精灵
    var sun = PIXI.Sprite.fromImage('img/sun.ico');

    // 设置精灵中心位置
    sun.anchor.set(0.5);

    // 设置精灵在x轴/y轴的位置
    sun.x = app.renderer.width / 2;
    sun.y = app.renderer.height / 2;

    // 将精灵添加到舞台
    app.stage.addChild(sun);

    // 动画更新渲染的监听函数
    app.ticker.add(function(delta) {
        sun.rotation += 0.01 * delta;
    });

</script>
</body>
</html>

效果：舞台上绘制了800px*600px的画布，画布中的图片精灵sun在中心位置旋转。

H5 2D渲染引擎—Pixi.js简介及小demo

猜你喜欢