How to do a Zuma-style string of moving sprites in Phaser3?

Phaser 3
1

I’m working on a game with a similar concept as the game Zuma, see screenshot below.

Phaser3 Zuma-like string of sprites

My game is a bit different but the concept is the same; there is a string of colored balls that moves around the screen. The player is constantly adding or removing balls anywhere in the line, so at the start, middle or end. When there are 3 or more consecutive balls with the same color they are removed and the player scores points.

After removing the same-colored balls the start of the line stops moving temporarily, and the tail end moves more quickly to catch up, and then it continues moving like normal.

The problem is, after constantly adding and removing sprites from a Phaser.Group class, the order in the group doesn’t correspond with the order as they appear on screen anymore, and there is afaik no way to iterate through the children in the right order.

This causes al kinds of problems with coordinating the string movement, and also with determining where in the line there are consecutive same-colored balls.

So sprites are contantly added and removed, I need to keep track of the order of all sprites, and at the same time also keep variables per sprite (color, moving/catching up/pausing, remove animation counter etc). I tried using a Group and a separate Javascript list, but then you also constantly need to keep track of which sprite belongs to which list-item index.

this.blobs = [];
this.grpblobs = scene.add.group();

// javascript array/list in memory during the game:
this.blobs ==>
[
	{"line_idx": 421, "color": 1, "movedir": 1},
	{"line_idx": 453, "color": 1, "movedir": 1},
	{"line_idx": 485, "color": 2, "movedir": 1},
	{"line_idx": 517, "color": 1, "movedir": 1},
	..
	{"line_idx": 837, "color": 3, "movedir": 1}
];

// Phser.Group in memory during the game:
this.grpblobs ==>
	children[
		{"frame": "ball_col1", "x": 163, "y": 399, "data.index": 0},
		{"frame": "ball_col1", "x": 145, "y": 400, "data.index": 1},
		{"frame": "ball_col1", "x": 104, "y": 398, "data.index": 2},
		{"frame": "ball_col1", "x": 124, "y": 397, "data.index": 3},
		..
		{"frame": "ball_col3", "x": 148, "y": 424, "data.index": 52}
	]

So my questions is, what is the best way to do this?

  1. Just use a JavaScript array/list, maybe also store each sprite as property of the array object?
  2. Use a Phaser.Group with data elements? But then how to iterate through the sprites in the right order?
  3. Use some different method of Phaser class?
2

I think you can use a Phaser.Structs.List of the sprites.

const idx = list.getIndex(sprite);