https://github.com/theatrejs/theatrejs

🎮 A JavaScript 2D Game Engine focused on creating pixel art games.
https://github.com/theatrejs/theatrejs

2d canvas engine game game-engine html html5 javascript pixel-art theatrejs webgl webgl2

Last synced: about 3 hours ago
JSON representation

🎮 A JavaScript 2D Game Engine focused on creating pixel art games.

• Host: GitHub
• URL: https://github.com/theatrejs/theatrejs
• Owner: theatrejs
• License: mit
• Created: 2024-03-09T13:59:49.000Z (9 months ago)
• Default Branch: master
• Last Pushed: 2024-10-28T22:25:09.000Z (22 days ago)
• Last Synced: 2024-10-28T23:23:33.754Z (22 days ago)
• Topics: 2d, canvas, engine, game, game-engine, html, html5, javascript, pixel-art, theatrejs, webgl, webgl2
• Language: JavaScript
• Homepage: https://theatrejs.github.io/theatrejs/
• Size: 1.32 MB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![Copyright](https://img.shields.io/badge/©-deformhead-white.svg)](https://github.com/deformhead) [![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/theatrejs/theatrejs/blob/master/LICENSE) [![Bundle Size (Gzipped)](https://img.shields.io/bundlejs/size/@theatrejs/theatrejs@latest)](https://www.npmjs.com/package/@theatrejs/theatrejs/v/latest) [![NPM Version](https://img.shields.io/npm/v/@theatrejs/theatrejs/latest)](https://www.npmjs.com/package/@theatrejs/theatrejs/v/latest)

# Theatre.js

> *🎮 A JavaScript 2D Game Engine focused on creating pixel art games.*

## Installation

```shell

npm install @theatrejs/theatrejs --save

```

## Quick Start

> *⚠️ This example does not include the preloading of assets.*

```javascript

import {Actor, Engine, Sprite, Stage, Vector2} from '@theatrejs/theatrejs';

import textureHero from './hero-16x16.png';

class Hero extends Actor {

    onCreate() {

        this.setSprite(new Sprite({

            $sizeTarget: new Vector2(16, 16),

            $textureColor: textureHero

        }));

    }

}

class Level1 extends Stage {

    onCreate() {

        this.createActor(Hero);

    }

}

const engine = new Engine({$container: document.body});

engine.initiate();

engine.createStage(Level1);

```

## With Preloading

> *⚠️ Assets are preloaded asynchronously.*

#### `asynchronous module`

```javascript

import {Engine, FACTORIES, Sprite, Vector2} from '@theatrejs/theatrejs';

import textureHero from './hero-16x16.png';

class Hero extends FACTORIES.ActorWithPreloadables([FACTORIES.PreloadableTexture(textureHero)]) {

    onCreate() {

        this.setSprite(new Sprite({

            $sizeTarget: new Vector2(16, 16),

            $textureColor: textureHero

        }));

    }

}

class Level1 extends FACTORIES.StageWithPreloadables([Hero]) {

    onCreate() {

        this.createActor(Hero);

    }

}

const engine = new Engine({$container: document.body});

engine.initiate();

await engine.preloadStage(Level1);

engine.createStage(Level1);

```

#### `synchronous module`

```javascript

...

const engine = new Engine({$container: document.body});

engine.initiate();

engine.preloadStage(Level1).then(() => {

    engine.createStage(Level1);

});

```

## [API](https://theatrejs.github.io/theatrejs/index.html)