EZGUI : The missing GUI Library for Pixi.js and Phaser.io
Today we are glad to introduce EZGUI, a GUI library to simplify GUI creation for PIXI.js and Phaser.io game developers. first, take a look at those cool examples 🙂

1 2 3 4 5 6 7 8 9 10 |
// EZGUI.Theme.load(['../../assets/metalworks-theme/metalworks-theme.json'], function () { var mainScreen = EZGUI.create(mainScreenJSON, 'metalworks'); //bellow line is only needed if we are using Pixi. //for phaser the gui element is implicitely added to the rendering queue stage.addChild(mainScreen); }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
// var mainScreenJSON = { id: 'myWindow', component: 'Window', header: { position: { x: 0, y: 0 }, height: 40, text: 'Header' }, draggable: true, position: { x: 0, y: 0 }, width: 500, height: 500, layout: [1, 3], children: [ null, { id: 'button1', component: 'Button', position: 'center', text: 'my Button', width: 200, height: 80 } ] } |
the button is in the center because we defined a layout of 1 horizontal element per 3 vertical elements, the first (top) child is null, the middle child is our button and we set its position to 'center'.if we create a gui element using the above JSON, EZGUI will give access to elements with IDs.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
// //we can access to the main windows throught EZGUI.components.myWindow //we can access to the button throught EZGUI.components.button1 //setting event can be done like this EZGUI.components.button1.on('click', function(event, me) { //event represent the original Pixi or Phaser event //me represent the element receiving the event (here the button) }); EZGUI.components.button1.on('mousedown', function(event, me) { //... }); EZGUI.components.button1.on('mouseup', function(event, me) { //... }); |
let's take a look at real example
the interface bellow is intercative. The source code to achieve this example in both Pixi and Phaser is as follow All Gui screens are defined in this json file Let's initialize the library (Pixi or Phaser)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
// // common variables var gameWidth = 400; var gameHeight = 640; //if you use phaser -------------------------------------------------- var game = new Phaser.Game(gameWidth, gameHeight, Phaser.AUTO, '', { preload: preload, create: create }); function preload() { //... your preload } function create() { //... your create } //if you use pixi -------------------------------------------------- var renderer = PIXI.autoDetectRenderer(appWidth, appHeight); renderer.backgroundColor = 0xffffff var stage = new PIXI.Container(); document.body.appendChild(renderer.view); requestAnimationFrame(animate); function animate() { requestAnimationFrame(animate); renderer.render(stage); } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
// var mainScreen; var secondScreen; var thirdScreen; EZGUI.Theme.load(['../../assets/metalworks-theme/metalworks-theme.json'], function () { mainScreen = EZGUI.create(mainScreenJSON, 'metalworks'); secondScreen = EZGUI.create(secondScreenJSON, 'metalworks'); secondScreen.visible = false; thirdScreen = EZGUI.create(thirdScreenJSON, 'metalworks'); thirdScreen.visible = false; // only add screens to stage if you are using Pixi // remove the bellow three lines if you use phaser stage.addChild(mainScreen); stage.addChild(secondScreen); stage.addChild(thirdScreen); //this function will define the GUI behaviours setupGUI(); }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
// function setupGUI() { EZGUI.components.btNext1.on('click', function () { secondScreen.position.x = gameWidth; secondScreen.visible = true; mainScreen.animatePosTo(-gameWidth, mainScreen.position.y, 800, EZGUI.Easing.Back.Out, function () { mainScreen.visible = false; }); secondScreen.animatePosTo(0, secondScreen.position.y, 800, EZGUI.Easing.Back.Out, function () { }); }); EZGUI.components.btPrev2.on('click', function () { mainScreen.position.x = -gameWidth; mainScreen.visible = true; secondScreen.animatePosTo(gameWidth, secondScreen.position.y, 800, EZGUI.Easing.Back.Out, function () { secondScreen.visible = false; }); mainScreen.animatePosTo(0, mainScreen.position.y, 800, EZGUI.Easing.Back.Out, function () { }); }); EZGUI.components.btNext2.on('click', function () { thirdScreen.position.x = gameWidth; thirdScreen.visible = true; secondScreen.animatePosTo(-gameWidth, secondScreen.position.y, 800, EZGUI.Easing.Back.Out, function () { secondScreen.visible = false; }); thirdScreen.animatePosTo(0, thirdScreen.position.y, 800, EZGUI.Easing.Back.Out, function () { //dlg1.visible = false; }); }); EZGUI.components.btPrev3.on('click', function () { secondScreen.position.x = -gameWidth; secondScreen.visible = true; thirdScreen.animatePosTo(gameWidth, thirdScreen.position.y, 800, EZGUI.Easing.Back.Out, function () { thirdScreen.visible = false; }); secondScreen.animatePosTo(0, secondScreen.position.y, 800, EZGUI.Easing.Back.Out, function () { }); }); } |
3 Comments