Skip to content

Commit 6856b3b

Browse files
osinolegosinoleg
committed
Added distance field effect test (a sandbox for trying different things with distance fields).
Next: I'm going to create a couple of concrete/specific effects that utilize distance fields.
1 parent ccdd423 commit 6856b3b

File tree

5 files changed

+137
-25
lines changed

5 files changed

+137
-25
lines changed

‎cocos2d-ios.xcodeproj/project.pbxproj‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1801,7 +1801,7 @@
18011801
D272031618FC897D00B100FF /* Effects */ = {
18021802
isa = PBXGroup;
18031803
children = (
1804-
D27451B419AE54C0006DA0A1 /* DistanceFields */,
1804+
D27451BF19AFC44D006DA0A1 /* Experimental */,
18051805
D3903B081995285B003AA81A /* CCEffectBlur.h */,
18061806
D3903B091995285B003AA81A /* CCEffectBlur.m */,
18071807
D268FE151980791300ECBCD0 /* CCEffectRefraction.h */,
@@ -1839,13 +1839,13 @@
18391839
name = Effects;
18401840
sourceTree = "<group>";
18411841
};
1842-
D27451B419AE54C0006DA0A1 /* DistanceFields */ = {
1842+
D27451BF19AFC44D006DA0A1 /* Experimental */ = {
18431843
isa = PBXGroup;
18441844
children = (
18451845
D27451B519AE5517006DA0A1 /* CCEffectDistanceField.h */,
18461846
D27451B619AE5517006DA0A1 /* CCEffectDistanceField.m */,
18471847
);
1848-
name = DistanceFields;
1848+
name = Experimental;
18491849
sourceTree = "<group>";
18501850
};
18511851
D285ECED192E7E06009F4E88 /* Android */ = {

‎cocos2d-ui-tests/tests/CCEffectsTest.m‎

Lines changed: 98 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,11 @@
44
#import "CCEffectNode.h"
55

66
@interface CCEffectsTest : TestBase @end
7-
@implementation CCEffectsTest
7+
@implementation CCEffectsTest {
8+
#if CC_EFFECTS_EXPERIMENTAL
9+
CCEffectDistanceField* _distanceFieldEffect;
10+
#endif
11+
}
812

913
-(id)init
1014
{
@@ -16,6 +20,7 @@ -(id)init
1620
return self;
1721
}
1822

23+
#if CC_EFFECTS_EXPERIMENTAL
1924
-(void)setupDistanceFieldEffectTest
2025
{
2126
self.subTitle = @"Distance Field Effect Test";
@@ -29,23 +34,107 @@ -(void)setupDistanceFieldEffectTest
2934
[self.contentNode addChild:environment];
3035

3136
CCColor *glowColor = [CCColor colorWithRed:0.0 green:0.0 blue:1.0 alpha:1.0];
32-
CCEffectDistanceField* effect = [CCEffectDistanceField effectWithGlowColor:glowColor];
37+
_distanceFieldEffect = [CCEffectDistanceField effectWithGlowColor:glowColor outlineColor:[CCColor redColor]];
3338

3439
CCSprite *sampleSprite = [CCSprite spriteWithImageNamed:@"Images/output.png"];
3540
sampleSprite.position = ccp(0.5, 0.5);
3641
sampleSprite.positionType = CCPositionTypeNormalized;
37-
sampleSprite.effect = effect;
42+
sampleSprite.effect = _distanceFieldEffect;
3843
sampleSprite.scale = 2.0f;
3944

40-
CCNodeColor* node = [[CCNodeColor alloc] initWithColor:[CCColor redColor]];
41-
// node.contentSizeInPoints = CGSizeMake(25, 25);
42-
node.contentSize = CGSizeMake(6, 6);
43-
node.position = ccp(10.0, 50.0);
44-
45-
[self.contentNode addChild:node];
45+
CCSpriteFrame* background = [CCSpriteFrame frameWithImageNamed:@"Tests/slider-background.png"];
46+
CCSpriteFrame* backgroundHilite = [CCSpriteFrame frameWithImageNamed:@"Tests/slider-background-hilite.png"];
47+
CCSpriteFrame* handle = [CCSpriteFrame frameWithImageNamed:@"Tests/slider-handle.png"];
48+
49+
CCSlider* slider = [[CCSlider alloc] initWithBackground:background andHandleImage:handle];
50+
[slider setBackgroundSpriteFrame:backgroundHilite forState:CCControlStateHighlighted];
51+
slider.positionType = CCPositionTypeNormalized;
52+
slider.position = ccp(0.1f, 0.5f);
53+
54+
slider.preferredSizeType = CCSizeTypeMake(CCSizeUnitNormalized, CCSizeUnitUIPoints);
55+
slider.preferredSize = CGSizeMake(0.5f, 10);
56+
slider.rotation = 90;
57+
slider.anchorPoint = ccp(0.5f, 0.5f);
58+
slider.scale = 0.8;
59+
60+
[slider setTarget:self selector:@selector(outlineInnerWidthChange:)];
61+
62+
CCSlider* slider2 = [[CCSlider alloc] initWithBackground:background andHandleImage:handle];
63+
[slider2 setBackgroundSpriteFrame:backgroundHilite forState:CCControlStateHighlighted];
64+
slider2.positionType = CCPositionTypeNormalized;
65+
slider2.position = ccp(0.15f, 0.5f);
66+
67+
slider2.preferredSizeType = CCSizeTypeMake(CCSizeUnitNormalized, CCSizeUnitUIPoints);
68+
slider2.preferredSize = CGSizeMake(0.5f, 10);
69+
slider2.rotation = 90;
70+
slider2.anchorPoint = ccp(0.5f, 0.5f);
71+
slider2.scale = 0.8;
72+
73+
[slider2 setTarget:self selector:@selector(outlineOuterWidthChange:)];
74+
75+
CCSlider* slider3 = [[CCSlider alloc] initWithBackground:background andHandleImage:handle];
76+
[slider3 setBackgroundSpriteFrame:backgroundHilite forState:CCControlStateHighlighted];
77+
slider3.positionType = CCPositionTypeNormalized;
78+
slider3.position = ccp(0.20f, 0.5f);
79+
80+
slider3.preferredSizeType = CCSizeTypeMake(CCSizeUnitNormalized, CCSizeUnitUIPoints);
81+
slider3.preferredSize = CGSizeMake(0.5f, 10);
82+
slider3.rotation = 90;
83+
slider3.anchorPoint = ccp(0.5f, 0.5f);
84+
slider3.scale = 0.8;
85+
86+
[slider3 setTarget:self selector:@selector(glowWidthChange:)];
87+
88+
CCButton* enableGlow = [CCButton buttonWithTitle:@"Outer Glow"];
89+
enableGlow.positionType = CCPositionTypeNormalized;
90+
enableGlow.anchorPoint = ccp(0.5f, 0.5f);
91+
enableGlow.position = ccp(0.9, 0.8);
92+
[enableGlow setTarget:self selector:@selector(enableGlow:)];
93+
94+
CCButton* enableOutline = [CCButton buttonWithTitle:@"Outline"];
95+
enableOutline.positionType = CCPositionTypeNormalized;
96+
enableOutline.anchorPoint = ccp(0.5f, 0.5f);
97+
enableOutline.position = ccp(0.9, 0.7);
98+
[enableOutline setTarget:self selector:@selector(enableOutline:)];
99+
100+
[self.contentNode addChild:enableOutline];
101+
[self.contentNode addChild:enableGlow];
46102
[self.contentNode addChild:sampleSprite];
103+
[self.contentNode addChild:slider];
104+
[self.contentNode addChild:slider2];
105+
[self.contentNode addChild:slider3];
106+
}
107+
108+
- (void)outlineInnerWidthChange:(id)sender
109+
{
110+
CCSlider* slider = sender;
111+
_distanceFieldEffect.outlineInnerWidth = slider.sliderValue;
47112
}
48113

114+
- (void)outlineOuterWidthChange:(id)sender
115+
{
116+
CCSlider* slider = sender;
117+
_distanceFieldEffect.outlineOuterWidth = slider.sliderValue;
118+
}
119+
120+
- (void)glowWidthChange:(id)sender
121+
{
122+
CCSlider* slider = sender;
123+
_distanceFieldEffect.glowWidth = slider.sliderValue;
124+
}
125+
126+
- (void)enableGlow:(id)sender
127+
{
128+
_distanceFieldEffect.glow = !_distanceFieldEffect.glow;
129+
}
130+
131+
- (void)enableOutline:(id)sender
132+
{
133+
_distanceFieldEffect.outline = !_distanceFieldEffect.outline;
134+
}
135+
136+
#endif
137+
49138
-(void)setupDropShadowEffectTest
50139
{
51140
self.subTitle = @"DropShadow Effect Test";
@@ -761,7 +850,6 @@ - (CCSprite *)spriteWithEffects:(NSArray *)effects image:(NSString *)spriteImage
761850
return sprite;
762851
}
763852

764-
765853
-(void)renderTextureHelper:(CCNode *)stage size:(CGSize)size
766854
{
767855
CCColor *color = [CCColor colorWithRed:0.0 green:0.0 blue:0.5 alpha:0.5];

‎cocos2d/CCEffectDistanceField.h‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@
88

99
#import "CCEffect.h"
1010

11+
#if CC_EFFECTS_EXPERIMENTAL
12+
1113
/**
1214
* CCEffectDistanceField create a drop shadow.
1315
*
@@ -31,6 +33,7 @@
3133
@property (nonatomic) float outlineInnerWidth;
3234
@property (nonatomic) float outlineOuterWidth;
3335
@property (nonatomic) GLKVector2 glowOffset;
36+
@property (nonatomic) float glowWidth;
3437

3538
/// -----------------------------------------------------------------------
3639
/// @name Initializing a CCEffectDistanceField object
@@ -50,7 +53,7 @@
5053
*
5154
* @return The CCEffectDistanceField object.
5255
*/
53-
-(id)initWithGlowColor:(CCColor*)glowColor;
56+
-(id)initWithGlowColor:(CCColor*)glowColor outlineColor:(CCColor*)outlineColor;
5457

5558

5659
/// -----------------------------------------------------------------------
@@ -64,6 +67,8 @@
6467
*
6568
* @return The CCEffectDistanceField object.
6669
*/
67-
+(id)effectWithGlowColor:(CCColor*)glowColor;
70+
+(id)effectWithGlowColor:(CCColor*)glowColor outlineColor:(CCColor*)outlineColor;
6871

6972
@end
73+
74+
#endif

‎cocos2d/CCEffectDistanceField.m‎

Lines changed: 24 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@
88

99
#import "CCEffectDistanceField.h"
1010

11+
#if CC_EFFECTS_EXPERIMENTAL
12+
1113
#import "CCEffectDistanceField.h"
1214
#import "CCEffect_Private.h"
1315
#import "CCRenderer.h"
@@ -17,20 +19,21 @@ @implementation CCEffectDistanceField
1719

1820
-(id)init
1921
{
20-
return [self initWithGlowColor:[CCColor blackColor]];
22+
return [self initWithGlowColor:[CCColor blackColor] outlineColor:[CCColor blackColor]];
2123
}
2224

23-
-(id)initWithGlowColor:(CCColor*)glowColor
25+
-(id)initWithGlowColor:(CCColor*)glowColor outlineColor:(CCColor*)outlineColor
2426
{
2527
NSArray *uniforms = @[
2628
[CCEffectUniform uniform:@"vec4" name:@"u_glowColor" value:[NSValue valueWithGLKVector4:glowColor.glkVector4]],
2729
[CCEffectUniform uniform:@"vec4" name:@"u_fillColor" value:[NSValue valueWithGLKVector4:[CCColor blackColor].glkVector4]],
28-
[CCEffectUniform uniform:@"vec4" name:@"u_outlineColor" value:[NSValue valueWithGLKVector4:[CCColor redColor].glkVector4]],
30+
[CCEffectUniform uniform:@"vec4" name:@"u_outlineColor" value:[NSValue valueWithGLKVector4:outlineColor.glkVector4]],
2931
[CCEffectUniform uniform:@"float" name:@"u_outline" value:[NSNumber numberWithFloat:1.0f]],
3032
[CCEffectUniform uniform:@"float" name:@"u_glow" value:[NSNumber numberWithFloat:1.0f]],
3133
[CCEffectUniform uniform:@"vec2" name:@"u_glowOffset" value:[NSValue valueWithGLKVector2:GLKVector2Make(0.0, 0.0)]],
3234
[CCEffectUniform uniform:@"vec2" name:@"u_outlineOuterWidth" value:[NSValue valueWithGLKVector2:GLKVector2Make(0.5, 1.0)]],
3335
[CCEffectUniform uniform:@"vec2" name:@"u_outlineInnerWidth" value:[NSValue valueWithGLKVector2:GLKVector2Make(0.4, 0.42)]],
36+
[CCEffectUniform uniform:@"vec2" name:@"u_glowWidth" value:[NSValue valueWithGLKVector2:GLKVector2Make(0.3, 0.5)]],
3437
];
3538

3639
if((self = [super initWithFragmentUniforms:uniforms vertexUniforms:nil varyings:nil]))
@@ -42,16 +45,17 @@ -(id)initWithGlowColor:(CCColor*)glowColor
4245
_glowOffset = GLKVector2Make(0.0f, 0.0f);
4346
_glowColor = glowColor;
4447
_fillColor = [CCColor blackColor];
45-
_outlineColor = [CCColor redColor];
48+
_outlineColor = outlineColor;
49+
_glowWidth = 0.4;
4650

4751
self.debugName = @"CCEffectDistanceField";
4852
}
4953
return self;
5054
}
5155

52-
+(id)effectWithGlowColor:(CCColor*)glowColor
56+
+(id)effectWithGlowColor:(CCColor*)glowColor outlineColor:(CCColor*)outlineColor
5357
{
54-
return [[self alloc] initWithGlowColor:glowColor];
58+
return [[self alloc] initWithGlowColor:glowColor outlineColor:outlineColor];
5559
}
5660

5761
-(void)buildFragmentFunctions
@@ -99,8 +103,8 @@ -(void)buildFragmentFunctions
99103
// min -= 0.2;
100104
// max += 0.2;
101105

102-
min = 0.3;
103-
max = 0.5;
106+
min = u_glowWidth.x;
107+
max = u_glowWidth.y;
104108

105109
vec4 glowc = u_glowColor * smoothstep(min, max, glowTexel.r);
106110

@@ -142,6 +146,10 @@ -(void)buildRenderPasses
142146
float outerMax = 0.5;
143147
pass.shaderUniforms[weakSelf.uniformTranslationTable[@"u_outlineOuterWidth"]] = [NSValue valueWithGLKVector2:GLKVector2Make(outerMin, outerMax)];
144148

149+
float glowWidthMin = (0.5 * (1.0 - _glowWidth));
150+
float glowWidthMax = 0.5;
151+
pass.shaderUniforms[weakSelf.uniformTranslationTable[@"u_glowWidth"]] = [NSValue valueWithGLKVector2:GLKVector2Make(glowWidthMin, glowWidthMax)];
152+
145153
pass.shaderUniforms[weakSelf.uniformTranslationTable[@"u_outline"]] = _outline ? [NSNumber numberWithFloat:1.0f] : [NSNumber numberWithFloat:0.0f];
146154
pass.shaderUniforms[weakSelf.uniformTranslationTable[@"u_glow"]] = _glow ? [NSNumber numberWithFloat:1.0f] : [NSNumber numberWithFloat:0.0f];
147155

@@ -155,13 +163,19 @@ -(void)buildRenderPasses
155163

156164
-(void)setOutlineInnerWidth:(float)outlineInnerWidth
157165
{
158-
_outlineInnerWidth = clampf(_outlineInnerWidth, 0.0f, 1.0f);
166+
_outlineInnerWidth = clampf(outlineInnerWidth, 0.0f, 1.0f);
159167
}
160168

161169
-(void)setOutlineOuterWidth:(float)outlineOuterWidth
162170
{
163-
_outlineOuterWidth = clampf(_outlineOuterWidth, 0.0f, 1.0f);
171+
_outlineOuterWidth = clampf(outlineOuterWidth, 0.0f, 1.0f);
164172
}
165173

174+
-(void)setGlowWidth:(float)glowWidth
175+
{
176+
_glowWidth = clampf(glowWidth, 0.0f, 1.0f);
177+
}
166178

167179
@end
180+
181+
#endif

‎cocos2d/ccConfig.h‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -153,3 +153,8 @@
153153
#ifndef CC_SHADER_DEFAULT_FRAGMENT_PRECISION
154154
#define CC_SHADER_DEFAULT_FRAGMENT_PRECISION mediump
155155
#endif
156+
157+
#ifndef CC_EFFECTS_EXPERIMENTAL
158+
#define CC_EFFECTS_EXPERIMENTAL 0
159+
#endif
160+

0 commit comments

Comments
 (0)