Hello all,
Wanted to ask if someone have any sample of palycanvas project in which you can change scenes using interface buttons,
Smth similar like this sample:
Thanks all for attention,
Kind regards, Ivan.
Hi @Ivan,
I don’t think there is something similar with your example, as far as the presentation is concerned.
But here is a quick project I’ve created based on the Changes Scenes tutorial example. Press the button to change between scenes:
1 Like
Yes, its similar,
Is it possible to create three buttons: Change scene 1, Change scene 2, Change scene 3, with right and left arrow to chose what scene I want to change, also during changing buttons,with help arrows, should be changed illumination by some color of any box among three in source scene…!?
Yes it can, though I am not able to code this in right now.
Check the UI tutorials on how to create multiple buttons and from the you can easily call the changeScenes() method with the right scene ID each time.
I think it will work for you easily.
Thank you,
I need to try!
1 Like
Also want to ask, where scenes are situated, I don`t see them in the root!?
You can have only one scene loaded at any time, so the hierarchy you see under Root is the for the selected/active scene.
You can select any other scene at any point for viewing/editing using this dialog:
Understood
The following code should work @Ivan_Stratiichuk.
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() {
// 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 (this.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);
}
});
};
If you’re wondering how to get the scene ID -
The number at the end of the url is the scene ID.
2 Likes
Let me check PLS! =)
Could you advice me smth in case if I see that btn-states.js code in my project don`t work as in your!?
Right, try pressing the Parse button. If your script is correct the attributes will show up.
1 Like
nothing changed, it seems that script don`t work for my scene…!?
I didn`t change the code…
//start code
var BtnStates = pc.createScript(‘btnStates’);
// initialize code called once per entity
BtnStates.prototype.initialize = function() {
// mouse events
this.entity.element.on('mouseup', this.onRelease, this);
// touch events
this.entity.element.on('touchend', this.onRelease, this);
};
BtnStates.prototype.onRelease = function (event) {
this.app.fire('change:scene 2');
};
If you use my btn-states.js script there are no script attributes, I’ve removed them.
So it’s ok if you don’t see anything listed there, on my project it’s most likely a caching issue since I got that script from the UI Buttons example (where there are attributes).
In chaning scene.js code I have here mistake here, so it means that I have problems with btn.states.js code, am I right?
Do you have an entity in your hierarchy named Change scene 1 that also has an element component on it?
If not, then the error is correct, this script can’t run without those entities properly set up in place.
one moment pls!
Hello,
When I`m trying to change scene, I see this mistakes, could you help to figure out how to solve it!?
Ok, this is a really stupid mistake on my part. Change your function call to this.changeScenes(), with the s at the end. Guess this is what happens when I try to type code on mobile😂. Edited my original post as well.
EDIT -
Just so you can troubleshoot this issue on your own next time, when you get an error message saying function is not defined, then just scroll through your list of functions in the script, and double check your call. More often than not, you’d be able to fix it yourself.
