Skip to content

Levels & Layers ​

Levels ​

A level is a JSON file in public/data/levels/. It holds layers of entities, which become GameObjects when the level loads. Usually each entity extends a prefab and overrides a few properties:

json
{
  "name": "level1",
  "dimensions": {
    "width": 1536,
    "height": 1152
  },
  "entitiesByLayer": {
    "objects": [
      {
        "extends": "player",
        "position": {
          "x": 100,
          "y": 800
        }
      },
      {
        "extends": "grassMid",
        "position": {
          "x": 192,
          "y": 896
        }
      }
    ]
  }
}

You build levels with the in-game level editor rather than by hand. To create a new level, click the + button under the Levels tab of the Chrome extension.

Example: the Platformer's level.json.

Loading levels ​

ts
async OnStart()
{
    await this.LoadLevel('level1');
}

OnPostLoadLevel(level: LevelData)
{
    bare.camera.SetDimensionsToLevel();
}

Or through bare.level:

ts
await bare.level.Load('level2');
await bare.level.Restart();
await bare.level.Save();

OnPreLoadLevel and OnPostLoadLevel on your scene run before and after a level loads. See Level for all methods.

TIP

Set "firstLevelLoad": "level1" under bareEngine in package.json to start fetching that level while the page loads. See package.json Options.

Examples: the Platformer loads its level and fits the camera, and the RPG starts from the player's saved level.

Saving levels ​

A level can be saved while playing or from the editor, and only fields marked @Save or listed in saveVars are kept. See Save Data.

Layers ​

Within a scene, GameObjects live on layers. Layers decide draw order: later layers draw on top. objects is the default layer and always exists: if your layers list leaves it out, it's added at the start, below your own layers.

Add more in settingsData.json:

json
"layers": ["background", "objects"]

The generated Data.Layer updates to include them:

ts
import { Data } from './generated/assets';

this.AddGameObject('cloud', Data.Layer.BACKGROUND);
this.AddGameObject('cloud', 'background');   // same thing

Layer methods on bare.object:

ts
bare.object.GetLayerByName('background');
bare.object.GetLayerOf(obj);
bare.object.MoveToLayer(obj, layerIndex);

Layer settings ​

Settings per layer go in layersInfo:

json
"layersInfo": {
  "background": {
    "save": false,
    "showInEditor": false
  }
}

See all layer settings: which layers collide, whether a layer is saved and shown in the editor, and how the pointer picks objects on it.

Example: the Shmup defines a layer per kind of object (enemies, their bullets, your bullets, the player), and counts objects per layer.

Bare Engine is open source under the MIT license.