RNull Posted October 24, 2017 Share Posted October 24, 2017 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. Quote Link to comment Share on other sites More sharing options...
Wingnut Posted October 26, 2017 Share Posted October 26, 2017 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. RNull 1 Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted October 26, 2017 Share Posted October 26, 2017 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 RNull 1 Quote Link to comment Share on other sites More sharing options...
Wingnut Posted October 26, 2017 Share Posted October 26, 2017 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! Quote Link to comment Share on other sites More sharing options...
RNull Posted October 26, 2017 Author Share Posted October 26, 2017 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 !! Wingnut 1 Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted October 26, 2017 Share Posted October 26, 2017 There is always a way Quote Link to comment Share on other sites More sharing options...
Wingnut Posted October 27, 2017 Share Posted October 27, 2017 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.