gemmatch example

[ugajin]

 

I have been looking at this: http://phaser.io/examples/v2/games/gemmatch example. The columns and rows are positioned starting at the game origin, which can cause the sprites  to appear off centre, when looked at relative to the canvas/game border.

I have aded a couple of lines of code which [visually] centres the 'gems'. The code lets you adjust the  GEM_SPACING and/or canvas/game dimension values, and  updates the 'gems' [group] [*correction, each 'gem'] anchor value accordingly.

However, what I can't seem to do, is to create a margin between the canvas edges and the 'gem' [group], without breaking the code.

All suggestions, welcome.

Thanks....

-u

 

Correction above in bold.

I don't know why this text has strikethrough applied, or why some of the above text does too!

Edited November 25, 2017 by ugajin
correction

[ugajin]

Found it!

I have since found another 'better' method. Kind of obvious too!  

The first thing That I had done was to ditch the example model and find a version with which I was happier working. This new model wasn't a straight forward swap either. I disliked the template used, and did not like the way the thing behaved on a desktop. I think it may be intended for fullscreen mobile devices. Using the example at https://www.joshmorony.com, I re-wrote the code to fit my own state machine template,

The first solution I found worked, but limited moving the conceptual touch grid by units equal to 'GEM_SPACING' dimensions, which in this case is defined by the image dimensions. I replaced the image with my own, which helped resolved the above presenting behaviour.  The solution, meant you could only adjust the touch grid column/row position values by whole unit values. However, it required editing just two lines of code.

The better solution, placed the conceptual touch grid inside a container group. It required a lot more typing [76 lines were edited], but the result allows pixel perfect positioning, which is what we were aiming for.

-u

 

Spoke too soon!

[ugajin]

Here is link to latest version, modelled on the original MS-DOS Shariki

Sometime later...

I have now [at last] found the solution that I was looking for, a solution that lets you position the tiles, anywhere on the canvas.

But, I have found another issue, which I have not been able to fix. The example is intended to draw any shape tiles grid. After fixing an error to allow drawing any shape grid, the getMatches method fails for non-square grids.

:[

 

Fixed it. I replaced  the getMatches method after a complete rewrite. I can now declare non-square  2d arrays e.g. 6 x 8 or 8 x 6, and it works, as well as position the balls anywhere I like, Yippee!

 

I use a single embedded for loop, no weird twist in the array indices, nor unnecessary  duplicated conditions, and reduced the code from 79 to 54 lines.

 

The original can be found here: https://www.joshmorony.com/how-to-create-a-candy-crush-or-bejeweled-game-in-phaser/