Rexboard Bejeweled

Phaser 3
1

Greetings,

I’m a beginner with Phaser 3 and I’m trying to build some examples like Bejeweled, although I’m having some issues with the grid positioning in the scene.

Is it possible to make the grid appear for example in the middle of the screen but only showing the 10x10 “playable” grid?
I’m using this code https://github.com/rexrainbow/phaser3-rex-notes/blob/master/examples/board-bejeweled/default.js and this https://codepen.io/rexrainbow/pen/wEVYoY

        this.bejeweled = new Bejeweled(this, {
            board: {
                grid: {
                    gridType: 'quadGrid',
                    x: 30,
                    y: 30 - 600,
                    cellWidth: 60,
                    cellHeight: 60,
                    type: 'orthogonal' // 'orthogonal'|'isometric'
                },
                width: 10,
                height: 20 // Prepared rows: upper 10 rows
            }

The example gives a negative positioning in “y” so that the grid goes up and it “hides the upper rows” as in Bejeweled - Notes of Phaser 3

Board is separated into two parts: upper and bottom

  • Bottom : Visible N rows, to swap chess and run matching.
  • Upper : Invisible N rows, chess in these rows will move down, to fill bottom rows.

For example, if amount of visible rows is 10, board.height should set to 20

Am I missing something, or it just works like this by design?

This is my example with the grid at the top, as in the tutorial: (in my code I’m using a 8x8 grid)
image

If I change “y” to something like “this.scale.height / 2 - 300” to center it in the scene

        this.bejeweled = new Bejeweled(this, {
            board: {
                grid: {
                    ...
                    ...
                    y: this.scale.height / 2 - 600,
                    ...
                },
                width: 8,
                height: 18 // Prepared rows: upper 10 rows
            }

image
image391×844 209 KB

Thank you in advance and congratulations to who build this great framework and rex plugins

2

Hide upper N rows by mask, or let these chess game objects of rows out of camera.
To mask chess game objects effectively, might try to add all chess game objects to a layer, then apply a mask on this layer.

3

Thank your for the help rexrainbow, I’ll give it a look.

4

I add mask parameter into config of Bejeweled. See this demo, line 60.
Please get latest minify file. NPM package will upgrade later.

5

Fantastic rexrainbow, it works like a charm! Thank you very much for the quick help.

Congratulations on your fantastic set of plugins! :clap: