Nodragem

Can we customize the look of BabylonJS.GUI?

Recommended Posts

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

How do I customize the slider to look like this? 

image.png.087edb4c0cda5f965a792f3446af24c9.png

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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();

 

Share this post


Link to post
Share on other sites

@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 

Share this post


Link to post
Share on other sites

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:

image.thumb.png.c11f76f0d624667eb6023233a0dd5d6d.png

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:

image.thumb.png.7543fbd218804dd84c6d77d55fedbb5e.png

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.

Share this post


Link to post
Share on other sites

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

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 :D sometimes I need to program a bit more, but at least, for now, all bugs I encountered were mine!

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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...

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

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

screenshot.thumb.png.729a5e95b7cac38a51fbc5d16b334b2e.png

 

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

Share this post


Link to post
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...

  • Recently Browsing   0 members

    No registered users viewing this page.