mattcolman / Phaser List View
Licence: mit
List view class for Phaser. Great for high scoreboards.
Stars: ✭ 107
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Phaser List View
Phaser Ads
A Phaser plugin for providing nice ads integration in your phaser.io game
Stars: ✭ 84 (-21.5%)
Mutual labels: phaser
Badsanta
BadSanta - Multiplayer HTML5 Game (http://santa.qake.se)
Stars: ✭ 97 (-9.35%)
Mutual labels: phaser
Infinitelistview
A custom Android ListView that supports endless scrolling
Stars: ✭ 69 (-35.51%)
Mutual labels: listview
Vue Horizontal
An ultra simple pure vue horizontal layout for modern responsive web with zero dependencies. (SPA/SSG/SSR)
Stars: ✭ 75 (-29.91%)
Mutual labels: listview
Phaser3 Tilemap Pack
Phaser 3 Project Template with Webpack, Tilemap, and Asset Pack
Stars: ✭ 87 (-18.69%)
Mutual labels: phaser
Android
Android projects with reusable components which will be useful in your applications.
Stars: ✭ 81 (-24.3%)
Mutual labels: listview
Videolistplayer
Play video in ListView or RecyclerView
Stars: ✭ 1,308 (+1122.43%)
Mutual labels: listview
Phaser Ts Boilerplate
The boilerplate for Phaser 2 we use internally at Azerion
Stars: ✭ 98 (-8.41%)
Mutual labels: phaser
Ultimaterefreshview
UltimateRefreshView 实现下拉刷新,上拉加载更多的轻量级库;支持RecyclerView ,ListView ,ScrollView & WebView
Stars: ✭ 64 (-40.19%)
Mutual labels: listview
Phaser Es6 Webpack
A bootstrap project for create games with Phaser + ES6 + Webpack.
Stars: ✭ 1,266 (+1083.18%)
Mutual labels: phaser
Ahk Rare
My collection of rare and maybe very useful functions
Stars: ✭ 101 (-5.61%)
Mutual labels: listview
Modernlistview
[FireMonkey] Modern ListView - Colorizer, Vertical\Horizontal mode, Columns and other
Stars: ✭ 98 (-8.41%)
Mutual labels: listview
Phasereditor2d V3
A web-based IDE for HTML5 game development. Powered by Phaser.
Stars: ✭ 92 (-14.02%)
Mutual labels: phaser
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].