Can't change color of Graphic on Click event

[Jacobross85]

Hello all,

 

I am having trouble with a problem that would seem very simple but I haven't been able to find an answer to in the forums and there is not a close example I've been able to find on the Phaser.io site.

 

 

Explanation: I have a quiz game that asks questions like multiple choice. At the bottom of the game there is a row of circles with numbers inside to show how many questions. When the user answers a question, the circle changes color (red = incorrect, green = correct).  Then the row slides to the left.

 

Problem : I use a click event and in the callback function I change the graphics fillColor property ex : 

rectangle.graphicsData[0].fillColor = 0xFF0000; 

I put this in the update state, and every frame, the update state looks into an array objects that track the question, the answer chosen and whether or not it was correct. It looks something like this.

var tracker = [{question : 1,   // Question numberchosen   : 'A', // Choice chosenstatus   : 0    // 0 for wrong, 1 for right}]

So the idea is, that update looks to the question number the game is currently on, subtracts that value by one (the previous question), looks into the array, finds the question number and uses the status to determine whether the circle with the same number should be red or green.

rectangle.graphicsData[0].fillColor = tracker[this.quest].status ? 0x00FF00 : 0xFF0000; 

I use a console.log to check the fillColor Property and it's changed to the correct color, but on screen, the rectangle never changes color.

 

Bandaid : The only way I can change the color of the circle is by refiring the create state and using the same logic to redraw the circles based on my tracker array.

 

I have put together a little snippet to recreate, basically the same functionality (change color of graphic on a event)

;(function($){	$.fn.graphics = function(){				var self = this;				var Graphics = {}				var game = new Phaser.Game( 			$(self).width(), 			$(self).height(), 			Phaser.AUTO,			$(self).attr('id') 		);				var Objects = {			rec : null,			color: 0xFF0000		}				var state = function(game){}				state.prototype = {					init 		: function(){						game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;					},										preload : function(){},										create 	: function(){												Objects.rec = game.add.graphics(0,0);						Objects.rec.beginFill(0xFF0000, 1);						Objects.rec.drawRect(50,50,50,50);						Objects.rec.endFill();						Objects.rec.inputEnabled = true;														Objects.rec.events.onInputUp.add(function(){							console.log('fire');							Objects.color = 0x00FF00;						});												},										refresh : function(){											},										update 	: function(){						Objects.rec.graphicsData[0].fillColor = Objects.color;						console.log(Objects.color);					},									}						game.state.add('state', state);		game.state.start('state');	}})(jQuery);

Sorry for all the tab spacing, this editor seems to magnify all my tabs. here's a screen of my console log that shows the property changes

[wayfinder]

fillColor is not a reference to existing fills, but a setting for the next shape you draw. You have other options, however:

 

- You can re-draw the indicator with the new fillColor (which you're basically doing now if I understood you correctly?

- You can use the tint property to multiply a color value onto the graphics object. It would probably make sense to create the graphic in greyscale and then tint red or green depending on the current status

[Outrider]

Small note on the init function. Its main use is really to pass data from one stage to another. 

 

Example (Highlight bits to see brackets, commas etc):

//Socket is used in nodejs to pass data from client to server and vice versa.

this.socket.on('startGameState', function(data) {
this.save = data[0]; 
if(data[0].gamestate !== 'undefined') {
game.state.start(data[0].gamestate, true, false, data[0]);
} else {
game.state.start('Farm', true, false, data[0]);
}
});

 

In my game, sometimes i have the player start at different stages, think of it as a save mechanic, and the stages are more like levels. So when I do game.state.start I pass not only what gamestate I want, but also the data[0] array. Which is then used in (the "Farm" stage), to do something like this.

 

init: function(player) {
this.playerData = player;
},

Now I have all the playerData I want passed from the preloader to the farm stage. 

 

And +1 to wayfinder, you'll have to re-draw with a new fillColor or do his tiny method. Even though you changed the property of the color, it doesn't actually change the color because of the way graphics are drawn in code. (afaik)

[Jacobross85]

Thank Wayfinder and Outrider for the detailed explanation.  For the meantime, I created a spritesheet and I am playing the desired frame, which was really quick. And btw, Outrider, thanks for the example you gave. I mean to make this quiz a multiplayer so players can share their scores. 

 

One thing I want to mention though, I can change the color in the update stage, but it only works one time. That's neither here nor there, just a discovery.

 

Thanks again,

 

Jacob Ross