Jikmo Posted September 21, 2014 Share Posted September 21, 2014 I'm trying to make a UI in HTML to display over the game screen. Unfortunately, the intuitive solution, putting a div over the game screen, doesn't seem to work because the div blocks any click events going to Phaser.Below I've posted a modified version of a Phaser example that demonstrates button presses. I've modified the example to place a div over the game screen. The original example can be found here: http://examples.phaser.io/_site/view_full.html?d=buttons&f=action+on+click.js&t=action%20on%20clickDoes anyone know how to successfully put a div over the game screen without blocking input? If not, does anyone know of a good solution for making a UI for Phaser?<!DOCTYPE html><html lang="en-US"> <head> <meta charset="UTF-8"> <title>Div Over Game Test</title> <script src="phaser.min.js"></script> <style> #ui { position : absolute; width : 800px; height : 600px; background-color : transparent; color : #ffffff; } </style> </head> <body> <div id="ui">Game Here</div> <div id="gameDiv"></div> <script> var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create }); function preload() { game.load.spritesheet('button', 'assets/buttons/button_sprite_sheet.png', 193, 71); game.load.image('background','assets/misc/starfield.jpg'); } var button; var background; function create() { game.stage.backgroundColor = '#182d3b'; background = game.add.tileSprite(0, 0, 800, 600, 'background'); button = game.add.button(game.world.centerX - 95, 400, 'button', actionOnClick, this, 2, 1, 0); button.onInputOver.add(over, this); button.onInputOut.add(out, this); } function over() { console.log('button over'); } function out() { console.log('button out'); } function actionOnClick () { background.visible =! background.visible; } </script> </body></html> Link to comment Share on other sites More sharing options...
JakeCake Posted September 21, 2014 Share Posted September 21, 2014 Don't use DOM elements with Phaser, it's slow and not meant to work together. Just place buttons or whatever with a fixed position. That will make them static even if your game-world moves. In phaser you can place clickable text, images, buttons etc. What more does you need that only DOM elements offer? Link to comment Share on other sites More sharing options...
Jikmo Posted September 21, 2014 Author Share Posted September 21, 2014 I'd like to be able to put the UI and the CSS for the UI into separate files though. Inserting buttons into the game means that I need to put both the UI and CSS inside the game's JavaScript. Very ugly and hard to maintain.Anyway, I found a solution. Apparently the fact that a covering div blocks click events to the covered elements is just a feature of HTML. So all I did is make it that the div doesn't cover the whole screen - just the parts that I want to cover with a menu. Link to comment Share on other sites More sharing options...
JakeCake Posted September 21, 2014 Share Posted September 21, 2014 Anyone here would tell you not to mix DOM and Phaser. If you want to keep your code pretty and maintainable, great! That doesn't mean that you have to use CSS & HTML. I think it's more maintainable to have your game work as a stand-alone you can paste into any website instead of having to place divs on top of it at the right places and make sure those elements are not styled outside your styling. Nothing stops you from splitting your javascript into multiple files or create a plugin if you want to make it truly transparent. The ugly and hard to maintain thing would be to think HTML & CSS fits anywhere in a game. But I don't know your project, it might make sense after all. Link to comment Share on other sites More sharing options...
lewster32 Posted September 21, 2014 Share Posted September 21, 2014 Actually Phaser and the DOM can be quite a good idea if done properly. HTML and CSS allow for many very useful things that Phaser does not yet (and may never) support directly such as inputs, media queries (and all the responsive stuff that entails) and so on. Treating Phaser's canvas like a sandboxed area of the page is if anything a rather self-limiting way of approaching this modern web tech and smacks of a bad habit from the earlier days of Flash. austincap 1 Link to comment Share on other sites More sharing options...
Recommended Posts