Glorybabyloneditor NPM

Glory Babylon Editor

Glory is a powerful Babylon.js editor with an Entity Component System (ECS) that streamlines the development of 3D games and applications. Built on top of the popular Babylon.js framework, Glory enables developers to create, edit and manage 3D scenes with ease.

Features
Installation
Usage
Documentation
Contributing
License

Features

Intuitive, easy-to-use interface
Entity Component System for efficient and modular development
Built on top of the popular Babylon.js framework
Real-time preview of your 3D scene
Custom Log display
Play mode
Viewport mode

Installation

Clone the repository:
```
npm i glorybabyloneditor
```

Start the development server:
```
npm run start
```

Usage

Create or open a project by clicking on the "File" menu.
Import Glory in your main.ts file.
```
import * as Glory from "./Glory/index";
```

Make sure that your index.html file has a canvas for rendering.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initil-scale=1.0" />
    <title>Glory ECS</title>
    <style>
      body,html{
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
      #editorView{
        width: 100%;
        height: 100%;
        touch-action: none;
      }
    </style>
  </head>
  <body>
    <canvas id="editorView"></canvas>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

You initialize Glory

const editorViewCanvas = document.getElementById("editorView") as HTMLCanvasElement;
// Canvas for the preview, useEditor (true or false)
Glory.init(editorViewCanvas, true);
const scene = Glory.getScene();
const engine = Glory.getEngine();

You can start by creating a entitie like in example below where you inherit Glory.Entity in your entitie class and from there you can add your costum components to your entitie.

Player Entitie script:

import * as Glory from "../Glory/index";
import { playerController } from "./PlayerController";

export class Player extends Glory.Entity{

  onCreate(): void {
    console.log("Player Created");
    this.addComponent(new Glory.MeshComponent(this,"obj2Mesh", this.getScene(), Glory.MeshType.CUSTOM_MODEL, "model path"))
    this.addComponent(new playerController("PlayerController", this));
  }

  onUpdate(): void {
  }

  onQuit(): void {
  }

  
}

Player Controller Component:

import * as Glory from "../Glory/index";

export class playerController extends Glory.Component{
  @Glory.inspectable public speed = 0;

  public _keysPressed: { [key: string]: boolean } = {};

  private transform: Glory.TransformComponent;
  private Material: Glory.MaterialComponent;

  onStart(): void {
    this.transform = this.getGameObject().getComponentByType(Glory.TransformComponent) as Glory.TransformComponent;
    
    window.addEventListener("keydown", (e) => this.onkeydown(e));
    window.addEventListener("keyup", (e) => this.onkeyup(e));
  }

  onUpdate(): void {
    if (this._keysPressed["s"]) this.transform.position.z -= this.speed;
    if (this._keysPressed["a"]) this.transform.position.x -= this.speed;
    if (this._keysPressed["w"]) this.transform.position.z += this.speed;
    if (this._keysPressed["d"]) this.transform.position.x += this.speed;
  }


  private onkeydown(event: KeyboardEvent) {
    this._keysPressed[event.key.toLowerCase()] = true;
  }

  private onkeyup(event: KeyboardEvent) {
    this._keysPressed[event.key.toLowerCase()] = false;
  }
}

You can use @Glory.inspectable to display variables into inspector and use it from the inspector like the speed from the code above.
Than after creating the entite you can call it in your main.ts file.
```
new Player("Player", scene);
```

Documentation

Documentation will be coming soon.

Contributing

We welcome contributions to the Glory Babylon Editor! Please feel free to open an issue, submit a pull request, or join our community forum to discuss ideas and get support.