Mini board
Introduction¶
Chess Container, to rotate/mirror/drag chess together.
- Author: Rex
- Container Game object of chess group
Live demos¶
Usage¶
Install plugin¶
Load minify file¶
- Load plugin (minify file) in preload stage
scene.load.scenePlugin('rexboardplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexboardplugin.min.js', 'rexBoard', 'rexBoard');
- Add container
var miniBoard = scene.rexBoard.add.miniBoard(x, y, config);
Import plugin¶
- Install rex plugins from npm
npm i phaser3-rex-plugins
- Install plugin in configuration of game
import BoardPlugin from 'phaser3-rex-plugins/plugins/board-plugin.js'; var config = { // ... plugins: { scene: [{ key: 'rexBoard', plugin: BoardPlugin, mapping: 'rexBoard' }, // ... ] } // ... }; var game = new Phaser.Game(config);
- Add container
var miniBoard = scene.rexBoard.add.miniBoard(x, y, config);
Import class¶
- Install rex plugins from npm
npm i phaser3-rex-plugins
- Import class
import { MiniBoard } from 'phaser3-rex-plugins/plugins/board-components.js';
- Add match object
var miniBoard = new MiniBoard(scene, x, y, config);
Add Container¶
var miniBoard = scene.rexBoard.add.miniBoard(x, y, {
grid: grid,
draggable: undefined,
});
grid
: Create board object first, then get grid object viaboard.grid
.gridType
:'quadGrid'
: Quad grid'hexagonGrid'
: hexagon grid
draggable
: Settrue
to enable dragging events
Add chess¶
miniBoard.addChess(gameObject, tileX, tileY, tileZ);
chess
: A game object.tileX
,tileY
,tileZ
: Tile position.tileX
,tileY
: Number.tileZ
: Number or string.
Chess and tile position
- Any chess has a (tileX, tileY, tileZ) index
- Any (tileX, tileY, tileZ) index contains only 1 chess.
- (tileX, tileY) could have more then 1 chess with different tileZ index.
- tileZ is not equal to
depth
.
These world properties of chess will be changed with container.
- Position/Angle/Scale
- Visible
- Alpha
- Scroll factor
- Mask
Remove chess¶
- Remove chess object from board
miniBoard.removeChess(chess, null, null, null, destroy);
chess
: A game objectdestroy
: Settrue
to desrtoy chess object.
- Remove chess at (tileX, tileY, tileZ) from board
miniBoard.removeChess(null, tileX, tileY, tileZ, destroy);
tileX
,tileY
,tileZ
: Tile positiondestroy
: Settrue
to desrtoy chess object.
- Remove all chess
miniBoard.removeAllChess(destroy);
destroy
: Settrue
to desrtoy chess object.
Set origin¶
- Set origin tileXY by offset tileXY of all chess.
miniBoard.setOrigin(origin); // miniBoard.setOrigin(originX, originY);
originX
,originY
: 0~1.0
: Left/top.0.5
: Center.1
: Right/bottom.
- Set origin tileXY to center by offset tileXY of all chess.
miniBoard.setOrigin(); // miniBoard.setOrigin('center');
- Set origin tileXY to top-left.
miniBoard.setOrigin('top-left');
Get all chess¶
var gameObjects = miniBoard.getAllChess();
// var out = miniBoard.getAllChess(out);
Get bounds¶
A rectangle bounds contains all chess.
var rect = miniBoard.getBounds();
// var out = miniBoard.getBounds(out);
Main board¶
Put chess to a main-board (Board object) with the same tile position in mini-board, or pull chess out from main-board.
Put on main-board¶
miniBoard.putOnMainBoard(mainBoard, tileX, tileY);
// miniBoard.putOnMainBoard(mainBoard, tileX, tileY, align);
mainBoard
: Board object.tileX
,tileY
: Tile position to put on.align
: Settrue
to align world position of each chess Game object to grid of main-board. Default istrue
.
or
miniBoard.putOnMainBoard(mainBoard);
To put this mini-board to nearest grid of main-board.
Pull out from main-board¶
miniBoard.pullOutFromMainBoard();
Remove all chess from main-board.
Put back to previous main-board¶
miniBoard.putBack();
Previous main-board and tile position will be remembered for putting back.
Is overlapping to main-board¶
Return true
if any chess is overlapping to main-board.
miniBoard.isOverlapping(mainBoard);
or
miniBoard.isOverlapping(mainBoard, tileZ);
Align world position to grid of main-board¶
miniBoard.alignToMainBoard(mainBoard, tileX, tileY);
mainBoard
: Board objecttileX
,tileY
: Tile position on main-board
or
miniBoard.alignToMainBoard(mainBoard);
to align this mini-board to nearest grid of main-board.
Get current main-board¶
var board = miniBoard.mainBoard;
board
: Board object
Return null
if this mini-board is not at any main-board.
Rotate¶
Can rotate¶
miniBoard.canRotate(n);
n
: Rotate to directioncurrent direction + n
or
miniBoard.canRotateTo(direction);
direction
: Rotate to direction0
~3
: Quad grid.0
~5
: Hexagon grid.
Always return true
if this mini-board is not on a main-board.
Rotate¶
miniBoard.rotate(n);
n
: Rotate direction tocurrent direction + n
or
miniBoard.rotateTo(direction);
direction
: Rotate to direction0
~3
: Quad grid.0
~5
: Hexagon grid.
Return true
if this rotating request is accepted.
var isSuccess = miniBoard.lastTransferResult;
Mirror¶
Can mirror¶
miniBoard.canMirror(mode);
mode
:0
, or'x'
: Set tileX to-tileX
1
, or'y'
: Set tileY to-tileY
3
, or'x&y'
: Set tileX to-tileX
, and tileY to-tileY
Always return true
if this mini-board is not on a main-board.
Mirror¶
miniBoard.mirror(mode);
mode
:0
, or'x'
: Set tileX to-tileX
1
, or'y'
: Set tileY to-tileY
3
, or'x&y'
: Set tileX to-tileX
, and tileY to-tileY
Return true
if this mirroring request is accepted.
var isSuccess = miniBoard.lastTransferResult;
Touch events¶
Set interactive¶
- Enable
miniBoard.setInteractive();
- Disable
miniBoard.setInteractive(false);
Set drag-able¶
- Enable
miniBoard.setDragEnable();
- Disable
miniBoard.setDragEnable(false);
Touch event¶
Pointer down¶
- Pointer down at any chess
miniBoard.on('pointerdown', function(pointer, miniBoard) { })
- Pointer down at a chess
or
miniBoard.on('gameobjectdown', function(pointer, gameObject) { })
gameObject.on('miniboard.pointerdown', function(pointer) { })
pointer
: Touch pointergameObject
: Game object at touched (tileX, tileY)
Pointer up¶
- Pointer up
miniBoard.on('pointerup', function(pointer, miniBoard) { })
- Pointer up at a chess
or
miniBoard.on('gameobjectup', function(pointer, gameObject) { })
gameObject.on('miniboard.pointerup', function(pointer) { })
pointer
: Touch pointergameObject
: Game object at touched (tileX, tileY)
Pointer move¶
- Pointer move
miniBoard.on('pointermove', function(pointer, miniBoard) { })
- Pointer move to another chess
or
miniBoard.on('gameobjectmove', function(pointer, gameObject) { })
gameObject.on('miniboard.pointermove', function(pointer) { })
pointer
: Touch pointergameObject
: Game object at touched (tileX, tileY)
Drag events¶
- Drag-start
Pull out from main-board for dragging.
miniBoard.on('dragstart', function(pointer, dragX, dragY){ /* miniBoard.pullOutFromMainBoard(); */ }, scope);
- Dragging
Set world position of mini-board via (
miniBoard.on('drag', function(pointer, dragX, dragY){ /* miniBoard.setPosition(dragX, dragY); if (miniBoard.isOverlapping(mainBoard)) { miniBoard.alignToMainBoard(mainBoard); } */ }, scope);
dragX
,dragY
), align to nearest grid of main-board if overlapping with that main-board. - Drag-end
Put chess on main-board at nearest grid.
miniBoard.on('dragend', function(pointer, dragX, dragY){ /* miniBoard.putOnMainBoard(mainBoard); if (miniBoard.mainBoard) { } */ }, scope);