{"id":14963987,"url":"https://github.com/mattcolman/phaser-list-view","last_synced_at":"2025-10-25T03:31:13.118Z","repository":{"id":8155654,"uuid":"57083258","full_name":"mattcolman/phaser-list-view","owner":"mattcolman","description":"List view class for Phaser. Great for high scoreboards.","archived":false,"fork":false,"pushed_at":"2019-07-25T12:04:39.000Z","size":806,"stargazers_count":116,"open_issues_count":8,"forks_count":21,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-02-08T03:05:52.494Z","etag":null,"topics":["listview","phaser","scroller"],"latest_commit_sha":null,"homepage":"http://mattcolman.com/labs/phaser-list-view/index.html","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mattcolman.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-04-25T23:37:52.000Z","updated_at":"2024-11-06T09:52:17.000Z","dependencies_parsed_at":"2022-08-06T20:15:31.652Z","dependency_job_id":null,"html_url":"https://github.com/mattcolman/phaser-list-view","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mattcolman%2Fphaser-list-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mattcolman%2Fphaser-list-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mattcolman%2Fphaser-list-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mattcolman%2Fphaser-list-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mattcolman","download_url":"https://codeload.github.com/mattcolman/phaser-list-view/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238075258,"owners_count":19412303,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["listview","phaser","scroller"],"created_at":"2024-09-24T13:32:25.994Z","updated_at":"2025-10-25T03:31:07.741Z","avatar_url":"https://github.com/mattcolman.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# List View classes for Phaser\n\n## Install via npm\n\n`npm install phaser-list-view --save`\nhttps://www.npmjs.com/package/phaser-list-view\n\n## Install via script tag\n\nCopy dist/phaser-list-view.js into your project and include via script tag\n\n## Build\n\n`npm run build`\n\n## Run demo\n\n`npm i`\n\n`npm start`\n\n## API\n\n* **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.\n* **DirectionalScroller** : A pure logic scroller built for scrolling on the x and y axis. Extends the base Scroller class.\n* **WheelScroller** : A pure logic scroller built for scrolling around a circle. Extends the base Scroller class.\n* **ListView** : An iOS-like ListView class. Uses DirectionalScroller for the input and outputs a ListView. Performance is good because we cull off-screen items.\n  Perfect for high scoreboards.\n* **SwipeCarousel** : An iOS-like SwipeCarousel. Uses DirectionalScroller for the input and outputs a SwipeCarousel. Perfect for instructions screens, or a photo gallery.\n\n## ListView\n\n### Usage\n\n```\nimport {ListView} from 'phaser-list-view'\n\nconst parent = this.world\nconst bounds = new Phaser.Rectangle(0, 0, 300, 400)\nconst options = {\n  direction: 'y',\n  overflow: 100,\n  padding: 10\n}\n\nconst listView = new ListView(this.game, parent, bounds, options)\nconst items = this.createSomeDisplayObjectsAndReturnAnArray() // [Graphics, Image, Sprite, Group]\nlistView.addMultiple(...items)\nconst newItem = this.createGroup();\nnewItem.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)\nlistView.add(newItem)\n```\n\n![](http://i.imgur.com/XgdgqYX.gif)\n\n### Options\n\n* `direction` direction of scroll ['x' | 'y'] // default 'y'\n* `autocull` auto hidden elements outside of the viewport for performance [boolean] // default true\n* `momentum` [boolean] // default true\n* `bouncing` when you extend beyond the bounds and release, it bounces back [boolean] // default true\n* `snapping` snaps to snapStep [boolean] // default false\n* `snapStep` [number] // default undefined\n* `overflow`: Amount in pixels you can pull past the bounds. Bouncing occurs when you release inside the overflow [number] // default 100\n* `padding`: Padding between the children [number] // default 10\n* `searchForClicks`: onInputDown and onInputUp events on ListView children will become active when set to true [boolean] // default false\n\n### API\n\n| Members    | Type                 | Description                                                           |\n| :--------- | :------------------- | :-------------------------------------------------------------------- |\n| `items`    | Array\u003cDisplayObject\u003e | A list of all the listView items                                      |\n| `grp`      | Phaser.Group         | The parent of all list view items                                     |\n| `position` | number (READONLY)    | position in pixels (x or y axis depends on the direction you specify) |\n| `scroller` | Scroller             | access the Scroller for advanced tuning (Scroller API below)          |\n\n| Methods           | Params                                         | Description                                                                                       |\n| :---------------- | :--------------------------------------------- | :------------------------------------------------------------------------------------------------ |\n| `add`             | (child: DisplayObject): void                   | add a child to the list view                                                                      |\n| `addMultiple`     | (...children: DisplayObjects): void            | add multiple children to the list view. Pass through multiple arguments, not an array of children |\n| `remove`          | (child: DisplayObject): void                   | remove a child                                                                                    |\n| `removeAll`       | (): void                                       | remove all children from the list view                                                            |\n| `moveToPosition`  | (position: number): void                       | set position of the list view in pixels                                                           |\n| `moveToItem`      | (index: number): void                          | move to the item index in the list view.                                                          |\n| `tweenToPosition` | (position: number, duration = 1: number): void | tween to position in pixels. Duration in seconds.                                                 |\n| `tweenToItem`     | (index: number, duration = 1: number): void    | tween to the item index in the list view. Duration in seconds.                                    |\n| `reset`           | (): void                                       | resets the position and scroller                                                                  |\n| `destroy`         | (): void                                       | destroy the list view and clean up all event listeners                                            |\n\n## SwipeCarousel (extends ListView)\n\n### Usage\n\n```\nimport {SwipeCarousel} from 'phaser-list-view'\n\nconst parent = this.world\nconst bounds = new Phaser.Rectangle(0, 0, 300, 400)\nconst options = {\n  direction: 'x',\n  overflow: 100,\n  padding: 10\n}\n\nconst swipeCarousel = new SwipeCarousel(this.game, parent, bounds, options)\nconst photos = this.getAnArrayOfImages() // [Image, Image, Image, Image]\nswipeCarousel.addMultiple(...photos)\n```\n\n![](http://i.imgur.com/Sp5aE0H.gif)\n\n### Options\n\n* `direction` direction of scroll ['x' | 'y'] // default 'x'\n* `autocull` auto hidden elements outside of the viewport for performance [boolean] // default true\n* `momentum` [boolean] // default false\n* `bouncing` when you extend beyond the bounds and release, it bounces back [boolean] // default true\n* `snapping` snaps to bounds.width + padding [boolean] // default true\n* `overflow`: Amount in pixels you can pull past the bounds. Bouncing occurs when you release inside the overflow [number] // default 100\n* `padding`: Padding between the children [number] // default 10\n* `searchForClicks`: onInputDown and onInputUp events on ListView children will become active when set to true [boolean] // default false\n\n### API\n\nThe same as ListView above.\n\n## Scroller API (access via listView.scroller)\n\n| Members    | Type              | Description                                                           |\n| :--------- | :---------------- | :-------------------------------------------------------------------- |\n| `grp`      | Phaser.Group      | The parent of all list view items                                     |\n| `position` | number (READONLY) | position in pixels (x or y axis depends on the direction you specify) |\n| `scroller` | Scroller          | access the Scroller for advanced tuning                               |\n\n| Methods      | Params: Return | Description               |\n| :----------- | :------------- | :------------------------ |\n| `enable`     | (): void       | Enables the scroller      |\n| `disable`    | (): void       | Disables the scroller     |\n| `isTweening` | (): boolean    | Is the scroller tweening? |\n\n| Events (Phaser.Signals) |\n| :---------------------- |\n| `onUpdate`              |\n| `onInputUp`             |\n| `onInputDown`           |\n| `onInputMove`           |\n| `onComplete`            |\n| `onSwipe`               |\n\n## DirectionalScroller Usage\n\n// TODO\n\n## WheelScroller Usage\n\n// TODO\n\n## Build\n\n`npm run compile`\n\n## Example\n\nhttp://mattcolman.com/labs/phaser-list-view/index.html\n\n## TODO\n\n* Mouse wheel support\n\n## Maintainers\n\n[Matt Colman](https://twitter.com/matt_colman)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmattcolman%2Fphaser-list-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmattcolman%2Fphaser-list-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmattcolman%2Fphaser-list-view/lists"}