Jump to content

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


Nodragem
 Share

Recommended Posts

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 :D :

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

Link to comment
Share on other sites

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 ?

 

 

Link to comment
Share on other sites

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:

fireworks_win2.2.gif.b286942f652e8d13cd02c6a93e106fa4.gif

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

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.

Link to comment
Share on other sites

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 :))

Link to comment
Share on other sites

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)

 

Link to comment
Share on other sites

@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.
 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 :D .

Link to comment
Share on other sites

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.

 

 

Link to comment
Share on other sites

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

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