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
Install via bower
bower i phaser-kinetic-scrolling-plugin --save
Install via npm
npm i phaser-kinetic-scrolling-plugin --save
this.game.kineticScrolling = this.game.plugins.add(Phaser.Plugin.KineticScrolling);
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)
});
this.game.kineticScrolling.start();
this.game.kineticScrolling.stop();
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;
}
});
The repository has some examples of the plugin, to run the examples created by the community execute the command gulp examples
from the terminal:
When contributing to this repository, please first discuss the change you wish to make via issue, email, or any other method with the owners of this repository before making a change.
Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated ❤️.
You can learn more about how you can contribute to this project in the contribution guide.
Nicholls | Daniel | Vitaliy | Chris Wright | Daaaabeen |
I believe in Unicorns 🦄 Support me, if you do too.
Donate Ethereum, ADA, BNB, SHIBA, USDT, DOGE:
Wallet address: 0x3F9fA8021B43ACe578C2352861Cf335449F33427
Please let us know your contributions! 🙏
This repository is available under the MIT License.
Made with <3