Can we customize the look of BabylonJS.GUI?

[Nodragem]

Hello,

I am trying to port a game to BabylonJS.

I was wondering if there is a way to custom the look of the GUI elements/containers of Babylonjs.GUI?

This is the menu I am trying to reproduce:

 

 

 

[Dad72]

Yes you can do it:

I have customized the GUI interface of Babylon here :

[Guest]

As @Dad72 mentioned, this is possible. Please feel free to ask for help here if you face an issue

[brianzinn]

i've worked a bit on building menus like that for my game.  Should be able to accomplish all of that with some buttons, stack panels and (hover) animations.
https://www.babylonjs-playground.com/#Q81PBV#6
 

[Nodragem]

Let's say I want to change the Slider element appearance (from Babylon.GUI).

How do I customize the slider to look like this? 

I see options to change the colour and the shape of the thumb from rectangle to circle but I don't see option to use a set of images.

[SvenFrankson]

Indeed it seems like you may not use an image.

https://github.com/BabylonJS/Babylon.js/blob/master/gui/src/2D/controls/slider.ts

It could be possible to add images as an argument, with a set of 3 pictures "done", "undone", "thumb" to make it more customizable, with "done" and "undone" overlapping accordingly.

[Nodragem]

yep, maybe we would need to have two classes: slider.ts and texturedSlider.ts, so that we keep the slider.ts fast to render?

[Guest]

Agree!

[aWeirdo]

Hey, @Deltakosh
I've been wondering, would it make sense to split functions like measurements into different blocks of code?

Would it be too messy? 
Idea was to check things when they change, instead of on each render, so if no source is set, we won't have to check if(source...) on each render, etc. It would add more functions(messy), but each function would be smaller and i assume easier to navigate.
does it make any sense? is it just my brain farting?
Example:

var App = (function () {
  function App(source) {
    this._source = null;
    this.measureFunction = this.measureDefaultFunc;

    if(source) this.source = source;
  }
  Object.defineProperty(App.prototype, 'source', {
    get: function() { 
      return this._source;
    },
    set : function(string) {
      if(string){
        this.measureFunction = this.measureImageFunc;
      }
      else{
        this.measureFunction = this.measureDefaultFunc;
      }

      this._source = string;
    },
    enumerable: false,
    configurable: true
  });

  // Today
  App.prototype.measure = function(data){
    if(this.source){
      // Measurements needed when displaying an image.
      console.log("measureImage")
    }
    else{
      // Measurements needed when not displaying an image.
      console.log("measureDefault")
    }
  };

  // Idea
  App.prototype.measureDefaultFunc = function(data){
    // Measurements needed when not displaying an image.
    console.log("measureDefault")
  };
  App.prototype.measureImageFunc = function(data){
    // Measurements needed when displaying an image.
    console.log("measureImage")
  };
  return App;
}());


console.log("..Creating App..");
var myApp = new App(null);
    
    console.log("..Calling measureFunction..");
    myApp.measureFunction();
    
    console.log("..Setting source image..");
    myApp.source = "myFile.png";
    
    console.log("..Calling measureFunction with Source set..");
    myApp.measureFunction();

 

[ssaket]

@Nodragem wouldn't it be better if you can write an interface for the same ? The normal slider would  have "no texture" in that method and the texture would have the "defined texture" or anything .. may be images. Moreover, I feel this is a behaviour that's why I suggested this. Cheers 

[Nodragem]

Hello,

I was just suggesting that to be able to use our own textures would be useful; but unfortunately, I don't have much time to implement this functionality ? 

I am currently focusing on remaking my menu in BabylonJS. Here my progress:

Basically I created a Rectangle, in which I've inserted a horizontal StackPanel of height=0.7 and width=1, in which I've inserted two grids of height=1 and width=0.5.

 

However, I get some weird behaviour of StackPanel.

Let's say that grid1 is the white grid (2 rows x 1 col) on the left and grid2 is the brown grid (10 rows x 2 cols) on the right.

When I try to change the width of my horizontal StackPanel to 0.9 (instead of 1), I get this weird behaviour:

I expected grid1 and grid2 to adjust to make 50% of the width of StackPanel. I did not expect to have a gap between the two grids... or to get grid2 truncated on the right.

[Guest]

Hum..can you repro on the PG so I can have a look?

[Guest]

(and in your case I would not use a stackpanel but more a root grid with 2 columns and 1 row)

[Guest]

@aWeirdo not brain farting at all.. This could be a good experiment! Just need to see it in details as you know that devil is in the details

[brianzinn]

What are you porting the game from?

[Nodragem]

@Deltakosh I found a way to put my project in PG: https://playground.babylonjs.com/ts.html#VYGP69#2

But not sure that is the optimal way because (even that it DOES work), the PG complains saying: You must at least create a scene.

Also, I don't know how to load the texture in PG so well done BabylonJS does not crash on FileNotFound exceptions  !

The relevant line of code is 176, and you can search for "BOOKMARK" to find it.

 

@brianzinn that's from a Unity project. I had to train using Unity in case I get a client who very wants Unity. What I have learnt from making a game with Unity is that Unity is a bad choice to make multiplayer WebGL 3D games compatible with mobiles. Maybe to make a menu is faster than in BabylonJS (and, still, I am not 100% sure); but everything else was frustrating ? Especially the part where my game was nearly done, and playing nicely in the editor, I was so happy! After struggling so much with organising my Unity project and using the Unet HLAPI, it was there, on my screen, my game! At last, so happy! And then I exported it to a Windows and HTML5 Build, and... it was not working... and ... it ... took me 1 month rewriting almost everything; debugging directly the build with Visual Studio; because the game was working fine in the editor. And once it worked; I realised that some other things would not work with webGL and that in fact, webGL was not supported on mobile and I thought that was enough; I lost too much time struggling with Unity; I wanted to come back to a javascript library.

Long story short; I loved working with Phaser+Socket.io before trying Unity. However Phaser only does 2D, so when I saw BabylonJS, I thought, hey  let's try that!

I think BabylonJS has a lot of potential so far  sometimes I need to program a bit more, but at least, for now, all bugs I encountered were mine!

 

[brianzinn]

OK - I was just making sure you weren't porting from a JavaScript 2D library, since it was maybe possible to harvest the menus by running the other code on the same canvas (ie: look in Demos and Projects for topic "Combine Babylon.js with Pixi.js").

[Nodragem]

@brianzinn I needed to share my unlucky Unity experience with the world I guess ^^ but still I think Unity is very nice for some stuff.

Anyway, I tried to use a Grid instead of the StackPanel and it works as expected: https://playground.babylonjs.com/ts.html#VYGP69#3

Still, I am unsure why the StackPanel does not lead to the same results...

 

[brianzinn]

oh - yes.  The StackPanel can be very frustrating to work with and the whole hierarchy of the addControl(), etc.  Unity is pretty amazing - I agree

I am very busy the next 5 weeks and traveling, but if you want to work on that boilerplate then I'm happy to help out.  I did find a few different threads about why HMR would only work once on accept.  I'll see about a PR.  Cheers.

[Guest]

I'm not a big fan of the stackPanel either  But I have no better way to do it so far (open to suggestions and clearly I would be happy to get some help on this little guy to make it better :))

Because it is a horizontal stackpanel, the width should not be used as it will be deduced from content. In your case the grid is clearly a better control

[Nodragem]

16 hours ago, Deltakosh said:

Because it is a horizontal stackpanel, the width should not be used as it will be deduced from content. In your case the grid is clearly a better control

I don't think it should be the case though. You should be able to say that your stack panel is 90% of the width of the parent container, then that's the items of the stack panel that are resized to fit in the stack panel.

I mean, from my experiments, it seems that this is what's happening when the stack panel is 100% of the width of the parent container; items are resized to fit in the stack panel.

I am not sure why you are not a big fan of the Stack Panel? it looks good to me. Maybe we could have some absolute size for the items in it though, with a scroll bar when they go beyond the size of the panel. Practical for making list. Scroll bars could also be useful for Grids (to make inventory menu) and TextBox I guess...

[Guest]

Interesting. I created the stackpanel to work like the one in XAML. The items' width is not changed and instead dictate the width of the panel (because you stack your items literally)

What you describe is clearly a Grid to me.

 

(Scrollbars is something we NEED to add, I would love to get a scrollViewer control)

[Nodragem]

Yes, you are right! I understood how it work now;  I did need to divide the size of my items by the number of items.

[Guest]

Thanks for your understanding

Do you think we could improve the doc to better position that?

[Nodragem]

Yes, I think we could add something similar to the following in the API doc:

• a "height MUST BE 1 when vertical stack" and
• a  "width MUST BE 1 when horizontal stack"

so it appears in VS Code when the user is writing StackPanel.height/width.

Here my progress with my menu (Left BabylonJS / Right Unity):

 

I have some questions:

- Button created with CreateImageWithCenterTextButton(): Can we move the text for precise positioning? (useful for RT/LT)
- Button created with CreateImageOnlyButton: no reaction to hover and click? why?
- Button: how to change the color for hover / click events
- Button: how to change the image for hover / click events
- Font: how do change the font?

- General: I would like to never use "px" to size my button (B, A, Y, etc). Using proportion is much better as everything resizes based on the device screen size. However, for the button Y, for isntance, if I do "button.height=0.2; button.width=0.2", the button is elliptic, squashed on Y-axis, because the container (the white rectangle) had a width greater than its height. Would it be possible to have an option "controller.fixedRatio = true", so that when I change "button.height=0.2", the width is computed automatically so that the button keeps its original ratio? that would be awesome!

- Image: around the same idea as above, can we force a ratio?

- Populating a menu: is there a quick way to open a json file without using the AssetManager? I used "import menuData from ""./data/menuData.json" for now.

- Clipped by Parent: for people who wondered what I meant previously, I think we can see why I would like to be able to disable the clipped by parent here  ! the (play) (A) and (back) (B) buttons, for instance, are attached to the main panel (i.e. there are children of the main panel); and they get cut. Note that it does make sense to attach them to the main panel, in order to align them to the bottom.

In any case, I had a lot of fun playing around with BabylonJS  so thanks again for this great engine!