A simple, lightweight and completely dependency free canvas engine.
Create games, complex animations or specialized business solutions.
Direct usage in your project as ES6 NativeModules or via TypeScript.
The engine follows a simple concept → scenes with entities:
- A scene is a component that consumes entities and calls three phases for them.
- A entity is a component that can react to every scene phase.
- Update: Update programmatic logic for the entity.
- Collision: Handle collisions with other entities.
- Draw: Display the entity on the canvas.
- Install the package.
npm install web-engine-canvas
- Embed the WebComponent within your page.
<engine-canvas id="webcomponent-id"></engine-canvas>
- Retrieve the engine from the WebComponent.
import { EngineCanvas } from "[EnginePath]/engineCanvas.js";
const engine = EngineCanvas.getEngine("webcomponent-id", window);
- Initialize your assets.
const assetsFactory = new FactoryAssets();
const assets = assetsFactory.create();
assets.addImage(...);
assets.addAudio(...);
await assets.loadImagesAsync();
await assets.loadAudiosAsync();
- Create your scenes and entities.
const scene = new Scene(assets);
scene.push(...new Entity());
engine.push(scene);
- Start the engine.
engine.start();
The Web Engine Canvas is licensed under MIT. See the license file for more details.