Fixed top menu/ stats bar in an isometric game

Hey, I wanted to create a fixed stats bar in my isometric game. I mean to say, a stats bar fixed at the top and does not scale on mouse zoom. Should I do it in the canvas outside of my wade app with postion fixed in css or is there a way to add a scene object always fixed at top and does not scale.

I noticed Zirma has a resource stats bar on top and its dialog box does is also fixed. Also the action points is fixed too. I want similar behaviour.

May I know how I can achieve that?

All 6 Comments

Hi Prajwal

The easiest way is to create a separate layer for your UI. You want it to appear on top of your isometric layer (25 by default), so it has to be a number lower than 25. I usually use layer 5 for my UI, for no particular reason (any number < 25 would work).

Then set both its Scale and Translate properties to 0

It is also possible to do this programmatically in code if you are not using the editor. In that case, make sure that you are doing it after loading all your scenes, otherwise the data in the scene file may override your settings:

wade.setLayerTransform(5, 0, 0);

Hey Gio,

I have been trying to set the layer 5 scale and translate to 0 and 0, but the following happens.

The scene object which I intend to use as toolbar starts reducing in size and is not visible as the value tends to 0 and also when I set the translate value to 0, it moves above the screen. I even tried to use the snippet instead of doing this in the editor and this makes the scene object invisible.

Am I missing something here? I'm just adding a procedural square as the sprite for scene object but it still zooms/ scales on zooming with the mouse. I'm using the snippet mouse wheel to zoom.js for handling the zooming.


What is the value of the position property of your object?  

When Translate is set to 0, a position of (0, 0) should make your object always appear at the center of the screen, regardless of how you move the camera.

Super thanks for the quick reply Gio. Yes, after I set the position to (0,0) it is at the center of the screen and fixed. Lastly if you don't mind, may I know how to move it to fixed top from center?


You'll want to do two things:

1. Position your object where you want

2. Tell it to stay there when the window is resized

To do #1:

myObject.setPosition(0, myObject.getSprite().getSize().y/2 -wade.getScreenHeight()/2);

And to do #2:

myObject.setAlignment('center', 'top');

This last bit means that when the window is resized, the distance between the object and the center top point of the window should not change.

Thanks Gio! Exactly working the way I intended it to. Really appreciate it!

Post a reply
Add Attachment
Submit Reply
Login to Reply