Question

How can I make such an interface with cocos2d for iphone? Cortex interface

I already made a subclass of CCSprite and override the draw

method like this:

-(void)draw {
    ccDrawCircle(CGPointMake(480/2, 320/2), 70, 0, 50000, NO);
    ccDrawCircle(CGPointMake(480/2, 320/2), 25, 0, 50000, NO);

    ccDrawLine(CGPointMake(480/2, 320/2+25), CGPointMake(480/2, 320/2+70));
    ccDrawLine(CGPointMake(480/2+25, 320/2), CGPointMake(480/2+70, 320/2));
    ccDrawLine(CGPointMake(480/2, 320/2-25), CGPointMake(480/2, 320/2-70));
    ccDrawLine(CGPointMake(480/2-25, 320/2), CGPointMake(480/2-70, 320/2));

}

The problem is that I don’t have any control over the circle (can’t set the position of it)…and i don’t know how to place text/images into these “cells”. Another problem is the touch detection..mayby just cgrects? but what if i have more than 4 cells and one cell is “rotated”?

Any ideas?

Answer 1

I think you have two options here, but I don’t recommend subclassing CCSprite, infact very rarely would recommend doing so, theres almost no need to.

In my opinion, you could do either of these to get your image.
1. Use OpenGL to draw your image.
2. Use CCSprite to draw your image. (Cleaner)

Once you have drawn it, its simply a matter of creating it when you press down on the screen.
Once you press down on the screen (or any prescribed object) I would then employ a simple trigonometric solution.
This is the algorithm I would use:

1. Press down on screen, Get the position of touch. (sourcepos) and create your cortex img
2. On Movement of finger on screen, get the position (currentpos) the angle and magnitude in relation to the original (sourcepos) touch.
3. Now, using simple angles we can install different bounds on your CCSprite using if statements. Its also a good idea to use #define kMinMagnitude X statement to ensure the user moves their finger adequately.
4. I suppose you can either execute the //Load Twitter or Load Facebook either on the movement or the cancelation of a touch. Thats entirely up to you.

(PSUDOCODE):

dx = currentpos.x - sourcepos.x
dy = currentpos.y - sourcepos.y
mag = sqrt(dx*dx + dy*dy);
ang = CC_RADIANS_TO_DEGREES(atan2f(dy/dx));

if (ang > 0 && ang < 80 && mag > kMinMagnitude) //Load Twitter 
if (ang > 80 && ang < 120 && mag > kMinMagnitude) //Load facebook