How do I tint specific sprite frames in phaser?

See more:

Javascript

game

I am creating a Bejeweled game using Emanuele Feronato's awesome prototype; Match 3 Bejeweled HTML5 prototype made with Phaser – detecting combos. I created my own grayscale graphics in Photoshop, made them a little bigger, increased the grid size of the game, and used some code from his HTML5 Dungeon Raid tile engine made with Phaser – Part 4 tutorial to make the game scalable.

I used Phaser's sprite tint property to color my jewels. They look awesome all randomly colored like that, but it is difficult to make matches on just shape alone. How would you tint specific frames a certain color? I will have made a great leap forward in my game when it can do the following:

• Select seven out of 13 color options
• Select seven out of 49 sprites in the Jewels spritesheet. I used the same layer style in this original. It doesn't look bad, but I think different styles of jewel as well as having the shapes all tinted the same color will make matches easier to see. The sprites should all be from different columns. For example, if the first sprite selected was the star in the top left corner of the image, the next frame should be a hexagon or other shape from a different row.
• Once the different frames have been chosen, the game should apply the chosen colors to to the chosen frames of my spritesheet.
The code for coloring the jewels is in the DrawField() method shown below:


JavaScript

function drawField() {
	jewelGroup = game.add.group();
	for (var i = 0; i < fieldSize; i++) {
		gameArray[i] = [];
		for (var j = 0; j < fieldSize; j++) {
			var jewel = game.add.sprite(jewelSize * j + jewelSize / 2, jewelSize * i + jewelSize / 2, "jewels");
			jewel.anchor.set(0.5);
			jewel.tint = colors[Math.floor(Math.random() * colors.length)];
			jewelGroup.add(jewel);
			do {
				var randomColor = game.rnd.between(0, jewelColors - 1);
				jewel.frame = randomColor;
				gameArray[i][j] = {
					jewelColor: randomColor,
					jewelSprite: jewel
				}
			} while (isMatch(i, j));
		}
	}
	selectedJewel = null;
}



What I have tried:

I haven't tried coloring specific frames specific colors yet. I've been browsing the Phaser documentation and have not been able to find a method for finding a specific frame. I think it would look something like
JavaScript

jewel.frame(x);

but I want to be sure. There's nothing about targeting certain frames in the documentation or the examples.