Pixi.js - 一种二维WebGL 和画布渲染器的 Tizen 应用程序。
PUBLISHED
简介
现今，开发人员正在为各种各样的设备编写越来越多的网页游戏和网页多媒体应用程序。 为了在这些设备上面采用相似的经验，游戏和多媒体开发者们使用rendering引擎，就可以在不需要深究底层代码的情况下，来帮助他们在相对较短的时间内达到最好的結果，而且也不需要关心浏览器的不一致的问题。 在整个网页中，采用redering引擎去利用WebGL的能力的方法将非常流行，而这也是在后闪存时代用来创建卓越的GPU加速项目的普遍做法。
这篇文章描述如何使用 pixi.js 库来创建用WebGL加速的 Tizen web 游戏和其他 Tizen 多媒体应用程序。 这篇文章提供了在 Tizen SDK 2.2.1 上已经测试过的示例游戏应用程序。 这个示例应用程序由两个库创建 － 用于渲染的pixi.js库和用于衡量渲染性能的stats.js库。
准备库
您可以从http://www.pixijs.com下载pixi.js库。
重要 ！
在您开始之前，为了在Tizen上正常地运行版本为1.6.1的pixi.js库，您需要在pixi.js和pixi.dev.js库文件的最后几行做一些小改动。 在最后的call函数里面，需要将 "this" 改成 "window"。 那样就能解决问题，从现在开始，你所有的由 Tizen pixi.js 所驱动的 web 应用程序应该能很好地工作了。
在pixi.js文件中，将下面代码中的“this”改成“window”：
… typeof define&&define.amd?define(b):a.PIXI=b}).call(window); // originally it was .call(this);
在pixi.dev.js文件中，将下面中的“this”改成“window”：
… if (typeof exports !== 'undefined') {
if (typeof module !== 'undefined' && module.exports) {
exports = module.exports = PIXI;
}
exports.PIXI = PIXI;
} else if (typeof define !== 'undefined' && define.amd) {
define(PIXI);
} else {
root.PIXI = PIXI;
}
}).call(window); // originally it was .call(this);
然后，您就能轻松地在Tizen HTML工程文件中包含您的pixi.js或者pixi.dev.js库文件了。
<script src="js/pixi.js"></script>
为 pixi.js 阶段创建画布和基本设置
为了正确地设置 pixi.js 首先你需要在 html 文档中插入一个画布元素并给它一个特定的 id。
<body>
<canvas id="myCanvas">Your browser does not support HTML5 Canvas</canvas>
</body>
然后，您需要在您的主 javascript 文件里面设置 pixi.js 阶段。 要这样做，第一步是通过 gameCanvas javascript 变量来引用你的画布元素。 然后，如果你想要有一个全屏幕画布，你就要从 window.innerWidth 和 window.innerHeight 变量中得到游戏宽度和游戏的高度值，并将它们存储在 gameWidth 和 gameHeight 的变量中。 要设置实际的阶段对象，您需要创建一个 PIXI.Stage 对象，并将背景颜色作为参数提供给它。
现在我们一个pixi.js stage， 但是我们现在还不能在stage上显示任何东西，因为我们没有渲染器。 您需要使用 PIXI.autoDetectRenderer() 函数来设置渲染器，需要向它提供前面创建的 gameWidth、 gameHeight 和 gameCanvas 变量。 Pixi.js 神奇的地方就在于它会自动识别设备是否支持 WebGL。 如果设备不支持WebGL，它就会快速回退到画布模式。
var gameCanvas;
var stage, renderer;
var gameWidth, gameHeight;
gameCanvas = document.getElementById("myCanvas");
gameWidth = window.innerWidth;
gameHeight = window.innerHeight;
stage = new PIXI.Stage(0x000000);
renderer = PIXI.autoDetectRenderer(gameWidth, gameHeight, gameCanvas);在 pixi.js stage 中插入资源
在这以后你要准备好将你的第一个资源放到 pixi.js stage里面。 在 pixi.js 中，你可以把所有类型的资源放在 stage 上面。 从Sprites静态图像开始，MovieClips 动画，到纯 HTML 文本或位图文本，甚至可以将 WebGL 过滤器放在所有这些资源之上。 在这篇文章中，我们将重点介绍如何在pixi stage上放Sprites和文本，以及如何将WebGL过滤器放到一个Sprite上。
为了创建一个 pixi.js Sprite 首先我们需要把这个 Sprite 的纹理加载到浏览器里面。 要执行此操作，你需要使用 PIXI.Texture.fromImage() 函数。 您需要提供图像的路径作为参数。 提供的图像文件可以是 JPG 或 PNG 格式。 下一步就是从加载的纹理中创建 pixi.js Sprite。 然后创建一个新的PIXI.Sprite()，并把加载的纹理作为参数传递给它。 为了将我们的 Sprite 放到 stage 上面的最后一件事，就是将它通过stage对象中的 addChild() 方法加入到 stage 并将sprite参数传递给它。
var ship_texture;
var ship_sprite;
ship_texture = PIXI.Texture.fromImage("images/ship.png");
ship_sprite = new PIXI.Sprite(ship_texture);
stage.addChild(ship_sprite);
将文本插入到 pixi.js stage 的方法几乎相同。 您只需要创建一个 pixi.js 文本对象，并将其作为显示所需的字符串中的第一个参数传递，至于第二个参数，您可以传递一个任意的 styling 对象，该对象具有字体类型和大小，填充的颜色和对齐类型。 另外，可能要为文本制作画笔，并指定画笔的颜色和厚度。 你也可以为文本打开环绕功能，并指定环绕的宽度。 但在我们的例子中为了简化起见，我们将只会去指定字体大小和类型，文本颜色以及对齐方式。 最后一步，就是通过 addChild() 方法把我们的文本放到 stage 上面。 值得一提的是，您可以通过使用 .position.x 和 .position.y 参数将资源放到 stage 上面，然后直接将其应用到所有的 pixi 对象中。
var example_text = new PIXI.Text("Example text!", {font:"16px Arial", fill:"white", align:"center"});
example_text.position.y = 100;
example_text.position.x = 100;
stage.addChild(example_text);渲染主循环
目前我们已经准备好了我们的 pixi.js stage 和渲染器，并且我们已经把两个资源也放到了 pixi stage 上面。 Sprite 和 "Example text!" 文本。 但当您运行该代码时，你会看到什么都没有发生。 为了让stage 开始渲染，我们需要为 pixi.js 做一个渲染循环。 我们在 draw() 函数中定义渲染循环，然后我们只调用该函数一次。 当然，你可以自定义该函数的名字。 在函数内部，我们需要告诉我们的渲染器来渲染 stage。 您可以这样来做，即通过传递一个 pixi stage 对象参数给渲染器对象的渲染方法。 由于我们想要渲染器一直去渲染 stage，而不只是渲染一次，我们就需要执行一个 requestAnimationFrame() 函数，并将我们的 draw() 函数作为参数传递给它。 此函数将不断调用 draw() 函数，并将提供最好的渲染性能。 您可以在draw()函数中放移动，Sprites的动态变化，MoveClips，文本对象等处理。
draw();
function draw() {
// Your code goes here!
renderer.render(stage);
requestAnimationFrame(draw);
}
使用过滤器
Pixi.js可以使用 WebGL过滤器为您的游戏或多媒体应用制作出色的效果。 实际上，pixi.js 有许多内部过滤器，您可以使用这些内部过滤器来增强您的 web 应用程序。 您可以在本文附加的演示游戏应用程序中看到它们。 其中之一是 PixelateFilter()。 现在，我们将展示如何把 PixelateFilter() 放在我们的 Sprite 资源中，让它看起来更像一个 8位游戏。 第一件事是创建一个 PixelateFilter() 对象。 然后你需要创建一个带有宽度和高度参数的 PIXI.Point()。 这些被传给 PIXI.Point() 的参数表示了 PixelateFiler() 的大小，决定了单个像素的宽度和高度，这些像素是在新被像素化的 Sprite 中。 要将过滤器应用到我们的 Sprite，我们需要为Sprite过滤器数组添加一个保存PixelateFilter()对象的变量。 从这一刻开始，我们的 Sprite 的外观将会比较像 8比特。
var pixelateFilter = new PIXI.PixelateFilter();
pixelateFilter.size = new PIXI.Point(5, 5);
ship_sprite.filters = [pixelateFilter];
在游戏中使用PixelateFilter()的例子。
在这里你可以看到一些其他 pixi.js WebGL 过滤器的操作。 在这篇文章提供的演示游戏应用程序中，您可以随意使用它们。 此外，您也可以使用 PIXI.AbstractFilter 作为基类，来为 pixi.js 编写您自己的 WebGL 过滤器。
您可以在这里找到相关文件和更多有关于库的信息：
http://www.goodboydigital.com/pixijs/docs/
http://www.pixijs.com/resources/
http://www.pixijs.com/examples/
