英文原文正文为项目原始 README（英文），本站后续会翻译为中文，当前仅剔除图片与无关章节并统一排版。

Phaser 框架的动能滚动插件

垂直和水平滚动是游戏中非常有用的功能，例如用于显示关卡部分，而使用此插件，您可以在 HTML5 的 canvas 元素中模拟滚动……所以快来查看这个适用于 Phaser 框架 的超棒插件！

动能滚动基于 http://ariya.ofilabs.com/2013/11/javascript-kinetic-scrolling-part-2.html

下载插件

通过 bower 安装

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

通过 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;
    }
});

示例

该仓库包含一些插件示例，要运行社区创建的示例，请在终端执行命令 gulp examples：

• 水平滚动
• 带滚动条的水平滚动
• 水平滚动与按键事件
• 水平和垂直滚动（也支持鼠标滚轮）
• onUpdate 回调用于跟踪增量

其他项目

• IonPhaser
• 旋转精灵扩展

贡献 ✨

在向此仓库贡献之前，请先通过 issue、电子邮件或其他任何方式与此仓库的所有者讨论您希望进行的更改，然后再进行修改。贡献正是开源社区如此令人惊叹的原因，它让人们学习、激励和创造。您所做的任何贡献都将 非常感激 ❤️。您可以在 贡献指南 中了解更多关于如何为此项目做贡献的信息。

协作者 ✨

| | | | | :---: |:---: |:---: |:---: |:---: | 尼科尔斯 | 丹尼尔 | 维塔利 | 克里斯·赖特 | 达比恩 |

支持 🍻

我相信独角兽 🦄 如果你也相信，请支持我。

捐赠 以太坊、ADA、币安币、SHIBA、USDT/USDC、DOGE 等：

钱包地址：jdnichollsc.eth

请告知我们你的捐赠！🙏

许可证 ⚖️

本仓库可在 MIT 许可证 下使用。

愉快浏览 💯

用心制作