Skip to content

superman2211/jeng

Repository files navigation

jeng (JavaScript Graphics Engine)

build

Cross platform and flexible graphics engine.

Samples

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.

Engine architecture

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