superman2211/jeng

Flexible graphics engine written on TypeScript.

jeng (JavaScript Graphics Engine)

Cross platform and flexible graphics engine.

Samples

• 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

Getting started

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;

Architecture

Graph

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" }
	]
}

Engine

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.

Components

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;
}

Resources

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).

Features

Feature	Canvas	WebGL	iOS	Android
Image	Released	TODO	TODO	TODO
Textures	TODO	TODO	TODO	TODO
Sprites	TODO	TODO	TODO	TODO
Text	Released	TODO	TODO	TODO
Fonts	TODO	TODO	TODO	TODO
Shape	Released	TODO	TODO	TODO
Tween	Released	Released	TODO	TODO
Loader	Released	Released	TODO	TODO
Stage	TODO	TODO	TODO	TODO
Mask	TODO	TODO	TODO	TODO
Timeline	TODO	TODO	TODO	TODO
Layouts	TODO	TODO	TODO	TODO
Spine	TODO	TODO	TODO	TODO
Physics	TODO	TODO	TODO	TODO
3D Render	TODO	TODO	TODO	TODO
Effects	TODO	TODO	TODO	TODO

Development

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