How to have textureFromNode produce texture for retina display? - ios

Question

Platform: XCode 6.0 + iOS 7.0.4
Running the following code on iPad mini retina and expect the image of tmpLbl and node to render identically because the latter is initialized with the texture of the former, via textureFromNode. In reality tmpLbl, which is an SKLabelNode, renders at retina resolution but node, which is supposed to be a copy, is blurry, appearing to be a double-scaled rendition of a half-sized texture.
I saw a post suggesting to put the source (tmpLbl in the sample below) on the scene but it makes no difference, as illustrated by the sample.
Any advice on:
1. how to make this work using any sort of approach
2. how to make this work without having the source node (tmpLbl below) ever rendered on the screen
Sample code:
- (void)didMoveToView:(SKView *)view {
SKLabelNode *tmpLbl = [SKLabelNode labelNodeWithFontNamed: #"Futura"];
tmpLbl.position = CGPointMake(100, 100);
[self addChild: tmpLbl];
tmpLbl.fontSize = 125;
tmpLbl.fontColor = [SKColor colorWithRed:0.8 green:0.0 blue:0.0 alpha:1.0];
tmpLbl.text = #"a";
SKTexture *texture = [view textureFromNode: tmpLbl];
SKNode *node = [SKSpriteNode spriteNodeWithTexture:texture];
node.position = CGPointMake(200, 130);
[self addChild:node];
return;
}
Rendering result; the left side "a" is via SKLabelNode, the right side one is via textureFromNode and spriteNodeWithTexture:

Answer 1

Solution to the problem: it is necessary but not sufficient for the source node-tree passed to textureFromNode to be part of the scene as suggested by others. Another condition for the returned texture to be of "retina resolution" is that textureFromNode: is called not earlier (per the results of my experiments) than the first call to SKScene update:. (Update: on XCode 5.0.1 textureFromNode: must be called in during or after the second call to update:; textureFromNode during the first call still produces non-retina texture.)
Just by moving the code in the question above to the update: function the resulting texture will have all the pixels for retina rendering. What is frustrating is that the texture will be double the size of the source node (tree) in both directions and initializing a new sprite with the returned sprite will produce a double-size sprite (that is rendered with interpolation). It is clear that the SKTexture class has an internal 'scale' property, just like UIImage. SpriteKit sets this property when creating the texture from a file with the '#2x' suffix but not when the texture is created via textureFromNode. This is very unfortunate because this forces the application developer to track the scale manually unless the texture is created from an image resource.
The updated sample below includes the following changes compared to the original in the question:
move textureFromNode: (along with the rest of the code) to update:; anyone has a better place that would still produce a retina-size rendition?
detect if the display resolution is retina and resize the new sprite to the size of the source-sprite if needed
With these changes the two 'a' images are rendered identically.
// retina resolution will be not applied if textureFromNode is called before SKScene::update():
-(void)update:(CFTimeInterval)currentTime {
static int cnt = 0;
if (cnt == 1) // can be cnt == 0 on XCode 6.0
{
double scale=1.0;
if ([[UIScreen mainScreen] respondsToSelector:#selector(displayLinkWithTarget:selector:)] && ([UIScreen mainScreen].scale == 2.0)) {
// the texture returned by textureFromNode is double-size on retina displays; must explicitly make the sprite half the size of the texture:
scale=0.5;
}
SKLabelNode *tmpLbl = [SKLabelNode labelNodeWithFontNamed: #"Futura"];
tmpLbl.position = CGPointMake(100, 100);
// must be part of the scene or else retina resolution will be not applied:
[self addChild: tmpLbl];
tmpLbl.fontSize = 125;
tmpLbl.fontColor = [SKColor colorWithRed:0.8 green:0.0 blue:0.0 alpha:1.0];
tmpLbl.text = #"a";
SKTexture *texture = [self.view textureFromNode: tmpLbl];
SKNode *node = [SKSpriteNode spriteNodeWithTexture:texture size: CGSizeMake(texture.size.width*scale, texture.size.height*scale)];
node.position = CGPointMake(200, 130);
[self addChild:node];
// was added to the scene only to force retina resolution rendering:
// [tmpLbl removeFromParent];
}
++cnt;
}
Rendering result with the updated code. The right-hand-side image is not blurry anymore:

Answer 2

Thanks for the idea to perform textureFromNode after update: method is called.
As for a better place that would still produce a retina-size rendition, I find it clearer to call put rasterization code in dispatch_once block to avoid unnecessary counter increment.
In my GameScene (Swift):
var rasterizationToken: dispatch_once_t = 0
override func didFinishUpdate() {
dispatch_once(&rasterizationToken) {
self.rasterizeLayers() //calls textureFromNode inside
}
}
didFinishUpdate() is called after update(), therefore retina resolution remains.

Answer 3

Your label should be added to scene, otherwise it will have non-retina resolution in rendered texture.
Maybe it's duplicate question
Sprite Kit - Low Resolution Texture on Retina when using textureFromNode

Answer 4

I develop a work around for SKLabelNode in Swift 3:
extension SKLabelNode {
func pixelated() {
let v = SKView()
self.fontSize *= 4
let texture = v.texture(from: self)
let textureSize = CGSize(width: (texture?.size().width)!/4, height: (texture?.size().height)!/4)
let node = SKSpriteNode(texture: texture, color: .clear, size: textureSize)
node.position = self.position
node.anchorPoint = CGPoint(x: 0.5, y: 0.0)
self.parent?.addChild(node)
self.removeFromParent()
}
}