A fast, easy to use, free, and community supported 2D game engine
Here is some simple code I'm using to save the screen shot as a .png
Hope it helps.
// Create a UIImage to pass our returned UIImage to
UIImage *tempImage =[GameScene takeAsUIImage];
// Create paths to output images
NSString *pngPath = [NSHomeDirectory() StringByAppendingPathComponent:@"Documents/GameImage.png"];
// Write image to PNG
[UIImagePNGRepresentation(tempImage) writeToFile:pngPath atomically:YES];This screenshot thingy is a bit on the slow side... can it be tuned, somehow maybe?
Really? I use it for blitting the background to hide scrolling menus behind it as a rotate stuff out.. I don't even notice capturing the image, turning it in to a texture then parsing out the sections I want, turning them in to sprites and building my menus.
What do you define as slow?
We should all probably be clear as to whether we're testing on the Simulator or an actual device.. You could get 60FPS in the simulator but end up with only 10-12FPS on a real device.
True.. I guess to be clear I pretty much ignore the simulator. My stuff is running at 60FPS on the 3G, 3GS, and about 50FPS on a 2G.
Last version with iPad support:
CCDirector.m
- (UIImage*) screenshotUIImage
{
CGSize displaySize = [self displaySize];
CGSize winSize = [self winSize];
//Create buffer for pixels
GLuint bufferLength = displaySize.width * displaySize.height * 4;
GLubyte* buffer = (GLubyte*)malloc(bufferLength);
//Read Pixels from OpenGL
glReadPixels(0, 0, displaySize.width, displaySize.height, GL_RGBA, GL_UNSIGNED_BYTE, buffer);
//Make data provider with data.
CGDataProviderRef provider = CGDataProviderCreateWithData(NULL, buffer, bufferLength, NULL);
//Configure image
int bitsPerComponent = 8;
int bitsPerPixel = 32;
int bytesPerRow = 4 * displaySize.width;
CGColorSpaceRef colorSpaceRef = CGColorSpaceCreateDeviceRGB();
CGBitmapInfo bitmapInfo = kCGBitmapByteOrderDefault;
CGColorRenderingIntent renderingIntent = kCGRenderingIntentDefault;
CGImageRef iref = CGImageCreate(displaySize.width, displaySize.height, bitsPerComponent, bitsPerPixel, bytesPerRow, colorSpaceRef, bitmapInfo, provider, NULL, NO, renderingIntent);
uint32_t* pixels = (uint32_t*)malloc(bufferLength);
CGContextRef context = CGBitmapContextCreate(pixels, winSize.width, winSize.height, 8, winSize.width * 4, CGImageGetColorSpace(iref), kCGImageAlphaPremultipliedLast | kCGBitmapByteOrder32Big);
CGContextTranslateCTM(context, 0, displaySize.height);
CGContextScaleCTM(context, 1.0f, -1.0f);
switch (deviceOrientation_)
{
case CCDeviceOrientationPortrait: break;
case CCDeviceOrientationPortraitUpsideDown:
CGContextRotateCTM(context, CC_DEGREES_TO_RADIANS(180));
CGContextTranslateCTM(context, -displaySize.width, -displaySize.height);
break;
case CCDeviceOrientationLandscapeLeft:
CGContextRotateCTM(context, CC_DEGREES_TO_RADIANS(-90));
CGContextTranslateCTM(context, -displaySize.height, 0);
break;
case CCDeviceOrientationLandscapeRight:
CGContextRotateCTM(context, CC_DEGREES_TO_RADIANS(90));
CGContextTranslateCTM(context, displaySize.height-displaySize.width, -displaySize.height);
break;
}
CGContextDrawImage(context, CGRectMake(0.0f, 0.0f, displaySize.width, displaySize.height), iref);
CGImageRef imageRef = CGBitmapContextCreateImage(context);
UIImage *outputImage = [[[UIImage alloc] initWithCGImage:imageRef] autorelease];
//Dealloc
CGImageRelease(imageRef);
CGDataProviderRelease(provider);
CGImageRelease(iref);
CGColorSpaceRelease(colorSpaceRef);
CGContextRelease(context);
free(buffer);
free(pixels);
return outputImage;
}
- (CCTexture2D*) screenshotTexture
{
return [[[CCTexture2D alloc] initWithImage:[self screenshotUIImage]] autorelease];
}Apologies if I'm missing the point here, but there is a function, UIGetScreenImage() which takes a screenshot (it's the same one invoked by holding home+lock). Apple recently allowed use of it officially (you'll need iphone dev creds to view the forum thread)
What Apple giveth... they have taken away... if you use this code your app WILL be rejected... more info on the Apple Dev Forums and another post HERE
@manucorporat - THANKS for keeping this updated!
edge17
Member
@cybergreg: thanks for the heads up. That's terribly unfortunate, though I'm keenly aware of the circumstances under which Apple originally decided to allow it. Given recent developments with iOS4, I don't think those circumstances exist any longer. Kind of annoying though, I definitely have some [non cocos2d] apps that will have to change. I guess I should be expecting some rejections very shortly.
GustavPicora
Member
@manucorporat:Terrific post, its a life savior, I have a problem thou, I have a UITextView inside a CCUIViewWrapper, but unfortunately id doesn't capture it, the code of the CCUIViewWrapper its here: http://www.cocos2d-iphone.org/forum/topic/6889 by Blue Ether, what shall I do to capture the UIKit component also?
Thx
Gustavo
GustavPicora
Member
Hello manucorporat.
WellIm kinda of new to OpenGL stuff, I don'tunderstand much, maybe you can give me a hint.
I foudn this in the apple technical suppoort pages.
- (UIImage*)snapshot:(UIView*)eaglview
{
// Get the size of the backing CAEAGLLayer
GLint backingWidth, backingHeight;
glBindRenderbufferOES(GL_RENDERBUFFER_OES, _colorRenderbuffer);
glGetRenderbufferParameterivOES(GL_RENDERBUFFER_OES, GL_RENDERBUFFER_WIDTH_OES, &backingWidth);
glGetRenderbufferParameterivOES(GL_RENDERBUFFER_OES, GL_RENDERBUFFER_HEIGHT_OES, &backingHeight);
NSInteger x = 0, y = 0, width = backingWidth, height = backingHeight;
NSInteger dataLength = width * height * 4;
GLubyte *data = (GLubyte*)malloc(dataLength * sizeof(GLubyte));
// Read pixel data from the framebuffer
glPixelStorei(GL_PACK_ALIGNMENT, 4);
glReadPixels(x, y, width, height, GL_RGBA, GL_UNSIGNED_BYTE, data);
// Create a CGImage with the pixel data
// If your OpenGL ES content is opaque, use kCGImageAlphaNoneSkipLast to ignore the alpha channel
// otherwise, use kCGImageAlphaPremultipliedLast
CGDataProviderRef ref = CGDataProviderCreateWithData(NULL, data, dataLength, NULL);
CGColorSpaceRef colorspace = CGColorSpaceCreateDeviceRGB();
CGImageRef iref = CGImageCreate(width, height, 8, 32, width * 4, colorspace, kCGBitmapByteOrder32Big | kCGImageAlphaPremultipliedLast,
ref, NULL, true, kCGRenderingIntentDefault);
// OpenGL ES measures data in PIXELS
// Create a graphics context with the target size measured in POINTS
NSInteger widthInPoints, heightInPoints;
if (NULL != UIGraphicsBeginImageContextWithOptions) {
// On iOS 4 and later, use UIGraphicsBeginImageContextWithOptions to take the scale into consideration
// Set the scale parameter to your OpenGL ES view's contentScaleFactor
// so that you get a high-resolution snapshot when its value is greater than 1.0
CGFloat scale = eaglview.contentScaleFactor;
widthInPoints = width / scale;
heightInPoints = height / scale;
UIGraphicsBeginImageContextWithOptions(CGSizeMake(widthInPoints, heightInPoints), NO, scale);
}
else {
// On iOS prior to 4, fall back to use UIGraphicsBeginImageContext
widthInPoints = width;
heightInPoints = height;
UIGraphicsBeginImageContext(CGSizeMake(widthInPoints, heightInPoints));
}
CGContextRef cgcontext = UIGraphicsGetCurrentContext();
// UIKit coordinate system is upside down to GL/Quartz coordinate system
// Flip the CGImage by rendering it to the flipped bitmap context
// The size of the destination area is measured in POINTS
CGContextSetBlendMode(cgcontext, kCGBlendModeCopy);
CGContextDrawImage(cgcontext, CGRectMake(0.0, 0.0, widthInPoints, heightInPoints), iref);
// Retrieve the UIImage from the current context
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
// Clean up
free(data);
CFRelease(ref);
CFRelease(colorspace);
CGImageRelease(iref);
return image;
}its supposed to get snapshot of openGLES content. Is it possible to use it to get UIKit components as well? I tried to put it but I get errors in :
glBindRenderbufferOES(GL_RENDERBUFFER_OES, _colorRenderbuffer); _colorRenderbuffer undefined, so I dunno what value to pass.
if (NULL != UIGraphicsBeginImageContextWithOptions) {
UIGraphicsBeginImageContextWithOptions was not declared in this scope
and CGFloat scale = eaglview.contentScaleFactor;, this one is funny, request member of contentScaleFactor which is of non-c;ass type UIView.
:(.
GustavPicora
Member
Ok I just answered my questions
What I did was that after getting the image form the source code of this topic, I draw an image of my textview and then I made a composition of both images.
like this
-(void)captureNow{
CGSize winSize = [[CCDirector sharedDirector] winSize];
UIImage * img = [[CCDirector sharedDirector] screenShotUIImage];
//UIImage * img = [self snapshot:[[CCDirector sharedDirector] openGLView]];
//CGImageRelease(screenShot);
//Noe get the image of the text
UIGraphicsBeginImageContext([textFieldWrapper uiItem].bounds.size);
[[textFieldWrapper uiItem].layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *viewImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
//Now merging the two
CGSize size = CGSizeMake(img.size.width, img.size.height);
UIGraphicsBeginImageContext(size);
CGPoint drawPoint = CGPointMake(0,0);
[img drawAtPoint:drawPoint];
CGPoint textPoint = CGPointMake(4, winSize.height - viewImage.size.height);
[viewImage drawAtPoint:textPoint];
UIImage * finalImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
UIImageWriteToSavedPhotosAlbum(finalImage,self , @selector(imageSavedToPhotosAlbum:didFinishSavingWithError:contextInfo:), NULL);
[self unschedule:@selector(captureNow)];
}I dunno if its the best approach but it worked. :D
My code only captures the Opengl context used by cocos2d.
If you need capture the window with all UIViews, you can try rendering the window in the graphics context.
If this code works you mustn't use [[CCDirector sharedDirector] screenShotUIImage].
UIGraphicsBeginImageContext(window.frame.size);
[window.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *viewImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();But if your current code works successfuly, why try new techniques?
Thank you for your sharing the greatest code!
I just add a code taking a shot in region ;)
- (UIImage *)takeAsUIImageInRect:(CGRect)rect
{
CCDirector* director = [CCDirector sharedDirector];
if(rect.origin.x < 0)
rect.origin = CGPointMake(0, rect.origin.y);
if(rect.origin.y < 0)
rect.origin = CGPointMake(rect.origin.x, 0);
if(rect.size.width > [director winSize].width)
rect.size = CGSizeMake([director winSize].width, rect.size.height);
if(rect.size.height > [director winSize].height)
rect.size = CGSizeMake(rect.size.width, [director winSize].height);
if(rect.origin.x+rect.size.width > [director winSize].width)
rect.size = CGSizeMake(floor([director winSize].width - rect.origin.x), rect.size.height);
if(rect.origin.y+rect.size.height > [director winSize].height)
rect.size = CGSizeMake(rect.size.width, floor([director winSize].height - rect.origin.y));
CGSize size = rect.size;
//Create buffer for pixels
GLuint bufferLength = size.width * size.height * 4;
GLubyte* buffer = (GLubyte*)malloc(bufferLength);
//Read Pixels from OpenGL
glReadPixels(rect.origin.x, rect.origin.y, size.width, size.height, GL_RGBA, GL_UNSIGNED_BYTE, buffer);
//Make data provider with data.
CGDataProviderRef provider = CGDataProviderCreateWithData(NULL, buffer, bufferLength, NULL);
//Configure image
int bitsPerComponent = 8;
int bitsPerPixel = 32;
int bytesPerRow = 4 * size.width;
CGColorSpaceRef colorSpaceRef = CGColorSpaceCreateDeviceRGB();
CGBitmapInfo bitmapInfo = kCGBitmapByteOrderDefault;
CGColorRenderingIntent renderingIntent = kCGRenderingIntentDefault;
CGImageRef iref = CGImageCreate(size.width, size.height, bitsPerComponent, bitsPerPixel, bytesPerRow, colorSpaceRef, bitmapInfo, provider, NULL, NO, renderingIntent);
uint32_t* pixels = (uint32_t*)malloc(bufferLength);
CGContextRef context = CGBitmapContextCreate(pixels, size.width, size.height, 8, size.width * 4, CGImageGetColorSpace(iref), kCGImageAlphaPremultipliedLast | kCGBitmapByteOrder32Big);
CGContextTranslateCTM(context, 0, size.height);
CGContextScaleCTM(context, 1.0f, -1.0f);
switch (director.deviceOrientation)
{
case CCDeviceOrientationPortrait:
break;
case CCDeviceOrientationPortraitUpsideDown:
CGContextRotateCTM(context, CC_DEGREES_TO_RADIANS(180));
CGContextTranslateCTM(context, -size.width, -size.height);
break;
case CCDeviceOrientationLandscapeLeft:
CGContextRotateCTM(context, CC_DEGREES_TO_RADIANS(-90));
CGContextTranslateCTM(context, -size.height, 0);
break;
case CCDeviceOrientationLandscapeRight:
CGContextRotateCTM(context, CC_DEGREES_TO_RADIANS(90));
CGContextTranslateCTM(context, size.width * 0.5f, -size.height);
break;
}
CGContextDrawImage(context, CGRectMake(0.0f, 0.0f, size.width, size.height), iref);
UIImage *outputImage = [UIImage imageWithCGImage:CGBitmapContextCreateImage(context)];
//Dealloc
CGDataProviderRelease(provider);
CGImageRelease(iref);
CGContextRelease(context);
free(buffer);
free(pixels);
return outputImage;
}Thanks for this @manucorporat
@manucorporat - is there an updated version of the code? I've been trying to use it. Cocos2D Gave me two errors (had to change:
[self displaySize] to [self displaySizeInPixels] and deviceOrientation_ to self.deviceOrientation) and it compiles and runs, but the image I'm getting seems to be somewhat off; the right side of the image is junk or empty, and what is on the left side of the screen is cut off. I'm using the most up to date cocos beta.
@manucorporat - to take a 960x640 screenshot on an iPhone4, I have to do this in screenshotUIImage, otherwise I get only the lower left quadrant of the screen:
if ([[UIScreen mainScreen] respondsToSelector:@selector(scale)]) {
int scale = [[UIScreen mainScreen] scale];
displaySize.height *= scale;
winSize.height *= scale;
displaySize.width *= scale;
winSize.width *= scale;
}Looks like its feeding the size in points to the OGL code as a size in pixels.
I don't have any experience with iPads to know if this would break compatibility with an iPad in zoom mode.
Also, @TheGazzardian - in CCDirector.m, around line 340, the following seems to be missing, at least as of 0.99.5-rc0:
-(CGSize)displaySize
{
return winSizeInPoints_;
}Try to use this code,
It should work in iPhone 4, but I haven't tested it.
- (UIImage*) screenshotUIImage
{
CGSize displaySize = [self displaySizeInPixels];
CGSize winSize = [self winSizeInPixels];
//Create buffer for pixels
GLuint bufferLength = displaySize.width * displaySize.height * 4;
GLubyte* buffer = (GLubyte*)malloc(bufferLength);
//Read Pixels from OpenGL
glReadPixels(0, 0, displaySize.width, displaySize.height, GL_RGBA, GL_UNSIGNED_BYTE, buffer);
//Make data provider with data.
CGDataProviderRef provider = CGDataProviderCreateWithData(NULL, buffer, bufferLength, NULL);
//Configure image
int bitsPerComponent = 8;
int bitsPerPixel = 32;
int bytesPerRow = 4 * displaySize.width;
CGColorSpaceRef colorSpaceRef = CGColorSpaceCreateDeviceRGB();
CGBitmapInfo bitmapInfo = kCGBitmapByteOrderDefault;
CGColorRenderingIntent renderingIntent = kCGRenderingIntentDefault;
CGImageRef iref = CGImageCreate(displaySize.width, displaySize.height, bitsPerComponent, bitsPerPixel, bytesPerRow, colorSpaceRef, bitmapInfo, provider, NULL, NO, renderingIntent);
uint32_t* pixels = (uint32_t*)malloc(bufferLength);
CGContextRef context = CGBitmapContextCreate(pixels, winSize.width, winSize.height, 8, winSize.width * 4, CGImageGetColorSpace(iref), kCGImageAlphaPremultipliedLast | kCGBitmapByteOrder32Big);
CGContextTranslateCTM(context, 0, displaySize.height);
CGContextScaleCTM(context, 1.0f, -1.0f);
switch (self.deviceOrientation)
{
case CCDeviceOrientationPortrait: break;
case CCDeviceOrientationPortraitUpsideDown:
CGContextRotateCTM(context, CC_DEGREES_TO_RADIANS(180));
CGContextTranslateCTM(context, -displaySize.width, -displaySize.height);
break;
case CCDeviceOrientationLandscapeLeft:
CGContextRotateCTM(context, CC_DEGREES_TO_RADIANS(-90));
CGContextTranslateCTM(context, -displaySize.height, 0);
break;
case CCDeviceOrientationLandscapeRight:
CGContextRotateCTM(context, CC_DEGREES_TO_RADIANS(90));
CGContextTranslateCTM(context, displaySize.height-displaySize.width, -displaySize.height);
break;
}
CGContextDrawImage(context, CGRectMake(0.0f, 0.0f, displaySize.width, displaySize.height), iref);
CGImageRef imageRef = CGBitmapContextCreateImage(context);
UIImage *outputImage = [[[UIImage alloc] initWithCGImage:imageRef] autorelease];
//Dealloc
CGImageRelease(imageRef);
CGDataProviderRelease(provider);
CGImageRelease(iref);
CGColorSpaceRelease(colorSpaceRef);
CGContextRelease(context);
free(buffer);
free(pixels);
return outputImage;
}
- (CCTexture2D*) screenshotTexture
{
return [[[CCTexture2D alloc] initWithImage:[self screenshotUIImage]] autorelease];
}@manucorporat - Verified... in simulator, at least.
EDIT: I was just trying to stick to Points, myself. It does work, though.
Thanks for this bit of code! this is exactly something I need.
I have a problem, though...
I'm trying to make an image from just a part of the screen.
On the iPhone 4 it will be 640x640, but it doesn't start from the bottom of the screen, but about 160px upwards from the bottom.
I thought that I should just change the CGRectMake, but it didn't produce what I was expecting.
The closest I've got is when I changed winSize & displaySize to 640x640, and I changed the CGRectMake to (0.0f, 160.0f, displaySize.width, displaySize.height), but what I get is a 640x640 image that has a white stripe (160px high).
Here are images of what happens:
- screen to capture http://imgur.com/syoPU
- result http://imgur.com/NDacG
Am I missing something here? :)
Thanks for any help!
Thomvis
Member
You should also change the OpenGL call that reads the actual pixel values:
glReadPixels(0, 0, displaySize.width, displaySize.height, GL_RGBA, GL_UNSIGNED_BYTE, buffer);
should become something like:
glReadPixels(0, 160, displaySize.width, displaySize.height-160, GL_RGBA, GL_UNSIGNED_BYTE, buffer);
Thomvis, you're a God among men! ;)
though I didn't need to subtract 160 from displaySize.height.
I just needed to change the glReadPixels like you said, without the subtraction.
And change the CGRectMake back to the default (0,0,width,height).
And now I have a great 640x640 image.
I will use the Content Scale Factor to change values to fit iPhone3 as well.
Thanks again, Thomvis and everyone who made this code.
wilczarz
Member
Hi guys, is it possible for app to take a screenshot of the iphone desktop at the momemt of clilcking the app icon (before any cocos scene shows) ? I am wondering if it's possible to use that screenshot in the game intro somehow :) Also, would that be legal for Apple review board?
@applehund I've submitted my app (Valentine's Love Cam) which uses this code and it was approved without any issues.
You must log in to post.
