# \[OPEN SOURCE\] ECS for Babylon

**URL:** <https://forum.babylonjs.com/t/open-source-ecs-for-babylon/49569>\
**Category:** Demos and projects\
**Tags:** npm, library, opensource\
**Created:** [April 11, 2024, 1:43pm UTC](https://forum.babylonjs.com/t/open-source-ecs-for-babylon/49569 "2024-04-11T13:43:21Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![pjoe](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pjoe/32/1906_2.png) [@pjoe](https://forum.babylonjs.com/u/pjoe)\
**Post date:** [April 11, 2024, 1:43pm UTC](https://forum.babylonjs.com/t/open-source-ecs-for-babylon/49569/1 "2024-04-11T13:43:21Z")

</div>

We have been testing out existing [ECS](https://en.wikipedia.org/wiki/Entity_component_system) libraries, but found we wanted something more Babylon “native” and ended up creating [bjs-ecs](https://www.npmjs.com/package/@skyboxgg/bjs-ecs) (published on npm)

Source is on [GitHub](https://github.com/Skybox-Technologies/bjs-ecs).

Feel free to reach out if interested in collaborating 🙂

-Pelle, [skybox.gg](https://skybox.gg)

# Excerpt from [docs](https://github.com/Skybox-Technologies/bjs-ecs/blob/main/libs/bjs-ecs/README.md)

## Objectives

Provide an easy way to help structure your game logic for Babylon.js based projects using ECS.  
This is (currently) more about the functionality of ECS than the performance benefits.  
In short if you are looking for an ECS implementation to handle 10Ks of entities,  
you may want to look elsewhere.

## Sample

[CodeSandbox](https://codesandbox.io/p/devbox/bjs-ecs-sample-sw27pj?file=%2Fsrc%2FcreateScene.ts)

## Initial integration with inspector

![Inspector Support](https://raw.githubusercontent.com/Skybox-Technologies/bjs-ecs/main/libs/bjs-ecs/inspector.png)

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [April 11, 2024, 2:43pm UTC](https://forum.babylonjs.com/t/open-source-ecs-for-babylon/49569/2 "2024-04-11T14:43:20Z")

</div>

Woot! This is excellent ! Thanks a lot!

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [April 11, 2024, 11:50pm UTC](https://forum.babylonjs.com/t/open-source-ecs-for-babylon/49569/3 "2024-04-11T23:50:48Z")

</div>

Really cool !!!

---

<div class="post-metadata">

**Author:** ![brianzinn](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brianzinn/32/28013_2.png) [@brianzinn](https://forum.babylonjs.com/u/brianzinn)\
**Post date:** [April 12, 2024, 4:21am UTC](https://forum.babylonjs.com/t/open-source-ecs-for-babylon/49569/4 "2024-04-12T04:21:36Z")

</div>

Looks great. I haven’t seen anybody else using `inspectableCustomProperties` before.

I noticed you are making a tab and I hadn’t seen that before. If you add a custom property, you can get access to entity details (or anything in scope). Assuming the entity has same lifecycle as object (looks like it does from `onDisposeObservable`). Like this:

```javascript
Object.defineProperty(node, 'entity-id', {
  get() {
    return entity.id;
  },
  enumerable: true,
})

node.inspectableCustomProperties.push(
{
  label: `Entity ID`,
  propertyName: "entity-id",
  type: InspectableType.String,
},
...
)

```

I like what you did with `??=` to assign - I should do that instead of clobbering the inspectableCustomProperties array 😃

Super useful for debugging - cool to see that you tapped into that feature!

---

<div class="post-metadata">

**Author:** ![pjoe](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pjoe/32/1906_2.png) [@pjoe](https://forum.babylonjs.com/u/pjoe)\
**Post date:** [April 12, 2024, 6:38am UTC](https://forum.babylonjs.com/t/open-source-ecs-for-babylon/49569/5 "2024-04-12T06:38:53Z")

</div>

TBH. first time playing with custom props for inspector 🙂

I initially had Entity ID as a String, but that made it editable, will try out your approach where you mark the property readonly - thanks 🙏

Also had some issues with Options behaving weird, when 2 nodes had Options properties with same name but different set of values … should get around to filing an issue.

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [April 12, 2024, 10:49am UTC](https://forum.babylonjs.com/t/open-source-ecs-for-babylon/49569/6 "2024-04-12T10:49:25Z")

</div>

I already use custom properties in the Inspector. I am a big fan of tagging my meshes/nodes and using tag queries to look them up so I added Tags to the inspector.

Anyone else using tags?

[https://doc.babylonjs.com/features/featuresDeepDive/tags](https://doc.babylonjs.com/features/featuresDeepDive/tags)

---

<div class="post-metadata">

**Author:** ![pjoe](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pjoe/32/1906_2.png) [@pjoe](https://forum.babylonjs.com/u/pjoe)\
**Post date:** [April 12, 2024, 11:36am UTC](https://forum.babylonjs.com/t/open-source-ecs-for-babylon/49569/7 "2024-04-12T11:36:25Z")

</div>

We actually also evaluated just using Tags for querying on Nodes, but in the end found we wanted a more full ECS system for our use case.

I do however think Tags are probably in general a bit underrated 🙂

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [April 12, 2024, 12:51pm UTC](https://forum.babylonjs.com/t/open-source-ecs-for-babylon/49569/8 "2024-04-12T12:51:14Z")

</div>

> [@pjoe](#):
>
> I do however think Tags are probably in general a bit underrated 🙂

Can’t agree more! It’s a very cool and effiicient way to look up entities on your scene.

---

<div class="post-metadata">

**Author:** ![pjoe](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pjoe/32/1906_2.png) [@pjoe](https://forum.babylonjs.com/u/pjoe)\
**Post date:** [April 15, 2024, 2:40pm UTC](https://forum.babylonjs.com/t/open-source-ecs-for-babylon/49569/9 "2024-04-15T14:40:14Z")

</div>

FYI: just landed using archetypes for entity storage in v. 0.2.0.

This improves query performance by x10 in our benchmark ⚡

---

<div class="post-metadata">

**Author:** ![Rasmus\_Dev](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/rasmus_dev/32/36821_2.png) [@Rasmus\_Dev](https://forum.babylonjs.com/u/Rasmus_Dev)\
**Post date:** [April 18, 2024, 12:27pm UTC](https://forum.babylonjs.com/t/open-source-ecs-for-babylon/49569/10 "2024-04-18T12:27:16Z")

</div>

**[Update]**  
We just added filtering and type-completion to the entityEvents.on function.  
This means that you will now be able to pass an array of components as a second argument, when registering your listener. So that you both get type completion in the callback, and the event handler will only be invoked for entities, which includes the components specified in the second argument.
