News

Pointer-controlled UI with Pixi.js

Jam3 developer Elliot Kwan shares how some of Surrogaid’s interactions were created, utilising the 2D WebGL rendering engine Pixi.js

Pointercontrolled-UI-with-Pixijs

Pointercontrolled UI with Pixijs

DOWNLOAD TUTORIALS FILES

The Pixi.js rendering engine

Here we’ll practically examine how some of the interactions in the surrogaid.org site experience were created. Specifically, we’re going to be recreating the logic behind the Hug and Cradle sections of Surrogaid using the Pixi.js rendering engine by Mat Groves (goodboydigital.com). You can download the full Pixi repository via www.pixijs.com and Github, as we’ll be featuring certain assets in our example.

Additional Github assets

Additionally you can visit github.com/jam3/SpriteSheetScrubberTutorial to grab our working assets. The main file from this archive we’re working with is ‘index.html’, alongside of course the ‘Pixi.js’ library source and two files from Pixi’s demo assets. These files are ‘fighter.json’ and the ‘fighter.png’ sprite sheet found within the ‘examples/example 2 – SpriteSheet/’ folder. Lastly we add a PNG button graphic reminiscent of the hug button from Surrogaid.

Setting the stage

First we will need somewhere to put our button and image sequence. We need to create a stage and a renderer variable, and assign them a new stage (with white background) and renderer objects. Afterwards we’ll also want to put the renderers view into the body of index.html. The following code should be added after the asset loading code on line 57 of index.html:

001    var stage  = new PIXI.Stage( 0xFFFFFF );
002    var renderer = new PIXI.autoDetectRenderer( width, height );
003    document.body.appendChild
( renderer.view );

Create your button

Next we create a button to drag around or ‘scrub’ and control the image sequence. The button PNG image is provided so you only need to put the image into the stage. To do this we use PIXI’s Sprite.fromImage() method to make our button image into a sprite and then we can use the stage’s addChild() method to add the button to it.

001    var button = new PIXI.Sprite.fromImage( ‘hug-button.png’ );
002    stage.addChild( button );

Button interaction

To facilitate interaction with our button, we need to add listeners to it so that it knows when it’s being clicked and dragged on. We need to know when the mouse button is pushed down, when it is moved during mouse down, and when the button is released. We use the mousedown, mousemove, mouseup and mouseupoutside callbacks to decide what to do in
each instance:

001    button.mousedown = function(data){
002        this.data = data;
003        this.alpha = 0.8;
004        this.dragging = true;
005    };
006    button.mouseup = button.mouseupoutside = function(data){
007        this.alpha = 1;
008        this.dragging = false;
009        this.data = null;
010    };
011    button.mousemove = function(data){
012        if(this.dragging){
013            var newPosition = this.data.getLocalPosition(this.parent);
014            this.position.x = newPosition.x;
015        }
016    };

Configuring our button

The button won’t be interactive on our stage until we enable it by setting its ‘interactive’ property to ‘true’. We’ll also need to set its anchor.x and anchor.y properties to 0.5 so that it follows our mouse with its centre point. Lastly we adjust our button’s position so that it doesn’t appear in the stage’s top left corner.

001    button.interactive = true;
002    button.anchor.x = button.anchor.y = 0.5;
003    button.position.y = height / 2;

Linking our objects

We now have to link our button and movie clip together. Through a bit of maths we can convert the position of our button and the width of the canvas into a percentage, and use that percentage to determine which frame to show on our movie clip. We’ll put this code in our button.mousemove function so that it only changes while we’re moving the button. Save index.html and test!

001    button.mousemove = function(data){
002        if(this.dragging){
003            var newPosition = this.data.
getLocalPosition(this.parent);
004            this.position.x = newPosition.x;
005            var percentage = this.position.x / width;
006            movie.gotoAndStop( Math.floor( percentage * movie.totalFrames) );
007    }};

Improve your web design skills with Web Designer. Download issues direct from GreatDigitalMags.com or buy print issues from ImagineShop

×