Jump to content

Announcing Babylon.GUI


GameMonetize
 Share

Recommended Posts

7 hours ago, adam said:

hmm, that's weird. I could have sworn it was slanted before I did the offset which was what prompted me to add the offset in. Anyways, thanks !!

 

10 hours ago, Deltakosh said:

What do you mean by slant ? :)

ah erm, nvm, @adam fixed it. :) The issue here as I observed and tested is that when pos.x < 0 and line.x2 = pos.x-10 would result in x2 being even more negative and vice versa for pos.x > 0. This resulted in the visual slant at extreme left/right.

Hope it helps, cheers !

Link to comment
Share on other sites

  • 3 weeks later...

Hi, guys:

I have some new requirements for the babylongui. could i write it here?

1. Image Filled: I need to show some part of the image, for example like a slice of pizza, used to show the skill cooldown (Usually a gray translucent image) , see the attachment

need different fill types, such as follows:

Horizontal: The Image will be filled Horizontally.

Vertical: The Image will be filled Vertically.

Radial90: The Image will be filled Radially with the radial center in one of the corners.

Radial180: The Image will be filled Radially with the radial center in one of the edges.

Radial360: The Image will be filled Radially with the radial center at the center.

2.Image Mask: A Mask is not a visible UI control but rather a way to modify the appearance of a control’s child elements.

show a small section of a large Image, using say a Container as a “frame”. You can achieve this by firstly making the Image a child

of the Container object. You should position the Image so that the area that should be visible is directly behind the Container area.

The areas of the child Image outside the Container will become invisible since they are masked by the shape of the Container.

With the above 2 functions, i can try to develop:

1.Scrollable View: base on Image Mask, an other image of the Container then moved around then only the part revealed by the Container will be visible.

2.Stack View: many Container together with the same position, Tabbar(A stack of buttons is arranged together) control which Container will be displayed.

Looking forward to your help.

Thanks

timg.jpg

Link to comment
Share on other sites

Babylon.GUI already allows to do this kind of thing by creating its own function for that.

You can create an image and then layer over the images with semi transparent color black. Then play with the dimension of that container layer to get any result you wish.

This is something you need to create yourself. Babylon.GUI already has what it takes to do it.

Link to comment
Share on other sites

Yep... I agree with Dad72... EXCEPT for radial fills.  I don't think that is a "built-in feature" of Babylon.GUI, but it CAN be done.  DynamicTextures and AdvancedDynamicTextures carry a reference/handle to the context2d object that was used to make them.  Visit that link, and then come-on back.

A Context2d interface is a mega-painting device.  It can do radial fills or any other demented fill pattern you can think-up.  MANY context2d fill/pattern demos are available on the web... coded in JS... ready to be "borrowed".  :)

But, I have never tried this.  Live-updating of fill-patterns in Babylon.GUI containers, stackPanels and simpleButton backgrounds... I haven't seen it done, yet.  With Babylon.GUI, it seems that... "update" == dispose the old one and make a new one.  :)  But keep in mind that it is a BRAND NEW and very lightweight system.  It has MILES of open spaces to grow-upon, and its author is VERY WILLING to accept all sorts of add-ons and tweaks.  I, myself, am VERY excited about its future, and would LOVE to spend more time creating my own controls.  I hope I get to do that, soon.

Plus, it's author... he's big-time accommodating.  If he thinks a feature or addition is a good idea, and plausible, he'll have it added before you get the request-for-feature typed-out.  :)

Oh, speaking of authors... hi DK... you beat me to the posting office.  :)

Link to comment
Share on other sites

haha, BJS is a great, powerful engine, I began to study for less than 1 months :P

I was a developer of Unity3D, I was “spoiled” by unity resulting in poor ability to practice:lol:

Forgive me for asking too much, I love this engine too much, and i'm too impatient to wait to use it for my game.

I'll try it on the PG, Thank you for your guidances:wub:

 

Link to comment
Share on other sites

Got one request for Babylon GUI as well as a question.

Would it be possible to get an Visual Designer tool (Unity3D UI tools, Unreal Motion Graphics, and Armory3D UI Designer toolsets come to mind ) for games like Heads up displays? 

Can this render GUI elements in World space? Such as on a polygon in front of the player for example.

Link to comment
Share on other sites

Probably another stupid question, but how do you change the value text of a button when clicked ? I can change other properties just fine, but button.value/button.text isn't letting me alter the words. https://www.babylonjs-playground.com/#XCPP9Y#250

edit: As usual, found the solution after posting...this streak remains unbroken, go me!  -.-"

Link to comment
Share on other sites

1 hour ago, phaselock said:

Probably another stupid question, but how do you change the value text of a button when clicked ? I can change other properties just fine, but button.value/button.text isn't letting me alter the words. https://www.babylonjs-playground.com/#XCPP9Y#250

edit: As usual, found the solution after posting...this streak remains unbroken, go me!  -.-"

Hi phaselock,

button.children[0].text="Cancel";

line 40;

PG

 

Link to comment
Share on other sites

On 9/14/2017 at 5:19 PM, Arte said:

Hi phaselock,

button.children[0].text="Cancel";

line 40;

PG

 

Thanks @Arte, I got it ! :)

 

So I have a new problem. I have a use case for spherical orbits with dynamic mesh properties that on mouse-over, a gui textblock should display...sort of like an interactive tooltip except used in 3d. To simplify the problem, I used the standard sphere/ground PG, added a timer to the sphere, and a pointermove observable to the scene with a text trigger for the sphere.

http://www.babylonjs-playground.com/#6SN3TN

As expected, upon sphere mouse-over, the pickedpoint will update and the timer value will just show the value at the instance the pointermove evt was fired. Now, I'd like to have the timer value continue counting while the mouse is still over the sphere, like a realtime clock. In usual html cases, realtime counting is done with recursive callbacks. But I've not been able to get it to work and I need help. Has anyone tried to do this yet ? Or are there better methods to use ? Lemme know, thanks!

Link to comment
Share on other sites

12 hours ago, Deltakosh said:

Observables are the right way to do it:

https://www.babylonjs-playground.com/#6SN3TN#1

Thanks @Deltakosh...erm, still not quite correct. Now the pickedpoint.x is static. I think my problem isn't phrased very well. :( When the mouse is over the sphere and not moving, your solution is correct. But when the mouse is moving over the sphere, the pickpoint.x should still update AND the timer should also count accordingly. So its closer to two/n event listeners working in parallel. Use case would be, say, mouse-over a planet and show its lat/long with other dynamic content like temp/time/gravity etc in 1 tooltip. Mouse-over another part of said planet and the lat/long will update while the other dynamic content also updates in realtime on the same tooltip.

My english isn't great, would appreciate if anyone could help to phrase it better.

Link to comment
Share on other sites

  • 1 month later...

Hey I comment here to find some help but tell if I should create a new topic : I'm stuck with GUI and icons!

My big problem is that I must be able to change the color of text and icons in my scene.
So for the text this is easy with the color attribute => OK!
But for the icons I don't know how to proceed. I have svg or png files which I want to import in my scene and be able to change its color easily!
This is like I wanted to use font-awesome library in my game to give you a comparative.

Looking for ideas;)

Link to comment
Share on other sites

Ok I found a way!

I just used the icomoon app as I use too to create font from svg. I just had to add a character associate with the icon ('a' for attack icon, 'b' for damage icon, etc).
Then when I set the fontFamily of my GUI Container to the one I just create from icomoon and use the right character in the TextBlock : TADAAAA!
My icon are in the scene and I am able to change its color!

Cheers, Pichou

Link to comment
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...