A naive implementation of the ECS pattern in typescript!
npm package can be found here
- Be sure to checkout the wave shooter demo for a practical example
- Make sure to install the package, preferably through npm, but you could use the master branch if you want to, although expect breaking changes.
This is a WIP project and things are bound to change. I strive to make it as user friendly as possible, but there is a lot to reach that goal. That being said. This is how you can use 1.4:
// create some types that represent components// create a manager;// register your types in the manager with default valuesregisterComponentTypemanager, ;registerComponentTypemanager, ;registerComponentTypemanager, ;// create an entity and attach components to them;;addComponentmanager, entityId, ;addComponentmanager, entityId, ;addComponentmanager, entityId, ;// create systems that will run each frame// all systems take in delta time as their first argument (the time since last frame)// all other arguments needs to be wrapped in a Component<T>// For simple query requirements ts-ecs can generate the query for you base on your system// Simple meaning only "AND" so in this case we ask for all entities with circle and position and colorregisterSystemmanager, drawCircleSystem;manager.dispatch;
See the circle demo for a better overview of a simple application.
Using this project
This project utilizes typescript transformers. In order for it to work in your project you will have to enable the transformers. How you do this depends on the project facilities:
const managerEndpointsTransformer = default; // <--moduleexports = 'ts-loader';
read more about webpack here
Remeber to build using
read more about ttypescript here
Open index.html from the docs folder in a browser
You can also build the documentation using
npm run doc
How to build
npm run build
To run tests:
You can check out my simple wave shooter implementation here