Phaser-Kinetic-Scrolling-Plugin Bower gulp npm

Kinetic Scrolling plugin for Canvas using Phaser Framework

Kinetic Scrolling Plugin for Phaser Framework

Kinetic Scrolling Plugin

I wanted to simulate horizontal and vertical scrolling in my games to display levels or a section of authors using only the canvas element in HTML5, but I couldn't find a good solution... so I decided to create my own plugin to Phaser Framework :D

Kinetic scrolling based on

Download the Plugin


Install via bower

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

Install via npm

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

Load the Plugin =;

Change Default Settings of the Plugin - It isn't necessary, default is horizontal{
    kineticMovement: true,
    timeConstantScroll: 325, //really mimic iOS
    horizontalScroll: true,
    verticalScroll: false,
    horizontalWheel: true,
    verticalWheel: false,
    deltaWheel: 40

Start the Plugin;

Stop the Plugin;

Full Example

var game = new Phaser.Game(1024, 768, Phaser.AUTO, '', {
    init: function () {

        //Load the plugin =;

        //If you want change the default configuration before start the plugin
    create: function () {

        //Starts the plugin;

        //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, - 100, 250, 200));
            this.index = + 125,, i + 1,
                        { font: 'bold 150px Arial', align: "center" });
            initX += 300;

        //Changing the world width, 0, 320 * this.rectangles.length,;
    createRectangle: function (x, y, w, h) {
        var sprite =, 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;


The repository has some examples of the plugin:

  • Horizontal scrolling
  • Horizontal scrolling with scrollbar
  • Horizontal scrolling and pressing events
  • Horizontal and Vertical scrolling (Mouse wheel too)

Happy scrolling

Made with <3

Related Repositories



A curated list of awesome Phaser libraries, resources and shiny things. ...

Top Contributors

jdnichollsc VitaZheltyakov


-   v1.0.4 zip tar
-   v1.0.3 zip tar
-   v1.0.2 zip tar
-   v1.0.1 zip tar
-   v1.0.0 zip tar
-   v0.1.2 zip tar
-   v0.1.1 zip tar