Cross platform and flexible graphics engine.

• Hello World Code / Build

• Image simple Code / Build

• Image color sample Code / Build

• Image transform sample Code / Build

• Simple text sample Code / Build

• Advanced text sample Code / Build

• Simple shape sample Code / Build

• Advanced shape sample Code / Build

• Graphics shape sample Code / Build

• Interactive mouse sample Code / Build

• Interactive touch sample Code / Build

• Interactive keyboard sample Code / Build

• Complex sample Code / Build

Install

npm i @jeng/canvas-engine @jeng/text

Import

import { CanvasTextExtension, Text } from '@jeng/text';
import { CanvasEngine } from '@jeng/canvas-engine';

Construct engine

// create engine
const engine = new CanvasEngine();
// add text extension
CanvasTextExtension.init(engine);
// set fullscreen mode
engine.screen.fullscreen = true;
// start update loop
engine.ticker.play();
// add engine view to page
document.body.appendChild(engine.platform.view);

Create application graph

engine.root = { type: 'text', text: 'Hello World!' } as Text;

The engine is based on JSON graph. The graph consists of components and properties, as well as event handlers. It can be described both declaratively and imperatively. Also graph can be loaded like a regular JSON. You can change the graph as you want. The graph is abstract and does not depend on the specific implementation of the engine. For example:

{
	"type": "container",
	"children": [
		{ "type": "image", "src": "image.jpg" },
		{ "type": "text", "text": "Simple text" }
	]
}

The engine consists of main features and extensions. It can be constructed from different components and extensions. You can overload main features and add your own extensions. Engine updates, renders graph and proesses events. At any time you can change the engine or change its components or extensions. Each engine uses one of the rendering backends for different platforms - canvas, webgl, ios, android etc.

There are two kind of components - native and high-level. Native components written on TypeScript as engine extensions. For example: image, text or shape. High-level components consists of native components and described via functions. For example:

import { Shape } from '@jeng/shape';

export interface PreloaderInfo {
	getProgress(): number;
	getWidth(): number;
	getHeight(): number;
}

export function preloader(info: PreloaderInfo) {
	const height = 20;
	return {
		type: 'shape',
		scaleX: 1,
		y: info.getHeight() - height,
		data: {
			type: 'rectangle',
			width: 1,
			height,
			fill: 0xff0000,
		},
		onUpdate() {
			this.scaleX! += (info.getWidth() * info.getProgress() - this.scaleX!) / 2;
		},
	} as Shape;
}

All resources are resolved and loaded automatically. You can add your own resolver or resources manager. If you want to control loading process you can use loader component.

const app = {
	type: 'loader',
	visible: false,
	enabled: false,
	onLoaded() {
		console.log('background loaded');
		this.visible = true;
		this.enabled = true;
	},
	children: {
		background: {
			type: 'image',
			src: BACKGROUND,
			scaleX: 1.5,
			scaleY: 2,
		},
	},
};

You can use aliases for resources, for example for image you can use different formats for all platforms. Additionally you can preload scenes excluded from graph via loader (TODO).

Build all packages

yarn build

Build only engine packages

yarn build-engine

Build only changed engine packages

yarn build-dev

Test all packages

yarn test

Lint all packages

yarn lint

Clean all packages

yarn clean