视网膜Mac上的渐变纹理比例错误 [英] Gradient texture has wrong scale on retina Mac
问题描述
我在SKTexture上编写了一个梯度生成函数作为类别.它在1倍屏幕上效果很好，但视网膜渲染的纹理太大，宽度加倍且高度加倍，即缩放比例错误.我一直在尝试通过在像素和点之间进行切换来使其正确，但是无法正确进行.有人可以帮我吗?
I wrote a gradient generating function as a category on SKTexture. It works well on 1x screens but retina renders the texture too big, double width and double height ie wrong scale. I have been trying to get it right by changing between pixels and points, but can't get it right. Can someone help me please?
+(SKTexture*)gradientWithSize:(const CGSize)SIZE colors:(NSArray*)colors {
// Hopefully this function would be platform independent one day.
// Correct way to find scale?
DLog(@"backingScaleFactor: %f", [[NSScreen mainScreen] backingScaleFactor]);
const CGFloat SCALE = [[NSScreen mainScreen] backingScaleFactor];
//const size_t WIDTH_PIXELS = SIZE.width * SCALE;
//const size_t HEIGHT_PIXELS = SIZE.height * SCALE;
CGContextRef cgcontextref = MyCreateBitmapContext(SIZE.width, SIZE.height, SCALE);
NSAssert(cgcontextref != NULL, @"Failed creating context!");
// CGBitmapContextCreate(
// NULL, // let the OS handle the memory
// WIDTH_PIXELS,
// HEIGHT_PIXELS,
CAGradientLayer* gradient = CAGradientLayer.layer;
//gradient.contentsScale = SCALE;
gradient.frame = CGRectMake(0, 0, SIZE.width, SIZE.height);
NSMutableArray* convertedcolors = [NSMutableArray array];
for (SKColor* skcolor in colors) {
[convertedcolors addObject:(id)skcolor.CGColor];
}
gradient.colors = convertedcolors;
[gradient renderInContext:cgcontextref];
CGImageRef imageref = CGBitmapContextCreateImage(cgcontextref);
DLog(@"imageref pixel size: %zu %zu", CGImageGetWidth(imageref), CGImageGetHeight(imageref));
SKTexture* texture1 = [SKTexture textureWithCGImage:imageref];
DLog(@"size of gradient texture: %@", NSStringFromSize(texture1.size));
CGImageRelease(imageref);
CGContextRelease(cgcontextref);
return texture1;
}
CGContextRef MyCreateBitmapContext(const size_t POINTS_W, const size_t POINTS_H, const CGFloat SCALE) {
CGContextRef context = NULL;
CGColorSpaceRef colorSpace;
void * bitmapData;
//int bitmapByteCount;
size_t bitmapBytesPerRow;
const size_t PIXELS_W = POINTS_W * SCALE;
const size_t PIXELS_H = POINTS_H * SCALE;
bitmapBytesPerRow = (PIXELS_W * 4);// 1
//bitmapByteCount = (bitmapBytesPerRow * pixelsHigh);
colorSpace = CGColorSpaceCreateWithName(kCGColorSpaceGenericRGB);// 2
bitmapData = NULL;
#define kBitmapInfo kCGImageAlphaPremultipliedLast
//#define kBitmapInfo kCGImageAlphaPremultipliedFirst
//#define kBitmapInfo kCGImageAlphaNoneSkipFirst
// According to http://stackoverflow.com/a/18921840/129202 it should be safe to just cast
CGBitmapInfo bitmapinfo = (CGBitmapInfo)kBitmapInfo; //kCGImageAlphaNoneSkipFirst; //0; //kCGBitmapAlphaInfoMask; //kCGImageAlphaNone; //kCGImageAlphaNoneSkipFirst;
context = CGBitmapContextCreate (bitmapData,// 4
PIXELS_W,
PIXELS_H,
8, // bits per component
bitmapBytesPerRow,
colorSpace,
bitmapinfo
);
if (context == NULL) {
free (bitmapData);// 5
fprintf (stderr, "Context not created!");
return NULL;
}
CGColorSpaceRelease( colorSpace );// 6
// TEST!!
// CGContextClipToRect(context, CGRectMake(0, 0, POINTS_W, POINTS_H));
CGContextClipToRect(context, CGRectMake(0, 0, PIXELS_W, PIXELS_H));
CGContextScaleCTM(context, SCALE, SCALE);
return context;// 7
}
总而言之，我希望使用SIZE的点来调用+(SKTexture*)gradientWithSize:(const CGSize)SIZE colors:(NSArray*)colors.
So, to some sum it up, I expect to call +(SKTexture*)gradientWithSize:(const CGSize)SIZE colors:(NSArray*)colors using points for SIZE.
推荐答案
根据LearnCocos2D的建议，更新了以下代码.何时缩放而不是造成混淆(因为在文档中，CGBitmapContextCreate在 PIXELS 中显式采用宽度和高度)，但这在视网膜屏幕上似乎也具有正确的尺寸.仍然我不知道渲染的分辨率是否真的是视网膜-但这很难用眼睛来确认，因为毕竟这是一个渐变...我仍在使用相同的上下文为纹理转发器创建函数(以启用使用带有Sprite Kit的colorWithPatternImage ).也许以后我有时间尝试使用此新版本重复详细的纹理...
另外，将gradient.contentsScale = SCALE;设置为打开或关闭不会产生明显的变化.
Updated the code as below based on LearnCocos2D's suggestion. When to scale and not to is confusing (because in the docs, CGBitmapContextCreate explicitly takes width and height in PIXELS) but this seems to have the size right also on retina screens. Still I don't know if the rendered resolution is really retina - but this is very hard to confirm using eye because after all this is a gradient... Still I'm using the same context creating functions for a texture repeater (to enable to use colorWithPatternImage with Sprite Kit). Maybe I have the time later to try a detailed texture repeated using this new version...
Also leaving gradient.contentsScale = SCALE; on or off doesn't make a visible difference.
+(SKTexture*)gradientWithSize:(const CGSize)SIZE colors:(NSArray*)colors {
// Hopefully this function would be platform independent one day.
CGContextRef cgcontextref = MyCreateBitmapContext(SIZE.width, SIZE.height);
NSAssert(cgcontextref != NULL, @"Failed creating context!");
CAGradientLayer* gradient = CAGradientLayer.layer;
DLog(@"gradient.contentScale: %f", gradient.contentsScale);
//gradient.contentsScale = SCALE;
DLog(@"gradient.contentScale: %f", gradient.contentsScale);
gradient.frame = CGRectMake(0, 0, SIZE.width, SIZE.height);
NSMutableArray* convertedcolors = [NSMutableArray array];
for (SKColor* skcolor in colors) {
[convertedcolors addObject:(id)skcolor.CGColor];
}
gradient.colors = convertedcolors;
[gradient renderInContext:cgcontextref];
CGImageRef imageref = CGBitmapContextCreateImage(cgcontextref);
DLog(@"imageref pixel size: %zu %zu", CGImageGetWidth(imageref), CGImageGetHeight(imageref));
SKTexture* texture1 = [SKTexture textureWithCGImage:imageref];
DLog(@"size of gradient texture: %@", NSStringFromSize(texture1.size));
CGImageRelease(imageref);
CGContextRelease(cgcontextref);
return texture1;
}
CGContextRef MyCreateBitmapContext(const size_t POINTS_W, const size_t POINTS_H/*, const CGFloat SCALE*/) {
CGContextRef context = NULL;
CGColorSpaceRef colorSpace;
void * bitmapData;
size_t bitmapBytesPerRow;
bitmapBytesPerRow = (POINTS_W * 4);
colorSpace = CGColorSpaceCreateWithName(kCGColorSpaceGenericRGB);
bitmapData = NULL;
#define kBitmapInfo kCGImageAlphaPremultipliedLast
// According to https://stackoverflow.com/a/18921840/129202 it should be safe to just cast
CGBitmapInfo bitmapinfo = (CGBitmapInfo)kBitmapInfo;
context = CGBitmapContextCreate (bitmapData,
POINTS_W,
POINTS_H,
8,
bitmapBytesPerRow,
colorSpace,
bitmapinfo
);
if (context == NULL) {
free (bitmapData);
fprintf (stderr, "Context not created!");
return NULL;
}
CGColorSpaceRelease(colorSpace);
return context;
}
以下结果.左侧只是使用SKSpriteNode创建的黄色矩形.右侧是使用上述函数生成的纹理创建的矩形.这两个矩形位于相同的位置，并且具有相同的点大小，只是锚点不同.
Results below. The left is just a yellow rectangle created using SKSpriteNode. The right is a rectangle created by using the texture generated from the above function. The two rectangles are at the same position and have same point sizes, just different anchorPoints.
SKColor* color1 = SKColor.blueColor;
SKColor* color2 = [SKColor colorWithCalibratedRed:1 green:0 blue:0 alpha:0.5];
SKTexture* textureGradient = [SKTexture gradientWithSize:SIZE colors:@[color1, color2]];
SKSpriteNode* spriteGradient = [SKSpriteNode spriteNodeWithTexture:textureGradient];
1倍分辨率
2倍分辨率(视网膜)
这篇关于视网膜Mac上的渐变纹理比例错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
