Using gotoAndPlay with lib.stage & nested MovieClips

[kburke3]

Hello, I'm trying to use Pixi-Animate and I'm running into issues with gotoAndPlay. When looking at the Javascript file generated by Adobe Animate, I see that the Animate MovieClips inherit the PIXI MovieClip class. It's odd though (and maybe this is simply a misunderstanding of Javascript): I cannot call gotoAndPlay on lib.stage (or any other nested MovieClips). When I look at the Prototype for the object, I see gotoAndPlay (screenshot 1), but not in the instances themselves (screenshot 2). If I call lib.stage.gotoAndPlay("frame_label") it doesn't work. Could you please shed some light on how to work with the main stage timeline and nested timelines with Pixi-Animate? Thank you very much!

Prototype:

lib.stage:

[bigtimebuddy]

The reason is because lib.stage is a reference to the stage MovieClip, you actually need to create an instance of it using new lib.stage(). However, because all the assets associated with that stage need to be preloaded, the easiest thing to do is to checkout the HTML that's generated when you publish. This creates a PIXI renderer for you.

var scene = new PIXI.animate.Scene(300, 480, {
  view: document.getElementById("stage"),
  backgroundColor: 0xffffff,
  antialias: true
});
scene.load(lib.stage);

If you just want to preload and add to an existing PIXI renderer, use the PIXI.animate.load.

const renderer = new PIXI.autoDetectRenderer(1280, 720);
const root = new PIXI.Container();
PIXI.animate.load(lib.stage, root);
function update() {
     renderer.render(root);
     update();
}
update();

[kburke3]

Thanks for the quick response! Sorry, I'm still a bit confused. In the first PIXI renderer scenario, I do not see gotoAndPlay in the scene instance either. How can I play the scene from frame labels using the generated HTML? Or from nested MovieClip timelines? I see my frame labels ('welcome' and 'loading') being inherited in the .js file, but I'm not sure how to access them.

    lib.stage = MovieClip.extend(function () {
        timeline = this;
        MovieClip.call(this, {
            duration: 2,
            framerate: 24,
            labels: {
                loading: 0,
                welcome: 1
            }
        });

Thank you!

[kburke3]

I think I've figured my problem out (but I'm still glad to know if there's a better way to do this)...

I can reference the MovieClip's labels using:

scene.stage.children[0].gotoAndPlay("loading");