proyecto26 / phaser-kinetic-scrolling-plugin Goto Github PK

View Code? Open in Web Editor NEW

131.0 8.0 26.0 6.72 MB

Kinetic Scrolling plugin for Canvas using Phaser Framework

Home Page: https://proyecto26.github.io/Phaser-Kinetic-Scrolling-Plugin/

License: MIT License

JavaScript 100.00%

phaserjs phaser-framework phaser scrolling phaser-plugin phaser-game phaser-camera gulp html5-canvas webgl

phaser-kinetic-scrolling-plugin's Introduction

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

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

IonPhaser
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.

Collaborators ✨


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: 0x3F9fA8021B43ACe578C2352861Cf335449F33427

Please let us know your contributions! 🙏

License ⚖️

This repository is available under the MIT License.

Happy scrolling 💯

Made with <3

phaser-kinetic-scrolling-plugin's People

Contributors

Stargazers

Watchers

phaser-kinetic-scrolling-plugin's Issues

Multidirectional scrolling support

I know it's probably outside the scope of this project right now, but supporting multidirectional scrolling would be a nice feature to have. Currently scrollwheel support is enabled by setting either verticalWheel or horizontalWheel to true. However, setting both to true has some pretty unexpected behaviour, especially using a Macbook touchpad.

is it possible to set up infinite scrolling within a world of a given size?

I I love the scrolling effect and find that it works really well in mobile. However I am limited in scrolling to whatever the size of the world may be. Is it possible to wrap the scrolling so that when the end of the world is reached scrolling can continue at the beginning of the world?

How to scroll text?

The example isn't clear to me. How would I scroll a specific object?

1.0.3 missing from npm

I just ran npm install phaser-kinetic-scrolling-plugin and version 1.0.2 was installed

Scrolling large bodies of text within a group

I am wondering if this plugin would work for this use case.

I have a panel I made, say:

    // Tall panel
    var panelTall = this.game.add.bitmapData(250, 500);
    panelTall.ctx.fillStyle = '#5a6772';
    panelTall.ctx.strokeStyle = '#31363a';
    panelTall.ctx.lineWidth = 5;
    panelTall.ctx.fillRect(0, 0, 250, 500);
    panelTall.ctx.strokeRect(0, 0, 250, 500);
    this.game.cache.addBitmapData('panel', panelTall);

And then I instantiate it in a group:

    this.stableGroup = this.game.add.group();
    this.stableGroup.position.setTo(25, 250);

    this.stableBody = this.stableGroup.addChild(this.game.add.image(0, 0, this.game.cache.getBitmapData('panel')));

Now within this I want to populate it with text objects vertically, and have it scrollable vertically at the borders roughly of the panel. Every comment thread seems to have you posting this library as an example but I can't seem to figure out how it would work like this.

Disable body while dragging map around

Body is always following sprite in phaser. At low speed of map dragging it is not visible, but at higher speed body get compertely seperate from sprite. Sometimes body collided with game objects and false collision occures. So is it possible to disable body when I drag map?
(I can record video if issue is not clear from my description)

Stopping plugin in inputDown event cause problem when plugin is started again

It's a rare case I guess. Chrome 46 on Mac.

Stopping plugin in inputDown event won't clean up plugin state. When plugin is started again, it start with dragging = true and things will move with cursor.

select element

Hello,
Nice plugin, but I'm encountering some troubles to select an element.
Say I wanna select a rectangle in your example, how can I achieve that ?

Thanks :)

Resolved : I did that by storing the mouse position when it's down, so when it's up I compare the new value with the old one, if it's the same position, I fire up the click event..

When multiple touch point/fingers are used to scroll, it breaks

Hey, I am using kinetic scroll in my project, but it breaks when more than one finger is used to scroll.

Auto scroll activated

Hi,

I faced a bug I guess. When I enter a state and activate the kinematic scrolling plugin for the first time, everything is fine. When I leave the state and reenter it, the scrolling is activated which means the camera is scrolling although I haven't clicked yet.
Of course I call this.game.kineticScrolling.stop(); when I shutdown the state.

Destribution with npm is not working

Can't download plugin with npm.

Getting error:

Hostname/IP doesn't match certificate's altnames: 
"Host: registry.npmjs.org. is not in the cert's
altnames: DNS:a.sni.fastly.net, DNS:a.sni.global-ssl.fastly.net"

don't want to use brew only for one library and would be nice to keep track of versions so getting directly from github is also not the best solution
Thanks

Phaser 3 version

Sprite shifts when game scale is not 1

When I set scalefactor to number other than 1, sprite starts to shift when I drag map around.

this.game.world.scale.setTo(scalefactor, scalefactor);

Publish package to npm

Hi, could you publish this package to npm please?
I am using npm as a dependency manager and this would help me a lot.
It's really easy since you already have a package.json :) More info here.
Great plugin by the way!
Thanks!

Phaser CE

Since Phaser2 is no longer being maintained, the production dependency should be switched from phaser to phaser-ce

Looking collaborators!

Hi guys!

This beautiful project needs collaborators, Do you want to apply?
Let me know your JS projects to check your code, if you want to be a Phaser developer to help the community with this amazing project! 💯

Best regards, Nicholls

Add TypeScript support

my code where my game starts looks like this
`///
///

class SimpleGame
{
game:Phaser.Game;
constructor()
{
//setup the game
// load scroll plugin
//
this.game = new Phaser.Game(800, 600, Phaser.AUTO, 'content');
this.game.state.add("MenuScreenState", MenuScreenState , false);
this.game.state.add("RunningState", RunningState , false);
this.game.state.add("ShopState", ShopState , false);
this.game.state.start("RunningState",true,true);
}
}

// when the page has finished loading, create our game
window.onload = () => {
var game = new SimpleGame();
};
`
and it does not allow
this.game.kineticScrolling = this.game.plugins.add(Phaser.Plugin.KineticScrolling);
ive got no idea how to proper load your plugin..

stop slide effect after mouse click

hello,

can i stop slide effect after mouse click?
thank and sry, for my english.