dnbnina94 Posted July 21, 2020 Share Posted July 21, 2020 (edited) Hello friends, I'm totally new to Pixi.js and canvas in general. I'm trying to develop my favorite board game Patchwork, where I have a scrollable container with patches from which player can select one. Above the canvas I have two buttons for controlling the scrolling direction. Each time player clicks on one of these buttons, the x coordinate of the container updates. I was wondering if there is any 'best practice' way to implement infinite scrolling of the container (such as creating an infinite image gallery)? I have a few ideas, but I wan't to hear other opinions before I really dive into implementing the solution to this problem. Here are some screenshots for reference: Thank you in advance! Edited July 21, 2020 by dnbnina94 Quote Link to comment Share on other sites More sharing options...
Jammy Posted July 21, 2020 Share Posted July 21, 2020 I can't really think of a best practice for this really apart from only deleting/recreating sprites that you have to. You probably have some idea where off-screen objects get moved on to the end of the stack, or get deleted then recreated... and either will probably be fine depending on the sprite count. Quote Link to comment Share on other sites More sharing options...
KayacChang Posted July 23, 2020 Share Posted July 23, 2020 I made a carousel example for this, which implement the infinite scrolling behavior. The showcase below, maybe this will help you.https://codesandbox.io/s/carousel-example-3rjhn Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.