Adjusting a sprite's brightness via Sprite.tint

[Tilde]

So this has been a real nightmare to figure out.

All the sprites in this situation are white, and their color is decided by Sprite.tint. What I want to do is take that new color and slide the brightness on it over time. The problem I'm having is that there's no direct way to adjust brightness with an output to the non-string, hex format "0xffffff", which tint takes. So I've spent a lot of time trying to draft up insane conversion chains using what's available in Phaser.Color:

 

var getTintFromLightness = function(initColor, lightness) {
	var webString = Phaser.Color.getWebRGB(initColor);
	var rgbObj = Phaser.Color.webToColor(webString);
	var hslObj = Phaser.Color.RGBtoHSL(rgbObj.r, rgbObj.g, rgbObj.b);
	Phaser.Color.HSLtoRGB(hslObj.h, hslObj.s, lightness, rgbObj);

	var rgb = Phaser.Color.toRGBA(rgbObj.r, rgbObj.g, rgbObj.b, 255);

	console.log(rgb);
	console.log(rgbObj.r + " " + rgbObj.g + " " + rgbObj.b);

	return rgb;
}

 

This problem in this circumstance is that toRGBA doesn't work exactly like it should here, but this is all ignoring the problem of running this for multiple elements every frame. It just seems like the worst possible way to do it, but I can't come up with anything better. Does anyone have any better ideas?

[iKest]

Use PIXI.ColorMatrixFilter...

[Tilde]

18 hours ago, iKest said:

Use PIXI.ColorMatrixFilter...

Thanks for bringing this to my attention. There's a lot of interesting stuff in here, but it's still confusing to me right now. Here is all the documentation I can get:

https://pixijs.github.io/docs/PIXI.filters.ColorMatrixFilter.html
 

So from what I understand, instead of using Sprite.tint, I'd apply a filter to the Sprite(since it extends DisplayObject) and use the brightness function somehow. But I'm still pretty lost about how this is built and used, and whether its version of pixel processing is an expensive operation.

[Tilde]

Haven't really pursued this since last reply. Is anyone familiar with this filter's use?

[Tilde]

Still no clue on this. My game runs in CANVAS, and from what I understand, Pixi's filters don't even work with that. Even knowing how to do basic hue rotation would be a massive help.

[drhayes]

I haven't tried what you're doing but it sounds very interesting, especially for re-using art assets for different enemies, etc.

First, I'd say you don't know that those function calls are expensive yet. You should run a profiler to figure out how expensive they are. If they *do* end up being relatively expensive, I would memoize the results of your conversions and use pre-defined values -- create your lookup tables once and then use them instead of re-computing.

Is your issue that you can't get the hex values back out given a number? Number.toString takes a radix as the argument, so you can do:

var r = 250;
var g = 120;
var b = 60;

console.log(r.toString(16) + g.toString(16) + b.toString(16));

 

[Tilde]

It actually seems pretty fast, but my formulas are just plain wrong. Part of the difficulty is that tint only takes a number(usually in the format 0xffffff), strings aren't valid.

console.log(getTintFromLightness(red, 1.0)) should give me a number equal to 0xff0000, it instead gives me...-1

[megmut]

Not sure if this helps you at all, but here's how to tween a tint between two colours

 

[Tilde]

I actually had to eliminate tweens for the sake of performance! But it is noteworthy that I can tween from a color to black to maybe affect brightness. Although every time I've tried something like that, it flickers through colors like crazy because it's reading a 3-part hex value from a decreasing integer amount.