More UI and hud creation needed
moayyad

we need a snippet or a tutorial that shows the efficient way to make nice looking UI controls and HUD like Zirma's.

 

trying to figure it out is a headache ,

 

 

thanks  

1 Comment
Gio

I think a tutorial on this would be good, we'll try to write one soon. It's really easy from a technical point of view, but good UI design is generally quite tricky.

 

The technical side is quite simple though: just create all your UI objects on a separate layer and make sure that this layer doesn't move or scale when the camera moves. Also choose a layer number that's lower than anything else in your game.

 

So if your game objects are on layer 10 or greater, for example, you could create your UI on layer 5. Then do:

wade.setLayerTransform(5, 0, 0);

Another thing to keep in mind is that you can set alignments for your SceneObjects. This means that after you create them, you can fix their position relative to the edges of the screen rather than the center, so even when the screen is resized they appear in the correct position. For example, if you want a UI panel to always be on the bottom right of the screen, first you create it like this (positioning it at the bottom-right corner):

var posX = wade.getScreenWidth() / 2 - uiPanelSprite.getSize().x / 2;var posY = wade.getScreenHeight() / 2 - uiPanelSprite.getSize().y / 2;var uiPanel = new SceneObject(uiPanelSprite, null, posX, posY);

Then you make it stick to the bottom-right corner like this:

uiPanel.setAlignment('right', 'bottom');

I hope this helps, but like I said we'll try to find some time for a proper tutorial.

Post a reply
Add Attachment
Submit Reply
Login to Reply