npm install phaser-list-view --save
https://www.npmjs.com/package/phaser-list-view
Copy dist/phaser-list-view.js into your project and include via script tag
npm run build
npm i
npm start
-
Scroller : A pure logic scroller. Includes iOS-like behaviour such as momentum, bounce-back and snapping. Most likely you would use DirectionalScroller or WheelScroller over this base Scroller. But if you have custom needs you can use it.
-
DirectionalScroller : A pure logic scroller built for scrolling on the x and y axis. Extends the base Scroller class.
-
WheelScroller : A pure logic scroller built for scrolling around a circle. Extends the base Scroller class.
-
ListView : An iOS-like ListView class. Uses DirectionalScroller for the input and outputs a ListView. Performance is good because we cull off-screen items. Perfect for high scoreboards.
-
SwipeCarousel : An iOS-like SwipeCarousel. Uses DirectionalScroller for the input and outputs a SwipeCarousel. Perfect for instructions screens, or a photo gallery.
import {ListView} from 'phaser-list-view'
let parent = this.world
let bounds = new Phaser.Rectangle(0, 0, 300, 400)
let options = {
direction: 'y',
overflow: 100,
padding: 10
}
let listView = new ListView(this.game, parent, bounds, options)
let items = this.createSomeDisplayObjectsAndReturnAnArray() // [Graphics, Image, Sprite]
listView.addMultiple(...items)
direction
direction of scroll ['x' | 'y'] // default 'y'autocull
auto hidden elements outside of the viewport for performance [boolean] // default truemomentum
[boolean] // default truebouncing
when you extend beyond the bounds and release, it bounces back [boolean] // default truesnapping
snaps to snapStep [boolean] // default falsesnapStep
[number] // default undefinedoverflow
: Amount in pixels you can pull past the bounds. Bouncing occurs when you release inside the overflow [number] // default 100padding
: Padding between the children [number] // default 10searchForClicks
: onInputDown and onInputUp events on ListView children will become active when set to true [boolean] // default false
import {SwipeCarousel} from 'phaser-list-view'
let parent = this.world
let bounds = new Phaser.Rectangle(0, 0, 300, 400)
let options = {
direction: 'x',
overflow: 100,
padding: 10
}
let swipeCarousel = new SwipeCarousel(this.game, parent, bounds, options)
let photos = this.getAnArrayOfImages() // [Image, Image, Image, Image]
swipeCarousel.addMultiple(...photos)
direction
direction of scroll ['x' | 'y'] // default 'x'autocull
auto hidden elements outside of the viewport for performance [boolean] // default truemomentum
[boolean] // default falsebouncing
when you extend beyond the bounds and release, it bounces back [boolean] // default truesnapping
snaps to bounds.width + padding [boolean] // default trueoverflow
: Amount in pixels you can pull past the bounds. Bouncing occurs when you release inside the overflow [number] // default 100padding
: Padding between the children [number] // default 10searchForClicks
: onInputDown and onInputUp events on ListView children will become active when set to true [boolean] // default false
// TODO
// TODO
npm run compile
http://mattcolman.com/labs/phaser-list-view/index.html
- remove gsap dependancy and use Phaser.Tween instead
- Mouse wheel support