Dynamic HUD

[RNull]

Hello guys,

So I keep progressing with my game. I freezed the new features development until this week to consolidate networking ( which is the hardest part ), now that I feel I am in a good point I am continuing. I am about to implement the inventory system which is this weeks plan, however I believe I will have some difficulties with the GUI elements positioning. For the health bar and mana bar I have done a temporary positioning using margin and padding but definitely it doesn't feel as the correct solution.

How would I approach adding and removing skills for example from the skill bar. It must be responsive, also I am using babylon gui library. Any thoughts would be highly appreciated, thanks!

Best Regards,
RelativeNull.

[Wingnut]

Hi RN!  Great questions!  Babylon GUI is rather new, so there are not many people who have done "advanced positioning" with BABYLON GUI.  I am still looking for a way to put two stackPanels side-by-side within a container... and I have been lightly-working on it... for almost 2 months!  I'll find out how, or die trying. 

But don't be discouraged.  Deltakosh, the author of BAB-GUI... is still developing features and tweaks, and others are doing demented experiments and trying weird things, just like YOU are about to do.

Perhaps the wise thing... is to make ALL your attributes at the start of the "panel making", but then set most of them control.isVisible = false;  Then simply make them visible... WHEN the player attains that skill/attribute. 

A good question might be... "Does a control that is set .isVisible = false... continue to use vertical space in a container or stackPanel?"

If they DO, then pre-installing ALL of them... will suck.  But you can probably add/remove controls from containers or stackPanels, too.  Still, perhaps CREATE them all, first thing.  Just keep them invisible and/or don't add them to an .isVisible stackpanel or container... YET. 

I think addControl() and removeControl() are quite available, but just don't dispose the control.  Keep all those BAB-GUI controls for the player's yet-un-attained skills... nearby, ready to go, but hidden from the user.

Try to use stackPanels and containers, and let the automatic positioners OF those containers... do their positioning work FOR you.  Use the GUI tracking feature... to make a container/panel track your player mesh.  Use the offset to place the container under/over/beside the player.  (You're probably already doing these things).   Consider leaving the GUI panel OFF most of the time... perhaps activating it with a right click on player (like a context menu). 

Just some thoughts.  I think you have all the tools you need to get the job done.  Live-binding "status bar"  (continuously-updated skill level graphs)... might be a challenge... but I think IT can be done, too.

But, I THINK I understand your worries.  Babylon GUI controls tend to be... rather static.  They are sometimes difficult update with new stuff.  We are all here to help, and Deltakosh is also nearby to suggest/approve feature-adding, and have great GUI solutions.  There's not many things that Deltakosh can't find a work-around for.  We have some super-sharp forum users, too... they can think up weird things that work.  We're here. 

Share your experiments in a playground, and it will be easier for all forumers to help.  Later, you can move your experiments into your project.  Let's build a mock-up of your GUI... in a playground scene first. 

I hope this helps.  Others will surely comment soon.

[GameMonetize]

Hello I will recommend using stackpanel (skill bar is a horizontal stack panel and skills are buttons):

https://www.babylonjs-playground.com/#MTWBAT

 

@Wingnut: You can replace the buttons by stackpanels and it should work

[Wingnut]

hahah.  A horizontal stackPanel as a bar graph/status bar.  BRILLIANT.

Yeah, even a blank background-colored button... keep adjusting its width to make the bar wider/narrower.  Left-justify it.  Yes!

Ahh, demented GUI fun... make everything from anything... love it!

[RNull]

Hey @Wingnut  and @Deltakosh

Thanks for the answers, I was pretty much losing hope of an answer . I hadn't noticed the existence of panels in Babylon.GUI, this definitely makes sense.
I will give it a try and ask questions here if I have any !!
 

[GameMonetize]

There is always a way

[Wingnut]

  Yep, it seems so. 

How about using a "mesh-tracking" GUI stackPanel or Container (on a full-screen advancedDynamicTexture)... as a godrays emitter, or a particle emitter?  THAT would be a gruesome challenge.    I dunno WHY anyone would want such a thing, though.

-----------------------------

Hey RelativeNull, you might not need this, but Deltakosh recently fixed my programming mistakes in a GUI panel of mine, so if you'd like to use IT for your mock-up playground, or steal some code, you sure can.  https://www.babylonjs-playground.com/#XCPP9Y#303 

It is a "papa" stack panel (papapanel - an isVertical = false) containing two "column" stack panels (both are default isVertical = true).  Inside the "sub-stacks" are a couple of rectangle-bordered textBlocks (bordered labels).  Perhaps useful for some starter code.

Let's ponder ONE "attribute" line on your panel.  (one 'skill')

Charisma  #####.........  45/100

The red text is the textBlock or button (can be called a key).  The green area is the bar-graph.  The blue area is the value, a numeric representation of the current bar graph value.

See that there are 3 columns to the attribute-line.  You would need to add one more vertical=true sub-stackpanel... into papapanel (on the 303 demo).

But then, every time you add an attribute-line, you have to add three controls... one into each sub-stack.  Easily done, but a little non-elegant.

Instead, WHAT IF... each attribute line... had its own horizontal stack panel.... with 3 controls (or more) added?  After built, then simply add THAT single stackpanel... into papapanel (papapanel would be vertical, for this).  Essentially, the attributes-list section of your GUI panel... is a vertical stack of many 3-control horizontal stacks.  Each horizontal stack contains one complete attribute-line... with key, graph, and value (and maybe even a little picture icon).

That... would be more elegant, I think.  Create a pile of horizontal stackpanels... Intelligence, Charisma, Strength, Sustenance, Agility, etc.  The bar graph part will probably need a border... to "define" the total length of the bar graph.  Each attribute line might need a complete-surrounding border, too. (I like borders - they add colors, for max tutti-frooty-ness) 

How are you at creating your own JS classes, RN?  This almost sounds like a job for GuiAttributeLine Class, eh?

There's some serious potential here... for demented experimenting.    IF/When you have a chance, show us what you build, RN!  Thanks!  I think @Mezzorio was working-on something similar, so I pinged him to come join us, if he wishes.  These attribute-lines are a heavily-used thing in games, so we can use all the experimenters/tests we can get.

Party on, guys!  Good luck.