bGUI - a GUI extension to Babylon

Recommended Posts

Hello !




I just finished a first version of bGUI (for babylon GUI), which is an extension to Babylon to create a GUI directly in your game scene.

Useful for someone who wants to create a GUI for a mobile game on Cocoon platform (I'm looking at you canvas+), or for someone who wants to control the game and its GUI in javascript without manipulating DOM element.


- Source code : https://github.com/Temechon/bGUI

- Demo : http://temechon.github.io/bGUI/

- Documentation : http://doc.babylonjs.com/page.php?p=25102


I'm working on the v1.1 this weekend, all your feedbacks are of course welcome ! 



Share this post

Link to post
Share on other sites

This is very cool!  It is one of the most necessary tools which is needed in the pipeline.  The structure and process you've set up to create and use GUI panels and GUI objects appears straight forward from looking at the source.  I have to build and deliver an app in the next 2 weeks, and perhaps this might work for the elements and functions of the GUI.  I look forward to the next versions as well.


Is there any documentation other than the link you posted above?



Share this post

Link to post
Share on other sites



I'm building my new GUI using bGUI, and everything seems really straight forward, but I have a question.


Where in the index.js script is the event and function to change the texture of the "boy" plane from blue to red when the scene receives an onclick event on the "boy" plane?





Share this post

Link to post
Share on other sites

An interesting and useful system, T-puppy!  Thanks!  Stringbundles/i18n ready?  ;)


From: https://github.com/Temechon/bGUI/blob/master/demo/index.js#L50


Think about changing it to...


var baseline = new bGUI.GUIText("helpText", 1024, 128, {font:"30px Segoe UI", text: this._bundle.GetStringFromName("Babylon.js_extension_msg"), color:"#ffffff"}, gui); 


All text is gotten indirectly "through" a NAME lookup from a language-specific collection.  This is handy (imperative) for changing the language of an entire application... just by changing its languageBundle (a stringBundle).




At above url, see this:


getLocalizedMessage: function(msg) {
    return this._bundle.GetStringFromName(msg);


this._bundle could be French, German, Spanish, Russian, anything.  msg is the msg-name to look-up, of course.  In my example, Babylon.js_extension_msg is the msg-name.  All language bundles for a given app... will use identical names (keys)... but the value for each key... will be a language-specific string per the bundle locale.  (a string in the correct language for THAT bundle/locale)


Can you feel it?  This is a way to make all the projects done with your gui... easily language-changeable (i18n).  I tried to tell JcPalmer about this, too... regarding his dialog system.  If we can all get OUT OF the habit of "hard coding" English text into our apps, and instead look-up the text by name.... in a stringBundle... then we will be i18n Gods and well ahead of "those other guys".  :)  Please consider, eventually.  thx!




dbawel...  https://github.com/Temechon/bGUI/blob/master/src/GUIPanel.js#L12  ... see the 3rd parameter... textureOnPress?


(actual function is done in line 39 area with an elegant actionManager usage in line 41-47)


Now look at https://github.com/Temechon/bGUI/blob/master/demo/index.js#L57


assets["bigboyred"] is the third parameter.  Be well!

Share this post

Link to post
Share on other sites

@dbwael Thank you :) Wingnut is right, there is an argument textureOnPress to give to GUIPanel (as explained here). If you can, I would love to have a screenshot and a link to your game to include it in the bGUI page ! Same goes for Kilombo !


@Deltakosh I can make a redirection in the Extension repo, but I would like to keep it in my Github if it's ok for you.


@Wingnut Yes I remember you having this conversation with someone else.  Actually, I think the i18n thing should be kept outside the library, and be handled directly in the user game, exactly like you did:

var baseline = new bGUI.GUIText("helpText", 1024, 128, {font:"30px Segoe UI", text: this._bundle.GetStringFromName("Babylon.js_extension_msg"), color:"#ffffff"}, gui); 

The text part is not handle by the lib, but by the developer himself.

Share this post

Link to post
Share on other sites

Thanks Wingnut.  I must have a different script than what is driving the demo - as these lines aren't in the script I downloaded from GitHub.  I don't recall which folder I grabbed the script from.  I should have checked it out in the JS console - I often forget checking the obvious, and assumed I had referenced the complete demo script.  


The application I'm building right now is a real-time multi-user creative drawing app.  It's a Q and A test app to demo our multi-user streaming server.  It requires our server to run (obviously,) but I'll post a link once I have a v1 complete and have the "fun factor" at its best.  It's not hugely fun drawing alone, but if you share the link with others and all launch the app while online, it's really fun to draw together in real-time.  You can also launch the app and simply view what others are drawing in real-time.  As I mentioned in a seperate post, it's a breath of fresh air to be creating something fun, and not working on a node.js server.  

Share this post

Link to post
Share on other sites
I try to use bGUI, but I did not manage to make it work.
I can not see the image was added with bGUI. I see my scene, but no GUIPanel
I do not know what I did wrong.
//cameracameraFree = new BABYLON.FreeCamera("CameraFree", new BABYLON.Vector3(0, 20, -100), scene);cameraFree.layerMask = 1;// objetmesh = BABYLON.Mesh.CreateBox("box", 3.0, scene, false);mesh.layerMask = 1;//bGUIvar canvasRect = engine.getRenderingCanvasClientRect();var GUI = new bGUI.GUISystem(scene, canvasRect.width, canvasRect.height);var Texture = new BABYLON.Texture("Images/Logo/logo_castor_white.png", scene);var Logo = new bGUI.GUIPanel("Logo", Texture, null, GUI);Logo.guiposition(new BABYLON.Vector3(10, 10, 0));

Thanks Temechon

Share this post

Link to post
Share on other sites

Oh I think it's because I'm in a iframe I can not make.


this a great extension to Babylon. I would really like to use it, but I can not.
Is it possible that bGUI supports the iframe as Babylon supports them?
Thanks Temechon

Share this post

Link to post
Share on other sites

Hey Dad, 


You have to ensure your texture is loaded before using it, otherwise bGUI (and thus Babylon) won't understand you're trying to do.

You can do something like this: http://www.babylonjs-playground.com/#1CMJ58 (Sorry I don't have your logo, so I used a simple beaver/castor instead :) )


bGUI should work correctly in a iframe, but if you have an example running somewhere I can debug it would be great.

Share this post

Link to post
Share on other sites
Hi Temechon,
I still do not manage to make it work. I suggest you test directly online on the editor, I'll explain the steps in French.




  1. Sélectionner le projet "Demo" puis cliquer sur "Edit"
  2. Sur l’éditeur de terrain sélectionner dans le menu "Scene" puis "Scene 2" qui vas charger la scene avec quelque modèle primitif dessus et un terrain.
  3. Ensuite dans le menu "Add" sélectionner "User interface (GUI)" puis "Textures"

On peut voir sur droite que la texture est charger, mais sur l’écran 3d, il y a rien.


Je met la fonction utiliser ici:

CASTORENGINE.addObjet.prototype.addGUITextures = function()	{					var loader = new BABYLON.AssetsManager(scene);			var img = loader.addTextureTask("castor", "Images/Logo/logo_castor_white.png");			img.onSuccess = function(t) {							var TextureGUI = new BABYLON.Texture("Images/Logo/logo_castor_white.png", scene);					GUITextures[GUITexturesCount] = new bGUI.GUIPanel("GUITextures"+GUITexturesCount, TextureGUI, null, game.GUI);							GUITextures[GUITexturesCount].guiposition(new BABYLON.Vector3(200, 200, 0));			};			loader.load();						};

Je ne sais vraiment pas pourquoi cela fonctionne pas. J’espère que cela ne seras pas trop compliquer a debugger comme ca directement.


Je te remercie beaucoup Temechon pour ton aide et cette extension qui a l'aire vraiment cool.

Share this post

Link to post
Share on other sites

Mr. detector of bug, of back   :D
Probleme 1:
I discovered a small problem when using 'action' and 'picked' I can not select objects of my scene. I think it's because of the layerMask.
I try with this, but it's the same, I can not click on objects of the scene.
scene.cameraToUseForPointers = camera; But I see that it is already used for the camera of the scene orthographic GUI

I did a demo on the playground by taking your example and the example of picking the playground.
Probleme 2:
On the demo above, try to move the green panel and you'll see another very small green panels (position 0,0,0). 
Probleme 3:
I notice a small other problems when using the lensflares no longer has the expected position or it disappears from the object to which it is attached.
Probleme 4:
And last encounter problem. I can not move the camera with the W.A.S.D key on the keyboard, only with the arrow.
cameraActive.keysUp.push(90); // Z
cameraActive.keysLeft.push(81); // Q
cameraActive.keysDown.push(83); // S 
cameraActive.keysRight.push(68); // D
If everything is ok, this works really well.  :P
It would be useful to have a isVisible() in GUIGroup()

GUIGroup.prototype.isVisible = function() {        return this.elements[0].mesh.isVisible;        };

for use picks in GUISystem() This may solve the problem:

    GUISystem.prototype._initCamera = function() {        this._camera            =  new BABYLON.FreeCamera("GUICAMERA", new BABYLON.Vector3(0,0,-30), this._scene);                ...	...        // The camera to use for picks        this.cameraToUseForPointers(this._camera);    };	    GUISystem.prototype.cameraToUseForPointers = function(camera){        this._scene.cameraToUseForPointers = camera;    };

Share this post

Link to post
Share on other sites

Hi Temechon,


I just built a beautiful GUI in about 4 hours including all of the Photoshop work.  I'm connecting it to my scene now, and love that I probably only have 2 hours of coding using bGUI.  I'll post here once I get it functioning without any bugs.  By the way, I certainly know now that any simple syntax error will fail to load the GUI.  But what a great extension, as it is SOOOO... easy to use. :D

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.

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.


  • Recently Browsing   0 members

    No registered users viewing this page.