mrSully Posted June 17, 2014 Share Posted June 17, 2014 I am having a problem getting Phaser to use Buttons and implement their click features when I include my CSS style sheet. I am guessing that it has to do with containers and positioning but would like some help as I have been stuck on this for several hours. The code for my php index page is below: <html> <head> <title>Border Test</title> <script type="text/javascript" src="globals.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="phaser.min.js"></script> <?php if(!isset($_SESSION['player'])) { echo "<script type='text/javascript' src='prompt.js'></script>\n"; } ?> </head> <body> <div id="border"> <canvas id="surround" width="1350" height="600"></canvas> </div> <script type="text/javascript" src="borderHandle.js"></script> <div id="game"> </div> </body> </html> The code for the globals is: var WIDTH = 1200;var HEIGHT = 530; The code for the CSS is: #border { position: absolute; top: 0; left: 0; z-index: 1000;} #game { position: absolute; top: 30; left: 75; z-index: 0;} and finally the code for BorderHandle is: var canvas = document.getElementById('surround'), context = canvas.getContext('2d'); draw_back(); function draw_back() { back_image = new Image(); back_image.src = 'imgs/border.png'; back_image.onload = function(){ context.drawImage(back_image, 0, 0); } } The code works perfectly fine for the button clicks when i remove the style sheet, but when I include the style sheet, the buttons appear and the actionOnClick function does nothing and the image will not change. Any advice or help would be greatly appreciated and thank you all in advance! Link to comment Share on other sites More sharing options...
lewster32 Posted June 17, 2014 Share Posted June 17, 2014 The problem appears to be the fact that the border element is positioned above the Phaser canvas, so you're clicking on it instead of the canvas. HTML works in rectangles, and just because something is transparent doesn't mean it ignores clicks. If you absolutely have to have the border positioned over the top of the game, try adding "pointer-events: none;" to the CSS for the border element; though beware - this will not work on all browsers. The alternative is to create four (for just the sides) or nine (for sides + corners) separate elements and position them around the game canvas. MichaelD 1 Link to comment Share on other sites More sharing options...
mrSully Posted June 17, 2014 Author Share Posted June 17, 2014 This was just the insight I needed to move forward! Thank you very much. Due to how the border will look upon completion, it will actually cover some of the play area. Because of this, I do need it to be located "on top" of the game area. However, I am considering a way to alter the z-index of the individual buttons or just the backgrounds. Nothing within the game will ever be between the border and the background and need to be clicked on. So if I can simply make the background fall below the border, but have the rest of the game above the border, I think it could work out very well. What are your thoughts on that? Link to comment Share on other sites More sharing options...
clark Posted June 17, 2014 Share Posted June 17, 2014 @Lewster32Do you know why this problem would occur without borders? We have resized the canvas with CSS. But the hitzones for those buttons are unchanged. Link to comment Share on other sites More sharing options...
mrSully Posted June 17, 2014 Author Share Posted June 17, 2014 I believe the problem occurs only because the z-index leaves the game itself behind the screen where you click, as mentioned by lewster. I have worked on it shortly and changed the z-index of the background and came up with another question. I was able to get the buttons to work and the background to move but now the background is beneath the game itself because I used an entirely separate javascript file for the background and actually tried to create two instances of the game one on top of the other. It is not working out well for me. My question now is: is there a way for the game update function to update javascript variables outside of the Phaser game unit? For example, If I create a canvas and make the background separately, is there a way to move the background for the scroll effect through update? Link to comment Share on other sites More sharing options...
lewster32 Posted June 17, 2014 Share Posted June 17, 2014 You shouldn't be creating two separate instances of Phaser - this will almost certainly cause major problems. If you need a border to overlap, you're either going to have to use the pointer-events CSS method, or fake it by placing the parts of the border which overlap into the Phaser instance as images, and line them up with the bits that lie outside of the canvas. Remember that Phaser does not use the DOM, it uses a single canvas element, which is akin to a single flat image, and all of its sprites, images and so on are drawn onto that flat canvas. You cannot thus use z-index to move parts of your game forwards and backwards within the document. As for your other question, you still have full control of everything outside of Phaser at any point; in update, render or wherever. You can call jQuery inside Phaser or any other library or standard JavaScript thing you'd do anywhere else. Link to comment Share on other sites More sharing options...
mrSully Posted June 18, 2014 Author Share Posted June 18, 2014 Thank you again! Lastly, my final thought would be to create the rest of the game as usual but handle the buttons that will be clickable outside of the phaser game code and create them either in the php document itself or via a separate javascript document that will place them on the page in the appropriate location above all other layers (and remove them accordingly if necessary.) Any potential problems I would run into with this? thank you all again for your time and help by the way! Link to comment Share on other sites More sharing options...
lewster32 Posted June 18, 2014 Share Posted June 18, 2014 No this is actually a very sensible (and often preferred) way to do it - as you can then use CSS styling and so on. mrSully 1 Link to comment Share on other sites More sharing options...
mrSully Posted June 18, 2014 Author Share Posted June 18, 2014 I find likes to be the way of truly saying thank you for your time, so there you go I'll make a post at some point when my game is where I want it to be Link to comment Share on other sites More sharing options...
zenedee Posted April 30, 2015 Share Posted April 30, 2015 tryt this .....CSS Positioning samples Zene Link to comment Share on other sites More sharing options...
Recommended Posts