New Gui in Babylon

[Dad72]

Thank you Adam, I had not seen it, I was looking in the controls. and I have not seen this in the doc.

Maybe this could be added in the doc to destroy a control or destroy the full GUISysteme.

[GameMonetize]

I will

[royibernthal]

How do I go about creating a button with 4 states (up, over, down, disabled), where each state is image only?

 

1) I'd like the button size to be defined by texture size and not the other way around, is such a thing possible?

http://www.babylonjs-playground.com/#XCPP9Y#27

 

2) Is it possible to define a different texture for each state?

[GameMonetize]

I will work on adding a way to change image source on images. You can reach the image of a button with button.children[0]

[royibernthal]

Thanks that would be great. What about my first question?

[GameMonetize]

I would say: this is in the doc

[brianzinn]

1. I was curious why the decision for .alpha property instead of .visibility - seems like visibility is more consistent with rest of BabylonJS.
2. docs have 2 options for units px and %, but just number (ie: 0.2 as in demo) is valid, so might be good to add to docs.

If you add a way to change an image source would be nice.  I want to change one child image and I see only addControl(), but almost like we need something like addControlAfter(..) or addControlBefore(..), because addControl(..) does a .push, so we can't control ordering.  It looks like currently we would need to remove all existing controls and readd in the order we wanted.  Other option of directly swapping button.children[0] would not mark the control as dirty, if needed?

Looks really good!

[GameMonetize]

1. alpha is like material.alpha

2. good point

3. zIndex is here for that. just change the zindex of your control to move it forward or backward

[GameMonetize]

Here we are: https://www.babylonjs-playground.com/#KWT4LL

[brianzinn]

Nice - with the source updateable I can make toggle buttons and checkboxes easier. Thanks.

[royibernthal]

7 hours ago, Deltakosh said:

I would say: this is in the doc

I completely missed "CreateImageOnlyButton" for some reason, was it there all along or did you just add it?

 

The button's dimensions are not set according to the image's original size, which is what I need.

 

The only way I managed to do it was to literally set the button's dimensions according to the image:

http://www.babylonjs-playground.com/#XCPP9Y#37

This solution is problematic since it's fixed and won't be resized along with the stage, although I guess I could take into account both original image size and stage size manually.

 

Is there a better solution in the docs? If so can you please give me a hint regarding what I should read?

[royibernthal]

Regardless, I have a suggestion / request for Babylon.GUI:

Have an option to set ideal dimensions for elements and for stage, and have each element resized in proportions to the ideal stage dimensions.

Element ideal dimensions will be defined for each element separately.

 

For instance:

Element ideal dimensions: 100x100

Stage ideal dimensions: 600x600

When stage dimensions are 300x300, element dimensions would be 50x50.

 

It's an extremely useful feature from my experience when developing any game/app for multiple resolutions. What do you think?

 

[GameMonetize]

Why not just setting your dimension using percentage?

like button.width = "16%" so when stage is 600x600 the button will be 100px

[royibernthal]

My end goal is to have images original dimensions resized according to ideal stage size, same goes for text blocks which "original" dimensions would be calculated according to their text and font size.

Perhaps an option to automatically calculate the width and height percentage based on what I said? Or otherwise some util functions?

[GameMonetize]

Here is already new options for you: autoScale and a new stretch: Extend.

http://doc.babylonjs.com/overviews/gui#image

Demo: https://www.babylonjs-playground.com/#VAPD0W

Please feel free to PR more options if you want. I'm really open to any contributions.

[GameMonetize]

Regarding your ideal stage size. If you consider that 100 is ideal for a stage of 600 then you can do:

image.width = (advancedDynamicTexture.getSize().width *  100 / 600) + "px"

and just set image.stretch = extend

 

Other idea: we could define a global "ideal" size on the advancedDynamicTexture. And then use it to scale all values that can have pixel or percentage.

In this case, we could set:

myAdvancedDynamicTexture.idealWidth = 600;

 

so if you set button.width = "25%", internally I could translate it to button.renderingWidth = (advancedDynamicTexture.width * 25 / 600) %

 

Thoughts?

[royibernthal]

advancedDynamicTexture.idealWidth sounds good.

Calculating it manually for each element is an option as you said, but it'd be great to have such a thing internal as well, since this behavior could be repeating for all / most elements.

For instance have a function image.originalAutoScale() that sets image.width = image.texture.domImage.width / advancedDynamicTexture.idealWidth

[brianzinn]

I've found an interesting bug.  If you click down on a button and mouse out (while holding down mouse) and release outside of button then it will continually scale down 0.05.  Do that a few times and the button becomes continually smaller.

I think you will need to maintain more state internally - ie: in Button.ts add private buttonDown : boolean.  On the pointerOutAnimation you would then check if (buttonDown === true) and increase the scale and set buttonDown  false. I could try to submit a PR, if you want. 

[GameMonetize]

@royibernthal: http://doc.babylonjs.com/overviews/gui#adaptive-scaling

[GameMonetize]

@brianzinn: I do not reproduce if mouse out of the control but remains INSIDE the view. But I reproduce outside the view

Please do a PR, I'm more than happy to have some help

[royibernthal]

2 hours ago, Deltakosh said:

@royibernthal: http://doc.babylonjs.com/overviews/gui#adaptive-scaling

Thanks  I'm starting to test BABYLON.GUI within my project.

 

1) babylon.gui.d.ts has a reference path for each exported class

Quote

/// <reference path="../../dist/preview release/babylon.d.ts" />

a. Different people have different project structures, perhaps changing the path to "babylon.d.ts" would be more convenient for everyone?

b. Perhaps make it only 1 reference tag instead of that many so that they could be edited more easily?

It's not critical AT ALL, just a suggestion.

 

2) 

Quote

static CreateFullscreenUI(name: string, foreground: boolean, scene: Scene): AdvancedDynamicTexture;

foreground and scene should be set to optional parameters?

Quote

var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("myUI");

 

The same goes for BABYLON.GUI.Rectangle constructors and probably other functions - parameters that to the best of my understanding should be optional are not set as optional in TypeScript.

 

Control width and height should be defined as number | string instead of just string.

 

3) Another suggestion - What do you think about being able to pass texture to image constructor and other image related functions such as Button.CreateImageButton?

There could be function overloading to allow both image url and BABYLON.Texture.

 

4) This is one of the reasons behind my suggestion in (3):

It seems that another img element is created whenever creating a new image, so when specifying a url of a texture that was already loaded using BABYLON.AssetsLoader, its properties are not available until it is loaded.

Well, it was already loaded, so it's fetched from the cache, but that means an already loaded texture is not available immediately.

Lines 43-45 in this PG:

http://www.babylonjs-playground.com/#XCPP9Y#41

 

5) What do you think about adding a TextureAtlas feature? It could help reduce draw calls drastically. (unless there are no draw calls since BABYLON.GUI is cpu-based?)

 

6) Another feature request - Mask.

 

 

[GameMonetize]

1. Done

2. Done

3-4. You cannot pass a Texture because the GUI does not use textures. It produces a texture. But I think this is a good idea so I added a way to set an image (<img>) directly with image.domImage = yourImg.

5. No draw call.

6. Tell me more

[royibernthal]

That was quick

 

3) In order to take advantage of this would I need to save and manage references to images that were loaded via AssetsManager?

6) http://pixijs.github.io/examples/#/demos/masking.js

[GameMonetize]

3. This is independant of the assets loader. but you can just load images with: img = new Image(); img.onload = function() {}; img.src =..

6. can you give me a use case?

[royibernthal]

3. yup I know, I guess my question was - does the AssetLoader save references to images and expose them somewhere or do I need to save them myself from ImageAssetTask.image?

6. scrollable container - display the content only within the masked area.

7. image.domImage is undefined after I set it to an existing image element:

image.domImage = myImage;

console.log(image.domImage, myImage); //undefined, image element