freedev Posted June 26, 2015 Share Posted June 26, 2015 Hello, I need to add some UI elements in a stage of my game (i.e. character creation). I'll start with the "easiest", which is a simple text box where users can type something into. I've done some research and I found that there are two proposed solutions: 1) Use a solution like http://www.zebkit.com/. I tried to integrate Zebra with Phaser without any success, and since I couldn't find an example of someone who successfully done it, I gave up. 2) Use an input element, place it in the DOM, and position it relatively to the canvas using CSS. I manage to do that easily, as well as keep the position of the element relative to the canvas size, using something similar to the following (just some rough code found in an example):var x = this.game.scale.offset.x + (400 * this.game.scale.scaleFactorInversed.x);var y = this.game.scale.offset.y + (250 * this.game.scale.scaleFactorInversed.y);$('#input-test').css("left", x + "px");$('#input-test').css("top", y + "px");But, I'm having issues with scaling. This is my scaling setup:this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;this.scale.windowConstraints.bottom = "visual";this.scale.pageAlignHorizontally = true;Therefore, if I resize the browser, the input element stays at the correct position, but obviously it isn't scaled along with the rest of the game. I thought of a solution (in theory) that would run along with the positioning code and calculate the proportions of the canvas so I would then calculate what the optimal size and font size of the input would be and scale it up or down using CSS, but that seems like an overkill for such a simple thing as an input box. Is there an existing solution for Phaser that I missed? If not, how do you tackle such issues, since I assume that most games require at least some input (e.g. the player's name)? Thanks Link to comment Share on other sites More sharing options...
Budda Posted September 14, 2015 Share Posted September 14, 2015 Did you come up with a solution to your scaling question since posting ? Link to comment Share on other sites More sharing options...
jdnichollsc Posted September 14, 2015 Share Posted September 14, 2015 See my example: http://codepen.io/jdnichollsc/pen/waVMdB Regards Link to comment Share on other sites More sharing options...
kerphi Posted December 3, 2015 Share Posted December 3, 2015 1) Use a solution like http://www.zebkit.com/. I tried to integrate Zebra with Phaser without any success, and since I couldn't find an example of someone who successfully done it, I gave up. I tried too without any success would be great if someone could help it for this solution.Cause the DOM way is problematic, I'm not able to put DOM element in front of Paser canvas in fullscreen mode. It seems only be working with the non-fullscreen mode Link to comment Share on other sites More sharing options...
GrumpyMcGee Posted March 3, 2016 Share Posted March 3, 2016 So, I too have tried to match the two together with no success. It seems they both control cycles of the canvas and can't easily interact. You can however overlay 2 Canvas elements and share data through variables. In this case I am just doing it on create but it could happen on a button click etc. Swap with your own image. I set the x value of the combo box relative to the image. Zebra UI background is transparent. Example: <!DOCTYPE html> <html> <head> <script src="js/phaser.min.js"></script> <script src="js/zebra.min.js"></script> <style type="text/css"> body { background-color: #EEEEEE; width:500px; margin-left:auto; margin-right:auto; text-align:center; } #rty { position:relative; } #asd { z-index: 1; position: absolute; } #qwe { z-index: 2; position: absolute; } </style> </head> <body> <h2>Phaser and Zebra Overlaid</h2> <div id="rty"> <div id="asd"></div> <div id="qwe"> <canvas id="myCanvas" width="500" height="300"></canvas> </div> </div> <script type='text/javascript'> var firstRun = 0; var game = new Phaser.Game(500, 300, Phaser.AUTO, "asd", { preload: preload, create: create }, false); function preload() { game.load.image('pic', 'images/Android.png'); } function create() { var j = game.add.sprite(20, 20, 'pic'); if(firstRun == 0) { firstRun = 1; zebra.ready(function () { eval(zebra.Import("ui", "layout")); var canvas = new zebra.ui.zCanvas("myCanvas"); var root = canvas.root; canvas.setBackground("transparent"); var txt = new zebra.ui.Combo(); txt.setBounds(j.x + 50, 20, 200, 30); root.add(txt); }); } } </script> </body> </html> Link to comment Share on other sites More sharing options...
Recommended Posts