Tinting images

[divers]

Hello, i want to achieve effect like this:

as the score increases by 5, background change color smoothly.

I've done it like this:

bg1 = game.add.image(0,0, 'bg1');
bg2 = game.add.image(0,0, 'bg2');	

function addScore(){
	
	if(score == 4){
		tweenTint(bg1, 0xffffff, 0xE6E2F4, 1000);
		tweenTint(bg2, 0xffffff, 0x637580, 1000);
	} else if(score == 9){
		tweenTint(bg1, 0xE6E2F4, 0xF4E8E2, 1000);
		tweenTint(bg2, 0x637580, 0x806A63, 1000);
	} 
		
	score++;
	
}
// this is a function that i found on this forum :)
function tweenTint(obj, startColor, endColor, time) {    

	// create an object to tween with our step value at 0    
	var colorBlend = {step: 0};    
	// create the tween on this object and tween its step property to 100    
	var colorTween = game.add.tween(colorBlend).to({step: 100}, time);        
	// run the interpolateColor function every time the tween updates, feeding it the    
	// updated value of our tween each time, and set the result as our tint    
	colorTween.onUpdateCallback(function() {      
	obj.tint = Phaser.Color.interpolateColor(startColor, endColor, 100, colorBlend.step);       
	});        
	// set the object to the start color straight away    
	obj.tint = startColor;            
	// start the tween    
	colorTween.start();
	
}

 But its not smooth, sometimes it blinks and back to normal image before tint and what is more important it gets really laggy on mobile when this function is requested.

Do you have some better resolutions?

[divers]

#refresh

[divers]

someone?

[samid737]

 

 

The color space that you use and coordinate system used in your interpolation function affects your interpolation result. There is not one unique way to linearly interpolate to your desired color, but there are many options (this answer show what's happening and this one to compare interpolation results). So when you want to go from red to blue, which path do you want to take? This might be the reason why the color interpolation does not look right. (try going from red to green in RGB vs in HSV). Some suggestions/ideas:

-Maybe you can try to use a different color space to get better results. Here is an example of interpolating colors in HSV instead of RGB (the source code from here):

 

-Try changing your colors in intermediate steps, so RED--->GREEN becomes RED---> YELLOW---> GREEN.

-Try shifting the hue of your sprites using a custom shader (needs WEBGL). Example:

This will require a custom function that multiplies the cosine and sine in the shader by some fixed increment(angle) everytime you reach some new score. This might also not be the ideal solution for you, but maybe you can hack something out of it (its what I do most of the time).

[divers]

Thanks for your answer!