Change sceen on ui button click

Help & Support
1

hiya, is there an easy way of clicking a ui button and going to a new scene?

thank you

2

Hi @jono3d,

The way I set this up is by having a scene manager that transports itself between scenes. To ensure that it only gets loaded once, I made an initialization scene that loads the first scene of my choosing and then uses app events fired by the buttons to change scenes from there.

Check out this project:

https://playcanvas.com/project/756176/overview/scene-manager

To see it at work.

4 Likes
3

briliant thank you!

var TweenPosition = pc.createScript('tweenPosition');

TweenPosition.attributes.add('duration', {type: 'number', default: 1.0});
TweenPosition.attributes.add('easing', {type: 'string', default: 'Linear'});
TweenPosition.attributes.add('delay', {type: 'number', default: 0});
TweenPosition.attributes.add('loop', {type: 'boolean', default: true});
TweenPosition.attributes.add('yoyo', {type: 'boolean', default: false});
TweenPosition.attributes.add('repeat', {type: 'number', default: 0});

TweenPosition.prototype.initialize = function() {
    // create our tween
    this.reset();
    
    // handle attribute changes
    this.on('attr:duration', function (value) {
        this.tween.duration = value;
    }, this);
    
    this.on('attr:easing', this.reset, this);
    this.on('attr:delay', this.reset, this);    
    this.on('attr:loop', this.reset, this);    
    this.on('attr:yoyo', this.reset, this);    
    this.on('attr:repeat', this.reset, this);
};

TweenPosition.prototype.reset = function () {                   
    // if we are already tweening then stop first
    if (this.tween) {
        this.tween.stop();
    }
    
    // reset our position
    this.entity.setLocalPosition(0.16, 0.968, -4.749);
    
    // create a new tween using our script attributes
    this.tween = this.entity.tween(this.entity.getLocalPosition())
        .to(new pc.Vec3(0.16, 0.968, -3.61), this.duration, pc[this.easing])
        .delay(this.delay)
        .loop(this.loop)
        .yoyo(this.yoyo);
    
    // only set repeats if loop is false
    if (! this.loop)
        this.tween.repeat(this.repeat);
    
    // start the tween
    this.tween.start();
};



works great with the tweening..  how do i make that work with a click event? is there some code i can paste this into?
4

Hi @jono3d,

If I’m reading this correctly, this is related to your thread regarding smooth camera movement. If so, I will put an example together for you and reply there in a bit.

1 Like
5

Lol yes sorry!

6

this helped me a lot:

SceneManager

it’s not changing scenes, but adding

1 Like