bGUI - a GUI extension to Babylon

[Temechon]

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 ! 

 

Cheers, 

[Jaskar]

Hi,

 

It's a great anouncement! Maybe I'll use it in my next project 

[Kilombo]

Great stuff mate, I'll try it and give feedback. I really need such a handy tool for my game.

[jerome]

Waaaoooww

wonderful idea !!! Nice work !!!

[dbawel]

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?

 

Cheers!

[Temechon]

Thank you guys No, there is no other documentation, although everything is detailed on the babylon doc website.

[GameMonetize]

This is freaky awesome man!! Do you want to host it in the extensions repos?

[dbawel]

Hi,

 

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?

 

Thanks,

 

DB

[Wingnut]

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

 

https://developer.mozilla.org/en-US/Add-ons/Code_snippets/Miscellaneous#Using_string_bundles_from_JavaScript

 

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!

[Temechon]

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

[GameMonetize]

Redirect is fine. I just want to keep track of this great tool and make it more easily discoverable

[dbawel]

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.  

[Dad72]

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

[Dad72]

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

[Temechon]

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.

[Dad72]

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.

 

http://www.castorengine.com/castorengine/

 

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.

[Temechon]

I send you a PM

[Dad72]

The problem was that I use Octree and fallais I octree refreshes after creating the GUIPanel

octree = scene.createOrUpdateSelectionOctree();

[Dad72]

Mr. detector of bug, of back  
 
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.
http://www.babylonjs-playground.com/#1CMJ58#2
 
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
 
http://www.babylonjs-playground.com/#1CMJ58#3 
 
If everything is ok, this works really well. 
 
Suggestion:
 
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;    };

[Dad72]

Did you look the bugs Temechon? 

 

I hope my bug reports will not trouble you. I just want to help because I find this very useful extension.

 

Thanks

[Temechon]

Yes I did look at it. I have to fix this. Stay tuned

[Dad72]

Hi,

 

I comes to news about the bugs?

[Temechon]

Sorry Dad, no time for this right now. I might find some time this evening, but my new baby is taking me some time :/

[Dad72]

Ok, Thank you Temechon.

[dbawel]

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.