当前位置: 首页 > 软件库 > Web应用开发 > Web框架 >

Phaser-Kinetic-Scrolling-Plugin

授权协议 MIT License
开发语言 JavaScript
所属分类 Web应用开发、 Web框架
软件类型 开源软件
地区 不详
投 递 者 慕才
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

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

Other Projects

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.

Collaborators

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

Supporting ��

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

Donate Ethereum, ADA, BNB, SHIBA, USDT, DOGE:

Wallet address

Wallet address: 0x3F9fA8021B43ACe578C2352861Cf335449F33427

Please let us know your contributions! ��

License ⚖️

This repository is available under the MIT License.

Happy scrolling ��

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