Question

I am in process of developing a small game where a space-ship travels through a layer (doh!), in some situations the spaceship comes close to an enemy, and the whole layer is zoomed in on the space-ship with the zoom level being dependent on the distance between the ship and the enemy. All of this works fine.

The main question, however, is how do I keep the zoom being centered on the space-ship?

Currently I control the zooming in the GameLayer object through the update method, here is the code:

-(void) prepareLayerZoomBetweenSpaceship{
    CGPoint mainSpaceShipPosition  = [mainSpaceShip position];
    CGPoint enemySpaceShipPosition = [enemySpaceShip position];

    float distance = powf(mainSpaceShipPosition.x - enemySpaceShipPosition.x, 2) + powf(mainSpaceShipPosition.y - enemySpaceShipPosition.y,2);
    distance = sqrtf(distance);

    /*
        Distance > 250 --> no zoom
        Distance < 100 --> maximum zoom
     */
    float myZoomLevel = 0.5f;
    if(distance < 100){ //maximum zoom in
        myZoomLevel = 1.0f;
    }else if(distance > 250){
        myZoomLevel = 0.5f;
    }else{
        myZoomLevel = 1.0f - (distance-100)*0.0033f;
    }

    [self zoomTo:myZoomLevel];
}

-(void) zoomTo:(float)zoom {
    if(zoom > 1){
        zoom = 1;
    }

    // Set the scale.
    if(self.scale != zoom){
        self.scale = zoom;
    }
}

Basically my question is: How do I zoom the layer and center it exactly between the two ships? I guess this is like a pinch zoom with two fingers!

Answer 1

Below is some code that should get it working for you. Basically you want to:

1. Update your ship positions within the parentNode‘s coordinate system
2. Figure out which axis these new positions will cause the screen will be bound by.
3. Scale and re-position the parentNode

I added some sparse comments, but let me know if you have any more questions/issues. It might be easiest to dump this in a test project first…

ivars to put in your CCLayer:

CCNode *parentNode;
CCSprite *shipA;
CCSprite *shipB;
CGPoint destA, deltaA;
CGPoint destB, deltaB;
CGPoint halfScreenSize;
CGPoint fullScreenSize;

init stuff to put in your CCLayer:

CGSize size = [[CCDirector sharedDirector] winSize];
fullScreenSize = CGPointMake(size.width, size.height);
halfScreenSize = ccpMult(fullScreenSize, .5f);
parentNode = [CCNode node];
[self addChild:parentNode];

shipA = [CCSprite spriteWithFile:@"Icon-Small.png"]; //or whatever sprite
[parentNode addChild:shipA];

shipB = [CCSprite spriteWithFile:@"Icon-Small.png"];
[parentNode addChild:shipB];

//schedules update for every frame... might not run great.
//[self schedule:@selector(updateShips:)]; 

//schedules update for 25 times a second
[self schedule:@selector(updateShips:) interval:0.04f]; 

Zoom / Center / Ship update method:

-(void)updateShips:(ccTime)timeDelta {
    //SHIP POSITION UPDATE STUFF GOES HERE
    ...

    //1st: calc aspect ratio formed by ship positions to determine bounding axis
    float shipDeltaX = fabs(shipA.position.x - shipB.position.x);
    float shipDeltaY = fabs(shipA.position.y - shipB.position.y);
    float newAspect = shipDeltaX / shipDeltaY;

    //Then: scale based off of bounding axis

    //if bound by x-axis OR deltaY is negligible
    if (newAspect > (fullScreenSize.x / fullScreenSize.y) || shipDeltaY < 1.0) { 
        parentNode.scale = fullScreenSize.x / (shipDeltaX + shipA.contentSize.width);
    } 
    else { //else: bound by y-axis or deltaX is negligible
        parentNode.scale = fullScreenSize.y / (shipDeltaY + shipA.contentSize.height);
    }


    //calculate new midpoint between ships AND apply new scale to it
    CGPoint scaledMidpoint = ccpMult(ccpMidpoint(shipA.position, shipB.position), parentNode.scale);
    //update parent node position (move it into view of screen) to scaledMidpoint
    parentNode.position = ccpSub(halfScreenSize, scaledMidpoint);
}

Also, I’m not sure how well it’ll perform with a bunch of stuff going on — but thats a separate problem!