Added distance field outline effect.

Author: osinoleg

Resources/Images/output.png

@@ -3,15 +3,12 @@
 #import "CCNodeColor.h"
 #import "CCEffectNode.h"
 
-enum DFTest { DISTANCE_FIELD, OUTLINE };
-
 @interface CCEffectsTest : TestBase @end
 @implementation CCEffectsTest {
 #if CC_EFFECTS_EXPERIMENTAL
     CCEffectDistanceField* _distanceFieldEffect;
 #endif
     CCEffectDFOutline* _outlineEffect;
-    enum DFTest _currentEffect;
 }
 
 -(id)init
@@ -28,15 +25,14 @@ -(id)init
 
 -(void)setupDFOutlineEffectTest
 {
-    _currentEffect = OUTLINE;
     self.subTitle = @"Distance Field Outline Test";
 
     CCSprite *environment = [CCSprite spriteWithImageNamed:@"Images/MountainPanorama.jpg"];
     environment.positionType = CCPositionTypeNormalized;
     environment.anchorPoint = ccp(0.5, 0.5);
     environment.position = ccp(0.5f, 0.5f);
 
-    _outlineEffect = [CCEffectDFOutline effectWithOutlineColor:[CCColor redColor] fillColor:[CCColor blackColor]];
+    _outlineEffect = [CCEffectDFOutline effectWithOutlineColor:[CCColor redColor] fillColor:[CCColor blackColor] outlineWidth:3 fieldScale:32];
 
     CCSprite *sampleSprite = [CCSprite spriteWithImageNamed:@"Images/output.png"];
     sampleSprite.position = ccp(0.5, 0.5);
@@ -59,31 +55,31 @@ -(void)setupDFOutlineEffectTest
     slider.anchorPoint = ccp(0.5f, 0.5f);
     slider.scale = 0.8;
 
-    [slider setTarget:self selector:@selector(outlineInnerWidthChange:)];
-    
-    CCSlider* slider2 = [[CCSlider alloc] initWithBackground:background andHandleImage:handle];
-    [slider2 setBackgroundSpriteFrame:backgroundHilite forState:CCControlStateHighlighted];
-    slider2.positionType = CCPositionTypeNormalized;
-    slider2.position = ccp(0.15f, 0.5f);
-    
-    slider2.preferredSizeType = CCSizeTypeMake(CCSizeUnitNormalized, CCSizeUnitUIPoints);
-    slider2.preferredSize = CGSizeMake(0.5f, 10);
-    slider2.rotation = 90;
-    slider2.anchorPoint = ccp(0.5f, 0.5f);
-    slider2.scale = 0.8;
+    [slider setTarget:self selector:@selector(outlineWidthChagne:)];
 
-    [slider2 setTarget:self selector:@selector(outlineOuterWidthChange:)];
-
     [self.contentNode addChild:environment];
     [self.contentNode addChild:slider];
-    [self.contentNode addChild:slider2];
     [self.contentNode addChild:sampleSprite];
+    
+    // 6 pixel block used for comparison;
+    CCNodeColor* block = [CCNodeColor nodeWithColor:[CCColor greenColor]];
+    block.contentSize = CGSizeMake(6.0, 6.0);
+    block.position = ccp(0.424, 0.324);
+    block.positionType = CCPositionTypeNormalized;
+    block.rotation = 32;
+//    [self.contentNode addChild:block];
+}
+
+- (void)outlineWidthChagne:(id)sender
+{
+    const int outlineWidthMax = 6;
+    CCSlider* slider = sender;
+    _outlineEffect.outlineWidth = slider.sliderValue * outlineWidthMax;
 }
 
 #if CC_EFFECTS_EXPERIMENTAL
 -(void)setupDistanceFieldEffectTest
 {
-    _currentEffect = DISTANCE_FIELD;
     self.subTitle = @"Distance Field Effect Test";
 
     //    CCNodeColor* environment = [CCNodeColor nodeWithColor:[CCColor whiteColor]];
@@ -166,25 +162,16 @@ -(void)setupDistanceFieldEffectTest
     [self.contentNode addChild:slider3];
 }
 
-#endif
-
 - (void)outlineInnerWidthChange:(id)sender
 {
     CCSlider* slider = sender;
-    if(_currentEffect == DISTANCE_FIELD)
-        _distanceFieldEffect.outlineInnerWidth = slider.sliderValue;
-    else if(_currentEffect == OUTLINE)
-        _outlineEffect.outlineInnerWidth = slider.sliderValue;
-        
+    _distanceFieldEffect.outlineInnerWidth = slider.sliderValue;
 }
 
 - (void)outlineOuterWidthChange:(id)sender
 {
     CCSlider* slider = sender;
-    if(_currentEffect == DISTANCE_FIELD)
-        _distanceFieldEffect.outlineOuterWidth = slider.sliderValue;
-    else if(_currentEffect == OUTLINE)
-        _outlineEffect.outlineOuterWidth = slider.sliderValue;
+    _distanceFieldEffect.outlineOuterWidth = slider.sliderValue;
 }
 
 - (void)glowWidthChange:(id)sender
@@ -203,6 +190,8 @@ - (void)enableOutline:(id)sender
     _distanceFieldEffect.outline = !_distanceFieldEffect.outline;
 }
 
+#endif
+
 #pragma mark DropShadow
 
 -(void)setupDropShadowEffectTest

cocos2d-ui-tests/tests/CCEffectsTest.m

@@ -19,11 +19,14 @@
 /// @name Accessing Effect Attributes
 /// -----------------------------------------------------------------------
 
+/** Color of the outline */
 @property (nonatomic, strong) CCColor* fillColor;
+
+/** Color of the distance field */
 @property (nonatomic, strong) CCColor* outlineColor;
 
-@property (nonatomic) float outlineInnerWidth;
-@property (nonatomic) float outlineOuterWidth;
+/** Outline width pixel width of the outline */
+@property (nonatomic) int outlineWidth;
 
 /// -----------------------------------------------------------------------
 /// @name Initializing a CCEffectDFOutline object
@@ -39,11 +42,17 @@
 /**
  *  Initializes a CCEffectDFOutline object with the supplied parameters.
  *
- *  @param glowColor Color of the glow, a [CCColor blackColor] will result in an opaque black drop shadow.
+ *  @param outlineColor Color of the outline, a [CCColor blackColor] will result in an opaque black outline.
+ *  @param fillColor Color of the fillColor, a [CCColor blackColor] will result in an opaque black fillColor.
+ *  @param outlineWidth pixel width of the outline.
+ *  @param fieldScale, defined by the distance field generation proccess, for example a distance field that 
+ *  was generated with a 4096/4096 input and output a 128/128 texture would have a fieldScale of 32 (
+ *  input size / output size). Note: this parameter could be automatically calculated if we assume that all 
+ *  distance fields are generated from a 4096 input.
  *
  *  @return The CCEffectDFOutline object.
  */
--(id)initWithOutlineColor:(CCColor*)outlineColor fillColor:(CCColor*)fillColor;
+-(id)initWithOutlineColor:(CCColor*)outlineColor fillColor:(CCColor*)outlineColor outlineWidth:(int)outlineWidth fieldScale:(float)fieldScale;
 
 
 /// -----------------------------------------------------------------------
@@ -57,6 +66,6 @@
  *
  *  @return The CCEffectDFOutline object.
  */
-+(id)effectWithOutlineColor:(CCColor*)outlineColor fillColor:(CCColor*)fillColor;
++(id)effectWithOutlineColor:(CCColor*)outlineColor fillColor:(CCColor*)fillColor outlineWidth:(int)outlineWidth fieldScale:(float)fieldScale;
 
 @end

cocos2d/CCEffectDFOutline.h

@@ -11,14 +11,18 @@
 #import "CCRenderer.h"
 #import "CCTexture.h"
 
-@implementation CCEffectDFOutline
+@implementation CCEffectDFOutline {
+    float _outerMin;
+    float _outerMax;
+    float _fieldScaleFactor;
+}
 
 -(id)init
 {
-    return [self initWithOutlineColor:[CCColor redColor] fillColor:[CCColor blackColor]];
+    return [self initWithOutlineColor:[CCColor redColor] fillColor:[CCColor blackColor] outlineWidth:3 fieldScale:32];
 }
 
--(id)initWithOutlineColor:(CCColor*)outlineColor fillColor:(CCColor*)fillColor
+-(id)initWithOutlineColor:(CCColor*)outlineColor fillColor:(CCColor*)fillColor outlineWidth:(int)outlineWidth fieldScale:(float)fieldScale
 {
     NSArray *uniforms = @[
                           [CCEffectUniform uniform:@"vec4" name:@"u_fillColor" value:[NSValue valueWithGLKVector4:[CCColor blackColor].glkVector4]],
@@ -29,8 +33,8 @@ -(id)initWithOutlineColor:(CCColor*)outlineColor fillColor:(CCColor*)fillColor
 
     if((self = [super initWithFragmentUniforms:uniforms vertexUniforms:nil varyings:nil]))
     {
-        _outlineInnerWidth = 0.08;
-        _outlineOuterWidth = 0.08;
+        _fieldScaleFactor = 32.0f; // 32 4096/128 (input distance field size / output df size)
+        self.outlineWidth = 3;
         _fillColor = fillColor;
         _outlineColor = outlineColor;
 
@@ -39,9 +43,9 @@ -(id)initWithOutlineColor:(CCColor*)outlineColor fillColor:(CCColor*)fillColor
     return self;
 }
 
-+(id)effectWithOutlineColor:(CCColor*)outlineColor fillColor:(CCColor*)fillColor
++(id)effectWithOutlineColor:(CCColor*)outlineColor fillColor:(CCColor*)fillColor outlineWidth:(int)outlineWidth fieldScale:(float)fieldScale
 {
-    return [[self alloc] initWithOutlineColor:outlineColor fillColor:fillColor];
+    return [[self alloc] initWithOutlineColor:outlineColor fillColor:fillColor outlineWidth:outlineWidth fieldScale:fieldScale];
 }
 
 -(void)buildFragmentFunctions
@@ -61,15 +65,14 @@ -(void)buildFragmentFunctions
 
                                    // soft edges
                                    outputColor.a *= smoothstep(min, max, distAlphaMask);
-                                   
-                                   vec4 glowTexel = texture2D(cc_MainTexture, cc_FragTexCoord1);
-//                                       min -= 0.2;
-//                                       max += 0.2;
-                                   
+                                  
                                    min = u_outlineOuterWidth.x;
                                    max = u_outlineOuterWidth.y;
-                                   min = 0.3;
-                                   max = 0.34;
+                                   if(min == 0.5 && max == 0.5)
+                                       return outputColor;
+                                   
+                                   vec4 glowTexel = texture2D(cc_MainTexture, cc_FragTexCoord1);
+                                  
 
                                    vec4 glowc = u_outlineColor * smoothstep(min, max, glowTexel.r);
 
@@ -100,38 +103,25 @@ -(void)buildRenderPasses
         pass.shaderUniforms[weakSelf.uniformTranslationTable[@"u_fillColor"]] = [NSValue valueWithGLKVector4:weakSelf.fillColor.glkVector4];
         pass.shaderUniforms[weakSelf.uniformTranslationTable[@"u_outlineColor"]] = [NSValue valueWithGLKVector4:weakSelf.outlineColor.glkVector4];
 
-        // 0.5 == center(edge),  < 0.5 == outside, > 0.5 == inside
-        float innerMin = 0.5;
-        float innerMax = (0.5 * _outlineInnerWidth) + innerMin;
-        pass.shaderUniforms[weakSelf.uniformTranslationTable[@"u_outlineInnerWidth"]] = [NSValue valueWithGLKVector2:GLKVector2Make(innerMin, innerMax)];
-        
-        float outerMin = (0.5 * (1.0 - _outlineOuterWidth));
-        float outerMax = 0.5;
-        pass.shaderUniforms[weakSelf.uniformTranslationTable[@"u_outlineOuterWidth"]] = [NSValue valueWithGLKVector2:GLKVector2Make(outerMin, outerMax)];
-        
-//        float glowWidthMin = (0.5 * (1.0 - _glowWidth));
-//        float glowWidthMax = 0.5;
-//        pass.shaderUniforms[weakSelf.uniformTranslationTable[@"u_glowWidth"]] = [NSValue valueWithGLKVector2:GLKVector2Make(glowWidthMin, glowWidthMax)];
-//        
-//        pass.shaderUniforms[weakSelf.uniformTranslationTable[@"u_outline"]] = _outline ? [NSNumber numberWithFloat:1.0f] : [NSNumber numberWithFloat:0.0f];
-//        pass.shaderUniforms[weakSelf.uniformTranslationTable[@"u_glow"]] = _glow ? [NSNumber numberWithFloat:1.0f] : [NSNumber numberWithFloat:0.0f];
-//        
-//        GLKVector2 offset = GLKVector2Make(weakSelf.glowOffset.x /  previousPassTexture.contentSize.width, weakSelf.glowOffset.y /  previousPassTexture.contentSize.height);
-//        pass.shaderUniforms[weakSelf.uniformTranslationTable[@"u_glowOffset"]] = [NSValue valueWithGLKVector2:offset];
+        pass.shaderUniforms[weakSelf.uniformTranslationTable[@"u_outlineOuterWidth"]] = [NSValue valueWithGLKVector2:GLKVector2Make(_outerMin, _outerMax)];
 
     } copy]];
 
     self.renderPasses = @[pass0];
 }
 
--(void)setOutlineInnerWidth:(float)outlineInnerWidth
+-(void)setOutlineWidth:(int)outlineWidth
 {
-    _outlineInnerWidth = clampf(outlineInnerWidth, 0.0f, 1.0f);
-}
+    
+    _outlineWidth = outlineWidth;//clampf(outlineOuterWidth, 0.0f, 1.0f);
+    
+    float outlineWidthNormalized = ((float)outlineWidth)/255.0 * _fieldScaleFactor;
+    float edgeSoftness = _outlineWidth * 0.1; // randomly chosen number that looks good to me, based on a 200 pixel spread (note: this should adjustable).
+    
+    // 0.5 == center(edge),  < 0.5 == outside, > 0.5 == inside
+    _outerMin = (0.5 * (1.0 - outlineWidthNormalized));
+    _outerMax = _outerMin + _outerMin * edgeSoftness;
 
--(void)setOutlineOuterWidth:(float)outlineOuterWidth
-{
-    _outlineOuterWidth = clampf(outlineOuterWidth, 0.0f, 1.0f);
 }
 
 @end

cocos2d/CCEffectDFOutline.m

@@ -155,6 +155,6 @@
 #endif
 
 #ifndef CC_EFFECTS_EXPERIMENTAL
-#define CC_EFFECTS_EXPERIMENTAL 1
+#define CC_EFFECTS_EXPERIMENTAL 0
 #endif