Page 1 of 1

AppCore Scene / Route Navigation

PostPosted: Tue Sep 12, 2017 4:23 pm
by rob
The new version of IGE (2.x) has a built-in state-based router system that acts in a similar way to ui-router from AngularJS. You can define states in your game, set the controller, sceneGraph file and any textures the state requires, then navigate to that state.

States are stacked so if you have a root state called "app" and you create a new state called "login" that sits on top of app, the state name will be "app.state". When you navigate to this state the router will first check the current state and determine if we are exiting any states and destroy those, then determine which states we are entering and initialise those. For example:

Imagine our current state is: "app.login"

We have finished logging in the user and now want to navigate to "app.home" where the player appears in their home.

1) We call: "$ige.go('app.home');"

2) The router diffs the two states and determines that we are leaving "login" but staying in "app" and then entering "home".

3) The "app.login" state is told it is being destroyed and clears up any objects etc.

4) The "app.home" state is told it is being initialised and first its textures are loaded, then the controller and finally the scene graph.

States are defined by calling $ige.route() and are given a state name and details about the state for both client and server e.g.

Code: Select all
$ige.route('app', {
   client: {
      controller: 'AppClient',
      sceneGraph: 'AppClientScene',
      textures: 'AppClientTextures'
   server: {
      controller: 'AppServer',
      sceneGraph: 'AppServerScene'

If you wish to use the same controller, sceneGraph and textures on both client and server simply omit the client and server objects:

Code: Select all
$ige.route('app', {
   controller: 'App',
   sceneGraph: 'AppScene',
   textures: 'AppTextures'

Notice that the controller, sceneGraph and textures fields take string values. These map to module names that you have previously registered with the appCore.module() method.

Effectively, the state / router system is a way to easily manage destroying and initialising various modules as the user navigates through your application.