Nonlinear Performance Magnification

    phaser-kinetic-scrolling-plugin

    1.2.1 • Public • Published

    Kinetic Scrolling Plugin for Phaser Framework

    Kinetic Scrolling Plugin

    The vertical and horizontal scrolling is a very useful feature in the games for example to display a section of levels and with this plugin you can simulate the scrolling within a canvas element of HTML5... so check this awesome plugin for Phaser Framework!

    Kinetic scrolling based on http://ariya.ofilabs.com/2013/11/javascript-kinetic-scrolling-part-2.html

    Download the Plugin

    NPM

    Install via bower

    bower i phaser-kinetic-scrolling-plugin --save

    Install via npm

    npm i phaser-kinetic-scrolling-plugin --save

    Load the Plugin

    this.game.kineticScrolling = this.game.plugins.add(Phaser.Plugin.KineticScrolling);

    Change Default Settings of the Plugin - It isn't necessary, default is horizontal

    this.game.kineticScrolling.configure({
        kineticMovement: true,
        timeConstantScroll: 325, //really mimic iOS
        horizontalScroll: true,
        verticalScroll: false,
        horizontalWheel: true,
        verticalWheel: false,
        deltaWheel: 40,
        onUpdate: null //A function to get the delta values if it's required (deltaX, deltaY)
    });

    Start the Plugin

    this.game.kineticScrolling.start();

    Stop the Plugin

    this.game.kineticScrolling.stop();

    Full Example

    var game = new Phaser.Game(1024, 768, Phaser.AUTO, '', {
        init: function () {
     
            //Load the plugin
            this.game.kineticScrolling = this.game.plugins.add(Phaser.Plugin.KineticScrolling);
     
            //If you want change the default configuration before start the plugin
        },
        create: function () {
     
            //Starts the plugin
            this.game.kineticScrolling.start();
     
            //If you want change the default configuration after start the plugin
     
            this.rectangles = [];
     
            var initX = 50;
     
            for (var i = 0; i < 26; i++) {
                this.rectangles.push(this.createRectangle(initX, this.game.world.centerY - 100, 250, 200));
                this.index = this.game.add.text(initX + 125, this.game.world.centerY, i + 1,
                            { font: 'bold 150px Arial', align: "center" });
                this.index.anchor.set(0.5);
                initX += 300;
            }
     
            //Changing the world width
            this.game.world.setBounds(0, 0, 320 * this.rectangles.length, this.game.height);
        },
        createRectangle: function (x, y, w, h) {
            var sprite = this.game.add.graphics(x, y);
            sprite.beginFill(Phaser.Color.getRandomColor(100, 255), 1);
            sprite.bounds = new PIXI.Rectangle(0, 0, w, h);
            sprite.drawRect(0, 0, w, h);
            return sprite;
        }
    });

    Examples

    The repository has some examples of the plugin, to run the examples created by the community execute the command gulp examples from the terminal:

    • Horizontal scrolling
    • Horizontal scrolling with scrollbar
    • Horizontal scrolling and pressing events
    • Horizontal and Vertical scrolling (Mouse wheel too)
    • onUpdate callback to track delta

    Collaborators

    jdnichollsc daniel-mf VitaZheltyakov iamchristopher daaaabeen
    Nicholls Daniel Vitaliy Chris Wright Daaaabeen

    Other Projects

    Supporting

    I believe in Unicorns 🦄 Support me, if you do too.

    Happy scrolling

    Made with <3

    Install

    npm i phaser-kinetic-scrolling-plugin

    DownloadsWeekly Downloads

    22

    Version

    1.2.1

    License

    MIT

    Unpacked Size

    5.32 MB

    Total Files

    47

    Last publish

    Collaborators

    • jdnichollsc