Grid table
Introduction¶
Viewer of grid table, to manipulate game object of each visible cell.
- Author: Rex
- Game object
Live demos¶
- Grid table
- Grid table & slider
- Grid table & scroller
- Grid table & slider & scroller
- Horizontal scrolling
- Varying cell height
Usage¶
Install plugin¶
Load minify file¶
- Load plugin (minify file) in preload stage
scene.load.plugin('rexgridtableplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexgridtableplugin.min.js', true);
- Add table object
var table = scene.add.rexGridTable(x, y, width, height, config);
Import plugin¶
- Install rex plugins from npm
npm i phaser3-rex-plugins
- Install plugin in configuration of game
import GridTablePlugin from 'phaser3-rex-plugins/plugins/gridtable-plugin.js'; var config = { // ... plugins: { global: [{ key: 'rexGridTablePlugin', plugin: GridTablePlugin, start: true }, // ... ] } // ... }; var game = new Phaser.Game(config);
- Add table object
var table = scene.add.rexGridTable(x, y, width, height, config);
Import class¶
- Install rex plugins from npm
npm i phaser3-rex-plugins
- Import class
import GridTable from 'phaser3-rex-plugins/plugins/gridtable.js';
- Add table object
var table = new GridTable(scene, x, y, width, height, config); scene.add.existing(table);
Create instance¶
var table = scene.add.rexGridTable(x, y, width, height, {
scrollMode: 0, // 0|'v'|'vertical'|1|'h'|'horizontal'
cellsCount: 0,
columns: 1,
// rows: 1,
cellHeight: 30,
cellWidth: 30,
// fixedCellSize: false,
cellVisibleCallback: null,
// cellVisibleCallback: function (cell, cellContainer, table) {},
cellVisibleCallbackScope: undefined,
reuseCellContainer: false,
cellInvisibleCallback: null,
// cellInvisibleCallback: function(cell) {},
cellInvisibleCallbackScope: undefined,
clampTableOXY: true,
mask: {
padding: 0, // or {left, right, top, bottom}
// updateMode: 0,
// layer: undefined,
},
// enableLayer: false
});
scrollMode
:0
, or'v'
, or'vertical'
: Scroll table vertically.1
, or'h'
, or'horizontal'
: Scroll table horizontally.
cellsCount
: Total cells count.columns
: Columns count of each row. Can be used in vertical or horizontal scroll mode.rows
: Rows count of each column. Can be used in horizontal scroll mode.cellHeight
: Default height of each cell.- Expand cell height to fit table height : set
cellHeight
toundefined
, andscrollMode
is'horizontal'
.
- Expand cell height to fit table height : set
cellWidth
: Width of each cell.- Expand cell width to fit table width : set
cellWidth
toundefined
, andscrollMode
is'vertical'
.
- Expand cell width to fit table width : set
fixedCellSize
: Assigncolumns
according tocellWidth
(ifscrollMode
is0
) orcellHeight
(ifscrollMode
is1
) , when initialize and resizing. -false
: Ignore this parameter. Default behavior.true
: Setcolumns
according tocellWidth
/cellHeight
.
cellVisibleCallback
,cellVisibleCallbackScope
: Callback when cell begins visible.function (cell, cellContainer, table) { if (cellContainer === null) { // No reusable cell container, create a new one var scene = cell.scene; // cellContainer = scene.add.container(); } // Set child properties of cell container ... cell.setContainer(cellContainer); // Assign cell container }
reuseCellContainer
: Settrue
to reuse cell container when cell is visible.cellInvisibleCallback
,cellInvisibleCallbackScope
: Callback when cell begins invisiblefunction (cell) { // var container = cell.popContainer(); }
clampTableOXY
: Settrue
to clamptableOX
,tableOY
when out-of-bound,- Set
false
when dragging by scroller
- Set
mask
: A rectangle mask of cellsmask.padding
:- A number : Extra left/right/top/bottom padding spacing of this rectangle mask. Default value is
0
. - A plain object
{left, right, top, bottom}
- A number : Extra left/right/top/bottom padding spacing of this rectangle mask. Default value is
mask.updateMode
: When to update cells mask0
, orupdate
: Apply mask to cell container only whentable.updateTable()
is invoked. Default behavior.1
, oreveryTick
: Apply mask to cell container every tick. Use this mode if game objects of cell are moved aftertable.updateTable()
and still been masked.
mask.layer
:undefined
,false
,null
: Disable this feature, default behavior- Layer game object : Draw children game object of panel on this layer game object, then apply mask on this layer game object.
false
: No mask.
enableLayer
:false
: Add cell game objects into scene's display list. Default behavior.true
: Add cell game objects into an internal layer game object. See also.
Add grid table from JSON
var table = scene.make.rexGridTable({
x: 0,
y: 0,
width: 256,
height: 256,
// cellsCount: 0, // total cells count
// ...
// origin: {x: 0.5, y: 0.5},
});
Custom class¶
- Define class
class MyGridTable extends GridTable { constructor(scene, x, y, width, height, config) { super(scene, x, y, width, height, config); // ... scene.add.existing(this); } // ... // preUpdate(time, delta) {} }
scene.add.existing(gameObject)
: Adds an existing Game Object to this Scene.- If the Game Object renders, it will be added to the Display List.
- If it has a
preUpdate
method, it will be added to the Update List.
- Create instance
var table = new MyGridTable(scene, x, y, width, height, config);
Cell begins visible¶
Add container of cell when it begins visible in event cellvisible
.
table.on('cellvisible', function(cell, cellContainer, table){
if (cellContainer === null) { // No reusable cell container, create a new one
var scene = cell.scene;
// cellContainer = scene.add.container();
}
// Set child properties of cell container ...
cell.setContainer(cellContainer); // Assign cell container
})
It is equal to cellVisibleCallback
in configuration.
{
// ...
cellVisibleCallback: function(cell, cellContainer, table) {
cell.setContainer(cellContainer); // Assign cell container
},
// ...
}
cell
- Scene object of grid table.
var scene = cell.scene;
- Index of cell.
var index = cell.index;
- Size of cell.
var cellWidth = cell.width; var cellHeight = cell.height;
- Change size of cell :
- Change cell height in scoll-vertical mode.
or
cell.setHeight(newHeight); // cell.height = newHeight;
cell.setDeltaHeight(deltaHeight); // cell.deltaHeight = deltaHeight;
- Reset cell height in scoll-vertical mode.
cell.setDeltaHeight(0); // cell.deltaHeight = 0;
- Change cell width in scroll-horizontal mode.
or
cell.setWidth(newWidth); // cell.width = newWidth;
cell.setDeltaWidth(deltaWidth); // cell.deltaWidth = deltaWidth;
- Reset cell height in scroll-horizontal mode.
cell.setDeltaWidth(0); // cell.deltaWidth = 0;
- Change cell height in scoll-vertical mode.
- Change size of cell :
- Assign cell container. Set origin point of this cell container to (0,0).
cell.setContainer(cellContainer);
- Alignment of cellContainer :
cell.setCellContainerAlign(align);
align
:undefined
: Set position of cellContainer to left-top of cell space. Default behavior.'center'
, orPhaser.Display.Align.CENTER
: Align game object at center of cell space.'left'
, orPhaser.Display.Align.LEFT_CENTER
: Align game object at left-center of cell space.'right'
, orPhaser.Display.Align.RIGHT_CENTER
: Align game object at right-center of cell space.'top'
, orPhaser.Display.Align.RIGHT_CENTER
: Align game object at top-center of cell space.'bottom'
, orPhaser.Display.Align.BOTTOM_CENTER
: Align game object at bottom-center of cell space.
- Scene object of grid table.
cellContainer
: Cell container picked from object pool for reusing. SetreuseCellContainer
totrue
to enable this feature.null
: No cell container available.- Game object : Reusable cell container.
table
: Grid table.
Each cell only has one container gameObject, old container will be destroyed when assigning a new container.
Cell begins invisible¶
Container of an invisible cell will be destroyed automatically.
To resue container gameObject
- Set
reuseCellContainer
totrue
to put invisible cell container into object pool. - Or, pop that container by
cell.popContainer()
in eventcellinvisible
.
table.on('cellinvisible', function(cell){
// var container = cell.popContainer();
})
It is equal to cellInvisibleCallback
in configuration.
{
// ...
cellInvisibleCallback: function(cell) {
// var container = cell.popContainer();
},
// ...
}
Scroll table content¶
- Set
table.setTableOY(oy).updateTable(); table.addTableOY(dy).updateTable();
table.setTableOX(ox).updateTable(); table.addTableOX(dx).updateTable();
ortable.setTableOXY(ox, oy).updateTable(); table.addTableOXY(dx, dy).updateTable();
table.tableOY = oy; // include table.updateTable() table.tableOX = ox;
- These will trigger
cellvisible
, orcellinvisible
events.
- These will trigger
- Get
var tableOY = table.tableOY; var tableOX = table.tableOX;
Use case
Scroll table by scroller behavior.
Scroll by percentage¶
- Set
or
table.setTableOYByPercentage(t).updateTable(); // t: 0~1
table.t = t; // include table.updateTable()
- Get
var t = table.getTableOYPercentage(); //var t = table.t;
Use case
Scroll table by slider behavior.
Scroll to bottom¶
table.scrollToBottom();
Scroll to row¶
- Scroll to next row
table.scrollToNextRow();
- Scroll to next n row
table.scrollToNextRow(n);
- Scroll to row
table.scrollToRow(rowIndex);
- Get current row index
var rowIndex = table.startRowIndex;
Refresh table content¶
- Refresh all visible cells.
table.updateTable(true);
- Update a visible cell
table.updateVisibleCell(cellIndex);
Table size in cells¶
- Set table size
table.setGridSize(colCount, rowCount).updateTable();
Total cells count¶
- Get
var count = table.cellsCount;
- Set
table.setCellsCount(count).updateTable();
Columns count¶
- Get
var columnCount = table.columnCount;
- Set
table.setColumnCount(count).updateTable(true);
Table size in pixels¶
- Table height in pixels
var tableHeight = table.tableHeight;
- Table width in pixels
var tableWidth = table.tableWidth;
Bounds of tableOX, tableOY¶
- Top bound of tableOY
var topTableOY = table.topTableOY; // 0
- Bottom bound of tableOY
var bottomTableOY = table.bottomTableOY; // A negative number
- Left bound of tableOX
var leftTableOX = table.leftTableOX; // 0
- Right bound of tableOX
var rightTableOX = table.rightTableOX; // A negative number
Use case
Set bounds of scroller
Resize table¶
table.resize(width, height);
Cell¶
Get cell¶
var cell = table.getCell(cellIndex);
Get cell from position¶
var cellIndex = table.pointToCellIndex(x, y);
var cell = table.getCell(cellIndex);
Cell height¶
- Get
var height = cell.height;
- Set cell height, only worked in scoll-vertical mode.
or
cell.height = height; // cell.setHeight(height);
table.setCellHeight(cellIndex, cellHeight);
- Refresh table after the cell size is changed.
table.updateTable(true);
- Emit
'cellheightchange'
event.table.on('cellheightchange', function (cell, cellContainer, table) { });
- Refresh table after the cell size is changed.
Cell width¶
- Get
var width = cell.width;
- Set cell width, only worked in scoll-horizontal mode.
or
cell.width = width; // cell.setWidth(width);
table.setCellWidth(cellIndex, cellWidth);
- Refresh table after the cell size is changed.
table.updateTable(true);
- Emit
'cellwidthchange'
event.table.on('cellwidthchange', function (cell, cellContainer, table) { });
- Refresh table after the cell size is changed.
Reset size of all cells¶
table.resetAllCellsSize(width, height);
Fore each visible cell¶
- For when you absolutely know this Set won't be modified during the iteration
table.iterateVisibleCell(function(cell){ // ... });
- For when you know this Set will be modified during the iteration.
table.eachVisibleCell(function(cell){ // ... });
Container¶
- Get
var container = cell.getContainer();
- Pop (get and remove)
var container = cell.popContainer();
- Set
cell.setContainer(container);
- Remove
cell.destroyContainer();
Properties¶
var cellIndex = cell.index;
Other properties¶
See game object