Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @robotlegsjs/createjs with all npm packages installed. Try it out:

require("easeljs/package.json"); // easeljs is a peer dependency. require("reflect-metadata/package.json"); // reflect-metadata is a peer dependency. var createjs = require("@robotlegsjs/createjs")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@robotlegsjs/createjs v1.0.0

CreateJS View Integration with RobotlegsJS

RobotlegsJS CreateJS Extension

GitHub license Gitter chat Build Status codebeat badge Test Coverage npm version Greenkeeper badge styled with prettier

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

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

License

MIT

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free