Add a magnifier in cocos2d games

Question

i want to add a magnifier in cocos2d game. here is what i found online: http://coffeeshopped.com/2010/03/a-simpler-magnifying-glass-loupe-view-for-the-iphone I've changed the code a bit:(since i don't want to let the loupe follow our touch)

- (id)initWithFrame:(CGRect)frame {
if ((self = [super initWithFrame:magnifier_rect])) {
    // make the circle-shape outline with a nice border.
    self.layer.borderColor = [[UIColor lightGrayColor] CGColor];
    self.layer.borderWidth = 3;
    self.layer.cornerRadius = 250;
    self.layer.masksToBounds = YES;
    touchPoint = CGPointMake(CGRectGetMidX(magnifier_rect), CGRectGetMidY(magnifier_rect));
}
return self;
}

Then i want to add it in one of my scene init method:

    loop = [[MagnifierView alloc] init];
    [loop setNeedsDisplay];
    loop.viewToMagnify = [CCDirector sharedDirector].openGLView;

    [[CCDirector sharedDirector].openGLView.superview addSubview:loop];

But the result is: the area inside the loupe is black. Also this loupe just magnify images with the same scale, how can i change it to magnify more near the center and less near the edge? (just like real magnifier) Thank you !!!

score 2 · Answer 1 · answered May 30 '11 at 15:02

2

Cocos2d draws using OpenGL, not CoreAnimation/Quartz. The CALayer you are drawing is empty, so you see nothing. You will either have to use OpenGL graphics code to perform the loupe effect or sample the pixels and alter them appropriately to achieve the magnification effect, as was done in the Christmann article referenced from the article you linked to. That code also relies on CoreAnimation/Quartz, so you will need to work out another way to get your hands on the image data you wish to magnify.

answered May 30 '11 at 15:02

Jeremy W. Sherman

35,901
5
77
111

So how? his source code is quite short, so i think it should be simple as well for cocos2d. (I am totally a noob in opengl stuff) Thank you. – OMGPOP May 30 '11 at 15:23
His source code is short because CoreAnimation and Quartz were designed for 2D graphics, and the entire iOS drawing system hooks into CoreAnimation. The code just had to rig up the graphics context appropriately and then invoke the exact same drawing code as would normally be used via `-renderLayerInContext:`. I don't know whether you can employ the same style of solution within OpenGL or not, because I too am an OpenGL n00b at this point. – Jeremy W. Sherman May 30 '11 at 16:24

score 2 · Accepted Answer · edited Sep 08 '12 at 00:18

2

Here I assume that you want to magnify the center of the screen.

You have to change dynamically size attribute to your wishes according to your app needs.

CGSize size = [[CCDirector sharedDirector] winSize];

id lens = [CCLens3D actionWithPosition:ccp(size.width/2,size.height/2) radius:240 grid:ccg(15,10) duration:0.0f]; 

[self runAction:lens];

edited Sep 08 '12 at 00:18

Richard J. Ross III

55,009
24
135
201

answered May 31 '11 at 15:01

Vijay-Apple-Dev.blogspot.com

25,682
7
67
76

EXACTLY what i want!!!Thank you so much. Can't believe cocos2d has so many cool stuff embed already. guess i will spend sometime to dig into the example codes. Cheers!!! – OMGPOP May 31 '11 at 23:06
i(we) can help u(together) more in anything about iphone , if u come to Iphone/Ipad room chatting.thanku – Vijay-Apple-Dev.blogspot.com Jun 01 '11 at 07:17
5

Buddy, this isn't a forum. Please do not use texting shorthand, like 'u', 'ur', 'i', etc, as those do not promote a professional feel which is what SO is about. I have edited your post, but refrain from this in the future. – Richard J. Ross III Sep 08 '12 at 00:19

Add a magnifier in cocos2d games

2 Answers2

Linked