Add TypeScript support

[rayhvh]

my code where my game starts looks like this `/// ///

class SimpleGame { game:Phaser.Game; constructor() { //setup the game // load scroll plugin // this.game = new Phaser.Game(800, 600, Phaser.AUTO, 'content'); this.game.state.add("MenuScreenState", MenuScreenState , false); this.game.state.add("RunningState", RunningState , false); this.game.state.add("ShopState", ShopState , false); this.game.state.start("RunningState",true,true); } }

// when the page has finished loading, create our game window.onload = () => { var game = new SimpleGame(); }; ` and it does not allow
this.game.kineticScrolling = this.game.plugins.add(Phaser.Plugin.KineticScrolling); ive got no idea how to proper load your plugin..

[jdnichollsc]

Check the examples! You need to load the plugin into the states 👍

Regards, Nicholls

[rayhvh]

i did not get it to work. i think its because you wrote it in javascript. and im using typescript.

[jdnichollsc]

I need to do tests with TypeScript.

[CyrilleGuimezanes]

Hello! If needed, I wrote a quick TS Typings file for the plugin:

declare module Phaser { module Plugin { export class KineticScrolling extends Phaser.Plugin { constructor(game:Phaser.Game, parent:any); setup(params: any): void; start(); configure(params: any); //other methods if needed } } interface Game { kineticScrolling: Plugin.KineticScrolling; } } declare module 'phaser-kinetic-scrolling-plugin' { }

(sorry for bad indent)

And then, you juste have to include your JS or require() it for Webpack users.

To be more complete:

• Define all public plugin methods
• Define clearly params: any

Have fun!

[drewsilcock]

More detailed typings file for this plugin, with comments copied over from source code:

declare module Phaser {
    module Plugin {
        /**
         * Settings to change behaviour of Kinetic Scrolling plugin.
         */
        interface KineticScrollingSettings {
            /**
             * Enable or disable the kinematic motion.
             */
            kineticMovement?: boolean;

            /**
             * The rate of deceleration for the scrolling.
             */
            timeConstantScroll?: number;

            /**
             * Enable or disable the horizontal scrolling.
             */
            horizontalScroll?: boolean;

            /**
             * Enable or disable the vertical scrolling.
             */
            verticalScroll?: boolean;

            /**
             * Enable or disable the horizontal scrolling with the mouse wheel.
             */
            horizontalWheel?: boolean;

            /**
             * Enable or disable the vertical scrolling with the mouse wheel.
             */
            verticalWheel?: boolean;

            /**
             * Delta increment of the mouse wheel.
             */
            deltaWheel?: number;
        }

        /**
         * Kinetic Scrolling is a Phaser plugin that allows vertical and horizontal scrolling with kinetic motion.
         * It works with the Phaser.Camera
         */
        export class KineticScrolling extends Phaser.Plugin {
            /**
             * @param game The Game object is the instance of the game, where the magic happens.
             * @param parent The object that owns this plugin, usually Phaser.PluginManager.
             */
            constructor(game: Phaser.Game, parent: Phaser.PluginManager);

            /**
             * Start the Plugin.
             */
            public start(): void;

            /**
             * Stop the Plugin.
             */
            public stop(): void;

            /**
             * Change Default Settings of the plugin
             * @param options Object that contain properties to change the behavior of the plugin.
             */
            public configure(options: KineticScrollingSettings): void;
        }
    }

    interface Game {
        /**
         * Instance of the plugin that handles kinetic scrolling with mouse, dragging or mouse wheel.
         */
        kineticScrolling: Plugin.KineticScrolling;
    }
}

declare module "phaser-kinetic-scrolling-plugin" { }

[DanielContreras18881]

This is not working for me, anybody has a example project with Phaser 2.6 and Typescript?

[jdnichollsc]

Ohh I need to add the typings file to support TypeScript... @drewsilcock do you want to be a collaborator of this project and add your example? 👍

Let me know what you think

[jdnichollsc]

@CyrilleGuimezanes @drewsilcock where is the best place in the repository to have the TypeScript definition files? any example of other plugin?

[drewsilcock]

Just submitted a PR (#19) adding the file to the typings directory along with a README telling people how to install using typings. Typings isn't the most up-to-date way to do TypeScript definitions, so ideally you'd have an addition to the DefinitelyTyped repository. Instructions for how to do this are here: https://github.com/DefinitelyTyped/DefinitelyTyped.

Note that I haven't really been able to test this - it's intended as an initial push so that anyone who's using TypeScript can improve and/or fix this as needed. Unfortunately this isn't something I've got time to do at the moment.

[jdnichollsc]

Added, thanks for the help guys!