This is the link for playground
Hello everyone,
I try to create an earthquake game with Babylon js.
My problem is, I want to start my game to show a popup with some text and a start button. When the start button is press the game will start. That’s it.
I would be grateful if anyone could consider a little precious time for me.
Thank you, everyone.
Hi,
I’m not sure if your question is about BabylonJs (maybe I misunderstood). I think you can take a look at Bootstrap modal to add a dialog over your canvas :
You can also use basic CSS and have a splashscreen div over/hiding the 3d canvas. The splashscreen can have your text and button. When the button is pressed remove the splashscreen div.
https://www.tutorialrepublic.com/codelab.php?topic=faq&file=css-overlay-one-div-over-another-div
Depending on the ‘type’ of ‘popup screen’ you want, you can build 2D and 3D GUI for this right within Babylon framework.
https://doc.babylonjs.com/how_to/gui
https://doc.babylonjs.com/how_to/gui3d
I use that for my game to show a ‘popup’ (dialog within the scene with OK button). Both at start and at the end (level completed).
Bind a ‘game started’ variable plus the hiding of the GUI visibility to the click on the OK button. And make your game play logic such that only after ‘game started’ variable has been set to true, that player can give input for controlled character/vehicle and gameplay stuff starts moving around etc.
@ninkinoarimasu, I will always fall on the side of integrating your splash screen into your Babylon scene because you have a lot of control over the behavior of the splash screen as well as using the splash screen to trigger events in your game or receive information back from your game.
While this example is not a splash screen, you can see that the playground starts with a UI button that disappears when pressed, causing the scene to start a particle system as well as some animations in node material parameters and vertex displacement. Then once it is all done, the UI is bought back to play the reverse of the initial states and back again.
https://playground.babylonjs.com/#BP7QYG
This could easily be expanded out to a full splash screen with buttons or other information inside the splash screen. Things like high score, feedback on how the player did (points, combos, whatever), or really anything else you want to communicate to the player from the game loop.
Hope this helps!