Using a UIImagePickerController and Cocos2d sample code

cocos2d for iPhone » Programming » cocos2d support (graphics engine)

Using a UIImagePickerController and Cocos2d sample code

(49 posts) (18 voices)

Started 1 year ago by rcbowser
Latest reply from knightkrows

Tags:

This subject seems to be a common question on the Cocos2d forum, so being a good guy and wanting to contribute I have decided to share this code with forum members.

I’ve been working on a project for the iPhone that uses an image from the device. You can either get your images direct from the camera, photo albums or one of your saved images.

After spending some time looking through sample code and reading endless pages of information I was finally able to put some code together that works.

So here is the code:
First you need to add your Delegates to your Scene header like this in your .h file.

@interface MenuScene : CCLayer <UIImagePickerControllerDelegate, UINavigationControllerDelegate>
{
	UIWindow *window;
	UIImage *newImage;
}

Then you can use the UIImagePickerController in your .m file with the following code.

-(void)pickPhoto:(UIImagePickerControllerSourceType)sourceType{

	UIImagePickerController *picker	= [[UIImagePickerController alloc]init];
	picker.delegate = self;
	picker.sourceType = sourceType;
	picker.wantsFullScreenLayout = YES;
	[picker presentModalViewController:picker animated:YES];

	[[[CCDirector sharedDirector] openGLView] addSubview:picker.view];

}

-(void)imagePickerController:(UIImagePickerController *)picker
					didFinishPickingMediaWithInfo:(NSDictionary *)info{

	// newImage is a UIImage do not try to use a UIImageView
	newImage = [info objectForKey:@"UIImagePickerControllerOriginalImage"];
	// Dismiss UIImagePickerController and release it
	[picker dismissModalViewControllerAnimated:YES];
	[picker.view removeFromSuperview];
	[picker	release];
	// Let's create a sprite now that we have an image
	CCSprite *imageFromPicker = [CCSprite spriteWithCGImage:newImage.CGImage key:@"ImageFromPicker"];

}

Hope someone finds a use for this.

Posted 1 year ago #

jeffam112368
Member

I wanted to use an UIImagePickerController in my app to allow user to select a photo from iPad photo library. I tried the code in this thread, but it doesn't seem to show the photo picker UI and instead crashes with SIGABRT after the [[[CCDirector sharedDirector] openGLView] addSubview:picker.view] line is executed.

Any other advice in getting photo picket UI to display on the ipad inside a CCLayer-based scene?

Thanks, Jeff.

Posted 1 year ago #

jamesgrote
Member

For the iPad, you have to put the image picker inside a popover controller like this:

-(void) showPhotoLibrary
{
	if (_picker) {
		[_picker dismissModalViewControllerAnimated:NO];
		[_picker.view removeFromSuperview];
		[_picker release];
	}
	if (_popover) {
		[_popover dismissPopoverAnimated:NO];
		[_popover release];
	}
	_picker = [[[UIImagePickerController alloc] init] retain];
	_picker.delegate = self;
	_picker.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;
	_picker.wantsFullScreenLayout = YES;

	_popover = [[[UIPopoverController alloc] initWithContentViewController:_picker] retain];
	[_popover setDelegate:self];

	CGSize winsize = [[CCDirector sharedDirector] winSize];
	[_popover setPopoverContentSize:CGSizeMake(320, winsize.height) animated:NO];

	CGRect r = CGRectMake(20,20,10,10);
	r.origin = [[CCDirector sharedDirector] convertToGL:r.origin];
	[_popover presentPopoverFromRect:r inView:[[CCDirector sharedDirector] openGLView] permittedArrowDirections:UIPopoverArrowDirectionDown animated:NO];
}

- (void)imagePickerControllerDidCancel:(UIImagePickerController *)picker
{
	[_picker dismissModalViewControllerAnimated:YES];
	[_picker.view removeFromSuperview];
	[_picker release];
	_picker = nil;
	[_popover dismissPopoverAnimated:YES];
	[_popover release];
}

//for Ipad UIPopoverController if there is a cancel when the user click outside the popover
- (void)popoverControllerDidDismissPopover:(UIPopoverController *)popoverController
{
	[_picker dismissModalViewControllerAnimated:YES];
	[_picker.view removeFromSuperview];
	[_picker release];
	_picker = nil;
}

The imagePickerController:didFinishPickingMediaWithInfo: function should be the same.

Hope this helps!
Jim

Posted 1 year ago #

apple.dev
Member

In order to show the selected photo, I added :

-(void)imagePickerController:(UIImagePickerController *)picker
didFinishPickingMediaWithInfo:(NSDictionary *)info{

	// newImage is a UIImage do not try to use a UIImageView
	newImage = [info objectForKey:@"UIImagePickerControllerOriginalImage"];
	// Dismiss UIImagePickerController and release it
	[picker dismissModalViewControllerAnimated:YES];
	[picker.view removeFromSuperview];
	[picker	release];
	// Let's create a sprite now that we have an image
		CCSprite *imageFromPicker = [CCSprite spriteWithCGImage:newImage.CGImage  key:@"ImageFromPicker"];
		imageFromPicker.position = ccp(160,240);
		//remove previous
		[self removeChildByTag:1001 cleanup:TRUE];
                // add new , but just work at the first time, not working since first time
		[self addChild:imageFromPicker z:0 tag: 1001];

}

The problem I met is that , only first time is okay. The selected photo can be displayed.
Later on, it always display the first time chosen photo.

Any clues for this issue ? Thanks

Posted 1 year ago #

rcbowser
Member

Yes just change this line of code from:

// Let's create a sprite now that we have an image
	CCSprite *imageFromPicker = [CCSprite spriteWithCGImage:newImage.CGImage key:@"ImageFromPicker"];

Set the key value to "nil":

// Let's create a sprite now that we have an image
	CCSprite *imageFromPicker = [CCSprite spriteWithCGImage:newImage.CGImage key:nil];

This will allow a new image to be assigned each time.

Posted 1 year ago #

renuka
Member

Hi,

Can you say me how can i get image url or path after selecting image from imagepicker?

I want to store it in NSUserDefaults and then want to use it to show in game scene background.

Please Help me

Thanks,

Posted 1 year ago #
Mythili
Member

hii renuka, y not u make the newImage as extern variable in ur gamescene.No need to take the url
extern UIImage *newImage

Posted 1 year ago #
MekNaan
Member

@jamesgrote thank you for your reply
i was pulling my hair out searching the web for the damned sigabrt error on the UIImagePickerController.
you cannot find elsewhere the fact that you need the UIPopoverController on ipad.
again thank you.

Posted 1 year ago #
kriboogh
Member

For some odd reason my underlying CCLayer still receives touch events and the cancel button in the picker's toolbar isn't responding.

I copy pasted the code here into a CCLayer subclass. the take photo is triggered by a menu button inside the layer and the layer has isTouchEnabled set to YES.

I tried stopping the directors animation and pausing it, after adding the picker to the glview but it doesn't seem to help.

Any ideas why this might happen? (i'm on 0,99,5-rc1)

Posted 1 year ago #
Jarson
Member

@kriboogh Please post your code, and post which .h and .m files its in. Even better, put your code into the hello world project and see if your issue remains.

Posted 1 year ago #
Jarson
Member
I took the code @rcbowser posted at the top above, and placed it in a blank helloWorld scene from the standard template from 0.99.5-rc1, and added this line to the init after
```
[self addChild:label];
[self pickPhoto:UIImagePickerControllerSourceTypePhotoLibrary];
```
The result (on iPhone 3G or 4) is that only the navigation bar shows up and you can see the scene behind it. (black screen with "hello world" and fps counter). No image picker is visible.

However, if I place the same code in an older 0.99.4 template, the Image Picker shows up correctly.

Anybody know how to get UIImagePickerController working on 0.99.5-rc1? Is this a bug?
Posted 1 year ago #
wiegerthefarmer
Member

Does anyone have sample code of using a popovercontroller normally in Cocos2d? Like for choosing nested details? Basically I want to click and hold on a sprite (easy to do), and then have the popover controller appear (pointing at the sprite) and be able to pick info from the shown list...

There's very little on google or the forums about this, so I'm worried I'm either going to have to A)switch to a normal iPad application (toss cocos2d) or B) figure out some alternative mechanism...

Posted 1 year ago #
kriboogh
Member

I rewrote most of my scene/layer handling and now everything seems to work. Now I have one base scene where I switch layers, the photopicker nicely comes over the layer. I also added photos to the simulator, maybe this solved the problem to as I was getting an empty library in the simulator.

Posted 1 year ago #
Jarson
Member

Could you please share how you solved this problem, i.e. how would you get the ImagePicker to show up on the latest HelloWorld template for 0.99.5-rc1.

Posted 1 year ago #

kriboogh
Member

This is what I have (and that works for my situation)

-(void)pickPhoto:(UIImagePickerControllerSourceType)sourceType{

	UIImagePickerController *picker	= [[UIImagePickerController alloc]init];
	picker.delegate = self;
	picker.sourceType = sourceType;
	picker.wantsFullScreenLayout = YES;
	[picker presentModalViewController:picker animated:YES];

	[[[CCDirector sharedDirector] openGLView] addSubview:picker.view];

	// Pause the Directore to speed up image picker (maybe it's better to put it before adding the view??)
	[[CCDirector sharedDirector] pause];
	[[CCDirector sharedDirector] stopAnimation];
}

-(void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info{

	// newImage is a UIImage do not try to use a UIImageView
	UIImage *newImage = [info objectForKey:@"UIImagePickerControllerOriginalImage"];

	// Dismiss UIImagePickerController and release it
	[picker dismissModalViewControllerAnimated:YES];
	[picker.view removeFromSuperview];
	[picker	release];

	// Restart Director after image is selected
	[[CCDirector sharedDirector] startAnimation];
	[[CCDirector sharedDirector] resume];

	// Let's create a sprite now that we have an image
	[self removeChildByTag:2000 cleanup:YES]; // remove the previous sprite
	UIImage *scaledImage = [newImage scaleToSize:CGSizeMake(240.0f, 160.0f)];
	CCSprite *imageFromPicker = [CCSprite spriteWithCGImage: scaledImage.CGImage
														key:nil]; // key nil to make sure the new image is applied
	[imageFromPicker setTag:2000];
	[imageFromPicker setPosition:ccp(self.contentSize.width/2, self.contentSize.height/2-30)];
	[self addChild: imageFromPicker];
}

I have this code in a subclass of a CCLayer, so I guess you add it to the HelloWorld layer class.

The only thing I don't see in the simulator is that the image picker opens with a slide effect, it's suddenly there. I haven't tried it on a real device yet though!

Posted 1 year ago #

Jarson
Member

I've tried your code in the HellowWorld template from 0.99.5rc1 and I get the same problem. I have also tried it in the simulator.
What is the difference between your app and the standard template, perhaps you use different or no rotation? What is your GAME_AUTOROTATION variable? is it the default kGameAutorotationUIViewController? (in the app delegate) I'm trying to figure how yours is working when the template is not. Thanks!
(I want to use kGameAutorotationUIViewController like the template so I am hoping to get that to work with the UIImagePickerController)

Posted 1 year ago #
Jarson
Member

I just tried in the latest 0.99.5 final release, and the problem still exists. I have filed a bug in the bugtracker at:
http://code.google.com/p/cocos2d-iphone/issues/detail?id=1063

Posted 1 year ago #

kriboogh
Member

Donno, I'm not using any RootViewController class or any thing. My app just starts up using a AppDelegate looking like this:

@implementation AppDelegate

@synthesize window;

- (void) applicationDidFinishLaunching:(UIApplication*)application
{
	// Init the window
	window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];

	// cocos2d will inherit these values
	[window setUserInteractionEnabled:YES];
	[window setMultipleTouchEnabled:YES];

	// Try to use CADisplayLink director
	// if it fails (SDK < 3.1) use the default director
	if( ! [CCDirector setDirectorType:CCDirectorTypeDisplayLink] )
		[CCDirector setDirectorType:CCDirectorTypeDefault];

	// Use RGBA_8888 buffers
	// Default is: RGB_565 buffers
	[[CCDirector sharedDirector] setPixelFormat:kPixelFormatRGBA8888];

	// Default texture format for PNG/BMP/TIFF/JPEG/GIF images
	// It can be RGBA8888, RGBA4444, RGB5_A1, RGB565
	// You can change anytime.
	[CCTexture2D setDefaultAlphaPixelFormat:kTexture2DPixelFormat_RGBA8888];

	// before creating any layer, set the landscape mode
	[[CCDirector sharedDirector] setDeviceOrientation:CCDeviceOrientationLandscapeLeft];
	[[CCDirector sharedDirector] setAnimationInterval:1.0/60];
	[[CCDirector sharedDirector] setDisplayFPS:NO];

	// create an openGL view inside a window
	[[CCDirector sharedDirector] attachInView:window];
	[window makeKeyAndVisible];		

	// Run the splash
        [[CCDirector sharedDirector] runWithScene: splashScene];
}

- (void)applicationWillResignActive:(UIApplication *)application {
	[[CCDirector sharedDirector] pause];
}

- (void)applicationDidBecomeActive:(UIApplication *)application {
	[[CCDirector sharedDirector] resume];
}

- (void)applicationDidReceiveMemoryWarning:(UIApplication *)application {
	[[CCDirector sharedDirector] purgeCachedData];
}

-(void) applicationDidEnterBackground:(UIApplication*)application {
	[[CCDirector sharedDirector] stopAnimation];
}

-(void) applicationWillEnterForeground:(UIApplication*)application {
	[[CCDirector sharedDirector] startAnimation];
}

- (void)applicationWillTerminate:(UIApplication *)application {
	[[CCDirector sharedDirector] end];
}

- (void)applicationSignificantTimeChange:(UIApplication *)application {
	[[CCDirector sharedDirector] setNextDeltaTimeZero:YES];
}

- (void)dealloc {
	[[CCDirector sharedDirector] release];
	[window release];
	[super dealloc];
}

@end

Posted 1 year ago #

lns
Member
this approach works for me, however the animating:YES part doesn't work for me either...
But it actually can be fixed with just 2 lines of code.
Basically the animation is not playing because the view is presented modal over itself which, of course, is not possible (it would have to cover itself). Now, if we add a transparent view of a new UIViewController to openGLView and present the UIImagePickerController modal on top of that view, the animation is played.
Here's rcbowsers function with working slide effects:
@rcbowser: hope you don't mind
```
-(void)pickPhoto:(UIImagePickerControllerSourceType)sourceType{

	UIImagePickerController *picker	= [[UIImagePickerController alloc]init];
	picker.delegate = self;
	picker.sourceType = sourceType;
	picker.wantsFullScreenLayout = YES;

	UIViewController *container = [[UIViewController alloc] init];
        //Maybe the setFrame is not needed, I didn't get a chance to test with a smaller view frame
        [[container view] setFrame:CGRectMake(0.0,0.0,320.0,480.0)];
	[[[CCDirector sharedDirector] openGLView] addSubview:container.view];
        [container presentModalViewController:picker animated:YES];
}
```
The created UIViewControllers should be cleaned up somewhere, perhaps in didFinishPickingMediaWithInfo and the cancel delegate method of UIImagePickerController

edit: this also fixes the issue with the cancel button on the toolbar not working, however you can still "touch right through" the UIImagePickerController
Posted 1 year ago #
Jarson
Member

@lns Thanks, this fixes my issues!
A bit convoluted but it works.

Posted 1 year ago #
dc
Member

@lns @kriboogh

Same problem, but all of this approaches doesn't work in my situation (I need the RootViewController in App Delegate). Finally, I found another way to work around:

use:

[[[UIApplication sharedApplication] delegate].viewController presentModalViewController:imagePicker animated:YES];

instead of:

[self presentModalViewController:imagePicker animated:YES];

Hope it helps :)

Posted 1 year ago #
Happy Otter
Member

@Jarson I am having the same issues you did. ( only the blue Nav bar displaying on the screen. ) I downloaded your code from the bug report and confirmed it was the same thing. However when I tried to add the extra UIViewController to your code like Ins suggested. It did not solve the issue. Instead of a blue bar nothing came up. Did you update your cocos2d? I'm using 99.5. I was also able to get it working correctly with the 99.4 template. I imagine the addition of the auto rotate may be the cause of this problem. Can anybody give me some sample code with the image picker working properly with virsion 99.5? I would be most grateful.

Posted 1 year ago #
Jarson
Member
@dc I couldn't get that to work, but I did it this way and now it works even better! I can also use when called from landscape!
```
YourAppNameAppDelegate *delegate = (YourAppNameAppDelegate *)[[UIApplication sharedApplication] delegate];

		[delegate.viewController presentModalViewController:imagePicker animated:YES];
```
@Happy Otter, I got this to work in my own code, not the template. I am also using auto-rotation and it's a universal app.this is current 99.5 release.
I used @prime's example on this page:
http://www.cocos2d-iphone.org/forum/topic/8393/page/2
Posted 1 year ago #
Happy Otter
Member

@Jarson Hey thanks for the quick reply. Thats great! I did manage to get it working when I changed the autoRotation to none. in the GameConfig.h This new code is really what I need tho. I'm looking forward to plugging it in. Thanks alot for the help.

Posted 1 year ago #
sonofalink
Member

Hey with @Jarson's suggestion, I got the UIImagePicker to come up, but it doesn't respond to touches. Any idea what could be going wrong?

Posted 1 year ago #
LittleRy
Member

hello,

thanks for the post, but i am having a problem with the Iphone4, when i use i picture i have taken the size is to large for cocos. any ideas on how to make it compressed?

thanks

Littley Ry

Posted 5 months ago #
vogueestylee
Member

anyone? :)

Posted 5 months ago #

knightkrows
Member

Hi,
use this code to resize the image you get from picker controller.

+ (UIImage *) image: (UIImage *) image fillSize: (CGSize) viewsize

{
	UIGraphicsBeginImageContext(viewsize);
    [image drawInRect:CGRectMake(0, 0, viewsize.width, viewsize.height)];
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return newImage;
}

Thanks,

Posted 5 months ago #

vogueestylee
Member

hi Knightkrows, thank you for code but how to use it?

i renamed image to imageF and use

new2 =[newImage imageF:CGSizeMake(300, 300)];

but it gives SIGABR

2011-08-23 10:13:23.822 Test[914:707] -[UIImage imageF:]: unrecognized selector sent to instance 0x290f10
2011-08-23 10:13:23.922 Test[914:707] *** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[UIImage imageF:]: unrecognized selector sent to instance 0x290f10'
*** Call stack at first throw:
(
	0   CoreFoundation                      0x3662864f __exceptionPreprocess + 114
	1   libobjc.A.dylib                     0x33881c5d objc_exception_throw + 24
	2   CoreFoundation                      0x3662c1bf -[NSObject(NSObject) doesNotRecognizeSelector:] + 102
	3   CoreFoundation                      0x3662b649 ___forwarding___ + 508
	4   CoreFoundation                      0x365a2180 _CF_forwarding_prep_0 + 48
	5   Test                       0x000a9589 -[HelloWorldLayer imagePickerController:didFinishPickingMediaWithInfo:] + 236
	6   UIKit                               0x35609575 -[UIImagePickerController _imagePickerDidCompleteWithInfo:] + 80
	7   PhotoLibrary                        0x33d62c45 PLNotifyImagePickerOfImageAvailability + 1420
	8   PhotoLibrary                        0x33d62dd9 PLNotifyImagePickerOfMediaAvailability + 80
	9   PhotoLibrary                        0x33d7253f -[PLUIAlbumViewController albumView:didTapPhotoAtIndex:] + 250
	10  PhotoLibrary                        0x33d2d78d -[PLAlbumView _tapGesture:] + 216
	11  CoreFoundation                      0x36595f03 -[NSObject(NSObject) performSelector:withObject:] + 22
	12  UIKit                               0x354a4f93 -[UIGestureRecognizer _updateGestureWithEvent:] + 562
	13  UIKit                               0x354a4d57 -[UIGestureRecognizer _delayedUpdateGesture] + 22
	14  UIKit                               0x3540fafd _UIGestureRecognizerUpdateObserver + 436
	15  UIKit                               0x35429a7f _UIGestureRecognizerUpdateGesturesFromSendEvent + 22
	16  UIKit                               0x35429881 -[UIWindow _sendGesturesForEvent:] + 712
	17  UIKit                               0x354294ab -[UIWindow sendEvent:] + 66
	18  UIKit                               0x35412313 -[UIApplication sendEvent:] + 298
	19  UIKit                               0x35411c53 _UIApplicationHandleEvent + 5090
	20  GraphicsServices                    0x35d4ce77 PurpleEventCallback + 666
	21  CoreFoundation                      0x365ffa97 __CFRUNLOOP_IS_CALLING_OUT_TO_A_SOURCE1_PERFORM_FUNCTION__ + 26
	22  CoreFoundation                      0x3660183f __CFRunLoopDoSource1 + 166
	23  CoreFoundation                      0x3660260d __CFRunLoopRun + 520
	24  CoreFoundation                      0x36592ec3 CFRunLoopRunSpecific + 230
	25  CoreFoundation                      0x36592dcb CFRunLoopRunInMode + 58
	26  GraphicsServices                    0x35d4c41f GSEventRunModal + 114
	27  GraphicsServices                    0x35d4c4cb GSEventRun + 62
	28  UIKit                               0x3543cd69 -[UIApplication _run] + 404
	29  UIKit                               0x3543a807 UIApplicationMain + 670
	30  Test                      0x000a7ca3 main + 78
	31  Test                       0x00002f1c start + 52
)
terminate called after throwing an instance of 'NSException'

Posted 5 months ago #

knightkrows
Member

first of all it is a static method.
You copy this method to any file say "AppDelegate.m"

Now call it like this:
new2 = [AppDelegate image:imageF fillSize:CGSizeMake(300,300)];

Thanks,

Posted 5 months ago #

RSS feed for this topic

12 Next »

Reply »

You must log in to post.