A fast, easy to use, free, and community supported 2D game engine
I am trying (unsuccessfully) to use Chadwick Wood's "A Simpler Magnifying Glass" (http://coffeeshopped.com/2010/03/a-simpler-magnifying-glass-loupe-view-for-the-iphone) in cocos2d. Can someone point me in the right direction as to how the UIView references should instead use CCDirector references?
Thanks For Your Time!
Well there are two ways to convert this code, although it will be more work than simply changing references.
Cocos2d is based on top of OpenGL which draws in a EAGLview instead of a UIview. You could convert the OpenGL context to a CGcontext and draw that in a UIView on top of the EAGLview. But that's not recommended by apple, since it will lead to quite a performance drop. It is the easiest way though. Look here for more info.
Best way would be to use render to texture, with that method you can capture (a part) of the screen, manipulate it and display the result in a texture. Look at the examples of cocos2d to see how to use render to texture. Drawback is that you can't use the code anymore you've linked to.
EDIT also check out this link.
@araker Thanks for your help! I have been trying to pound this out for a few hours now, with no success. I have been reading the thread you pointed out and will attempt to do something with it. :)
Do you think creating sprites from the code mentioned in the thread will have a significant performance impact?
I am not dead set on the linked code, I just need a similar effect.
Again, Thank You for your assistance!
I am only taking a 100X100 chunk of the real estate. I have been successful with implementing the writing image portion and resizing the area of snapshot. I am not having any luck so far, with dynamically changing the image while dragging. Also, what would be the best practice to convert the UIImage outputImage to my CCSprite. Im also having issue with converting the points, the way it stands, my app is in landscape (typical cocos2d setup) but I get point (0,0) at the bottom right...
I am very new to the CG stuff, so be gentle.. :)
Edit..
That's weird, (0,0) should be bottom left. What did you use to test that the bottom right was (0,0)? Also what point in which coordinate system do you mean exactly?
Looking at the CCSprite class you can also use the CGContextRef instead of a image to initialize the sprite, that would be more efficient.
+ (id) spriteWithCGImage: (CGImageRef) image key:(NSString *) key
Creates an sprite with a CGImageRef and a key. The key is used by the CCTextureCache to know if a texture was already created with this CGImage. For example, a valid key is: "sprite_frame_01". If key is nil, then a new texture will be created each time by the CCTextureCache.
Blue Ether
Member
When you say you're "using landscape" does that mean that you actually set CCDirector's deviceOrientation to LandscapeLeft? Because, if not, that would explain why your origin point is at bottom right instead of bottom left.
Also, you may be interested in the CCUIViewWrapper class which I posted here:
http://www.cocos2d-iphone.org/forum/topic/6889
I wrote it to be able to position, rotate, and scale UIKit elements in Cocos2D space and using Cocos2D actions.
@araker and @Blue Ether, I have not changed the default layout for a typical build of a cocos2d project. In the rest of my app point (0,0) is the bottom left. To get the image starting at the bottom left I have to set the point to (0,480). I still have [[CCDirector sharedDirector] setDeviceOrientation:CCDeviceOrientationLandscapeLeft]; in my app delegate. I should have explained that better in my last post. I may be completely using the wrong statements to change the point at which the snapshot starts. Here is what I am using:
+(UIImage*) takeAsUIImage:(CGPoint)startPoint
{
CCDirector* director = [CCDirector sharedDirector];
//CGSize size = director.displaySize;
CGSize size = CGSizeMake(100,100);
CGPoint point = ccp(startPoint.x,startPoint.y);
//CGPoint point = [[CCDirector sharedDirector] convertToGL:location];
//Create buffer for pixels
GLuint bufferLength = size.width * size.height * 4;
GLubyte* buffer = (GLubyte*)malloc(bufferLength);
//Read Pixels from OpenGL
glReadPixels(point.x, point.y, size.width, size.height, GL_RGBA, GL_UNSIGNED_BYTE, buffer);
.
.
.the variable "startpoint" comes from my touches methods like this:
CGPoint point = [[CCDirector sharedDirector] convertToGL:location];
startPoint = point;and is later passed when my class is initiated.
I thought maybe it was because in the touches method the points are converted ' convertToGL ' .
@Blue Ether, I'll check into CCUIViewWrapper also.
Thanks to both of you!!
Here is what I have so far.
in my ToolBox class..
+(UIImage*) takeAsUIImage:(CGPoint)startPoint
{
CCDirector* director = [CCDirector sharedDirector];
CGSize size = CGSizeMake(80,80);
CGPoint point = ccp(startPoint.y,startPoint.x);
//Create buffer for pixels
GLuint bufferLength = size.width * size.height * 4;
GLubyte* buffer = (GLubyte*)malloc(bufferLength);
//Read Pixels from OpenGL
glReadPixels(point.x, point.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 iref1 = CGImageCreate(size.width, size.height, bitsPerComponent, bitsPerPixel, bytesPerRow, colorSpaceRef, bitmapInfo, provider, NULL, NO, renderingIntent);
CGImageRef maskRef = [[UIImage imageNamed:@"loopmask2.png"] CGImage];
CGImageRef overlay = [[UIImage imageNamed:@"loop.png"] CGImage];
CGImageRef mask = CGImageMaskCreate(CGImageGetWidth(maskRef),
CGImageGetHeight(maskRef),
CGImageGetBitsPerComponent(maskRef),
CGImageGetBitsPerPixel(maskRef),
CGImageGetBytesPerRow(maskRef),
CGImageGetDataProvider(maskRef),
NULL,
true);
CGImageRef iref = CGImageCreateWithMask(iref1,mask);
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);
CGContextDrawImage(context, CGRectMake(0.0f, 0.0f, size.width, size.height), overlay);
UIImage *outputImage = [UIImage imageWithCGImage:CGBitmapContextCreateImage(context)];
//Dealloc
CGDataProviderRelease(provider);
CGImageRelease(iref);
CGContextRelease(context);
free(buffer);
free(pixels);
return outputImage;
}
+(CCTexture2D*) takeAsTexture2D:(CGPoint)startPoint
{
return [[[CCTexture2D alloc] initWithImage:[ToolBox takeAsUIImage:startPoint]] autorelease];
}and how I init it..
- (void)addMag {
CCTexture2D *tempImage =[ToolBox takeAsTexture2D:currentTouchPosition];
mag = [CCSprite spriteWithTexture:tempImage];
mag.position = ccp(currentTouchPosition.x,currentTouchPosition.y + 60);
[self addChild:mag z:50];
}It shows the magnifier and overlay, however, the image rendered inside it is from the wrong position on the scene. It seems like it may be updating dynamically with the new images, but they show up inside the magnifier "stacked" on one another. I also get "bad pixel data" where the overlay image should be.
Can anyone see any obvious mistakes or changes I should make?
This has actually been fun to do, as I am learning a lot about CG stuff that I was afraid to look at before...
Thanks!!
Harv
Besides adding a sprite, you should remove the previous sprite. With this code they are all stacked together indeed on the same z-order. You could add the sprite with a tag, check if that tag is present and then remove the previous sprite.
If the image looks corrupt, there's probably something wrong with your mask. I wouldn't know what exactly though, I haven't ever used it.
@araker I do indeed remove the previous instances in my touchesMoved and then add the new one directly after that (now with tagging as you suggested) but the problem persists. The "stacking" occurs within the "magnifier area" not on my scene per se. I see the stacking as I move the magnifier about the scene very close to the initial touch position and then "stacked" in the direction of first movement. Am I some how retaining the context?
I am looking simply to show the area beneath the users finger dynamically and not necessarily magnified (yet) in an 80X80 area about 60px above the users finger as it is dragged. If I wasn't already bald, I'd be pulling my hair out.... :) Thanks Again!
Edit: While again scouring my code I had a thought...Could the stacking be occurring because it also captures the current magnifier in the original context. Like I mentioned before, I still have the point (0,0) issue so I am not capturing the exact 80X80 rect under the users finger.
- (void) ccTouchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch *myTouch = [touches anyObject];
CGPoint location = [myTouch locationInView:[myTouch view]];
CGPoint point = [[CCDirector sharedDirector] convertToGL:location];
currentTouchPosition = point;
if (mag == nil){
touchTimer = [NSTimer scheduledTimerWithTimeInterval:0.5 target:self selector:@selector(addMag) userInfo:nil repeats:NO];
}
}
- (void) ccTouchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch *myTouch = [touches anyObject];
CGPoint location = [myTouch locationInView:[myTouch view]];
CGPoint point = [[CCDirector sharedDirector] convertToGL:location];
if (mag != nil){
NSLog(@"Removing Old");
[self removeChildByTag:111 cleanup:YES];
mag = nil;
[self addMag];
}
mag.position = ccp(point.x,point.y + 60);
}
- (void) ccTouchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
if (mag != nil){
[self removeChildByTag:111 cleanup:YES];
mag = nil;
}
}
- (void)addMag {
CCTexture2D *tempImage =[ToolBox takeAsTexture2D:ccp(currentTouchPosition.x,currentTouchPosition.y)];
mag = [CCSprite spriteWithTexture:tempImage];
mag.position = ccp(currentTouchPosition.x,currentTouchPosition.y+60);
[self addChild:mag z:50 tag:111];
}
ToolBox Class:
+(UIImage*) takeAsUIImage:(CGPoint)startPoint
{
CCDirector* director = [CCDirector sharedDirector];
CGSize size = CGSizeMake(80,80);
CGPoint point1 = ccp(startPoint.x,startPoint.y);
CGPoint point = [[CCDirector sharedDirector] convertToGL:point1];
//Create buffer for pixels
GLuint bufferLength = size.width * size.height * 4;
GLubyte* buffer = (GLubyte*)malloc(bufferLength);
//Read Pixels from OpenGL
glReadPixels(point.x, point.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 iref1 = CGImageCreate(size.width, size.height, bitsPerComponent, bitsPerPixel, bytesPerRow, colorSpaceRef, bitmapInfo, provider, NULL, NO, renderingIntent);
CGImageRef maskRef = [[UIImage imageNamed:@"loopmask.png"] CGImage];
CGImageRef overlay = [[UIImage imageNamed:@"loop.png"] CGImage];
CGImageRef mask = CGImageMaskCreate(CGImageGetWidth(maskRef),
CGImageGetHeight(maskRef),
CGImageGetBitsPerComponent(maskRef),
CGImageGetBitsPerPixel(maskRef),
CGImageGetBytesPerRow(maskRef),
CGImageGetDataProvider(maskRef),
NULL,
true);
CGImageRef iref = CGImageCreateWithMask(iref1,mask);
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:
NSLog(@"P");
break;
case CCDeviceOrientationPortraitUpsideDown:
NSLog(@"PU");
CGContextRotateCTM(context, CC_DEGREES_TO_RADIANS(180));
CGContextTranslateCTM(context, -size.width, -size.height);
break;
case CCDeviceOrientationLandscapeLeft:
NSLog(@"LL");
CGContextRotateCTM(context, CC_DEGREES_TO_RADIANS(-90));
CGContextTranslateCTM(context, -size.height, 0);
break;
case CCDeviceOrientationLandscapeRight:
NSLog(@"LR");
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);
CGContextDrawImage(context, CGRectMake(0.0f, 0.0f, size.width, size.height), overlay);
UIImage *outputImage = [UIImage imageWithCGImage:CGBitmapContextCreateImage(context)];
//Dealloc
CGDataProviderRelease(provider);
CGImageRelease(iref);
CGContextRelease(context);
free(buffer);
free(pixels);
return outputImage;
}
+(CCTexture2D*) takeAsTexture2D:(CGPoint)startPoint
{
return [[[CCTexture2D alloc] initWithImage:[ToolBox takeAsUIImage:startPoint]] autorelease];
}That's all that has anything to do with the magnifier.
Thanks again for all of the time you have spent helping me!!!!
I played a bit with your code, removed the mask and the timer and got it working (in landscape left). It looks like glReadPixel needs its coordinates to be in portrait mode, that's why in landscape the bottom right looked as (0,0).
@implementation HelloWorld
@synthesize currentTouchPosition,touchTimer,mag;
+(id) scene
{
// 'scene' is an autorelease object.
CCScene *scene = [CCScene node];
// 'layer' is an autorelease object.
HelloWorld *layer = [HelloWorld node];
// add layer as a child to scene
[scene addChild: layer];
// return the scene
return scene;
}
// on "init" you need to initialize your instance
-(id) init
{
// always call "super" init
// Apple recommends to re-assign "self" with the "super" return value
if( (self=[super init] )) {
[self setIsTouchEnabled:YES];
// create and initialize a Label
CCLabel* label = [CCLabel labelWithString:@"Hello World" fontName:@"Marker Felt" fontSize:64];
// ask director the the window size
CGSize size = [[CCDirector sharedDirector] winSize];
// position the label on the center of the screen
label.position = ccp( size.width /2 , size.height/2 );
// add the label as a child to this Layer
[self addChild: label z:0];
}
return self;
}
- (void) ccTouchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch *myTouch = [touches anyObject];
CGPoint location = [myTouch locationInView:[myTouch view]];
CGPoint point = [[CCDirector sharedDirector] convertToGL:location];
currentTouchPosition = point;
[self addMag];
//touchTimer = [NSTimer scheduledTimerWithTimeInterval:0.5 target:self selector:@selector(addMag) userInfo:nil repeats:NO];
}
- (void) ccTouchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch *myTouch = [touches anyObject];
CGPoint location = [myTouch locationInView:[myTouch view]];
currentTouchPosition = [[CCDirector sharedDirector] convertToGL:location];
[self addMag];
}
- (void) ccTouchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
if ([self getChildByTag:111]!=nil ){
NSLog(@"remove");
[self removeChildByTag:111 cleanup:YES];
}
}
- (void)addMag {
if ([self getChildByTag:111]!=nil ){
NSLog(@"Removing Old");
[self removeChildByTag:111 cleanup:YES];
}
CCTexture2D *tempImage =[self takeAsTexture2D:currentTouchPosition];
CCSprite* temp = [CCSprite spriteWithTexture:tempImage];
temp.position = ccp(currentTouchPosition.x,currentTouchPosition.y+60);
[self addChild:temp z:50 tag:111];
}
-(UIImage*) takeAsUIImage:(CGPoint)startPoint
{
NSLog(@"startP %f %f",startPoint.x,startPoint.y);
CGSize displaySize = [[CCDirector sharedDirector] displaySize];
CGSize winSize = [[CCDirector sharedDirector] winSize];
CCDirector* director = [CCDirector sharedDirector];
CGSize size = CGSizeMake(80,80);
//CGPoint point1 = startPoint;
//CGPoint point = [[CCDirector sharedDirector] convertToGL:point1];
//Create buffer for pixels
GLuint bufferLength = size.width * size.height * 4;
GLubyte* buffer = (GLubyte*)malloc(bufferLength);
//Read Pixels from OpenGL
//convert landscape to portrait
CGPoint new=ccp(startPoint.y,winSize.width-startPoint.x);
glReadPixels(new.x, new.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 ([[CCDirector sharedDirector] 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];
//Dealloc
CGImageRelease(imageRef);
CGDataProviderRelease(provider);
CGImageRelease(iref);
CGColorSpaceRelease(colorSpaceRef);
CGContextRelease(context);
free(buffer);
free(pixels);
return outputImage;
}
-(CCTexture2D*) takeAsTexture2D:(CGPoint)startPoint
{
return [[[CCTexture2D alloc] initWithImage:[self takeAsUIImage:startPoint]] autorelease];
}
// on "dealloc" you need to release all your retained objects
- (void) dealloc
{
// in case you have something to dealloc, do it in this method
// in this particular example nothing needs to be released.
// cocos2d will automatically release all the children (Label)
// don't forget to call "super dealloc"
[super dealloc];
}
@endWith moving there sometimes appear two images indeed. When that happens I got the error message
'malloc: *** error for object 0x1381000: pointer being freed was not allocated
*** set a breakpoint in malloc_error_break to debug'
After setting that breakpoint I saw that it was due to an [UImage dealloc], so the system tries to release the image in the texture2d 2 times. I wouldn't know exactly where that could happen, probably in the CCTextureCache. A possible solution could be if you pass the CGImageref instead of the UIImage, like I suggested a few posts earlier.
tmd2009
Member
Hello, hm50
I viewed your post and tried your source codes.
I had the same problem that the magnifying glass does not work properly.
You said you had solved the problem by "just drawing a box".
Do you mind letting me know how you did it?
I am a new comer. I don't have an idea how to solve it.
Thank you very much
tmd
You must log in to post.