SPTextField special effects: Skew and glow

Sparrow Forum » Troubleshooting

SPTextField special effects: Skew and glow

(8 posts) (3 voices)

Started 6 months ago by presco
Latest reply from Shilo

Tags:

presco
Member

Hi guys. I'm hoping you can help me with this even though it's got more to do with OpenGL than Sparrow.

1) I have some SPTextFields with dynamic text that need to be skewed along the y-axis, meaning the text should run along a diagonal line. Also, they use a TTF font.

Would it be possible to do that in OpenGL? As far as I've understood, I'd have to override the render: function in SPTextField and do some OpenGL magic with the texture in mContents. Possibly, it would involve glMultMatrixf?

2) For the glow, I was wondering if it would be easiest to somehow draw a scaled down version of the text to a RenderTexture and then scale that RenderTexture back up and put it behind the original text... Does that make sense?

The alternative I have read about here, I think, would be to draw the text multiple times with offset, but that seems even stranger to me.

Basically, I'm unsure how to go about these things, what's fastest or most practical. I hope someone here might have enough experience with this to give me some advice. Thanks!

Posted 6 months ago #
borrrden
Moderator

If you are only using ASCII (or a reasonable set of characters...not like Japanese or Chinese) then the glow effect could be easily achieved using bitmap fonts. Hiero is a nice Java bitmap font tool that allows you to add effects onto your fonts before you export them, and I think Sparrow has a converter for it. You can find a good version here: http://code.google.com/p/libgdx/wiki/Hiero (Sorry, it's from an Android graphics engine, but we're all on the same team right? :-X)

When you say "skew" do you mean distort the actual letters? Or simply draw on a diagonal axis?

Posted 6 months ago #
presco
Member

Thanks for your reply.

Yes, I've read about doing it with bitmap fonts, but I would like to use a ttf font and do the glow dynamically if at all possible.

Yes, the skew should work like when you skew something in Flash, applied to individual pixels. UIKit renders text as a texture anyway, so I think the distortion should happen via OpenGL. I'm just not experienced enough to know how best to go about it.

Posted 6 months ago #

presco
Member

Ok, I figured it out.

This extender class works just by plugging it into the project. No messing around in Sparrow's own classes. Skewing is available for all SPDisplayObjects, not just SPTextField.

For the glow, I went with the multiple draw and offset method. Not so elegant, I would have loved to take advantage of the natural blur that comes from scaling textures, but I didn't get it right yet with multiple scaled renderTextures. Instead, the text is rendered 8 times for the glow, but only gets redrawn when the text string changes or redrawGlow is called manually.

The skewing was actually easier. glMultMatrixf worked like I had thought. I just made a category for SPRenderSupport and put it into the method transformMatrixForObject. Very simple.

It's not perfect yet, but it works. The source code for my class is below, if you need inspiration.

 
#import <objc/runtime.h>
#import "RenderExtender.h"
#import "SPTextField.h"
 
static const char *SPTF_GLOW_SIZE = "SPTFGS";
static const char *SPTF_GLOW_COLOR = "SPTFGC";
static const char *SPTF_XSKEW = "SPTFXS";
static const char *SPTF_YSKEW = "SPTFYS";
 
@implementation SPDisplayObject (ExtendedRendering)
 
@dynamic glowSize;
@dynamic glowColor;
@dynamic skewX;
@dynamic skewY;
 
- (void) setGlowSize:(int)size
{
	[objc_getAssociatedObject(self, SPTF_GLOW_SIZE) release];
	NSNumber *sizeNum = [[NSNumber numberWithInt:size] retain];
	objc_setAssociatedObject(self, SPTF_GLOW_SIZE, sizeNum, OBJC_ASSOCIATION_ASSIGN);
}
- (int) glowSize
{
	NSNumber *num = objc_getAssociatedObject(self, SPTF_GLOW_SIZE);
	if (!num)
	{
		num = [NSNumber numberWithInt:0];
	}
	return num.intValue;
}
 
- (void) setGlowColor:(int)color
{
	[objc_getAssociatedObject(self, SPTF_GLOW_COLOR) release];
	NSNumber *colorNum = [[NSNumber numberWithInt:color] retain];
	objc_setAssociatedObject(self, SPTF_GLOW_COLOR, colorNum, OBJC_ASSOCIATION_ASSIGN);
}
- (int) glowColor
{
	NSNumber *num = objc_getAssociatedObject(self, SPTF_GLOW_COLOR);
	if (!num)
	{
		num = [NSNumber numberWithInt:0];
	}
	return num.intValue;
}
 
- (void) setSkewX:(float)skew
{
	[objc_getAssociatedObject(self, SPTF_XSKEW) release];
	NSNumber *skewNum = [[NSNumber numberWithFloat:skew] retain];
	objc_setAssociatedObject(self, SPTF_XSKEW, skewNum, OBJC_ASSOCIATION_ASSIGN);
}
- (float) skewX
{
	NSNumber *num = objc_getAssociatedObject(self, SPTF_XSKEW);
	if (!num)
	{
		num = [NSNumber numberWithFloat:0.0f];
	}
	return num.floatValue;
}
 
- (void) setSkewY:(float)skew
{
	[objc_getAssociatedObject(self, SPTF_YSKEW) release];
	NSNumber *skewNum = [[NSNumber numberWithFloat:skew] retain];
	objc_setAssociatedObject(self, SPTF_YSKEW, skewNum, OBJC_ASSOCIATION_ASSIGN);
}
- (float) skewY
{
	NSNumber *num = objc_getAssociatedObject(self, SPTF_YSKEW);
	if (!num)
	{
		num = [NSNumber numberWithFloat:0.0f];
	}
	return num.floatValue;
}
 
@end
 
@implementation SPRenderSupport (ExtendedRendering)
 
+ (void)transformMatrixForObject:(SPDisplayObject *)object
{
    float x = object.x;
    float y = object.y;
    float rotation = object.rotation;
    float scaleX = object.scaleX;
    float scaleY = object.scaleY;
    float pivotX = object.pivotX;
    float pivotY = object.pivotY;
	float skewX = object.skewX;
	float skewY = object.skewY;
 
	float sm[16] = {1,-skewY,0,0,-skewX,1,0,0,0,0,1,0,0,0,0,1};
 
    if (x != 0.0f || y != 0.0f)           glTranslatef(x, y, 0.0f);
	if (skewX != 0.0f || skewY != 0.0f)	  glMultMatrixf(sm);
    if (rotation != 0.0f)                 glRotatef(SP_R2D(rotation), 0.0f, 0.0f, 1.0f);
    if (scaleX != 1.0f || scaleY != 1.0f) glScalef(scaleX, scaleY, 1.0f);
    if (pivotX != 0.0f || pivotY != 0.0f) glTranslatef(-pivotX, -pivotY, 0.0f);
}
 
@end
 
@implementation SPTextField (ExtendedRendering)
 
- (void)render:(SPRenderSupport *)support
{
    if (mRequiresRedraw)
	{
		[self redrawContents];
		[self redrawGlow];
		[support reset];
	}
	[super render:support];
}
 
- (void)redrawGlow
{
	if (self.glowSize > 0)
	{
		float glowSize = (float)self.glowSize;
		float halfGlow = glowSize * 0.5f;
		float doubleGlow = glowSize * 2.0f;
		SPRenderTexture *glowTexture = [SPRenderTexture textureWithWidth:(doubleGlow + mContents.width) height:(doubleGlow + mContents.height) fillColor:self.glowColor];
		float oldSkewX = self.skewX;
		float oldSkewY = self.skewY;
		float oldX = self.x;
		float oldY = self.y;
		float oldScaleX = self.scaleX;
		float oldScaleY = self.scaleY;
		float oldColor = self.color;
		float oldAlpha = self.alpha;
		self.skewX = 0;
		self.skewY = 0;
		self.x = 0;
		self.y = 0;
		self.scaleX = 1.0f;
		self.scaleY = 1.0f;
 
		self.color = self.glowColor;
		self.alpha *= 0.5;
		mContents.x -= halfGlow;
		mContents.y -= halfGlow;
		[glowTexture drawObject:self];
		mContents.x += glowSize;
		[glowTexture drawObject:self];
		mContents.y += glowSize;
		[glowTexture drawObject:self];
		mContents.x -= glowSize;
		[glowTexture drawObject:self];
		mContents.x -= halfGlow;
		mContents.y -= halfGlow;
		[glowTexture drawObject:self];
		mContents.x += doubleGlow;
		[glowTexture drawObject:self];
		mContents.x -= glowSize;
		mContents.y += glowSize;
		[glowTexture drawObject:self];
		mContents.y -= doubleGlow;
		[glowTexture drawObject:self];
		mContents.y += glowSize;
 
		self.alpha = oldAlpha;
		self.color = oldColor;
		[glowTexture drawObject:self];
 
		[self removeChild:mContents];
		SPImage *image = [SPImage imageWithTexture:glowTexture];
		mContents = image;
		[self addChild:mContents];
 
		self.x = oldX;
		self.y = oldY;
		self.skewX = oldSkewX;
		self.skewY = oldSkewY;
		self.scaleX = oldScaleX;
		self.scaleY = oldScaleY;
	}
}
 
@end

Posted 6 months ago #

Shilo
Master Sparrow

Very interesting code! Thank you for sharing.

I tried it out and I can't seem to get the glow to work, although I probably would have gone a different direction with a glow (core graphics). The skew is very nice, although I am not sure how the values relate to the pixels and it seems to offset the position of the SPDisplayObject by more then expected. Overall I am very impressed. I just wish the skew would be practical for more then just SPQuad type objects (SPQuad and SPImage), at the moment, skewing text seems to be extremely blurred, see this screenshot. I understand that this probably can't be helped though. I created a skew extension myself a long time ago for SPQuad type objects here if you are interested in comparing the code. I know, I spelled skew wrong, haha!

Again, thanks for sharing, and I love the use of associated objects, I haven't tried them yet.

Edit: In fact, you inspired me to create a very simple objective-c wrapper for associated objects.

Posted 6 months ago #
Anonymous
Unregistered

This blog is a great combination of suitable and useful information and well-written sentences that will certainly entice your sense and update you about new happening.Stamp Canvas Here I have found the information for which I was looking for long time.Cheap Burberry Bags Outlet

Posted 6 months ago #
presco
Member

Shilo, thanks for checking it out. Interesting, I didn't get the smearing that badly, just a little. In the circumstances I use the skewing in, it is hardly noticable, the text is pretty crisp and therefore good enough for me. I might come back to it later and try to find out how to improve it. Same with the offset and input values of skewX and skewY.

But you got me interested: How would you do a glow with core graphics? I didn't find anything suitable about it. And I'm quite unhappy with my solution, it seems redundant and ugly, but that's what I came up with. If you could help me with that, it would be much appreciated.

Posted 6 months ago #
Shilo
Master Sparrow

I should have tried the skewing on a retina display, i'm sure it looks much better. If I have time, I will post about my glow idea.

Posted 6 months ago #
Shilo
Master Sparrow
I created a SPTextField+Shadow category. It allows you to change the shadow color, blur, x and y. Note, the shadow will only show on rendered text, not a bitmap text. I had to change how it renders the text and instead of an SPColorSpaceAlpha color space, its an SPColorSpaceRGBA, but that shouldn't be a problem.

The only thing I suggest is, if you want to go this route, I think you should implement this directly into the core and avoid the associated objects in my category. They seem to have more overhead then i would like.

In my category, all the properties default to 0, so you will have to set each value. Here is an example:
SPTextField *textField = [SPTextField textFieldWithText:@"shadowed text"]; textField.color = 0xffffff; textField.shadowColor = 0x000000; textField.shadowX = 1; textField.shadowY = 1; [self addChild:textField];
Food for thought, here is the main method for the shadow:
CGContextSetShadowWithColor(<#CGContextRef context#>, <#CGSize offset#>, <#CGFloat blur#>, <#CGColorRef color#>)
Posted 6 months ago #

RSS feed for this topic

Reply

You must log in to post.