Mapping tint color to a variable

[Conqarous]

Hey, maybe someone solved this problem before.

 

Lets say I have a variable from 0 to 100.

How can I map it to the tint color for the sprite?

 

I.e.:

when variable is at 0 -> sprite.tint = white;

[everything in between]

when variable is at maximum (100) -> sprite.tint = red;

 

Thanks!

 

[jmp909]

what are the colours in between?

 

you cant tint a sprite white, so i assume you just mean a tint of 0xFFFFFF which will show it's original colour

 

i've used HSLtoRGB to do Black to Red to White tint which isn't quite what you want though

http://phaser.io/sandbox/fiSAdnSD/play

 

(maybe 50 to 100% lightness covers what you need, so you can fix it up with a bit of maths to map to your original range... in which case try ths http://phaser.io/sandbox/viiUTUex/play )

 

If you could clarify exactly what you need though.

[drhayes]

I imagine almost all of Phaser.Color is going to be your friend.

[Conqarous]

    var L = (50+(100-percent)/2)/100

    var rgb = Phaser.Color.HSLtoRGB(0,1,L)

    var hex = (rgb.r * 0x010000) + (rgb.g * 0x000100) + (rgb.b * 0x000001)

 

This is exactly what I needed! Your are awesome! Thank you.

[jmp909]

there's probably a cleverer away involving a << but it'll do

[webcaetano]

@jmp already answered ...
This is also a very similar answer http://www.html5gamedevs.com/topic/7162-tweening-a-tint/?p=42712