Announcing Babylon.GUI

[adam]

13 hours ago, phaselock said:

1) If you mouseover to the leftmost part of the skull and then to the rightmost, the line seems to slant ? Can't figure out why it happens and can't seem to get rid of it through the offset.

I commented out line 57.

https://www.babylonjs-playground.com/#FBKE1P#1

[phaselock]

7 hours ago, adam said:

I commented out line 57.

https://www.babylonjs-playground.com/#FBKE1P#1

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 !

[phaselock]

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.

[wilson]

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

[Dad72]

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.

[GameMonetize]

Hey, I suggest creating PGs for each ideas and we can work together on how to implement it

[Wingnut]

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. 

[GameMonetize]

lol  thanks for the kind words.

 

I have to admit that I really love developing features for GUI. It is my new pet project

[wilson]

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

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

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

 

[HeadClot]

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.

[GameMonetize]

Hey..here is a demo for the world space question: https://www.babylonjs.com/demos/gui/

as well as the doc: http://doc.babylonjs.com/overviews/gui

[phaselock]

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!  -.-"

[Arte]

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

 

[phaselock]

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!

[GameMonetize]

Observables are the right way to do it:

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

[phaselock]

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.

[phaselock]

Found a workaround, but not particularly happy as its overkill. Still thanks tho, @Deltakosh

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

[adam]

6 hours ago, phaselock said:

Found a workaround, but not particularly happy as its overkill. Still thanks tho, @Deltakosh

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

Would something like this work?

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

[phaselock]

10 hours ago, adam said:

Would something like this work?

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

Awesome, @adam. yh, what I was looking for, clean and nice...observers !
On topic, I don't think txtwriter class is needed ? Cos a stackpanel would do the same job ?

[adam]

Right, a stackpanel containing separate  textblocks would probably make more sense.  Then you can just write directly to each textblock.

 

[phaselock]

Cool ! Thanks @adam.

[pichou]

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

[pichou]

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

[adam]

Here is a FontAwesome example:

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

use the unicode for the icon and prepend \u 

[jerome]

I can't wait the \u1f595 to be implemented in my system charset