Flixel Forums

development => iOS => Topic started by: IQpierce on Sun, Apr 29, 2012

Title: Dynamic FlxSprite coloring
Post by: IQpierce on Sun, Apr 29, 2012
I was emailing "initials" about this the other day, he gave me a bit of a starting point for this discovery...

The original Flash version of Flixel of course allows you to do things like "sprite.color = 0xff0000;" to instantly tint an FlxSprite to be red. When I developed the prototype of my game Connectrode in Flixel, I colored all of the sprites this way in the Flash version...

...Then I brought Connectrode over to the iOS version of Flixel and discovered this capability didn't work! There's a "color" member on FlxSprite's on the iOS version; but if you set it, nothing happens. At that time, I just made special textures for each color, and moved on.

It's a year since then and I'm trying to do a "thank you" update to Connectrode, to thank all the players who bought the game out of solidarity last month (when some drama went down between me, Zynga, and my former CEO). One thing I had always wanted to do was make my "matching colored tiles" game playable by people who were colorblind. To allow for this, I wanted to let players choose their own colors for the 6 piece types used in the game - so, I looked into solving dynamic tinting for real.

Turns out this is pretty simple. Go to the function FlxSprite.renderSprite()... look for the line "glPushMatrix();"... and right after that line, add these lines of code:

Code: [Select]
float redMultiplier = ((float)( _color >> 16 & 0xff )) / 255.0f;
float greenMultiplier = ((float)( _color >> 8 & 0xff )) / 255.0f;
float blueMultiplier = ((float)( _color & 0xff )) / 255.0f;
float alphaMultiplier = _alpha;
glColor4f( redMultiplier, greenMultiplier, blueMultiplier, alphaMultiplier);

The color tinting of FlxSprites will now work exactly as you'd expect. Hope this helps folks!
Title: Re: Dynamic FlxSprite coloring
Post by: initials on Sun, Apr 29, 2012
This is awesome!
It opens up the doors to do some really powerful things with OpenGLes.

I'm planning on trying Y-Axis rotates, Z-Axis depth, rainbow mode... all sorts of things.

The other thing I want to do which I have already done in my custom Flash flixel version, is make a
Code: [Select]
[FlxSprite fadeToColor:uint duration:float]. It works great for fading sprites out to black to make a silhouette effect.

Thanks IQ.
Title: Re: Dynamic FlxSprite coloring
Post by: tokyotron on Fri, May 11, 2012
I tried it. Didn't work... until I realized that everything inside " - (void) setColor:(unsigned int)Color;" was commented out. I just added
Code: [Select]
_color = Color; and now it seems to work. This can be real useful I agree  ::)
Title: Re: Dynamic FlxSprite coloring
Post by: IQpierce on Tue, May 29, 2012
Whoops, thanks for catching that tokyotron! I had messed around that code early in Connectrode development and totally forgotten it was another necessary change.
Title: Re: Dynamic FlxSprite coloring
Post by: tokyotron on Mon, Jun 11, 2012
You can also try encapsulating glDrawArrays with GL_COLOR_ARRAY...

   glColorPointer(4, GL_UNSIGNED_BYTE, 0, gRectColors);
   glDrawArrays(GL_TRIANGLE_STRIP, 0, vertexCount);

Where gRectColors could look like this

static const GLubyte gRectColors[] =   {
   255, 0, 0, 255, // red?
   0, 255, 0, 255, // g?
   0, 0, 255, 255 // b?

It would allow more different kinds of colorings with nice gradients and stuff.
Now if you look at FlxSprite again you can see that glEnableClientState(GL_COLOR_ARRAY); is already in there, but it seems disabled or only active under some circumstances (_alpha != 1.0 || filled). So should be possible maybe already provided _colors is really used. Not really sure what "filled" and that stuff means yet but if needed I'm sure it wouldn't be too hard to work it out.
Title: Re: Dynamic FlxSprite coloring
Post by: initials on Wed, Jun 13, 2012
I really appreciate your input here Tokyotron. Great to learn some new OpenGLes tricks.