GUI sidebar

[Partsu]

I'm planning on making a social sidebar for my game. On it you could see the other players names and stats. It would also have some small interactive things that are not directly related to the game. The sidebar would take about 1/4 of the right side of the game:

 

I'm not quite sure how this should be done.

 

1. Separate HTML element outside the canvas? This seems to be a pain to deal with when scaling the game. The game canvas has trouble scaling automatically when it is set to float. And the current version (2.2.2) can't seem to scale vertically if the game is inside a div.

 

2. DOM over canvas. I have not yet tried this but as I understand, it would mess up the game world a little bit (center is no longer the actual center of the visible game area). Also, the positioning would have to be constantly corrected if the automatic scaling is used?

 

3. Some other method?

 

The game is supposed to work on desktop and mobile devices. I would probably want to even hide the sidebar on mobile phones with small screen. I'm using SHOW_ALL scaling for the game, so the sidebar has to be able to adjust itself.

[Partsu]

Well, I think the first option might actually work just fine.

 

HTML:

<div>    <aside id="social">        ...    </aside>    <div id="game"></div></div>

CSS:

#game {    margin-right: 25%;}#social {    float: right;    height: 100%;    width: 25%;}

This way I have a sidebar of 25% at all times and I can even hide/unhide it if I want to:

var g = document.getElementById("game"),    s = document.getElementById("social");g.style["margin-right"] = "0px";s.style["display"] = "none";

The only problem is the automatic vertical scaling, which is currently broken (http://www.html5gamedevs.com/topic/11556-phaserscalemanagershow-all-broken/)?