List of possible improvements for BABYLONJS.GUI to submit on Github

[Nodragem]

Hello,

I used BABYLON.GUI recently to make a menu and here are my humble feedback on for improving it, and make it easier to use and learn as a newcomer.

There are also some feedback not on BABYLON.GUI but related to menu creation.

Renaming some properties for less confusion:

- button.top and button.left could be replaced by button.position.x, button.position.y;
    -> indeed with the latter we could animate menu items as Vector2 with one animation
- button.thickness could be renamed button.borderTickness or button.borderWidth
- button.color could be renamed button.textColor 
- button.color controls the text color and the border color!
- Rectangle.color could be renamed Rectangle.borderColor
- Rectangle.background could be renamed Rectangle.fillColor

Bugs?

- StackPanel: on a horizontal stack, when width < 1, that creates a space in between the two controllers being stacked. See: https://playground.babylonjs.com/ts.html#VYGP69#2

New features :

- Customization: can't use 2D texture to customise the UI (sliders, rectangles, etc)
- Customization: can't use Texture Pack (Texture Atlas + json file), see https://www.codeandweb.com/texturepacker
- Rectangle: a big addition to Rectangle would be support for 9-patch or similar (https://www.dev2qa.com/android-nine-patch-image-example/)
- Grid: cannot access their number of rows / colums: e.g. grid.nrow(), grid.ncol() 
- Grid: cannot access their children: can we have a grid.getControl(row, col)?
- Grid/StackPanel could have a foreach function.
- Rendering: Child controllers are clipped to the rendering area of their container. Can we disable that?
   -> Currently I can't see the children of container 1 if I place them outside of container 1's area.

Slightly-out-topic:
- angularSensibilityX (and alike) may be renamed angularSensitivityX , or I am confused?...

- Tween: could we have Tween object as a helper to create simple animation for juice (i.e. targets, property, start frame, end frame, easingFunction); I created my own helper object (see the PG above).

 

Let me know what you think!

[Guest]

Some comments:

- button.top and left are string properties because you can specify the unit (like in CSS). So instead of replacing them, we could add other synchronized way to move them 

- button.thickness: unfortunately we do not break backward compatibility

- same for all renames

Bugs:

- StackPanel: Not a bug, the main dimension of a stackpanel (width if horizontal, height if vertical) cannot be set because it is deduced from the contents HENCE the content cannot use a dimension set to percentage of parent (because well it could not work :))

New features:

- Image support for controls: Yeah definitely!

- Rectangle with 9 patch: YEAH

- Grid: access children : grid.children()

- Grid: access number of col, number of rows, child at specific cell: I will fix that for next commit  https://github.com/BabylonJS/Babylon.js/issues/5303

-  ForEach: you can access children.forEach directly

- Parent clipping: This is the essence of the GUI  But i can turn it off for you if you want  https://github.com/BabylonJS/Babylon.js/issues/5304

 

Of topic:

- angularSensitivityX: I know, myenglish was worse at that time   but no rename beause back compat. This is part of our history

- Tween: http://doc.babylonjs.com/api/classes/babylon.animation#createandstartanimation ?

 

 

[Nodragem]

17 hours ago, Deltakosh said:

Some comments:

- button.top and left are string properties because you can specify the unit (like in CSS). So instead of replacing them, we could add other synchronized way to move them 

- button.thickness: unfortunately we do not break backward compatibility

- same for all renames

I am not sure backward compatibility is a strong argument, especially if the renamings make sense, make the API cleaner and are helpful to users and new users. In the life-cycle of an API there always seems to be a time for cleaning and backward compatibility breaking. We are humans, we can't get every names or parts of an API right on the first try. And at the same time, we don't want to pollute the API by keeping old parts. Unity has very good backward compatibility for instance, and its API is a big polluted mess. 

People who used the old naming in their project can:

- continue to use the version of BabylonJS before the renaming

- rename the properties in their project and "recompile" their game with the new BabylonJS 

In fact, if you break many names, you could maybe provide a script that translates the old naming to the new naming (e.g. an automatized version of VS code refactor or search/replace functions) and a cheatsheet for the users.

Quote

Bugs:

- StackPanel: Not a bug, the main dimension of a stackpanel (width if horizontal, height if vertical) cannot be set because it is deduced from the contents HENCE the content cannot use a dimension set to percentage of parent (because well it could not work :))

Yep, so I am unsure of that it should be the default behaviour though and I commented on it in the thread: here

Quote

- Grid: access children : grid.children()

As this is a grid, I was more thinking of grid.getChild(row, col); that would be simpler to use.

Quote

Parent clipping: This is the essence of the GUI  But i can turn it off for you if you want

In some case, for instance, a header, you may want that header to be child of a container but be on top of it, see the header (Level Selection) below:

I guess I could use a TransformNode as the parent of the header and main panel, though; but semantically, I would rather think of the header as part of my main panel.

Quote

Tween: http://doc.babylonjs.com/api/classes/babylon.animation#createandstartanimation ?

Yes I know about it. But this function does not return the animation/animatable, so that I can't:

• prevent the animation to start (most of the time, you want to control the start)
• prevent the animation to be disposed after played (I want to replay my menu animation each time I show it)
• delay the animation start (i.e. wait 3 second then start) 
• control the loop interval (i.e. wait 1 second between loops)
• attach the tween to another object (maybe you want that animation to be played on several objects)
• group tweens (to control them at the same time; i.e. my menu animation)
• chain tweens (the end of one tween provokes the start of another tween)

To make my menu, I basically made a Tween helper to group two-frame animations (i.e. Tween) into the same Animatable, so that I can play all of them at once. I can make a PR if that sounds interesting to you.

[AndreasLoew]

@Deltakosh What about sprite sheets / texture atlases? We can add support in whatever format you need in TexturePacker.

 

[Dad72]

It's true that backward compatibility is important between versions 3.1, 3.2, 3.3 ...
But as far as version 4.0 is concerned, I think that cleaning can be done by breaking backward compatibility and adding a list of all the functions, properties to rename.
If this does not happen too often, users can understand that this can happen (but it must be rare).

I would not be against having to rename something in my project from a version 3.x to 4.x (but must not to be often )

[Guest]

I want to remind to everyone that backward compatibility is the reason why people like Adobe uses babylon.js.

Here are our golden rules: https://github.com/BabylonJS/Babylon.js/blob/master/contributing.md

So there will be no renaming. (Because who will fix the hundreds of playdround used by people to learn about the API?). Furthermore what looks obvious for you could be unclear for ohter (like Rectangle.background could be renamed Rectangle.fillColor)

 

Regarding clipChildren, it is now done

 

CreateAndStartAnimation returns an animatable that can do what you need (I guess, unless I misunderstood you?). But if your tween tools provide value I would love that learn more about it 

 

@AndreasLoew: Adding a sprite control would be cool! (The image has some feature that could be leverage for that)

 

[Nodragem]

@Deltakosh "Everything should be done in moderation, including moderation" or "il ne faut jamais dire jamais" or "rules are done to be broken". I think we all agree that breaking backward compatibility should be rare and that your rule of not breaking backward compatibility has a reasonable place in the golden rules. However I also believe that breaking compatibility is a necessary step to keep APIs clean. As said earlier, as human beings we can't get everything right on the first time.

I agree with @Dad72. You can have a look at Phaser 3.0 release, for instance. Richard Davey and contributors did even better than renaming and breaking compatibility, they just rewrote everything from scratch; that is quite extreme. Their game engine is still quite popular though and it is a joy to use.

Concerning Adobe, I think we could ask their BabylonJS users directly because they may also think that some stuffs could be changed.

Meantime, I wanted to show you my Grid helper:

https://playground.babylonjs.com/ts.html#DK7M9T#4

That is a small function to help make and populate grids. I am happy to make a PR if it can be helpful to others.
 

[Guest]

Well, then let's say that I consider these renames are not worth the pain then  Because I will be the one getting hundreds of emails complaining about a project that does not compile anymore.

 

The Grid helper is definitely a static function we should add on the Grid.

 

[Wingnut]

That gridHelper is pretty sweet... thx for codin'/sharin' that,  N!

As for refactoring big code projects (like BJS)... it often works better if a third party... re-writes/re-factors BJS or other such critters.

Original authors of hot projects... are just too busy (and often mind-cluttered).  Refactors are no small task, maybe best left-to those who have a dream of their own, and plenty of hours.

Branched versions, and non-backwards-compat versions... should have a different name.  This way they are not confused with standardCore, and thus they have no backwards or cross-compatibility expectations.

[Dad72]

I understand this point that receiving hundreds of complaints afterwards for renaming can be cumbersome to manage.

I did not think about the PG, it is true that with renaming, thousands of PGs might have many problems.

I do not mind the naming as they are. Just do as it is done.

And it is clear that a project or compatibility is often broken can be very annoying and with Babylon I am happy that my projects run from one version to another and this, from version 1.0 to 3.3.

[Nodragem]

3 hours ago, Deltakosh said:

Well, then let's say that I consider these renames are not worth the pain then  Because I will be the one getting hundreds of emails complaining about a project that does not compile anymore.

True!!

But still ... some project do it at each major release; and it is worth observing why and how they do it.

Quote

The Grid helper is definitely a static function we should add on the Grid.

I will try to add a pull request.

Quote

Regarding clipChildren, it is now done 

That is amazing! Thank you, can't wait to add it to my menu!

4 hours ago, Deltakosh said:

CreateAndStartAnimation returns an animatable that can do what you need (I guess, unless I misunderstood you?). But if your tween tools provide value I would love that learn more about it 

ho! I am so bad, I thought it was returning nothing! ? I am so sorry to get confused so often. I am going to check if my TweenHelper is still useful then  .

[Nodragem]

Hello,

I played around with the CreateAndStartAnimation, and it seems that it only works with Mesh: https://doc.babylonjs.com/babylon101/animations

 

Here a playground where I show how my TweenHelper could be used: https://www.babylonjs-playground.com/ts.html#M2ACRT#3

Basically, it helps at creating and playing a group of animation.

 

There is a lot of features that could be added (e.g. apply the same tween to several objects at once, etc...).

Note: we could rename it AnimationHelper if needed, but TweenHelper is a good name for two reasons:

• gamedevs will look for the word Tween (it is a famous name)
• tweens are animations that only have a start frame, an end frame, and an animation curve; which is what the helper is about.

 

 

[Guest]

CreateAndStartAnimation works for everything that has a .animations array. So you can do it on everything you want. Just add a .animations array, populate it and go. But I guess we should add a CreateAndStartDirectionAnimation

This API could also be used: http://doc.babylonjs.com/api/classes/babylon.scene#begindirectanimation

[Nodragem]

Using babylonjs 3.3.0-rc.5 and babylonjs-gui 3.3.0-rc.4,

CreateAndStartAnimation() expects a Node so that a GUI.Button throws a typescript error:

But I am not sure if I am using the function correctly ? 

[Guest]

You are so RIGHT!.This is because I need an access to the scene