Archived

This repository is archived. Development migrated to https://github.com/RobotlegsJS/RobotlegsJS-Framework/blob/master/packages/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

yarn add easeljs@1.0.2 reflect-metadata

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

Dependencies

Peer Dependencies

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

Checking the example

You can check our example project here.

RobotlegsJS CreateJS for enterprise

Available as part of the Tidelift Subscription

The maintainers of @robotlegsjs/createjs and thousands of other packages are working with Tidelift to deliver commercial support and maintenance for the open source dependencies you use to build your applications. Save time, reduce risk, and improve code health, while paying the maintainers of the exact dependencies you use. Learn more.

License

MIT

RobotlegsJS/RobotlegsJS-CreateJS