https://github.com/proyecto26/phaser-kinetic-scrolling-plugin
Kinetic Scrolling plugin for Canvas using Phaser Framework
https://github.com/proyecto26/phaser-kinetic-scrolling-plugin
gulp html5 html5-canvas javascript javascript-game js phaser phaser-camera phaser-ce phaser-framework phaser-game phaser-plugin phaserjs pixijs scrolling webgl
Last synced: 7 months ago
JSON representation
Kinetic Scrolling plugin for Canvas using Phaser Framework
- Host: GitHub
- URL: https://github.com/proyecto26/phaser-kinetic-scrolling-plugin
- Owner: proyecto26
- License: mit
- Created: 2015-07-10T04:54:31.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2024-10-27T16:26:57.000Z (about 1 year ago)
- Last Synced: 2024-10-29T22:37:27.781Z (about 1 year ago)
- Topics: gulp, html5, html5-canvas, javascript, javascript-game, js, phaser, phaser-camera, phaser-ce, phaser-framework, phaser-game, phaser-plugin, phaserjs, pixijs, scrolling, webgl
- Language: JavaScript
- Homepage: https://proyecto26.github.io/Phaser-Kinetic-Scrolling-Plugin/
- Size: 6.57 MB
- Stars: 132
- Watchers: 8
- Forks: 26
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Kinetic Scrolling Plugin for Phaser Framework
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
[](https://nodei.co/npm/phaser-kinetic-scrolling-plugin/)
Install via [bower](http://bower.io)
`bower i phaser-kinetic-scrolling-plugin --save`
Install via [npm](https://www.npmjs.com)
`npm i phaser-kinetic-scrolling-plugin --save`
## Load the Plugin
```javascript
this.game.kineticScrolling = this.game.plugins.add(Phaser.Plugin.KineticScrolling);
```
## Change Default Settings of the Plugin - *_It isn't necessary, default is horizontal_*
```javascript
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
```javascript
this.game.kineticScrolling.start();
```
## Stop the Plugin
```javascript
this.game.kineticScrolling.stop();
```
## Full Example
```javascript
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
## Other Projects
- **[IonPhaser](http://market.ionic.io/plugins/ionphaser)**
- **[Rotate Sprite Extension](https://github.com/jdnichollsc/Phaser-Rotate-Sprite-Extension)**
## Contributing ✨
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](https://github.com/proyecto26/Phaser-Kinetic-Scrolling-Plugin/blob/master/CONTRIBUTING.md).
## Collaborators ✨
[
](https://github.com/jdnichollsc) | [
](https://github.com/daniel-mf) | [
](https://github.com/VitaZheltyakov) | [
](https://github.com/iamchristopher) | [
](https://github.com/daaaabeen) |
:---: |:---: |:---: |:---: |:---: |
[Nicholls](mailto:jdnichollsc@hotmail.com) | [Daniel](mailto:echo.dmf@gmail.com) | [Vitaliy](mailto:vita-zhelt@yandex.ru) | [Chris Wright](https://twitter.com/jorbascrumps) | [Daaaabeen](mailto:dianbin.lee@gmail.com) |
## Supporting 🍻
I believe in Unicorns 🦄
Support [me](http://www.paypal.me/jdnichollsc/2), if you do too.
Donate **Ethereum**, **ADA**, **BNB**, **SHIBA**, **USDT/USDC**, **DOGE**, etc:
> Wallet address: jdnichollsc.eth
Please let us know your contributions! 🙏
## License ⚖️
This repository is available under the [MIT License](https://github.com/proyecto26/Phaser-Kinetic-Scrolling-Plugin/blob/master/LICENSE).
## Happy scrolling 💯
Made with <3
