Deltakosh

Announcing Babylon.GUI

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 !

Share this post


Link to post
Share on other sites

Not sure what happened, but I got this error while working this morning:

TypeError: t.getEngine(...).onCanvasPointerOutObservable is undefined

I see some work by @Deltakosh on the gui source, something broke ?

edit: nvm, I figured it out, slapped myself for inconsistent versions of lib files. :(

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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.

Share this post


Link to post
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.  :)

Share this post


Link to post
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:

 

Share this post


Link to post
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.

Share this post


Link to post
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!  -.-"

Share this post


Link to post
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

 

Share this post


Link to post
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!

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Recently Browsing   0 members

    No registered users viewing this page.