pixi-scroller v1.0.1

pixi-scroller

The aim of this project is provide an easy way of implementing a scroller using PIXI-JS.

This project is still in development, and more tools will be added to hopefully help you out on your project

How to use this project

Firstval you have to clone this project and open in a code editor of your choice, and make sure you have node js installed.

Open your terminal at the root project folder and type: npm install (this command will make sure all dependences will be installed).

After all dependence is in the right place, lets start the project by typing: npm start (this project uses babel + webpack to initialize the application).

By default the project will run at http://localhost:8080/, it can change if you already running an application on port 8080.

This projects comes with 3 examples, that can help you to understand how to implement pixi-scroller.

How to use

Basic

    // pixi-scroller uses tween js to snap the scroller.
    // so first thing is to import tween js on your index.html

    <script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/16.3.5/Tween.min.js"></script>

    import { UIScroller } from "./pixi-scroller";
  
        let scroller = new UIScroller(
            app, // pixi app
            this.rendererContainer, // pixi container
            {x: 700, y: 300}, //bound
            {x: 100, y: 100}, // position
            {x: 1, y: 0}, // orientation if x = 1 (horizontal), if y = 1 (vertical)
            {x: 80, y: 80 }, // the size you want your elements to be inside the scroller (dont make it bigger than the scroller bound)
            {x: 30, y: 30}, // space between elements
            1 //  number of column or row
        );

Snap

    // snap the scroller to a position accordanly with the nearst element inside scroller

    // by default the snap position is set to {x: 0, y:0}

    // enable or disable Snap
    scroller.EnableSnap(true);

    // set the snap to the center of the panel
    // in this case the panel is the background sprite you are using for your scroller
    this.scroller.SetSnapPoint({x: panel.width / 2, y: 0});

Hit Area

  // you can increase the detection touch or click near the scroller.
 
    this.scroller.AddHitArea(
            30, //add 30 pixels to the top
            30, // add 30 pixels to the right
            30, // add 30 pixels to the bottom
            30  // add 30 pixels to the left
    );

NPM install

Yes! you can import using npm

npm i pixi-scroller

import and use on your project

import { UIScroller } from 'pixi-scroller/dist/pixi-scroller'