Search the Community

Available Now! Over 90 items in one huge bundle (Character Sprite, GUI, Game Kit, Platformer) 2D Game Art Bundle – 2017 New Year Bundle Items that noted “Sold by Tokegameart” presented in one huge bundle “2D Game Art Bundle – 2017 New Year Bundle” Over 90 items are included. Character Sprite Alien Boss Sprite Android Boss Big Hands Robot Bob The Caveman Brock From The Metro Squad Castle Guard Sprite Chibi Knight 01 (The White Bull) Chibi Knight 02 (The Roman Knight) Chibi Knight 03 (The Golden Helmet) Chibi Knight 04 (The Gladiator) Chibi Muscular Viking Christopher The Police Dungeon Bosses Dungeon Guard Sprite Evil Bot Character Sprite Genki and Dragon Sword Sprite George From The Space Squad Sprite Ghost 01 Good Boy Jack The Thug Jake Adventurous Boy Jane Adventurous Girl Joana From The Metro Squad Joe From The Metro Squad Karen From The Metro Squad Micro Style Character – Arabian Executioner Micro Style Character – Chinese King Micro Style Character – Roman Knight Mike The Counter Terrorist Priest – Tiny Style Character Pumpkin Ghost Skull Knight Skull Warrior Super Black Cat Super Boy Super Cat Super Monkey The Executioner The Shaman Tiny Armored Samurai Tiny Army – Sam Tiny Australian Soldier Tiny Chinese Soldier Tiny Cowboy Tiny Crystal Monster Tiny Guy – Arnold Tiny Ice Monster Tiny Knight Tiny Lava Monster Tiny Mummy 01 Tiny Mummy 02 Tiny Rock Monster Tiny Style Character – Barbarian Tiny Style Character – King Tiny Style Character – Knight Tiny Style Character – Pirate Tiny Style Character – Skull Tiny Style Character – Witcher Tiny U.S Soldier Tom The Police Viking – Tiny Style Character Zombie 01 – Scar Forehead Zombie Zombie 02 – Anime Zombie Zombie 03 – Meat Clever Zombie Wife Zombie 04 – G.I. Joe Zombie Zombie 05 – Exposed Brain Zombie Warrior – Tiny Style Character Bad Piggy Fairy Tiny Stlye Character Goblin Tiny Style Character Wizard Tiny Style Character Archer Tiny Style Character Ogre Tiny Style Character Ninja Tiny Style Character Super Bunny Super Panda Cartoon Enemy Pack 01 Cyclop Tiny Style Character Gold Miner Tiny Style Character Game Kit Jetpack Buddy GUI Classic GUI Snowy GUI Stone Age Themed GUI Western Game UI Cartoon RPG GUI Tileset Cartoon Town Egyptian Tileset Fantasy Tileset Snowy Platformer Game Tileset Spaceship Game Platformer Top-Down Dungeon Platformer Tileset Top-Down Forest Tileset Top-Down Snowy Game Tileset DOWNLOAD NOW! Visit : http://tokegameart.net/ Facebook : https://www.facebook.com/tokegameart/ Contact : [email protected]

I can't find castor.gui.min.js on Babylon's page. Chrome said the page cannot be reached"http://www.babylon.actifgames.com/demoCastorGUI/castorGUI.min.js" Please where can I find it

My Problem: I want to select a GUI-Element with scene.pickWithRay or would like to be able to use a ray to select a GUI-Element on an object somewhere inside a Scene. Example: Person in VR goes to a Panel inside a game/ scene and wants to interact with it. In a VR-HMD he would be able to select it with his controllers. If he doesn't have controllers a fallback to pick with your head-ray and interact with a press of a button would be nice. If no controllers or buttons (like on simple Cell Phone), fall back to select when holding the ray on the GUI-Element is the plan. Current Solution: public getInteractiveButton (mesh:any) { var button = undefined; // get one of different button types if (mesh) { if (mesh.material.emissiveTexture.getChildren()[0].getChildByName('but0')) { button = mesh.material.emissiveTexture.getChildren()[0].getChildByName('but0') } else if (mesh.material.emissiveTexture.getChildren()[0].getChildByName('but1')) { button = mesh.material.emissiveTexture.getChildren()[0].getChildByName('but1') } else if (mesh.material.emissiveTexture.getChildren()[0].getChildByName('but2')) { button = mesh.material.emissiveTexture.getChildren()[0].getChildByName('but2') } else if (mesh.material.emissiveTexture.getChildren()[0].getChildByName('but3')) { button = mesh.material.emissiveTexture.getChildren()[0].getChildByName('but3') } else if (mesh.material.emissiveTexture.getChildren()[0].getChildByName('but4')) { button = mesh.material.emissiveTexture.getChildren()[0].getChildByName('but4') } else if (mesh.material.emissiveTexture.getChildren()[0].getChildByName(name + '-playbutton')) { button = mesh.material.emissiveTexture.getChildren()[0].getChildByName(name + '-playbutton') } else { console.log('no button'); } } return button; } public vrinteract () { var pickInfo = scene.pickWithRay(Ray); if (pickInfo && pickInfo.hit && pickInfo.pickedMesh.name.includes('uiplane')) { if ((this.vrMouseOverMesh === undefined || this.vrMouseOverMesh === null) || (pickInfo.pickedMesh.uniqueId !== this.vrMouseOverMesh.uniqueId)) { if (this.vrMouseOverMesh) { let button2 = this.getInteractiveButton(this.vrMouseOverMesh); if(button2){ button2.onPointerOutObservable.notifyObservers(); } } let button = this.getInteractiveButton(pickInfo.pickedMesh); if(button){ button.onPointerEnterObservable.notifyObservers(); } this.vrMouseOverMesh = pickInfo.pickedMesh as BABYLON.Mesh; } } else if (this.vrMouseOverMesh) { let button2 = this.getInteractiveButton(this.vrMouseOverMesh); if(button2){ button2.onPointerOutObservable.notifyObservers(); } this.vrMouseOverMesh = null; } else { console.log('no but'); } } What I would Like to know is, if there would be a better option.

With the recently added NPM support added in 3.1.0alpha3.4 and some popular React ES6/Typescript starter kits being deprecated in favour of CRA (https://github.com/facebookincubator/create-react-app), I wanted to finally try out importing GUI with CRA + TypeScript. Thought I would put up a repo for anybody interested. Here is the demo: https://brianzinn.github.io/create-react-app-typescript-babylonjs/ Source: https://brianzinn.github.io/create-react-app-typescript-babylonjs/ Source for page with BabylonJS: https://github.com/brianzinn/create-react-app-typescript-babylonjs/blob/master/babylonjs-site/src/containers/home/index.tsx So, it's pretty straightforward from the docs (http://doc.babylonjs.com/overviews/npm_support), but also in practice turned out quite fast to get started.

A leading Blockchain exchange headed up by one of the founders of Crypto is looking for a HTML5 Games Designer to provide a game ( roulette preferred) and tweak the GUI for crazy idea we would like to test. You would be joining a tight community of crypto nerds, building out your network & you would be paid in a Crypto this Founder invented. If this sounds appealing, you like bleeding edge stuff, please get in touch. Thanks.

I was just searching PGs for examples of AdvancedDynamicTexture.CreateForMesh and came across a really well done menu ( which I converted to TypeScript and am using): https://www.babylonjs-playground.com/#31DGYT#5 There's no menu in GUI... I've seen other nice controls like @Pryme8's spinner, dropdown and progress bar. I'm porting my interface from DOM to GUI, so interested to see what's out there before I start creating my own custom controls. One I'll be building for sure is a switcher (http://bootstrapswitch.com/). My question is - does anybody have GUI controls they'd like to share?

My Babylon.js scene was working finely yesterday...but today it showing me following errors. I definitely tell that this error is due to babylon.gui.js file. I have imported the scripts in following manner. and I used it to create gui as: var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI"); Please help me with this..how can I resolve the error and get my scene working smoothly..?? Thanks if you can help me..!

Hello, i have got a question. I am created a gui simple button and also i want to take the button properties from CSS file. I tried so many things, but i couldn't reach my aim. I need helps from masters.

Refer to the playground url below, if we press Up arrow to move the camera ahead and we'll see that the GUI.Multiline is still visible. Is there any way to hide the GUI.Multiline when all the connected meshes are behind the camera? https://www.babylonjs-playground.com/#XCPP9Y#723

Hi Devs, I am trying to rotate PlanePanel using TransformNode, but one strange thing that I observed is it's causing overlap between the meshes/buttons. Am I missing something here ? PG- https://www.babylonjs-playground.com/#HB4C01#53

Refer to the demo below, a GUI line can connect a mesh & a control at the same time by using: line.linkWithMesh(sphere); line.connectedControl = rect1; However, what I want to achieve is that let GUI line link with 2 meshes, each at the end of the line. (eg. line.linkWithMesh(sphere1, sphere2); Is there any way to achieve this? https://www.babylonjs-playground.com/#XCPP9Y#39

I am trying to use the GUI MultiLine in combination with a GUI Rectangle, which works fine: https://www.babylonjs-playground.com/#WV5YD6#1 The problem I'm having is the position of the line that is attached to the rectangle. Is there a way to not have the line centered in the middle of the rectangle, but define an offset that allows me to position the end of the line in one of the corners? In the screenshot, I marked what I'm trying to do with a red line:

Hi everyone, I've been trying to put together a small interactive scene where the user can click a babylon.gui button to activate an animation. The main issue I'm having is the connection between GUI elements and the per-object event/action system. My idea was to run a javascript function on the button, that then fires the action event, however after looking at documentation and lots of google, it doesn't appear like this can be done, at least not from the given triggers (excluding checking every frame). Is there a better method of doing this? Thanks in advance

I use BabylonJS.GUI as my GUI tool. In my project, I need to have many thumbs over a slider. ? I've found this image online, however I need more than 2 thumbs and number of thumbs over a slider is dynamically changed. Is there any way I can achieve this with current GUI controls? Should I code my own slider? Is there a work-around for this kind of applications? Thanks in advance!

I was trying to use the GUI inputText control to enter an url. Perhaps my expectations are wrong but I would expect to be able to Key in a colon : [Solved in latest version] Have new text replace old following a press of "Enter" key [Solved in latest version] Focus after "Enter" key [Solved in latest Version] Paste text I could not get any of these results in the example https://www.babylonjs-playground.com/#UWS0TS Are these known limitations?

Hi all, We have an application being build using babylonjs in which we are using an advanceddynamictexture to show a text block. We use the following line of code to create the texture: let textElementTexture: BABYLON.GUI.AdvancedDynamicTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateForMesh(baseMeshforTextBlock); We also have a refresh key which updates the current scene and redraws the meshes again. We observed that refresh takes a long time due to the text blocks. On profiling further we found out that the above line of code takes around 35ms during the initial scene creation but when we do the refresh, the same line of code takes around 1900ms. We are not sure why there's this huge increase in time. Can someone help us understand this or provide any further guidance to figure out what's causing this? Thanks in advance.

I searched the babylon.d.ts and cannot find keyword AdvancedDynamicTexture or GUI. Does any one know how to create AdvancedDynamicTexture using TypeScript? Or where is the correct place to get the latest definition file for babylon.js? https://raw.githubusercontent.com/BabylonJS/Babylon.js/master/dist/preview release/babylon.d.ts Solution: https://raw.githubusercontent.com/BabylonJS/Babylon.js/master/dist/preview release/gui/babylon.gui.d.ts

Refer to the link below, it looks like that the fatness of the font will be impacted by the width & height of the plain mesh. This is not what I expected. Actually I want the font be rendered normally no matter what the mesh size is. Is there way to fix this issue? How to calculate an appropriate size to make the font look better? https://www.babylonjs-playground.com/#YFRMAK#11 Solution: https://www.babylonjs-playground.com/#YFRMAK#15

I'm using InDesign to create a page layout for a presentation and then exporting to HTML and embedding a canvas for Babylon in an iFrame. This is awesome, because I get a live 3D window in my otherwise static presentation. The problem is, the html exporter sets things up so the pages auto-scale to "Best Fit" the current device aspect ratio. This is just what I want, but this scaling breaks the BabylonJS GUI because mouse/touch events no longer line up properly with the buttons. For some reason, this problem only happens on my desktop screens (one landscape 2k and one portrait 1200x1920), but touch works with no problem on my Note 8 and recent iPad. I found this answer on Stack Overflow which involves intercepting and transforming mouse/touch events, but I'm not sure how to apply this concept to the prebuilt GUI framework. Is there a generalized solution to getting Babylon GUI touch to work when the canvas is scaled dynamically?

I made a helper function to create GUI elements easier, could maybe even be used to import GUI's stored in JSON files quite easily Comments in PG should explain, but here's the basics: Create( elementType, parent, propertiesObject ) elementType = TextBlock, Image, etc.. E.g. new BABYLON.GUI.TextBlock(); ..turns into.. Create( "TextBlock", ...); parent = Parent Element.. E.g. parentElement.addControl( newElement ); ..turns into.. Create("TextBlock", parentElement, ...); propertiesObject = Width, Height, Text.. E.g. element.width = "200px"; element.height = "50px"; element.text = "Just a textBlock"; ..turns into.. Create("TextBlock", parentElement, { width: "200px", height: "50px", text: "Just a textBlock" }); More advanced useage using "designs" & Object.assign() to re-use code can be found in PG. http://playground.babylonjs.com/#ZQYH6Q Maybe some people will find it useful. Cheers, Have a nice weekend!

Hi devs, This is my first post in this forum, because i am new on HTML5, but have a huge experience on mobile gamedev industry. So i need you advice, is that UI good for Web game? or i need to change something? I will appreciate any advice! Thanks!

Hi, i am working on a babylon project, but i am facing a problem in resizing the text according to its width https://www.babylonjs-playground.com/#XCPP9Y#598 The above playground have the features, but the problem is its need time to resize to the ideal font size, just wanted to ask is there any way to resize the font to the ideal fontsize to fit into its max width? Thanks

Hi, I wanted to try the latest preview release, but my IDE says that "Image" does not exist on type "typeof GUI". By looking at the available types from the GUI, the IDE suggests GUIImage, so I replaced everything with GUIImage. Now I get a console error in my browser, saying "TypeError: BABYLON.GUI.GUIImage is not a constructor". I get the same error on the playground, which btw also suggests GUIImage. By looking at the source code, I think this was intentional, but it isn't mentioned in the what's new file for the preview release. You can see the error on the playground https://www.babylonjs-playground.com/#K60448#22 Is this a bug, or do I need to change something else to get it working? Thanks.

Hey, just started to use Babylon.js, and I am wondering if there is a way to disable or modify the animation on the GUI Button when it is pressed down. Thanks.

Hey, just thought i'd drop this here! If you move GUI control with moveToVector3 and later try to place another GUI in the same spot using top and left values from the first one; it's not gonna go as hoped due to now different alignments. Example to be seen here: https://www.babylonjs-playground.com/#GGB8I0 Not a bug technically i suppose, but certainly sent me hunting for one. ? I did not expect the alignment to change. No mention of this happening in the docs either (that my eyes could see). linkWithMesh appears to set alignments as well. Anyhoo, that's all.