Outline Text in SpriteKit
It’s funny how the tasks that should be easy end up consuming the most amount of time. As of this writing, there is no easy way to outline text in SpriteKit. It’s common to see approach that add a shadow node, but sometimes more contrast is needed. Here’s what I have discovered.
The first approach is to use NSMutableAttributedString with a UILabel. Have a look at the code below:
Oddly enough, those two notes above caused me an hour or two of frustration. But, aside from those, the idea is relatively straightforward. The one complaint I have with this approach is that the text is added as a subview. It would be much easier if the text was an object SpriteKit was familiar with.
Fortunately, ASAttributedLabelNode was shared with the world, and makes the text into a SKSpriteNode. Implementation is identical to the above except for the last 3 lines. They will become:
let myLabel = ASAttributedLabelNode(size: self.size)
myLabel.attributedString = myMutableString
myLabel.position = CGPoint(x:CGRectGetMidX(self.frame), y:CGRectGetMidY(self.frame));
self.addChild(myLabel)
This is perfect since we can now work with positions, children, SKActions, and so on.
One problem I'm seeing with this is that it's actually stroking both the inside and the outside of the text. Do you know of a solution that has just the shadow and preserves the letterforms it's stroking without actually overlapping it?
I use ASAttributedLabelNode for a need to create 1/ multiline text with 2/ text formatting. Otherwise I use PaintCode to generate UIImage of given text.