Cocos2d : scale layer to a sprite - iphone

I'm having a bit of a problem solving this trivially-looking feature. In my game, at some point in a level, I stop the main game loop and want to zoom to the player sprite. The player sprite is added to a layer that contains this loop and run the code to zoom to this player.
It looks like this :
-(void) stopGameAndZoomToPlayer {
[gamePlayLoop_ invalidate];
zoomToPlayerLoop_ = [NSTimer scheduledTimerWithTimeInterval:1.0f/60.0f target:self selector:#selector(tickZoomToPlayerLoop:) userInfo:nil repeats:YES];
}
The tick method, is for now implemented like this :
-(void) tickZoomToPlayerLoop:(NSTimer*)timer {
if (self.scale > 4) {
[zoomToPlayerLoop_ invalidate];
}
[self setScale:self.scale+0.001];
CGSize winSize = [[CCDirector sharedDirector]winSize];
CGPoint targetPosition = playerSprite_.position;
float wantedX = ((winSize.width/2-targetPosition.x)/self.scale);
float wantedY = ((winSize.height/2-targetPosition.y)/self.scale);
CGPoint maximumCenter = ccp(wantedX,wantedY);
[self setPosition:maximumCenter];
}
Seems trivial right ? Yet, there's something I must be missing because the zoom, while slow, is offset vis-a-vis the player sprite. The player sprite, at the end of the tickZoomToPlayerLoop timer, appears in the top right corner of the screen ; it is not in the center (but not even centered of the top right corner of the viewport).
The way I see it, this code put the center of the main layer to the position of the player sprite. Then it scales. Actually the position shouldn't be in the zoom loop but I put it here because I'll need to handle the boundaries of the level layer, because as for now the user can see the black void of non playable zone, outside the level. Yet, even if the center of the main layer at the beginning of the loop seems to be the player sprite, when scaling, one can see it is not.
Does the scale is targeted to the center of a CCNode ? Is it offseted in any way ? Does the anchor point plays a part in the way the scaling is done ?
Some more infos :
the anchor point of the main layer is (0.5,0.5) - the default one
the position of the main layer is, at first before the timer, (0,0) - simply added when creating the scene

Scaling to my knowledge is effected by anchor points.
If all you need to do is zoom in way not use CCCamera?
[myLayer.camera setEyeX:0 eyeY:0 eyeZ:zoomValue];
You can change the eyeZ to zoom in and out.

Related

How to implement camera flyby in Cocos2d

Let's say the width of a level in my game is three times the screen width, and my player starts at the left most edge. How should I go about implementing a camera flyby starting from the right edge at the beginning of this level to scroll through the entire world so the player knows what to expect ahead?
I came across this post here http://www.cocos2d-iphone.org/forum/topic/9568 that seems to be useful, borrowed the block of code in it and put it in my GameWorldLayer, but it didn't work. I'm essentially only seeing a black screen. What's wrong? And what would be a better way of implementing this?
-(void)visit {
CGSize screenDims = [[CCDirector sharedDirector] winSizeInPixels];
CGPoint camPos = gameCamera.position;
float camZoom = gameCamera.zoom;
[[CCDirector sharedDirector] setProjection:kCCDirectorProjectionCustom];
//now set your projection
kmGLMatrixMode(KM_GL_PROJECTION);
//save current projection state
kmGLPushMatrix();
kmGLLoadIdentity();
kmMat4 orthoMat;
kmMat4OrthographicProjection(&orthoMat,
camPos.x -screenDims.width/(2*camZoom),
camPos.x +screenDims.width/(2*camZoom),
camPos.y +screenDims.height/(2*camZoom),
camPos.y -screenDims.height/(2*camZoom),
-1000,
1000);
kmGLMatrixMode(KM_GL_MODELVIEW);
kmGLLoadIdentity();
[super visit];
//put it back
kmGLMatrixMode(KM_GL_PROJECTION);
kmGLPopMatrix();
kmGLMatrixMode(KM_GL_MODELVIEW);
kmGLLoadIdentity();
}
All that is way to complicated for what you want. Position the layer at the end of the level at the beginning and then simply move it to the beginning i.e.
[layer runAction:[CCMoveTo actionWithDuration:10 position:ccp(starty, startx)]];
Where 20 is the time you want it to take for the "flyby" and the position is the start position

Cocos2D CCNode position in absolute screen coordinates

I've been looking around for a while, and I have not been able to find an answer to this for some reason. It seems simple enough, but maybe I just can't find the right function in the library.
I have a scene with a layer that contains a bunch of CCNodes with each one CCSprite in them.
During the application, I move around the position of the main layer, so that I "pan" around a camera in a way. (i.e. I translate the entire layer so that the viewport changes).
Now I want to determine the absolute position of a CCNode in screen coordinates. The position property return the position relative to the parent node, but I really would like this transformed to its actual position on screen.
Also, as an added bonus, it would be awesome if I could express this position as coordinate system where 0,0 maps to the upper left of the screen, and 1,1 maps to the lower right of the screen. (So I stay compatible with all devices)
Edit: Note that the solution should work for any hierarchy of CCNodes preferably.
Every CCNode, and descendants thereof, has a method named convertToWorldSpace:(CGPoint)p
This returns the coordinates relative to your scene.
When you have this coordinate, flip your Y-axis, as you want 0,0 to be in the top left.
CCNode * myNode = [[CCNode alloc] init];
myNode.position = CGPointMake(150.0f, 100.0f);
CCSprite * mySprite = [[CCSprite alloc] init]; // CCSprite is a descendant of CCNode
[myNode addChild: mySprite];
mySprite.position = CGPointMake(-50.0f, 50.0f);
// we now have a node with a sprite in in. On this sprite (well, maybe
// it you should attack the node to a scene) you can call convertToWorldSpace:
CGPoint worldCoord = [mySprite convertToWorldSpace: mySprite.position];
// to convert it to Y0 = top we should take the Y of the screen, and subtract the worldCoord Y
worldCoord = CGPointMake(worldCoord.x, ((CGSize)[[CCDirector sharedDirector] displaySizeInPixels]).height - worldCoord.y);
// This is dry coded so may contain an error here or there.
// Let me know if this doesn't work.
[mySprite release];
[myNode release];

Is there a way to get a position (or center) state from a unfinished UIView animation?

I have a UIView doing a simple animation. It adjusts its y position from 100 to 130 and then reverses. I want it to keep repeating so I have the repeat counter set to 999. Upon user input, I want to take the same UIView and adjust the x position. This is done by means of another UIView animation. The problem is that when the 2nd animation starts, the 1st animation (that goes from 100 to 130 in the y direction) just ends abruptly (as I read that it should). Is there any way to get the final position of the y coordinate of that UIView before it was ended? I would ideally like to have the UIView stay in the same y position that it was in while I translate the x coordinates.
Summary: UIView moves in the y direction from 100-130, reverses and repeats until user input is received. Once received, animation is cut short and UIView jumps to y=130. I would like a way to find out what the final y value was before the animation was cut short, so when new animation with x translation is used, the UIView will not jump to 130, but remain the same position it was in when the 1st animation ended.
I can't seem to see anything that would let you do that. It appears to me that once you set the animation in motion with UIView, then it (and all current state changes) are out of your hands and will only be "returned" to your control and availability once the animation is done and at the designated end point. Is this correct? Any insight would be appreciated. Thank you for your time.
You're looking for the "presentation layer".
Each UIView is rendered using a Core Animation layer, which is accessible from UIView's layer property.
CALayer has a presentationLayer method, which returns a CALayer that represents "a close approximation to the version of the layer that is currently being displayed".
So, to get the current position of your view:
CGRect currentViewFrame = [[myView.layer presentationLayer] frame];
I'm not sure if this is exactly what you want, but UIView's setAnimationBeginsFromCurrentState: used inside a beginAnimations block will cause the x animation to start wherever the y is in progress.
Perhaps for what you are trying to accomplish it would benefit to exercise a little more control over the animation. For this task I would suggestion using an NSTimer scheduled at whatever interval works best for you (1/30 to 1/60) and just adjust the UIView position every time the timer fires. This way you can always access the X and Y components of the view's position.
Something like:
- (void)timerFired:(NSTimer *)timer {
CGPoint p = view.center;
if (p.y >= 130.0) {
positiveMovement = NO;
}
else if (p.y <= 100.0) {
positiveMovement = YES;
}
if (positiveMovement)
p.y++;
else
p.y--;
view.center = p;
}
positiveMovement would just be a BOOL instance variable. You could also then just directly adjust the X value of the view's position elsewhere with user input and it would update accordingly.

CAShapeLayer path disappears after animation - need it to stay in the same place

Thanks to some help on StackOverflow, I am currently animating a path in CAShapeLayer to make a triangle that points from a moving sprite to another moving point on the screen.
Once the animation completes, the triangle disappears from the screen. I am using very short durations because this code is being fired every .1 of second for each of the sprites. The result is the red triangle tracks correctly, but it rapidly flashes or isn't there entirely. When I crank up the the duration, I can the see the triangle stay longer.
What can I do to get the triangle to stay on the screen, with it's current path (the tovalue) until the method is called again to animate from the spot to the next spot? I tried setting the removedOnCompletion and removeAllAnimations, but to no avail.
Code below:
-(void)animateConnector{
//this is the code that moves the connector from it's current point to the next point
//using animation vs. position or redrawing it
//set the newTrianglePath
newTrianglePath = CGPathCreateMutable();
CGPathMoveToPoint(newTrianglePath, nil, pointGrid.x, pointGrid.y);//start at bottom point on grid
CGPathAddLineToPoint(newTrianglePath, nil, pointBlob.x, (pointBlob.y - 10.0));//define left vertice
CGPathAddLineToPoint(newTrianglePath, nil, pointBlob.x, (pointBlob.y + 10.0));//define the right vertice
CGPathAddLineToPoint(newTrianglePath, nil, pointGrid.x, pointGrid.y);//close the path
CGPathCloseSubpath(newTrianglePath);
//NSLog(#"PointBlob.y = %f", pointBlob.y);
CABasicAnimation *connectorAnimation = [CABasicAnimation animationWithKeyPath:#"path"];`enter code here`
connectorAnimation.duration = .007; //duration need to be less than the time it takes to fire handle timer again
connectorAnimation.removedOnCompletion = NO; //trying to keep the the triangle from disappearing after the animation
connectorAnimation.fromValue = (id)trianglePath;
connectorAnimation.toValue = (id)newTrianglePath;
[shapeLayer addAnimation:connectorAnimation forKey:#"animatePath"];
//now make the newTrianglePath the old one, so the next animation starts with the new position 2.9-KC
self.trianglePath = self.newTrianglePath;
}
The issue is the fillMode on your animation. The default for fillMode is "kCAFillModeRemoved" which will remove your animation when completed.
Do this:
connectorAnimation.fillMode = kCAFillModeForwards;
This should do it.

How to rotate image around center point automatically with finger touch

On iPhone, how to implement rotating image around the center point using finger touch ?
Just like wheel, if you put finger on the iPhone screen , then move suddenly, then the image becoming rotating around center point just like the wheel, after a while, it becomes more and more slow , finally stop.
Who can help to give some pieces of codes (Object-C) or some suggest ?
I was working with a "spin the bottle"-app yesterday. On the window I have a ImageView with an bottle that's suppose to response to touches and rotate the way the user swipes his finger. I struggled to get my ImageView to rotate during the touch-events (TouchesBegan, Touchesoved, TouchesEnd). I used this code in TouchesMoved to find out the angle in witch to rotate the image.
public override void TouchesMoved (NSSet touches, UIEvent evt)
{
PointF pt = (touches.AnyObject as UITouch).LocationInView(this);
float x = pt.X - this.Center.X;
float y = pt.Y - this.Center.Y;
double ang = Math.Atan2(x,y);
// yada yada, rotate image using this.Transform
}
THIS IS IMPORTANT! When the ImageView rotates, even the x & y-coordinates changes. So touching the same area all the time would give me different values in the pt and prePt-points. After some thinking, googeling and reading I came up with an simple solution to the problem. The "SuperView"-property of the ImageView.
PointF pt = (touches.AnyObject as UITouch).LocationInView(this.SuperView);
Having that small change in place made it alot easier, no i can use the UITouch-metohs LocationInView and PreviousLocationInView and get the right x & y coordinates. Her is parts of my code.
float deltaAngle;
public override void TouchesMoved (NSSet touches, UIEvent evt)
{
PointF pt = (touches.AnyObject as UITouch).LocationInView(this.Superview);
float x = pt.X - this.Center.X;
float y = pt.Y - this.Center.Y;
float ang = float.Parse(Math.Atan2(dx,dy).ToString());
//do the rotation
if (deltaAngle == 0.0) {
deltaAngle = ang;
}
else
{
float angleDif = deltaAngle - ang;
this.Transform = CGAffineTransform.MakeRotation(angleDif);
}
}
Hope that helped someone from spending hours on how to figure out how to freaking rotate a bottle! :)
I would use the affine transformations - yuou can assign a transformation to any layer or UI element using the transform property.
You can create a rotation transform using CGAffineTransform CGAffineTransformMakeRotation( CGFloat angle) which will return a transformation that rotates an element. The default rotation should be around the centerpoint.
Be aware, the rotation is limited to 360 degrees, so if you want to rotate something more than that (say through 720 degrees) - you have to break the rotation into several sequences.
You may find this SO article useful as well.
The transform property of a view or layer can be used to rotate the image displayed within. As far as the spinning part goes, you just track the location and movement of touches in your view with touchesBegan, touchesMoved, and touchesEnded.
Use the distance and time between the touches updates to calculate a speed, and use that to set a rotational velocity. Once you start the image spinning, update the position periodically (with an NSTimer, maybe), and reduce the rotational velocity by some constant.