How to make a scroller in PIXI

[Abhijeet]

Hi,

I write some code to make a scroller but its not working, could you plz help me.

 

function ScoreboardView(parentObj) {

PIXI.Container.call(this);

this.parentRef = parentObj

}

 

ScoreboardView.prototype = Object.create(PIXI.Container.prototype);

ScoreboardView.prototype.constructor = ScoreboardView;

 

var p = ScoreboardView.prototype;

 

p.createView = function () {

logDebugMode("initiated ------ ", "createView")

this.bg = displayUtil.getRectangle(700, 600, this.getConfig().theme.bgCol);

this.addChild(this.bg);

 

this.header = displayUtil.getRectangle(this.bg.width, 60, this.getConfig().theme.hearderCol);

this.addChild(this.header);

 

this.masker = displayUtil.getRectangle(this.bg.width-20, 450, 0x000000);

this.addChild(this.masker);

 

this.playerScores = displayUtil.getContainer()

this.addChild(this.playerScores);

this.masker.x = this.playerScores.x = 10;

this.masker.y = this.playerScores.y = this.header.height+10;

// this.playerScores.mask = this.masker

 

for(var i=0; i<= 10; i++){

if(i%2 == 0){

this.tempContent = displayUtil.getRectangle(this.bg.width-20, 100, 0xFFFF00);

}else{

this.tempContent = displayUtil.getRectangle(this.bg.width-20, 100, 0xFF0000);

}

this.tempContent.y=i*100;

this.playerScores.addChild(this.tempContent)

}

 

 

this.scrollerObj = new PIXIScroller();

this.addChild(this.scrollerObj);

this.scrollerObj.createView({

source:this,

height:450,

boundY:10,

update:function(x,y){

this.playerScores.y = -(Math.round(y)* 100);

console.log(y+" ======== "+this.playerScores.y)

}.bind(this)

});

this.scrollerObj.x = this.bg.width - (this.scrollerObj.width+10);

this.scrollerObj.y = this.header.height+10;

}

p.updateView = function(){

}

p.updateData = function(){

logDebugMode("updating data ------ ", "TableView")

}

p.getConfig = function () {

return {

layout:{

 

},

theme:{

bgCol : 0xCCCCCC,

hearderCol : 0x999999

},

textProps:{

 

}

}

}

p.onResize = function(wid, hgt){

}

p.destroyView = function(){

logDebugMode("destroying ------ ", "TableView")

 

}

p.show = function(){

logDebugMode("show ------ ", "TableView")

this.visible = true;

}

p.hide = function(){

logDebugMode("hide ------ ", "TableView")

this.visible = false;

}

[ivan.popelyshev]

I cant read this. Please make a fiddle , also format the code.

Lets limit the screen area, like scrollRect of flash:

1) add VoidFilter to element: `scroller.filters = [ new PIXI.VoidFilter() ];`  - that will enable filterArea

2) Every time you change scroller position, you have to modify filterArea, it must be in absolute coordinates.

3) Manipulate "pivot" to scroll insides

You have to read the docs about things i mentioned, or read the source code of pixi related to it.

I hope to add anexample of scroller to official pixi examples later.

[Abhijeet]

On 10/20/2017 at 9:02 PM, ivan.popelyshev said:

I cant read this. Please make a fiddle , also format the code.

Lets limit the screen area, like scrollRect of flash:

1) add VoidFilter to element: `scroller.filters = [ new PIXI.VoidFilter() ];`  - that will enable filterArea

2) Every time you change scroller position, you have to modify filterArea, it must be in absolute coordinates.

3) Manipulate "pivot" to scroll insides

You have to read the docs about things i mentioned, or read the source code of pixi related to it.

I hope to add anexample of scroller to official pixi examples later.

 

On 10/20/2017 at 9:02 PM, ivan.popelyshev said:

I cant read this. Please make a fiddle , also format the code.

Lets limit the screen area, like scrollRect of flash:

1) add VoidFilter to element: `scroller.filters = [ new PIXI.VoidFilter() ];`  - that will enable filterArea

2) Every time you change scroller position, you have to modify filterArea, it must be in absolute coordinates.

3) Manipulate "pivot" to scroll insides

You have to read the docs about things i mentioned, or read the source code of pixi related to it.

I hope to add anexample of scroller to official pixi examples later.

Hi, 

This issue was fixed.

[ivan.popelyshev]

Congrats!

[Abhijeet]

I want to make a dynamic popup where the message and buttons come from the server, So can you help me on this.

[ivan.popelyshev]

These people will help you: http://www.html5gamedevs.com/forum/2-coding-and-game-design/

[Abhijeet]

I posted my issue with code but no one can be replied for that.