Phaser list view on its own weights ~59KB.

There are two additional things that make it huge:
Lodash - 550KB
TweenMax (GSAP) - 356KB - I saw it's used for tweening. Maybe it can be replaced with native phaser tweens.

Is Lodash used in the plugin? scroller_event_patcher 'lodash/forIn' is used, but few files require whole lodash (which is huge) and doesn't seem to use it. When I removed it my app kept working and bundle was a lot smaller. Is it necessary for anything?

I implemented the list view for my game scoreboard, tested it with chrome in redmi 1s and desktop works perfectly, but it wont even start the specific scene that use list view when it being tested on stock browser. Is it an unresolved issue or you can please give me some guide? btw, i using the script tag to implement

Hi all,

nice project @mattcolman . I'd like to use this list view component with scroll (horizontal/vertical). Of course this would be optional and could be render at any place, up to developer.

Example of usage:

import { ListView, ScrollBar } from 'phaser-list-view';

const listView = new ListView(this.game, parent, bounds, options);
const scrollBar = new ScrollBar(listView, {
  height: 100px,
  width: 8px,
  type: 'horizontal'
});

I'm happy to work on some proposal PR. Please let me know what do you think.

Would it be possible to add TypeScript bindings so this library is usable with TypeScript Phaser projects?

Hi @mattcolman !
Your plugin is awesome when we need a scroll view for leaderboard
Could you please add support for Phaser 3? For now, it is very hard to find any List view example or plugin for Phaser3.
Thank so much!

Hi,

I cannot seem to get it to run.
I have a list of sprites which I want to be displayed vertical and the user should be able to scroll through vertically.

var startX = this.fHeader.x;
	var startY = this.fHeader.y + this.fHeader.height;

	var sprites = [];
	this.highscores.forEach(function(highscore) {
		var sprite = game.add.sprite(startX, startY, 'spriteKey');
		startY += sprite.height;
		sprites.push(sprite);
	}, this);

	var bounds = new Phaser.Rectangle(0, 0, 1000, 2000);
	var options = {
		direction : 'y',
		overflow : 100,
		padding : 10
	};

	var listView = new PhaserListView.ListView(game, this, bounds, options);

	var newItem = game.add.group(this);
	listView.addMultiple(sprites);
	newItem.nominalHeight = 120;

	listView.add(newItem);

This is actually taken from the example, but the line
listView.addMultiple(sprites);

causes issues: updateTransform of children[i] is not a function. When I add the sprites directly to the group "newItem", then I won't get any error, but therefore I see nothing (I mean, the listview nowhere).

So I ask myself, how to actually do it?

The end result is to have the List View rendered in a specific position

Example:
I want my list to be scrolled to 34th place of my array

is this possible??

How to implement on click functionality for the ListView items.

no existing function of killing the list view

Failing in creating more then one listView

one is running over the other even though im assigning the instances to different
vars and even using different parents on listView constructor

    this.right = {};
    this.left = {};

    renderScroller (x, y, items, obj) {
        const bounds = new Phaser.Rectangle(
            x,
            y,
            500,
            600
        );

        const options = {
            direction: 'y',
            overflow: 100,
            padding: 50
        };

        obj = new ListView(this.game, this, bounds, options);

        obj.scroller.enable();

        obj.addMultiple(...items);

        obj.tweenToItem(0, 2);
    };

   const items = [
           this.game.add.image(0, 0, 'image-name'),
           this.game.add.image(0, 0, 'image-name')
     ];

    // Then calling the above render twice 
   this.renderScroller(100, 500, items, this.left);
   this.renderScroller(500, 500, items, this.right);

// 'this' is a class extending Phase.Group that contains this snippet 

any solution/ walk around??

Thanks

I fixed this issue in the same way as Phaser core.

Could you check the pull request?
#29

Is it possible to render the ListView to be scrolled
to item N of the given list?

for example: I want the list to be focused on item number 26 when showing the first time

Thanks

Hi,
fantastic plugin!
But testing it, I found that onInputDown event didn't work in list view (instead onInputUp worked).

In line 19096, there was this line:
this.events.onInputDown.dispatch(target, pointer);

I changed it with:
(0, _util.dispatchClicks)(pointer, this.clickables, 'onInputDown');
this.events.onInputDown.dispatch(target, pointer, _util.dispatchClicks);

and now it works. But I don't know if this change is really correct.

Most entries for me will be a collection of images and texts so
it would be great if I could enter a list of group objects

thanks

I try:
this.listView.items[position] = this.newItem
but not work, help me please

It would be very nice to add a configuration option to let culled items appear to the opposite side of the list (i.e., if I have 5 items, scrolling down after the 5th i would see my list restarting from 1st, 2nd, etc...)

Hi,

It would be very useful to have vertical\horizontal mouse scrolling feature.

Thank you!

Can you please add it as single file on es5? It will be very helpfull for people who dev on Phonegap/Cordova (like me:))

Hi
I'm trying to add click event on the item inside list and this event won't fire
my code :

            let parent = modalGroup; //phaser group
            let bounds = new Phaser.Rectangle(10, header.bottom, this.game.world.width - 30, this.game.world.height - 150);
            let options = {
                direction: 'y',
                overflow: 50,
                padding: 10
            }
            let listView = new Scroller.ListView(this.game, parent, bounds, options)
            
            EquimpentSheet.forEach((e, i)=>{
                let bg = this.game.add.graphics(bounds.x, bounds.top + 110 * i);
                bg.beginFill(0xbfbdb3);
                bg.drawRect(0, 0, this.game.world.width - 20, 100);
                bg.anchor.setTo(0.5);
                bg.inputEnabled = true;
                bg.events.onInputDown.add(()=>{
                    this.player.buyItem(e);
                });
                modalGroup.add(bg);
                listView.addMultiple(bg);
                bg.endFill();
            });

In my project, I need to use more than one list view in a menu scene. But when I instantiate them, all of then but the first one get blurry images. I'm using different arrays to feed them so the sprites doesn't have any kind of interference. Can you help me to fix it? Thanks.

Hi!

I'm using ListView as a child of some group. In this case list view items are not cropped as show in the images. Although items visibility is correctly switched when outside of bounds.

I've checked and cropping works properly when attached to game.world object.

Is it a bug?