Hi guys,
Is it possible to tween a color in Sparrow? I'm not sure if it can be done properly. My attempts results in severe flickering on the object (SPImage) that I try to tween. I assume this is because the value is not a regular number but instead like 0xFF0000 for example, and that the tweener is having problems with this.
Is there a way around this?
Jugibur, that will still create a non-smooth color tween.
I've had this issue before too. I believe I had to create methods and variables inside SPDisplayObject that held values for red, green, blue. Then I tweened those values separately. If you have trouble, I will write a short tutorial on it when I get home. I'm curious on how exactly I went about this.
Shilo, I have tried this code and it produces a smooth transition on my screen.
Perhaps something changed in the new Sparrow version in this scope?
EDIT: Ok, now mine is flickering too... 
I've changed the color i.e. SP_COLOR(0, 0, 255)
My first color fade was from yellow to red and this was a smooth transition.
I'll look into the SP_COLOR macros, since Jugibur seems to have it working 
I only need to tween from max red to the "normal non colored" value.
Thanks Shilo, if you're up for it I'm sure it will help others too. I'd rather not fiddle with the Sparrow source code myself though
The reason yours is working, Jugibur, is due to the way that colors are stored behind the scenes. I'm sure you are aware of this, but colors without alpha are stored as unsigned integers of which 24-bytes are used (0xffffff for example). When you animate this number, it will go like this --> 0x000001, 0x000002, 0x000003, ..., 0x0000ff. It will do this no matter what color you tween to because that's how numbers increment.
So, from black (or any other dark blue) to full blue, it will work. HOWEVER, black green will look like this: 0x000001, 0x000002, 0x000003, ..., 0x0000ff, 0x000101, 0x000102, 0x000103, ..., 0x0001ff, etc etc before finally arriving at 0x00ff00. To animate green (for example), you must increment not by 0x1 as the juggler does, but by 0x100. For red, you must increment by 0x10000.
That is why you are getting flickering, because you are going through over 1.5 million more color combinations on your way to your destination than you expect. For example, 0x0000ff is blue, and then 0x000101 is nearly black. I implemented a method to fade to and from a shade of red in the current game I am working on. Basically I have a BOOL called toRed, and if it is true then in onEnterFrame I add 0x10000 to the color of the stage background. Once it reaches the color I want, I set toRed to NO and then every frame it subtracts 0x10000 from the color. Another method I just thought of would be to create a child class of SPJuggler (call it ColorJuggler or something) and have a method that accepts the passedTime and a specified color. You can then multiply passed time by the offset (0x100 for green, 0x10000 for red, 0x10100 for yellow, etc) and use that value instead.
Both of these implementations have the limitation that they will only go to colors that have either equal values or 0 (FA0000, DD0000, AAAA00, 870087, etc, but not 870198 or anything). If you want to have that kind of control, you will definitely need to track each portion of the color individually. You can quickly extract this by using a bitwise AND (color & 0xff0000 will give you the red value). Then instead of simply checking the color, as I do in my function, you can check all three separately and adjust them if they need it. Something like this (remember bitwise functions have a lower priority than equality checking so they need to be in parenthesis):
#define RED 0xff0000 #define GREEN 0x00ff00 #define BLUE 0x0000ff - (void)onEnterFrame:(SPEnterFrameEvent *)event { uint theColor = __WHATEVER__.color; if( (theColor & RED) == __XX__ && (theColor & GREEN) == __YY__ && (theColor & BLUE) == __ZZ__) { //You reached your target } else { if((theColor & RED) != __XX__) theColor += 0x010000; //Or minus, depending on your fade if((theColor & GREEN) != __YY__) theColor += 0x000100; if((theColor & BLUE) != __ZZ__) theColor += 0x000001; __WHATEVER__.color = theColor; } }
The simpler version with limited colors:
- (void)onEnterFrame:(SPEnterFrameEvent *)event { uint theColor = __WHATEVER__.color; if( theColor == __XX__ ) { //You reached your target; } else { theColor += __OFFSET__; //(0x010000 for red, 0x010100 for yellow, etc) } }
If you need it to go faster, use 2 instead of 1, etc. However, it won't get much slower than this unless you implement some logic to keep it from happening every frame. Hope this helps!
P.S. Oscar, there is nothing different about a hexidecimal number. If you look at it in the debug variables window, it will actually display as the number it really is unless you turn on hex viewing. Hex is just a convenience method ;). For example, you can easily tell that 0xff0000 is red, but how about "16711680" (the decimal equivalent)? 16711680 and 0xff0000 are the exact same thing to the hardware :).
Thank you for sharing borrrden!
I created an extension called SHAnimatableColor. What this class does is add these methods and properties:
@interface SPTween (AnimatableColor) - (void)animateColorWithTargetValue:(uint)value; - (void)animateFontColorWithTargetValue:(uint)value; @end @interface SPStage (ColorComponents) @property (nonatomic, assign) uint redColor; @property (nonatomic, assign) uint greenColor; @property (nonatomic, assign) uint blueColor; @end @interface SPQuad (ColorComponents) @property (nonatomic, assign) uint redColor; @property (nonatomic, assign) uint greenColor; @property (nonatomic, assign) uint blueColor; @end @interface SPTextField (ColorComponents) @property (nonatomic, assign) uint redColor; @property (nonatomic, assign) uint greenColor; @property (nonatomic, assign) uint blueColor; @end @interface SPButton (ColorComponents) @property (nonatomic, assign) uint fontRedColor; @property (nonatomic, assign) uint fontGreenColor; @property (nonatomic, assign) uint fontBlueColor; @end
You can download it here: https://gist.github.com/1085941
Instructions:
#import "SHAnimatableColor.h"//tween a SPQuad color from blue to red in 1 second. SPQuad *quad = [SPQuad quadWithWidth:50.0f height:50.0f]; quad.color = 0x0000ff; [self.stage addChild:quad]; uint targetColor = 0xff0000; SPTween *tween = [SPTween tweenWithTarget:quad time:1.0f]; //long version [tween animateProperty:@"redColor" targetValue:SP_COLOR_PART_RED(targetColor)]; [tween animateProperty:@"greenColor" targetValue:SP_COLOR_PART_GREEN(targetColor)]; [tween animateProperty:@"blueColor" targetValue:SP_COLOR_PART_BLUE(targetColor)]; //short version [tween animateColorWithTargetValue:targetColor]; [self.stage.juggler addObject:tween];
Example of a SPButton font color tween:
//tween a SPButton font color from black to white in 5 seconds. SPTexture *buttonTexture = [SPTexture textureWithContentsOfFile:@"button.png"]; SPButton *button = [SPButton buttonWithUpState:buttonTexture]; button.text = @"Fade from black to white"; button.fontColor = 0x000000; [self addChild:button]; uint targetFontColor = 0xff0000; SPTween *tween = [SPTween tweenWithTarget:button time:5.0f]; //long version [tween animateProperty:@"fontRedColor" targetValue:SP_COLOR_PART_RED(targetFontColor)]; [tween animateProperty:@"fontGreenColor" targetValue:SP_COLOR_PART_GREEN(targetFontColor)]; [tween animateProperty:@"fontBlueColor" targetValue:SP_COLOR_PART_BLUE(targetFontColor)]; //short version [tween animateFontColorWithTargetValue:targetFontColor]; [self.stage.juggler addObject:tween];
Nice work, I wonder, would it be possible to tween a quad's gradient using this approach?
For example, to tween a light blue sky gradient towards sunset etc
I'm going to have a play around, though I doubt it will be as simple as i'm thinking it is (tweening each corner color individually using Shilo's method)
Updated SHAnimatableColor to support SPQuad vertexes.
Hello straydogstrut!
You can change the gradient by setting up methods that directly call these methods in SPQuad:
/// Sets the color of a vertex. - (void)setColor:(uint)color ofVertex:(int)vertexID; /// Returns the color of a vertex. - (uint)colorOfVertex:(int)vertexID;
If you re-download SHAnimatableColor, you can change SPQuad vertexes with quite a few different methods.
Examples:
//tween a quad color from white to red, green, blue, and yellow in 5 second. SPQuad *quad = [SPQuad quadWithWidth:50.0f height:50.0f]; quad.color = 0xffffff; [self.stage addChild:quad]; uint topLeftColor = 0xff0000; uint topRightColor = 0x00ff00; uint bottomLeftColor = 0x0000ff; uint bottomRightColor = 0xffff00; SPTween *tween = [SPTween tweenWithTarget:quad time:5.0f]; [tween animateTopLeftColorWithTargetValue:topLeftColor]; [tween animateTopRightColorWithTargetValue:topRightColor]; [tween animateBottomLeftColorWithTargetValue:bottomLeftColor]; [tween animateBottomRightColorWithTargetValue:bottomRightColor]; [self.stage.juggler addObject:tween];
//tween a quad color from white to red, green, blue, and yellow in 5 second. SPQuad *quad = [SPQuad quadWithWidth:50.0f height:50.0f]; quad.color = 0xffffff; [self.stage addChild:quad]; uint topLeftColor = 0xff0000; uint topRightColor = 0x00ff00; uint bottomLeftColor = 0x0000ff; uint bottomRightColor = 0xffff00; uint corners[4] = {topLeftColor, topRightColor, bottomLeftColor, bottomRightColor}; SPTween *tween = [SPTween tweenWithTarget:quad time:5.0f]; [tween animateCornersWithCArray:corners]; [self.stage.juggler addObject:tween];
//tween a quad color from white to red, green, blue, and yellow in 5 second. SPQuad *quad = [SPQuad quadWithWidth:50.0f height:50.0f]; quad.color = 0xffffff; [self.stage addChild:quad]; uint topLeftColor = 0xff0000; uint topRightColor = 0x00ff00; uint bottomLeftColor = 0x0000ff; uint bottomRightColor = 0xffff00; SPTween *tween = [SPTween tweenWithTarget:quad time:5.0f]; [tween animateCornersWithTopLeft:topLeftColor topRight:topRightColor bottomLeft:bottomLeftColor bottomRight:bottomRightColor]; [self.stage.juggler addObject:tween];
Great stuff, thanks for sharing!
Wow, that's amazing work, thanks Shilo!
Hello,
My extension doesn't mess with the tween events. Maybe you are mistyping the @selector() or method.
Example of working code:
- (void)load { SPQuad *quad = [SPQuad quadWithWidth:50.0f height:50.0f]; quad.color = 0xffffff; [self.stage addChild:quad]; uint topLeftColor = 0xff0000; uint topRightColor = 0x00ff00; uint bottomLeftColor = 0x0000ff; uint bottomRightColor = 0xffff00; SPTween *tween = [SPTween tweenWithTarget:quad time:5.0f]; [tween animateCornersWithTopLeft:topLeftColor topRight:topRightColor bottomLeft:bottomLeftColor bottomRight:bottomRightColor]; [tween addEventListener:@selector(onTweenCompleted:) atObject:self forType:SP_EVENT_TYPE_TWEEN_COMPLETED]; [self.stage.juggler addObject:tween]; } - (void)onTweenCompleted:(SPEvent *)event { NSLog(@"tween completed"); }
You must log in to post.
