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
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
Kinetic 是希捷公司的开放存储平台,这是一个基于对象的存储组织结构(DHT 分布式哈西表结构),对象之间没有层次化关系,每个对象都是同级别的。对象的操作包括 PUT、GET 和 DELETE。对象拥有多个属性,并可进行方便设置。 Seagate宣称:“Seagate Kinetic Open Storage 平台可简化资料管理,改善效能和扩充性,并节省一般云端基础设备总拥有成本(TCO)近一
kinetic 是一款超棒的 JavaScript 动态滚动系列的示例和教程集合。在线演示
To make the grid scrollable, set constant width and height to the container holding Handsontable and set the overflow property to hidden in the container's stylesheet. Then, if the table contains enou
Many apps feature lists of content, from email clients to music apps and beyond. In order to verify that lists contain the content we expect using integration tests, we need a way to scroll through li
Phaser 是一个快速、免费、有趣的开源HTML5游戏框架,在桌面和移动网络浏览器上提供WebGL和Canvas渲染功能。游戏可以通过使用第三方工具编译成iOS、Android和本地应用程序。你可以使用JavaScript或TypeScript进行开发。
Scroll multiple widgets as children of the parent. See more widgets in the widget catalog. GridView A grid list consists of a repeated pattern of cells arrayed in a vertical and horizontal layout. The