AppCore Scene / Route Navigation

This is the 2017 version of IGE and is based on the "appCore" branch in git and is a relatively large re-write of many areas of the engine to allow for automatic dependency injection in your code, much simpler navigation of your game scenes etc.

It is modelled after AngularJS in the way dependency injection works and modelled after ui-router for how routing works, although it doesn't include either of those libraries.

AppCore Scene / Route Navigation

Postby rob » Tue Sep 12, 2017 4:23 pm

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.
CEO & Lead Developer
Irrelon Software Limited
User avatar
Site Admin
Posts: 316
Joined: Tue Oct 22, 2013 5:08 pm

Return to Version 2.x

Who is online

Users browsing this forum: No registered users and 1 guest