Web Engine Canvas

Version 1.1.1-alpha

A simple, lightweight and completely dependency free canvas engine. Create games, complex animations or specialized business solutions.

• Architecture
• Code Documentation
• Tests Coverage
• Changelog

Examples

• Business Solutions
• Games And Animations

Package Footprint

| Library | Size | |---------|-------| | ESM | ~38KB | | UMD | ~31KB |

Concept

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.

Scene Phases:

1. Update: Update programmatic logic for the entity.
2. Collision: Handle collisions with other entities.
3. Draw: Display the entity on the canvas.

Quick Setup

1. Install the package.

npm install web-engine-canvas

2. Embed the WebComponent within your page.

<engine-canvas id="webcomponent-id"></engine-canvas>

3. Retrieve the engine from the WebComponent.

import { EngineCanvas } from "web-engine-canvas";

const engine = EngineCanvas.getEngine("webcomponent-id", window);

4. Initialize your assets.

const assetsFactory = new FactoryAssets();
const assets = assetsFactory.create();

assets.addImage(...);
assets.addAudio(...);

await assets.loadImagesAsync();
await assets.loadAudiosAsync();

5. Create your scenes and entities.

const scene = new Scene(assets);
scene.push(...new Entity());

engine.push(scene);

6. Start the engine.

engine.start();

License

The Web Engine Canvas is licensed under MIT. See the license file for more details.