How do I make scrollable list of items?

Post reply
0 favourites
From the Asset Store
Scrollable List
$9.99 USD
Template for scrollable list, fully documented in comment and video
bartalluyn's avatar
bartalluyn

  • Hello!

    I'm having a little problem here. I'm making some kind of interactive YouTube player app, and right now i'm having a headache trying to solve this problem. As you can see on the screenshot on the right side of the screen is playlist, that is populated by the YouTube videos. So, let's say that user adds 10 videos on the playlist, only first 6 is shown and by using mouse scroll it can scroll to other videos.

    Mouse wheel events are used for setting start number. That number is used to set from which element of array loop start.

    Function that loops through elements and writes all required data on the screen. Start number of loop is set by mouse events above and it loops through the whole array and populates all fields with required data.

    I think that i'm on right track, but for some reason it doesn't work xD

    Can you help me with this?

  • I am not sure I understand your problem. So, the array contains data for 10 videos. First 6 are shown on the screen. When you scroll with mouse wheel down, you want to show videos 2-7, when you scroll further down, show videos 3-8 and so on, is this correct?

    I don't know why your code doesn't work, but you can do all this a bit easier. On mouse wheel down, remove first record from the array and insert it into the back of array. On mouse wheel Up, remove last record from the array and insert it into the front of array. This will allow you to simply display the first 6 records from the array. And you will not need loop1, loop2, loop3 variables, just use "Repeat 6 times" loop with loopindex expression.

    Also, if you put ListItem, ThumbImage and Checkbox in the same container, you will only need to pick ListItem, the other two objects will be picked automatically.

    And, if you are not doing this already, start using Debug Mode, it will allow you to monitor the array contents, all objects etc.

  • Thanks mate!!! That worked fantastic!

    I didn't know that i can pick items that easily if i put them in container!

  • Thanks mate!!! That worked fantastic!

    I didn't know that i can pick items that easily if i put them in container!

    Hi Can you share the list example. I also need it for my project.

  • jatin1726 Try this demo:

    https://www.dropbox.com/s/hnhepai660anaf4/ScrollingListOfPlayers.capx?dl=0

    Thanks a ton dop. God bless u.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads

  • > Thanks mate!!! That worked fantastic!

    > I didn't know that i can pick items that easily if i put them in container!

    Hi Can you share the list example. I also need it for my project.

    https://i.postimg.cc/28hqqfwD/list1.jpg[/img]

    https://i.postimg.cc/fRsVmg20/list2.jpg[/img]

    This is how i implemented scrollable list in my project. If you have any question, feel free to ask.

  • > > Thanks mate!!! That worked fantastic!

    > > I didn't know that i can pick items that easily if i put them in container!

    >

    > Hi Can you share the list example. I also need it for my project.

    https://i.postimg.cc/28hqqfwD/list1.jpg[/img]

    https://i.postimg.cc/fRsVmg20/list2.jpg[/img]

    This is how i implemented scrollable list in my project. If you have any question, feel free to ask.

    Thanks for the code. Can you share capx too. It will help in better understanding.

    Dop and your help I need for lazy loading thing for scrolling list. Assume for scrolling list there are 100 blocks and each block has unique image. Construct 2 loads all images before starting the game right so downloading 100 images will add lot of delay to the game. Here as a solution websites use lazy loading. For example, in first view only 10 blocks are visible so only 10 images are download. When user scrolls further, 5 new blocks are added to the screen so only 5 new images are download thus it saved unnecessary downloading of images. Can you help out in achieving the same.

    Regards,

    Jatin

  • It depends - where do you have these 100 images? are they all in one sprite (as frames/animations), or multiple sprites, or do you load them from web in runtime?

    If you have one sprite with 100 frames, there is nothing you can do, the whole sprite will be loaded on layout start. If you have 100 separate sprites, you can create them as user scrolls down.

  • It depends - where do you have these 100 images? are they all in one sprite (as frames/animations), or multiple sprites, or do you load them from web in runtime?

    If you have one sprite with 100 frames, there is nothing you can do, the whole sprite will be loaded on layout start. If you have 100 separate sprites, you can create them as user scrolls down.

    Hi Dop,

    As of now I have 100 frames in one sprite. so It is difficult to implement lazy loading. I also tried that I should try capturing UID of the box created in realtime and give it some sequential id and then call image from url. But it is not working. It always load same image for 100 blocks. so I am stuck in implementation of lazy loading. and my list is becoming heavier due to so many images have to loaded while lading the game. Can you help me out in this?

    REgards,

    jatin

  • If you load images from URL, you still need 100 empty frames. So set frames from 0 to 99 for all 100 instances of the sprite. Add an instance variable isImageLoaded, and add this code: 

    Every 0.1 seconds
Sprite isImageLoaded=0
Sprite Y<3000
	Sprite load image from URL "http://mywebsite.com/pic" & Sprite.animationFrame & ".jpg"
	Sprite set isImageLoaded to 1

  • If you load images from URL, you still need 100 empty frames. So set frames from 0 to 99 for all 100 instances of the sprite. Add an instance variable isImageLoaded, and add this code: 

    > Every 0.1 seconds
Sprite isImageLoaded=0
Sprite Y<3000
	Sprite load image from URL "http://mywebsite.com/pic" & Sprite.animationFrame & ".jpg"
	Sprite set isImageLoaded to 1

    Hi Dop,

    That worked nicely, thanks a lot for the support. After implementing this I am stuck with a new issue. The sample capx you have shared for scroll up works good if it has one column. If it has more than 3 or 4 coloumn then (we can assume each thumbnail is square may be of 300x300px). We usually see websites like this. How can I implement your code for multiple coloumns. Thanks in advance.

  • You mean instead of the list 1 item wide and 100 rows down you want it to be 4 items wide and 25 rows down?

    dropbox.com/s/1676stwx1ysnz9n/ScrollingList4columns.capx

  • You mean instead of the list 1 item wide and 100 rows down you want it to be 4 items wide and 25 rows down?

    https://www.dropbox.com/s/1676stwx1ysnz9n/ScrollingList4columns.capx?dl=0

    Hi Dop,

    Yup like this but two things I noticed, this way it is not going to be responsive and secondly mouse scroll never works, can you tell me how mouse scroll will work?

  • > You mean instead of the list 1 item wide and 100 rows down you want it to be 4 items wide and 25 rows down?

    > dropbox.com/s/1676stwx1ysnz9n/ScrollingList4columns.capx

    Hi Dop,

    Yup like this but two things I noticed, this way it is not going to be responsive and secondly mouse scroll never works, can you tell me how mouse scroll will work?

    Dop, sorry to bring it here, but very urgently need help to display current location weather. Can you help me with construct 2 in that ? old capx here is not working at all of forums.

Post reply
Return to board index
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)