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 🙂
EZGUI main goal is to separate the GUI description/visual aspect from game code.
All gui elements and themes are described in JSON format, which can be stored in separate files keeping the code clean.
The only code you'll need to write is the gui behaviour throught events binding, and if you want, add some animated transitions (EZGUI provide a simplified API for TweenJS).
The library is shiped with two themes, which will be enhanced in future version, those themes are based on kenney UI pack and feathers metalworks theme.
Loading gui component is very simple.
The following code load metalworks theme and create a gui element defined in mainScreenJSON json object
|
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