Pixi.js – a 2D WebGL and canvas renderer for Tizen applications.

PUBLISHED 27 Jul 2015

Introduction

Nowadays more and more web games and web multimedia applications are being written by developers for plethora of devices. In order to maintain a seamingless experience between those devices, game and multimedia developers use rendering engines which help them achieve the best results in a relatively short time, without digging into low level code and surpassing the browser inconsistencies. It is very popular throughout the web to use rendering engines utilizing WebGL capabilities, which are commonly used in the post Flash era to create outstanding, GPU accelerated projects.

This article describes how to use the pixi.js library for building WebGL accelerated Tizen web games and other Tizen multimedia applications. A sample game application is provided with this article tested on the Tizen SDK 2.2.1. The sample application was built using two libraries - pixi.js for rendering and stats.js for rendering performance measurement.

Library preparation

You can download pixi.js from the http://www.pixijs.com.

IMPORTANT!

Before you start, in order to run the pixi.js library version 1.6.1 on Tizen properly, you need to make a small change in the last lines of both the pixi.js and pixi.dev.js library files. In the final call function just change the “this” word to the “window” word. That should solve the problem and from now all your Tizen pixi.js driven web applications should work like a charm.

In the pixi.js file change "this" to "window" here:

… typeof define&&define.amd?define(b):a.PIXI=b}).call(window);  // originally it was .call(this);

In the pixi.dev.js file change "this" to "window" here:

… 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);

After that you can easily include your pixi.js or pixi.dev.js library file in the Tizen HTML project file.

<script src="js/pixi.js"></script>

Creating the canvas and a basic setup for the pixi.js stage

In order to setup pixi.js properly first you need to insert a canvas element in your html document and give it a specific id.

<body>
       <canvas id="myCanvas">Your browser does not support HTML5 Canvas</canvas>
</body>

Then you need to setup the pixi.js stage inside your main javascript file. To do so, the first step is to reference your canvas element with the gameCanvas javascript variable. Then if you want to have a full screen canvas you should get your game width and game height values from the window.innerWidth and window.innerHeight variables and store them in the gameWidth and gameHeight variables. To setup the actual stage object you need to create a PIXI.Stage object and provide it with a background color as a parameter.

At this point we have a pixi.js stage but we can’t show anything on it because we lack a renderer which will actually show something on our stage. To setup the renderer you need to use the PIXI.autoDetectRenderer() function and provide it with the earlier created gameWidth, gameHeight and gameCanvas variables. The magic of pixi.js is that it will automatically recognize if the device it is running on has support for WebGL or not. If not, then it will make a quick fallback to the canvas mode.

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);

Inserting assets on the pixi.js stage

After that you are ready to put your first assets on the pixi.js stage. In pixi.js you can put all types of assets on the stage. Starting from static images called Sprites, through animations called MovieClips, ending up with plain HTML text or with bitmap text and even putting WebGL filters on top of all that. In this article we will focus on putting on our pixi stage Sprites and text and putting a pixi.js WebGL filter on one Sprite.

In order to create a pixi.js Sprite first we need to load into the browser the texture for that Sprite. To perform that operation you need to use the PIXI.Texture.fromImage() function. As a parameter you need to provide the path to the image. The provided image file can be in JPG or PNG format. Having done that the next step is to create the pixi.js Sprite from the loaded texture. To accomplish that create a new PIXI.Sprite() and as a parameter pass in the loaded texture. The last thing to do in order to put our Sprite on the stage is to actually add it to the stage by using the addChild() method on the stage object and passing our sprite as a parameter.

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);

Almost the same scheme goes for inserting text into the pixi.js stage. You just need to create a pixi.js text object and as a first parameter pass in the desired string to be displayed on the stage and as a second parameter you can pass an optional styling object with values for font type and its size, fill color and align type. Also there is a possibility to make a stroke for the text, specify its color and thickness. You can also turn on word wrapping for the text and even specify the width of the wrapping. But to make things simple in our example we will just specify the font size and type, text color and align mode. The last step is to put our text on the stage with the addChild() method. Worth mentioning is that you can position your assets on the stage with the usage of .position.x and .position.y parameters applying them directly to all of the pixi objects.

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);

The main render loop

As for now we have prepared our pixi.js stage and renderer, we have put two assets on the pixi stage. A Sprite and our “Example text!” text. But when you run the code you will see that nothing happens. In order to make our stage actually render we need to make a render loop for pixi.js. We define the render loop in the draw() function and then we call that function only once. You can of course give it your own name. Inside the function we need to tell our renderer to render the stage. You do that by passing as an argument the pixi stage object into the render method of the renderer object. As we want our rendering function to render the stage all the time, not once, we need to start a requestAnimationFrame() function and pass into it as a parameter our draw() function. This function will call continuously our draw() function and will provide the best rendering performance. The draw() function is also the place where you can put any movement, dynamic changes of Sprites, MoveClips, text objects, etc.

draw();

function draw() {

     // Your code goes here!             

        renderer.render(stage);            
        requestAnimationFrame(draw);
}

Using filters

Pixi.js can use WebGL filters to help you in making of many outstanding effects for your games or multimedia applications. Actually pixi.js has many built in filters that you can use for enhancing your web applications. You can see them live in the attached game demo application provided with this article. One of them is the PixelateFilter(). We will now show how to put the PixelateFilter() on our Sprite asset to give it a more 8-bit like game look. The first thing to do is to make a PixelateFilter() object. Then you need to create a PIXI.Point() with width and height as parameters. These parameters assigned as a PIXI.Point() to the size property of the PixelateFilter() will determine the width and height of the single pixel of the new pixelised Sprite. To apply the filter to our Sprite, we need to add the variable holding the PixelateFilter() object to the filters array of our Sprite. From this moment on our Sprite will have a 8-bit like appearance.

var pixelateFilter = new PIXI.PixelateFilter();
    pixelateFilter.size = new PIXI.Point(5, 5);
    ship_sprite.filters = [pixelateFilter];

Here is an example of using a PixelateFilter() in the demo game.

And here you can see some other pixi.js WebGL filters in action. You can play around with them in the demo game application provided with this article. Also you can write your own WebGL filters for pixi.js using the PIXI.AbstractFilter class as a base class.