Search the Community

I want to create a game that can go fullscreen and back to normal via options. The problem is that along with the game sprites, I want the html elements to be scaled up too. I need the html elements to create a hud/ui for my game. I have found some solutions but none is perfect. I can use the phaser buttons and texts so they can scale up too, but I also need input, scroll elements and checkboxes. Checkboxes are easy to make with phaser. Scrolls are a little harder and creating inputs seems completely impossible. Because I also need a pointer/cursor while writing inside the input, and the user must be able to select the text in a "chat" area. I have tried to place the html elements in a "%" way like style="left:20%; top:10%; width:30%; height:5%;". Their size scales up, but their font and border size do not. I have tried to zoom-in elements with css3: element.style.transform = "scale(scaleFactor);" (I can calculate scaleFactor comparing the canvas size between the fullscreen and non-fullscreen mode), but it greatly reduces text quality. Elements positions become inaccurate too. I tried to search for a javascript canvas gui library and I found zebra but it seems it has a lot of bugs. "zebra.min.js" loads with errors unlike my other files; probably because my project is not on a server and I'm accessing my files locally. (Is it worth trying to fix it?) I'm asking for your ideas. I don't know what to do.