Split your pixi.js application into multiple scenes and manage them with ease.
npm i pixi-scenes
You can use this library through import/require or by loading it straight into your html. After loading it you can access the library under the global declaration of the pixi namespace. ex: PIXI.scenes.SceneManager
import {SceneManager} from 'pixi-scenes';
const scenes = new SceneManager(myPixiApplication);scenes.add('splash', new SplashScene());
scenes.add('menu', new MenuScene());
scenes.add('gameover', new GameoverScene());
scenes.start('splash');import {Scene} from 'pixi-scenes';
export default class SplashScene extends Scene {
private header: PIXI.Text;
public init(): void {
this.header = new PIXI.Text('My Game Studio');
this.header.x = this.app.screen.width / 2;
this.header.y = this.app.screen.height / 2;
this.header.anchor.set(0.5);
this.addChild(this.header);
}
public start(): void {
this.header.angle = 0;
setTimeout(() => {
this.scenes.start('menu');
}, 5000);
}
public update(delta: number): void {
this.header.angle += delta / 1000 * 45;
}
}Splitting your codebase into multiple states/scenes in a common practice in the app/game world and can now easilly be done using this plugin for PIXI.js.
- Event system on manager
- Allow scene transitions
- Subscenes structure
- Resize integration
- Improve tests
- Improve readme
- Add documentation pages
- Add example project
- Add exports/globals tests
- Bundle definitions