Phaser 3 - RexUI - GridTable custom containers
Using the RexPlugins GridTable with custom containers failed on scroll.
by ragesoft
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.55.2/phaser.min.js"></script>
<div id="main">
</div>
JavaScript
const COLOR_PRIMARY = 0x4e342e;
const COLOR_LIGHT = 0x7b5e57;
const COLOR_DARK = 0x260e04;
const fontStyles = {
'button':{
fontSize: '20px',
fontStyle: '',
fill: '#cccac6'
},
}
class Demo extends Phaser.Scene {
constructor() {
super({
key: 'examples'
})
}
preload() {
this.load.scenePlugin({
key: 'rexuiplugin',
url: 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js',
sceneKey: 'rexUI'
});
}
create(){
this.add.text( this.game.config.width / 2, 20,
"RexPlugins - GridTable with custom COntainers"
+ "\nFirst 2 items not visilbe!"
+ "\nItems get lost on scroll down and up"
+ "\nAll 'not visible items' alignt in\ntop-left cornor of scene until first drawing"
)
.setOrigin( 0.5, 0 );
let scrollMode = 0;
this.table = this.rexUI.add.gridTable( {
x: 400,
y: 350,
width: 300,
height: 420,
scrollMode: scrollMode,
background: this.rexUI.add.roundRectangle( 0, 0, 20, 10, 10, COLOR_PRIMARY),
table: {
cellHeight: 60,
columns: 2,
mask: {
padding: 2,
},
reuseCellContainer: false,
},
slider: {
track: this.rexUI.add.roundRectangle( 0, 0, 20, 10, 10, COLOR_DARK),
thumb: this.rexUI.add.roundRectangle( 0, 0, 0, 0, 13, COLOR_LIGHT),
},
createCellContainerCallback: function (cell, cellContainer) {
var scene = cell.scene,
width = cell.width,
height = cell.height,
item = cell.item,
index = cell.index;
return item;
},
items: this.Items()
}).layout();
}
Items(){
let items = [];
for(let i = 1; i < 100; i++){
items.push(...