pixi-scenegraph
Scene Graph Engine for PIXI
Link to API documentation
2 |What is pixi-scenegraph?
pixi-scenegraph is a package providing scene management features for PIXI v8 3 | It allows defining scenes and switching between them e.g. MainMenuScene, GameScene, OptionsScene etc.
4 |The following image represents the object hierarchy:
5 |
pixi-scenegraph is written in typescript and aimed for typescript users but not limited to typescript only projects.
7 |8 |10 |*.ts -> import {SceneManager} from "pixi-scenegraph";
9 |
11 |13 |*.js -> var sg = require("pixi-scenegraph"); let scm = new sg.SceneManager();
12 |
What is a Scene
A Scene is like a PIXI stage, a container holding all objects we want to display. Think of scenes as game state containers e.g: loading scene, menu scene, options scene, in-game scene etc.
14 |A scene must have a unique name and the SceneManager can reference scenes by that name:
15 |sceneManager.ActivateScene("sceneName");
16 | Only one scene at a time is active and only the active scene is rendered. A scene can have a HudOverlay which is a container object rendered over the scene. In addition a MasterHudOverlay can be attached to the SceneManager. The MasterHudOverlay is rendered over all other content.
18 |Z-Index
19 |
Show me a 'Hello World' example
const scm = new SceneManager(renderOptions);
21 | const myScene = new MyScene();
22 | scm.AddScene(myScene);
23 | scm.ActivateScene(myScene); // or by name scm.ActivateScene('scene_name')
24 | How do I switch scenes?
const myScene1 = new MyScene1(); // name id 'scene_1'
26 | const myScene2 = new MyScene2(); // name id 'scene_2'
27 | const menuScene = new MenuScene(); // name id 'menu'
28 | scm.AddScene(myScene1);
29 | scm.AddScene(myScene2);
30 | scm.AddScene(menuScene);
31 | scm.ActivateScene(menuScene);
32 | inside the MenuScene class:
34 |btnStart.onClick = () => this.sceneManager.ActivateScene("scene_1");
35 |
Preserves the container width and height, no aspect ratio is calculated.
2 |