Search code examples
scrollablepixi.js

Pixijs How to create scrollable container?

My intention is, having a Container, with a predefined width, made scrollable if the sprites inside occupy more width than the container.

Currently, if i set the width after adding all the sprites, the contents are automatically resized, which is not i wanted.

Sample code:

var container = new PIXI.Container();
container.width = 150;
stage.addChild(container);
for(var i=0;i<5;i++){
 var eachImg = new Sprite("xxx.png"]);
 eachImg.x = i*50;
 container.addChild(eachImg);
}

How to code achieve such an effect?

Solution

  • Containers themselves don't really have a width and height... those values are just the overall dimensions based on where it's children are. Changing the width and height just changes the scale of x and y.

    There's a WIP for a scrollable container https://github.com/pixijs/pixi-ui and https://github.com/Ezelia/EZGUI also shows some effects of scrolling containers.