Explainer screen

Help & Support
1

Hi everyone,

Id like to have a very simple explainer on how to play my game. It should just consist of one image/page and dissapear on a click/touch.

I allready tried with some UI buttons and a script on changing scenes, but I have the feeling its loading quite slow. Does someone happen to have a more neat setup than this? (also for some reason, when it moves from the UI scene to Scene1 which is the game itself it replaces my opcaity materials with solids :S )

var ChangingScenes = pc.createScript(‘changingScenes’);

ChangingScenes.attributes.add(“scene1”, {type: “string”, default: “0”, title: “Scene ID to Load”});
ChangingScenes.attributes.add(“scene2”, {type: “string”, default: “0”, title: “Scene ID to Load”});
ChangingScenes.attributes.add(“scene3”, {type: “string”, default: “0”, title: “Scene ID to Load”});

ChangingScenes.prototype.initialize = function(dt) {
// Change scenes on button click
this.app.root.findByName(‘Change scene 1’).element.on(‘click’, function (event) {
this.changeScenes(this.scene1);
}, this);

this.app.root.findByName('Change scene 2').element.on('click', function (event) {
   this.changeScenes(this.scene2);       
}, this);

this.app.root.findByName('Change scene 3').element.on('click', function (event) {
   this.changeScenes(this.scene3);       
}, this);

};

ChangingScenes.prototype.changeScenes = function(sceneId) {
// Get a reference to the current root object
var oldHierarchy = this.app.root.findByName (‘Root’);

// Load the new scene. The scene ID is found by loading the scene in the editor and 
// taking the number from the URL
// e.g. If the URL when Scene 1 is loaded is: https://playcanvas.com/editor/scene/475211
// The ID is the number on the end (475211)
this.loadScene (sceneId, function () {
    // Once the new scene has been loaded, destroy the old one
    oldHierarchy.destroy ();
});

};

ChangingScenes.prototype.loadScene = function (id, callback) {
// Get the path to the scene
var url = id + “.json”;

// Load the scenes entity hierarchy
this.app.loadSceneHierarchy(url, function (err, parent) {
    if (!err) {
        callback(parent);
    } else {
        console.error (err);
    }
});

};

2

Hey @linelineline,

Is there any specific reason you’re using Playcanvas Scenes for that? Each scene has to be downloaded separately. That might explain why it feels slow.

If there isn’t, one simple way to achieve this, is to create a 2D Screen entity (use a single scene for everything) and simply enabling and disabling it on button click. Something like this:

this.entity.enabled = false; // or true
3

doh… thanks @Leonidas that seems like the obvious choice. thanks !

just a question, if I need it working for both touch input and keyboard input how do I write that?

bests

1 Like
4

So for interacting with a UI button for example using mouse or touch input, take a look at this example:

https://developer.playcanvas.com/en/tutorials/ui-elements-buttons/

To add keyboard interaction, you can easily expand using simple keyboard events, see this tutorial:

https://developer.playcanvas.com/en/tutorials/keyboard-input/

5

allright thanks Leonidas :slight_smile:

6

wait so would I first have to make events or can i call it much simpler?

xxxx.prototype.addEventCallbacks = function() {
if (this.app.mouse) {
this.app.mouse.on(pc.EVENT_MOUSEMOVE, this.onMouseMove, this);
}

if (this.app.touch) {
    this.app.touch.on(pc.EVENT_TOUCHSTART, this.onTouchStart, this);
    this.app.touch.on(pc.EVENT_TOUCHMOVE, this.onTouchMove, this);
}
7

For both mouse and touch input you need to add event listeners.

Only for keyboard you can do without.

8

hey i looked at the ui-elements-buttons example but I still dont really get how to make that disable an entity.

something like this ?

var BtnStates = pc.createScript(‘btnStates’);

BtnStates.prototype.initialize = function() {

// mouse events
this.entity.element.on('mouseenter', this.onEnter, this);
this.entity.element.on('mousedown', this.onPress, this);
this.entity.element.on('mouseup', this.onRelease, this);
this.entity.element.on('mouseleave', this.onLeave, this);

// touch events
this.entity.element.on('touchstart', this.onPress, this);
this.entity.element.on('touchend', this.onRelease, this);

};

BtnStates.prototype.onPress = function (event) {
this.entity.enabled = false;

};

9

Yes, exactly, you select one of the input handlers like onPress, or even better onRelease and do that.

10

thanks! how come onRelease is better?

11

So, onPress will be called as many times as you hold your mouse click or touch your finger or screen. Even on quick actions it can be called more than one times and most of the time that is unnecessary.

OnRelease here will be called only once, either on mouse click up or on touch gesture end. Which is what you want here.

1 Like
12

makes sense!

hmm but im getting an error "cannot read property ‘on’ of undefined

13

Does your entity where you attached the script has an element component attached? Also make sure the Use Input flag is set to true, on the element component.

14

oh… that was it! missed the input flag!
thanks you so much its working like a charm now

1 Like