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

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

...

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

engine.preloadStage(Level1).then(() => {
    engine.createStage(Level1);
});