@robotlegsjs/createjs

RobotlegsJS CreateJS Extension

Integrate RobotlegsJS framework with CreateJS.

Installation

You can get the latest release and the type definitions using NPM:

npm install @robotlegsjs/createjs --save

Or using Yarn:

yarn add @robotlegsjs/createjs

The EaselJS dependency is added as peerDependencies, allowing the final user to choose the desired version of the easeljs library on each project.

The @robotlegsjs/createjs package is compatible with versions between the >=1.0.2 <2 version range of easeljs library.

As example, when you would like to use the version 1.0.2 of easeljs library, you can run:

npm install easeljs@1.0.2 reflect-metadata --save

or

yarn add easeljs@1.0.2 reflect-metadata

Then follow the installation instructions of RobotlegsJS library to complete the setup of your project.

Dependencies

• RobotlegsJS
• tslib

Peer Dependencies

• EaselJS
• reflect-metadata

Usage

import { Context, MVCSBundle } from "@robotlegsjs/core";

import { ContextView, CreateJSBundle } from "@robotlegsjs/createjs";

import { MyConfig } from "./config/MyConfig";

import { RobotlegsView } from "./view/RobotlegsView";

export class Game {

    private _canvas: HTMLCanvasElement;
    private _stage: createjs.Stage;

    private _context: Context;

    constructor () {
        this.init();
    }

    private init(): void {
        this._canvas = <HTMLCanvasElement>(document.getElementById("canvas"));
        this._stage = new createjs.Stage(this._canvas);

        this._context = new Context();
        this._context.install(MVCSBundle, CreateJSBundle).
            configure(new ContextView(this._stage)).
            configure(MyConfig).
            initialize();

        // enable touch interactions if supported on the current device:
        createjs.Touch.enable(this._stage);

        // enabled mouse over / out events
        this._stage.enableMouseOver(10);
        this._stage.mouseMoveOutside = true; // keep tracking the mouse even when it leaves the canvas

        let robotlegs: RobotlegsView = new RobotlegsView();

        robotlegs.x = this._canvas.width / 2;
        robotlegs.y = this._canvas.height / 2;

        this._stage.addChild(robotlegs);

        window.addEventListener("resize", this.handleResize.bind(this));
        createjs.Ticker.addEventListener("tick", this.tick.bind(this));
    }

    private handleResize(): void {
        this._stage.update();
    }

    private tick(event: Object): void {
        this._stage.update(event);
    }
}

See full example here

Running the example

Run the following commands to run the example:

npm install
npm start

or:

yarn install
yarn start

License

MIT