Fading between sprite texture change?

[mustardseed]

I'm wanting to change the time of day in my runner (day -> dusk -> night), but I want to fade this transition rather than having it abruptly change.

 

Is there a way to fade a texture change on sprites?

[mustardseed]

So I tried using ColorMatrixFilter on each sprite and it looks great but the performance is pretty bad on mobile except for the latest devices. Here's a gif of what I made. Anybody have better thoughts on how to improve performance? 

 

[stupot]

Did you have a filter on each individual sprite?  which would definitely be costly.

 

You could try a single image overlay stretched to fullscreen, positioned on top of all the elements that need colouring, and alpha blend it in.  Not quite the same as tinting but you may get the result your after.

[mustardseed]

Yea, I tried a big overlay image, but it just doesn't look as refined. Plus the sprites need to change to a different color than the background. Would a Tint run faster than a filter? I had trouble tweening a tint, but I could try again if it would improve performance.

[stupot]

Tint or filter, you'd have to try it yourself, both are mosre expensive in CANVAS mode.  There's also shaders for WEBGL.

 

Also you could maybe try duplicating your gfx so each had a night/day version, you could alpha one over the other - obviously this would double the drawing.

[mustardseed]

For future reference, here's what I ended up using:

 

Turns out that Tints don't cost anything in WebGL so I went all in on using those, and came up with a good way of tweening colors that won't go through the whole spectrum first.

 

There's some Canvas bugs on tinting TileSprites, so I can't test performance with that yet, but for WebGL it works great.

create: function() {//Create color value variablescolor1 = { red: 80, green:80, blue: 100 };},// Function to tween values in the color variablescolorTweenFunction: function() {colortween = game.add.tween(color1).to( { red: 255, green: 255, blue: 255 }, daychangelength, "Linear", true);}    update: function() {// Add Floor to variables for when converting to HEX stringcolor1.red = Math.floor(color1.red); color1.green = Math.floor(color1.green); color1.blue = Math.floor(color1.blue);//Convert variables to color HEX valuetintcolor1 = Phaser.Color.RGBtoString(color1.red, color1.green, color1.blue, '', '0x');//Tint the spritethis.whale.tint = tintcolor1;}