Cocos2d screenShot « cocos2d for iPhone

cocos2d for iPhone » Programming » cocos2d 3rd party extensions

Cocos2d screenShot

(120 posts) (72 voices)

Started 3 years ago by manucorporat
Latest reply from geoff1906

Tags:

12…4 Next »

manucorporat
Member

Cocos2D should have a function for capture the OpenGL image in screen.
I developed a function for this.

- (Texture2D*) cocos2DScreenShot {
	CGSize size = [self displaySize];

	//Create un buffer for pixels
	int bufferLenght=size.width*size.height*4;
	unsigned char buffer[bufferLenght];

	//Read Pixels from OpenGL
	glReadPixels(0,0,size.width,size.height,GL_RGBA,GL_UNSIGNED_BYTE,&buffer);
	CGDataProviderRef ref = CGDataProviderCreateWithData(NULL, &buffer, bufferLenght, NULL);
	CGImageRef iref = CGImageCreate(size.width,size.height,8,32,size.width*4,CGColorSpaceCreateDeviceRGB(),kCGBitmapByteOrderDefault,ref,NULL,true,kCGRenderingIntentDefault);

	uint32_t *pixels     = (uint32_t *)malloc(bufferLenght);
	CGContextRef context = CGBitmapContextCreate(pixels, [self winSize].width, [self winSize].height, 8, [self winSize].width*4, CGImageGetColorSpace(iref), kCGImageAlphaPremultipliedLast | kCGBitmapByteOrder32Big);

	CGContextTranslateCTM(context,0, size.height);
	CGContextScaleCTM(context, 1.0, -1.0);

	switch (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.5, -size.height);
			break;
	}
	CGContextDrawImage(context, CGRectMake(0.0, 0.0, size.width, size.height), iref);
	UIImage *outputImage = [UIImage imageWithCGImage:CGBitmapContextCreateImage(context)];
	Texture2D *texture = [[Texture2D alloc] initWithImage:outputImage];

	//Dealloc
	CGDataProviderRelease(ref);
	CGImageRelease(iref);
	CGContextRelease(context);
	free(pixels);

	return texture;
}

I found the original code in: http://stackoverflow.com/questions/962390/capturing-eaglview-content-with-alpha-channel-on-iphone

but I edited it because didn't support orientation and it didn't release the memory.

I open a inssue in the cocos2d-iphone Project:
http://code.google.com/p/cocos2d-iphone/issues/detail?id=533

Posted 3 years ago #

Mitch Lindgren
Member

While this does sound like a potentially useful feature, are you aware that you can capture screenshots on the iPhone by click the home and lock buttons simultaneously? Or, on the simulator, you can use OSX app "Grab" to get screenshots. So if you don't need some kind of automatic function for taking screenshots, those are potential options.

Posted 3 years ago #
manucorporat
Member

yes, I know how I can capture a screenshot manualy. I use this method for public screenshots.
But my function capture only the OpenGl context.
And for example I use this function for capture the "Best Moments in the Game" and show them when I finished the match.

Do you understand me?

Posted 3 years ago #
mobilebros
Moderator

Cool! This actually would be a nice feature for exactly the purpose you just described.

Posted 3 years ago #

manucorporat
Member

- (void) endLoad{

...
...
...
[self scheduler:@selector(screenshot) interval:3];
textureStore = [NSMutableArray arrayWithCapacity:10];
}

- (void) screenshot{
[textureStore addObject:[[Director sharedDirector] cocos2DScreenShot]];
}

- (void) gameover{
int i=0;
for(Texture2D *texture in textureStore){
        Sprite *screen = [Sprite spriteWithTexture:[[Director sharedDirector] cocos2DScreenShot]];
	[screen setScale:0.4];
	[screen setAnchorPoint:ccp(0,0)];
	[screen setPosition:ccp([texture contentSize].width*i,0)];
	[self addChild:screen];
        i++;
}
}

Posted 3 years ago #

manucorporat
Member

I have updated the code:
-It is easier to configure.

- (UIImage*) screenShotUIImage; //return a UIImage
- (Texture2D*) screenShotTexture2D; //return a Texture2D

This is the final code:

- (UIImage*) screenShotUIImage {
	CGSize size = [self displaySize];
	//Create un buffer for pixels
	GLuint bufferLenght=size.width*size.height*4;
	GLubyte *buffer = (GLubyte *) malloc(bufferLenght);

	//Read Pixels from OpenGL
	glReadPixels(0,0,size.width,size.height,GL_RGBA,GL_UNSIGNED_BYTE,buffer);
	//Make data provider with data.
	CGDataProviderRef provider = CGDataProviderCreateWithData(NULL, buffer, bufferLenght, 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(bufferLenght);
	CGContextRef context = CGBitmapContextCreate(pixels, [self winSize].width, [self winSize].height, 8, [self winSize].width*4, CGImageGetColorSpace(iref), kCGImageAlphaPremultipliedLast | kCGBitmapByteOrder32Big);

	CGContextTranslateCTM(context,0, size.height);
	CGContextScaleCTM(context, 1.0, -1.0);

	switch (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.5, -size.height);
			break;
	}
	CGContextDrawImage(context, CGRectMake(0.0, 0.0, size.width, size.height), iref);
	UIImage *outputImage = [UIImage imageWithCGImage:CGBitmapContextCreateImage(context)];

	//Dealloc
	CGDataProviderRelease(provider);
	CGImageRelease(iref);
	CGContextRelease(context);
	free(buffer);
	free(pixels);

	return outputImage;
}

- (Texture2D*) screenShotTexture2D {
	return [[Texture2D alloc] initWithImage:[self screenShotUIImage]];
}

Posted 3 years ago #

quano
Member

Nice effort. Might come in handy.

Posted 3 years ago #
zombie
Member

For some reason glReadPixels returns all black when screenShotUIImage is called. However, calling screenShotUIImage from another place in code, it works. Any ideas? Could it be that the buffer is not ready or is there something else I need to look at. A glGetError after glReadPixels returned zero.

Posted 3 years ago #
manucorporat
Member

It is strange, Where did you call screenShotUIImage? You can not call this method in other thread.

Posted 3 years ago #
zombie
Member

Its single threaded. The one time screenShotUIImage is called from a Layer. Works. The other time from the main scene directly. Does not work. Code is the same.

Posted 3 years ago #
nsxdavid
Member

The reason for the black shots from note I added to the issue:

Interesting problem with this approach...

Because it uses glReadPixels() it will always give a blank image if used in any
scheduled selector callback. This is because the mainloop clears the buffer then
does the scheduled selectors.

Swapping the order of the mainLoop so that it does the glClear() after the scheduler
works, but it guarantees that any drawing done in scheduled will no longer work.
Which seems reasonable, but perhaps a breaking change.

Another idea might be some sort of preclear callback, or post-bufferswap callbacks.

Posted 3 years ago #

manucorporat
Member

Director.m::mainloop

- (void) mainLoop
{
	/* clear window */
        //glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
	/* calculate "global" dt */
	[self calculateDeltaTime];
	if( ! isPaused_ )
		[[Scheduler sharedScheduler] tick: dt];

	/* clear window */
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); //<<<<New position

	/* to avoid flickr, nextScene MUST be here: after tick and before draw */
	if( nextScene )
		[self setNextScene];

	glPushMatrix();

	[self applyLandscape];

	/* draw the scene */
	[runningScene_ visit];
	if( displayFPS )
		[self showFPS];

	glPopMatrix();

	/* swap buffers */
	[openGLView_ swapBuffers];
}

I have move glClear after scheduler dispatch.
What is the problem?
I have tested TransitionsTest, Sprites, drawPrimitives and they show succesfully.

Posted 3 years ago #

nsxdavid
Member

It would only be a problem if someone did draw calls in their scheduled callbacks. Although this is discouraged, I don't know if it was made into law by Riq. Also, some people put debugging drawing temporarily in their perframes and such so visualize various things like vetors, motion, collisions or whatever. It's very convenient.

Posted 3 years ago #
manucorporat
Member

I think that's really not a problem, because surely in the final version of your game doesn't run drawing requests into a scheduler.

Furthermore, drawing behind a scheduler is difficult because the transformations do not apply.

by the way, nsxdavid, Are you the developer geodefense? Right?
I love that game.

Posted 3 years ago #
nsxdavid
Member

I am indeed thanks.

Next game coming out: geoSpark is cocos2d all the way yo!

Posted 3 years ago #
manucorporat
Member

@nsxdavid
if it is as good as geodefense, I'll buy it.
I'm doing a game with graphics similar and the system of particles of the geodefense is one of the best.
Images in: http://manucorporat.blogspot.com/
Good luck.

Posted 3 years ago #

gaminghorror
Member

I allowed myself to clean up this code. It now works in any class, without the need to put it directly into CCDirector. It also works with cocos 1.9. I fixed a typo and generally cleaned up the spacing of parameters. Also compiles without warnings now (eg. truncation of 64-bit float because of missing 'f' in floating point constants).

I've put it in a class called Screenshot, so the function names make sense if you consider: [Screenshot takeAsTexture2D]

+(UIImage*) takeAsUIImage
{
	CCDirector* director = [CCDirector sharedDirector];
	CGSize size = director.displaySize;

	//Create buffer for pixels
	GLuint bufferLength = size.width * size.height * 4;
	GLubyte* buffer = (GLubyte*)malloc(bufferLength);

	//Read Pixels from OpenGL
	glReadPixels(0, 0, 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, [director winSize].width, [director winSize].height, 8, [director winSize].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;
}

+(CCTexture2D*) takeAsTexture2D
{
	return [[[CCTexture2D alloc] initWithImage:[Screenshot takeAsUIImage]] autorelease];
}

Posted 3 years ago #

manucorporat
Member

Thanks for the corrections.
But the idea was that in later versions, this code is officially in cocos2D.
In addition, for the code works into a scheduler, should have a small change in the mainloop.
I have adapted your code to the director again, but I like your idea.

-(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.width * 0.5f, -displaySize.height);
			break;
	}

	CGContextDrawImage(context, CGRectMake(0.0f, 0.0f, displaySize.width, displaySize.height), iref);
	CGImageRef imageRef = CGBitmapContextCreateImage(context);
	UIImage *outputImage = [UIImage imageWithCGImage:imageRef];

	//Dealloc
	CGImageRelease(imageRef);
	CGDataProviderRelease(provider);
	CGImageRelease(iref);
	CGColorSpaceRelease(colorSpaceRef);
	CGContextRelease(context);
	free(buffer);
	free(pixels);

	return outputImage;
}

- (Texture2D*) screenshotTexture {
	return [[Texture2D alloc] initWithImage:[self screenshotUIImage]];
}

Posted 3 years ago #

gaminghorror
Member

Small part of the screenshot function, i found and fixed two mem leaks but didn't want to post it all again (let's keep your Director approach, anyone who doesn't want it in Director can figure it out from my post above i guess).

//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);
	CGColorSpaceRelease(colorSpaceRef);

	uint32_t* pixels = (uint32_t*)malloc(bufferLength);
	CGContextRef context = CGBitmapContextCreate(pixels, [director winSize].width, [director winSize].height, 8, [director winSize].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);
	CGImageRef imageRef = CGBitmapContextCreateImage(context);
	UIImage *outputImage = [UIImage imageWithCGImage:imageRef];
	CGImageRelease(imageRef);

The fixes in closer look are:

CGColorSpaceRef colorSpaceRef = CGColorSpaceCreateDeviceRGB();
...
CGColorSpaceRelease(colorSpaceRef);

and

CGImageRef imageRef = CGBitmapContextCreateImage(context);
UIImage *outputImage = [UIImage imageWithCGImage:imageRef];
CGImageRelease(imageRef);

Remember, "Create" functions always return objects that you have the responsibility to free. I regularly find those mem leaks in source code samples ... actually, i don't find it, CLang static analyzer does this for me. ;)

See here if you want to know how the analyzer works (it keeps beating the crap out of my code so i can go in and fix it before it becomes a problem, really helpful):
http://fruitstandsoftware.com/blog/2008/08/finding-memory-leaks-with-the-llvmclang-static-analyzer/

Posted 3 years ago #

manucorporat
Member

colorSpaceRef already had fixed in my last code, but I had forgotten imageRef
Thanks again. I will start using Clang static analyzer.

Posted 3 years ago #
kl3pt
Member

Hello everyone,

This post has been extremely helpful for me. But I am having a small problem.

The way my app works is it generates a random image from a bunch of sprites, then I use the screenshot to store it as a UIImage.
From there I take the UIImage and build a collision map.

My problem is that all of this takes place in the init of my layer and therefore returning a black screenshot because nothing has been written to the screen yet.

Any ideas on how to clear this up?

Thanks!

Posted 3 years ago #
gaminghorror
Member

@kl3pt: you may have to use [self schedule ...] with a very short interval like 0.1f to give cocos2d time to render the screen. Personally i made a simple "drawNow" method in CCDirector so i can refresh the screen anytime i want to.

Posted 3 years ago #
edge17
Member

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)

https://devforums.apple.com/message/149553

Posted 3 years ago #
riq
Key Master

@edge17: nice tip.

Posted 3 years ago #
edisonslabs
Member

@edge17: Thanks for the tip.

The code is still useful if you only want to take a portion of the screen shot. You can easily modify the function to take in a rect that specifies the rectangle area of the screen where you want to take a screen shot. Just change the displaySize/Window origin/position/size and you're done.

Posted 3 years ago #
Penep
Member

nice code，

I tried the code which works perfect with a customized drawNow in Director. The on the screen, the image has a transparent background.However, the saved file has a black background. Does anyone know how to fix it? thanks alot.

Posted 3 years ago #
renderplace
Member

In addition to great contribution + UIGetScreenImage() tip, here is a code one could use to upload captured image during the game play as TwitPic progress. This is just an idea I'm looking how to efficiently integrate it into my game. Maybe someone find this idea useful as well.

http://www.drobnik.com/touch/2010/02/uploading-uiimages-to-twitpic/

tnx!

Posted 3 years ago #
mhussa
Member

Following on from the edge17's tip, I wanted to save the images to the photo album so I added this to my app delegate:

extern "C" CGImageRef UIGetScreenImage(void); //remove "C" if linking with a .m instead of .mm
then use:

UIImageWriteToSavedPhotosAlbum([UIImage imageWithCGImage:UIGetScreenImage()], nil, nil, nil);

NOTE: UIGetScreenImage() only works on an iphone not the simulator. Not sure what would happen on an ipod (not much probably).

ANOTHER NOTE: don't wrap the code in an obj-C function or you'll get a delayed screenshot.

Posted 3 years ago #
runloop
Member

I've just used this code for an iPad game and was experiencing odd positioning in Landscape right. IT boiled down to this line:

CGContextTranslateCTM(context, size.width * 0.5f, -size.height);

which should be

CGContextTranslateCTM(context, size.height - size.width, -size.height);

Other than that this was a great help.

Posted 3 years ago #
ghiboz
Member

I read all and it's very interesting.. and a question.. I need to have a button that take the screen and save the image into the image folder of the phone... (the same of the home + on button)...
how can I do this??
thanks in advance

Posted 3 years ago #

RSS feed for this topic

12…4 Next »

Reply »

You must log in to post.