By
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 }};
