Displaying UI before game starts

hey everyone
I have a small project that basically consists of 1 animation and a script changing between 2 cameras.

I would like to display a UI before the scene starts (just an alpha image with a drawing on how to press a button), how do I come around that ?

I think I can manage showing the display itself and that it goes away on mouseclick but I dunno how to prevent the animation and sound from beginning alongside?

hope someone has a a lead
bests

You can leverage the Event system in Playcanvas to pass events between scripts. For example, a main script, where the application starts, could fire an event, saying “Hey, app is ready, show UI”. If a user clicks a UI button, another event could be fired, saying “Hide the UI and show the scene”. And by “scene”, I mean the entities within your scene. In your case you only need a single scene.

// main.js
this.app.fire('show-ui');

// ui.js
// in your initialize() for example
Ui.prototype.initialize = function() {
    this.app.on('show-ui', this.showUI, this);
}
// showUI() could simply locate the correct 2D UI elements 
// and enable them (you can keep them disabled at start)
Ui.prototype.showUI = function() {
    // enable the screen elements
}
// a hideUI() could similarly wait for event that you fire when you 
// want to show the scene and hide the elements

// your other script, responsible for showing the scene could similarly 
// wait for the event to start the scene and enable your cameras with 
// scene entities
1 Like