ecsy-babylon's Introduction

ecsy-babylon

babylon.js ecsy binding and helpers

Getting Started

Add script tags of Babylon.js, ecsy and ecsy-babylon.
Add a canvas tag as container.
Build a basic scene.

<html>
  <head>
    <script src="https://unpkg.com/[email protected]/build/ecsy.min.js"></script>
    <script src="https://unpkg.com/[email protected]/babylon.js"></script>
    <script src="https://unpkg.com/@megavr/[email protected]/dist/ecsy-babylon.min.js"></script>
  </head>
  <body>
    <canvas id="renderCanvas" style="width: 100%; height: 100%"></canvas>
    <script>
      /** Step 1 - Preparation */
      // create a ECSY world object
      const world = new ECSY.World();
      // register necessary systems from ecsy-babylon(global name: EB)
      world
        .registerSystem(EB.GameSystem)
        .registerSystem(EB.TransformSystem)
        .registerSystem(EB.CameraSystem)
        .registerSystem(EB.MeshSystem)
        .registerSystem(EB.InputSystem);
      
      /** Step 2 - Start the game engine */
      // get canvas element
      const canvas = document.getElementById("renderCanvas");
      // get GameSystem object
      const game = world.getSystem(EB.GameSystem);
      // start GameSystem by providing canvas object
      game.start(canvas);
      
      /** Step 3 - Start to build your scene */
      // add a scene
      const scene = world.createEntity().addComponent(EB.Scene);
      // add a camera
      const camera = world.createEntity()
        .addComponent(EB.Transform)
        .addComponent(EB.Camera);
      // up camera to height of eyes at standing human
      camera.getMutableComponent(EB.Transform).position.y = 1.7;
      // add a box
      const box = world.createEntity()
        .addComponent(EB.Transform)
        .addComponent(EB.Mesh);
      // put box in front of camera
      box.getMutableComponent(EB.Transform).position.z = 3;
      
      /** Step 4 - Add some interaction to your scene */
      // add keyboard input
      world.createEntity().addComponent(EB.Input, { onKey: onKey });
      // rotate box when press R/r key
      function onKey(key, down) {
        if (down) {
          if (key === "R" || key === "r") {
            box.getMutableComponent(EB.Transform).rotation.y += 30;
          }
        }
      }
    </script>
  </body>
</html>

Examples

https://megavr.github.io/ecsy-babylon-examples/

ecsy-babylon's People

Contributors

Stargazers

Watchers

ecsy-babylon's Issues

Rename Repository

Could be worth renaming this repo as it conflicts with the ecsy-babylon repo cited in the docs. This one shows up first in a google search first which can confuse people.