List View classes for Phaser

Install via npm

npm install phaser-list-view --save https://www.npmjs.com/package/phaser-list-view

Install via script tag

Copy dist/phaser-list-view.js into your project and include via script tag

Build

npm run build

Run demo

npm i

npm start

API

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

ListView

Usage

import {ListView} from 'phaser-list-view'

const parent = this.world
const bounds = new Phaser.Rectangle(0, 0, 300, 400)
const options = {
  direction: 'y',
  overflow: 100,
  padding: 10
}

const listView = new ListView(this.game, parent, bounds, options)
const items = this.createSomeDisplayObjectsAndReturnAnArray() // [Graphics, Image, Sprite, Group]
listView.addMultiple(...items)
const newItem = this.createGroup();
newItem.nominalHeight = 120; // listView calculates items width and height. You can set your own width or height to save calculating it using nominalWidth or nominalHeight (note this is mainly useful for Phaser.Groups)
listView.add(newItem)

Options

• direction direction of scroll ['x' | 'y'] // default 'y'
• autocull auto hidden elements outside of the viewport for performance [boolean] // default true
• momentum [boolean] // default true
• bouncing when you extend beyond the bounds and release, it bounces back [boolean] // default true
• snapping snaps to snapStep [boolean] // default false
• snapStep [number] // default undefined
• overflow: Amount in pixels you can pull past the bounds. Bouncing occurs when you release inside the overflow [number] // default 100
• padding: Padding between the children [number] // default 10
• searchForClicks: onInputDown and onInputUp events on ListView children will become active when set to true [boolean] // default false

API

Members	Type	Description
items	Array	A list of all the listView items
grp	Phaser.Group	The parent of all list view items
position	number (READONLY)	position in pixels (x or y axis depends on the direction you specify)
scroller	Scroller	access the Scroller for advanced tuning (Scroller API below)

Methods	Params	Description
add	(child: DisplayObject): void	add a child to the list view
addMultiple	(...children: DisplayObjects): void	add multiple children to the list view. Pass through multiple arguments, not an array of children
remove	(child: DisplayObject): void	remove a child
removeAll	(): void	remove all children from the list view
moveToPosition	(position: number): void	set position of the list view in pixels
moveToItem	(index: number): void	move to the item index in the list view.
tweenToPosition	(position: number, duration = 1: number): void	tween to position in pixels. Duration in seconds.
tweenToItem	(index: number, duration = 1: number): void	tween to the item index in the list view. Duration in seconds.
reset	(): void	resets the position and scroller
destroy	(): void	destroy the list view and clean up all event listeners

SwipeCarousel (extends ListView)

Usage

import {SwipeCarousel} from 'phaser-list-view'

const parent = this.world
const bounds = new Phaser.Rectangle(0, 0, 300, 400)
const options = {
  direction: 'x',
  overflow: 100,
  padding: 10
}

const swipeCarousel = new SwipeCarousel(this.game, parent, bounds, options)
const photos = this.getAnArrayOfImages() // [Image, Image, Image, Image]
swipeCarousel.addMultiple(...photos)

Options

• direction direction of scroll ['x' | 'y'] // default 'x'
• autocull auto hidden elements outside of the viewport for performance [boolean] // default true
• momentum [boolean] // default false
• bouncing when you extend beyond the bounds and release, it bounces back [boolean] // default true
• snapping snaps to bounds.width + padding [boolean] // default true
• overflow: Amount in pixels you can pull past the bounds. Bouncing occurs when you release inside the overflow [number] // default 100
• padding: Padding between the children [number] // default 10
• searchForClicks: onInputDown and onInputUp events on ListView children will become active when set to true [boolean] // default false

API

The same as ListView above.

Scroller API (access via listView.scroller)

Members	Type	Description
grp	Phaser.Group	The parent of all list view items
position	number (READONLY)	position in pixels (x or y axis depends on the direction you specify)
scroller	Scroller	access the Scroller for advanced tuning

Methods	Params: Return	Description
enable	(): void	Enables the scroller
disable	(): void	Disables the scroller
isTweening	(): boolean	Is the scroller tweening?

Events (Phaser.Signals)
onUpdate
onInputUp
onInputDown
onInputMove
onComplete
onSwipe

DirectionalScroller Usage

// TODO

WheelScroller Usage

// TODO

Build

npm run compile

Example

http://mattcolman.com/labs/phaser-list-view/index.html

TODO

• Mouse wheel support

Maintainers

Matt Colman