Jump to content

Adjusting a sprite's brightness via Sprite.tint


Recommended Posts

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(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?

Link to comment
Share on other sites

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:


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.

Link to comment
Share on other sites

  • 3 weeks later...
  • 2 weeks later...

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));


Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...