UIDynamics collision not functioning on physical iphone - iphone

I implemented UIdynamics for objects (views) bouncing around the screen. On the simulator this works flawlessly, but but when testing on an actual iphone, the boundaries don't work. I will post code if necessary but this seems to me like im missing something conceptually. Any tips or ideas?
additional details: the boundaries surround the screen and i have tested on both sizes of simulator and it works fine.
"bad" is the name of the view-- (also "screenWidth" and "screenHeight" have been defined as instance variables)
///left wall
badCollision = [[UICollisionBehavior alloc] initWithItems:#[bad]];
badCollision.collisionDelegate = self;
CGPoint pt1 = CGPointMake(0, 0);
CGPoint pt2 = CGPointMake(0, screenHeight);
[badCollision addBoundaryWithIdentifier:#"leftWall" fromPoint:pt1 toPoint:pt2];
[animator addBehavior:badCollision];
//right wall
badCollision = [[UICollisionBehavior alloc] initWithItems:#[bad]];
badCollision.collisionDelegate = self;
pt1 = CGPointMake(screenWidth, 0);
pt2 = CGPointMake(screenWidth, screenHeight);
[badCollision addBoundaryWithIdentifier:#"rightWall" fromPoint:pt1 toPoint:pt2];
[animator addBehavior:badCollision];
//top wall
badCollision = [[UICollisionBehavior alloc] initWithItems:#[bad]];
badCollision.collisionDelegate = self;
pt1 = CGPointMake(0, 0);
pt2 = CGPointMake(screenWidth, 0);
[badCollision addBoundaryWithIdentifier:#"topWall" fromPoint:pt1 toPoint:pt2];
[animator addBehavior:badCollision];
//bottom wall
badCollision = [[UICollisionBehavior alloc] initWithItems:#[bad]];
badCollision.collisionDelegate = self;
pt1 = CGPointMake(0, screenHeight);
pt2 = CGPointMake(screenWidth, screenHeight);
[badCollision addBoundaryWithIdentifier:#"bottomWall" fromPoint:pt1 toPoint:pt2];
[animator addBehavior:badCollision];
And here is what happens when "bad" hits one of the walls.
NSLog(#"Wall Hit");
UIPushBehavior *badForce = [[UIPushBehavior alloc] initWithItems:#[item] mode:UIPushBehaviorModeInstantaneous];
UIView *itemView = (UIView*)item;
itemView.backgroundColor = [UIColor redColor];
[UIView animateWithDuration:0.3 animations:^{
itemView.backgroundColor = [UIColor blueColor];
}];
int xneg = (int)drand48();
if (xneg < .51)
xneg = 1;
else
xneg = -1;
int yneg = (int)drand48();
if (yneg < .51)
yneg = 1;
else
yneg = -1;
double xSpeed = xneg*(drand48()+1)/20+.02;
double ySpeed = yneg*(drand48()+1)/20+.02;
badForce.pushDirection = CGVectorMake(xSpeed,ySpeed);
badForce.active = YES;
Not even the print statement will show in the log

You seem to be behaving like you wanted to update an existing behavior (your badForce.active = YES), but you're creating a new push behavior every time. Do one or the other. If you're going to create a new push behavior every time, you have to add it to your animator every time. If you're going to create it once, then add it to your animator once, and then just update and activate it each time.
You probably want to create one push behavior, add it once, and update it again and again:
- (void)collisionBehavior:(UICollisionBehavior *)behavior beganContactForItem:(id<UIDynamicItem>)item withBoundaryIdentifier:(id<NSCopying>)identifier atPoint:(CGPoint)p
{
NSString *wallIdentifier = (id)identifier;
NSLog(#"Wall Hit: %#", wallIdentifier);
if (!self.push) {
self.push = [[UIPushBehavior alloc] initWithItems:#[item] mode:UIPushBehaviorModeInstantaneous];
self.push.active = NO;
[self.animator addBehavior:self.push];
}
UIView *itemView = (UIView*)item;
itemView.backgroundColor = [UIColor redColor];
[UIView animateWithDuration:0.3 animations:^{
itemView.backgroundColor = [UIColor blueColor];
}];
double weight = 0.5;
double xSpeed = weight * (drand48() * 2.0 - 1.0); // rand number between -weight and weight
double ySpeed = weight * (drand48() * 2.0 - 1.0); // rand number between -weight and weight
if ([wallIdentifier isEqualToString:#"bottomWall"])
ySpeed = -fabs(ySpeed);
else if ([wallIdentifier isEqualToString:#"topWall"])
ySpeed = fabs(ySpeed);
else if ([wallIdentifier isEqualToString:#"leftWall"])
xSpeed = fabs(xSpeed);
else if ([wallIdentifier isEqualToString:#"rightWall"])
xSpeed = -fabs(xSpeed);
self.push.pushDirection = CGVectorMake(xSpeed,ySpeed);
self.push.active = YES;
}
Note, I hope you forgive me for tweaking your pushDirection algorithm, but I inferred from your creating of the four walls (rather than the much easier process of defining the boundaries of the reference view to be the collision boundary) that you wanted the push vector to vary based upon which wall you happened to collide with. The above pushes down if you hit the top wall (and vice versa) and pushes right if you hit the left wall (and vice versa). But use whatever push vector algorithm you want.
The main observation is that you either want to add one push behavior and update it again and again, or you want to just add new instantaneous push behaviors each time. But the above works on both simulator and device (and I'm honestly not clear why it worked on one and not the other for you; I don't see how your original code could have worked on either).

Related

Apply Angular Impulse

Here is my code for the player and the ball that interact with each other. What I want to do is to apply force to the ball like if my player is shooting it. I want the ball to move away from my player with force. how can I apply Impulse or force to this. I have tried many times but I am a newbie with Sprite Kit.
- (void) Player {
_Player = [SKSpriteNode spriteNodeWithImageNamed:#"player1"];
_Player.xScale = 0.09;
_Player.yScale = 0.09;
_Player.position = CGPointMake(self.size.width/4, self.size.height/2);
_Player.physicsBody = [SKPhysicsBody bodyWithRectangleOfSize:_Player.size];
_Player.physicsBody.dynamic = NO;
[self addChild:_Player];
}
- (void) TheMethodForBall {
SKSpriteNode *sprites = [SKSpriteNode spriteNodeWithImageNamed:#"ball"];
sprites.xScale = 0.19;
sprites.yScale = 0.19;
sprites.physicsBody = [SKPhysicsBody bodyWithRectangleOfSize:sprites.size];
sprites.physicsBody.dynamic = YES;
sprites.physicsBody.affectedByGravity = NO;
sprites.physicsBody.allowsRotation = YES;
sprites.physicsBody.restitution = YES;
sprites.physicsBody.angularVelocity = 4;
sprites.physicsBody.usesPreciseCollisionDetection = YES;
[self addChild:sprites];
}
I think you want to apply an impulse like a kick ?
You need the following, maybe when you touch the screen / or a button
[_myBall.physicsBody applyImpulse:CGVectorMake(somePowerX, somePowerY)];
Here is another post that will help get you started
Also, this is a good tutorial for beginners.

Drag UIView around Shape Comprised of CGMutablePaths

I have a simple oval shape (comprised of CGMutablePaths) from which I'd like the user to be able to drag an object around it. Just wondering how complicated it is to do this, do I need to know a ton of math and physics, or is there some simple built in way that will allow me to do this? IE the user drags this object around the oval, and it orbits it.
This is an interesting problem. We want to drag an object, but constrain it to lie on a CGPath. You said you have “a simple oval shape”, but that's boring. Let's do it with a figure 8. It'll look like this when we're done:
So how do we do this? Given an arbitrary point, finding the nearest point on a Bezier spline is rather complicated. Let's do it by brute force. We'll just make an array of points closely spaced along the path. The object starts out on one of those points. As we try to drag the object, we'll look at the neighboring points. If either is nearer, we'll move the object to that neighbor point.
Even getting an array of closely-spaced points along a Bezier curve is not trivial, but there is a way to get Core Graphics to do it for us. We can use CGPathCreateCopyByDashingPath with a short dash pattern. This creates a new path with many short segments. We'll take the endpoints of each segment as our array of points.
That means we need to iterate over the elements of a CGPath. The only way to iterate over the elements of a CGPath is with the CGPathApply function, which takes a callback. It would be much nicer to iterate over path elements with a block, so let's add a category to UIBezierPath. We start by creating a new project using the “Single View Application” template, with ARC enabled. We add a category:
#interface UIBezierPath (forEachElement)
- (void)forEachElement:(void (^)(CGPathElement const *element))block;
#end
The implementation is very simple. We just pass the block as the info argument of the path applier function.
#import "UIBezierPath+forEachElement.h"
typedef void (^UIBezierPath_forEachElement_Block)(CGPathElement const *element);
#implementation UIBezierPath (forEachElement)
static void applyBlockToPathElement(void *info, CGPathElement const *element) {
__unsafe_unretained UIBezierPath_forEachElement_Block block = (__bridge UIBezierPath_forEachElement_Block)info;
block(element);
}
- (void)forEachElement:(void (^)(const CGPathElement *))block {
CGPathApply(self.CGPath, (__bridge void *)block, applyBlockToPathElement);
}
#end
For this toy project, we'll do everything else in the view controller. We'll need some instance variables:
#implementation ViewController {
We need an ivar to hold the path that the object follows.
UIBezierPath *path_;
It would be nice to see the path, so we'll use a CAShapeLayer to display it. (We need to add the QuartzCore framework to our target for this to work.)
CAShapeLayer *pathLayer_;
We'll need to store the array of points-along-the-path somewhere. Let's use an NSMutableData:
NSMutableData *pathPointsData_;
We'll want a pointer to the array of points, typed as a CGPoint pointer:
CGPoint const *pathPoints_;
And we need to know how many of those points there are:
NSInteger pathPointsCount_;
For the “object”, we'll have a draggable view on the screen. I'm calling it the “handle”:
UIView *handleView_;
We need to know which of the path points the handle is currently on:
NSInteger handlePathPointIndex_;
And while the pan gesture is active, we need to keep track of where the user has tried to drag the handle:
CGPoint desiredHandleCenter_;
}
Now we have to get to work initializing all those ivars! We can create our views and layers in viewDidLoad:
- (void)viewDidLoad {
[super viewDidLoad];
[self initPathLayer];
[self initHandleView];
[self initHandlePanGestureRecognizer];
}
We create the path-displaying layer like this:
- (void)initPathLayer {
pathLayer_ = [CAShapeLayer layer];
pathLayer_.lineWidth = 1;
pathLayer_.fillColor = nil;
pathLayer_.strokeColor = [UIColor blackColor].CGColor;
pathLayer_.lineCap = kCALineCapButt;
pathLayer_.lineJoin = kCALineJoinRound;
[self.view.layer addSublayer:pathLayer_];
}
Note that we haven't set the path layer's path yet! It's too soon to know the path at this time, because my view hasn't been laid out at its final size yet.
We'll draw a red circle for the handle:
- (void)initHandleView {
handlePathPointIndex_ = 0;
CGRect rect = CGRectMake(0, 0, 30, 30);
CAShapeLayer *circleLayer = [CAShapeLayer layer];
circleLayer.fillColor = nil;
circleLayer.strokeColor = [UIColor redColor].CGColor;
circleLayer.lineWidth = 2;
circleLayer.path = [UIBezierPath bezierPathWithOvalInRect:CGRectInset(rect, circleLayer.lineWidth, circleLayer.lineWidth)].CGPath;
circleLayer.frame = rect;
handleView_ = [[UIView alloc] initWithFrame:rect];
[handleView_.layer addSublayer:circleLayer];
[self.view addSubview:handleView_];
}
Again, it's too soon to know exactly where we'll need to put the handle on screen. We'll take care of that at view layout time.
We also need to attach a pan gesture recognizer to the handle:
- (void)initHandlePanGestureRecognizer {
UIPanGestureRecognizer *recognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:#selector(handleWasPanned:)];
[handleView_ addGestureRecognizer:recognizer];
}
At view layout time, we need to create the path based on the size of the view, compute the points along the path, make the path layer show the path, and make sure the handle is on the path:
- (void)viewDidLayoutSubviews {
[super viewDidLayoutSubviews];
[self createPath];
[self createPathPoints];
[self layoutPathLayer];
[self layoutHandleView];
}
In your question, you said you're using a “simple oval shape”, but that's boring. Let's draw a nice figure 8. Figuring out what I'm doing is left as an exercise for the reader:
- (void)createPath {
CGRect bounds = self.view.bounds;
CGFloat const radius = bounds.size.height / 6;
CGFloat const offset = 2 * radius * M_SQRT1_2;
CGPoint const topCenter = CGPointMake(CGRectGetMidX(bounds), CGRectGetMidY(bounds) - offset);
CGPoint const bottomCenter = { topCenter.x, CGRectGetMidY(bounds) + offset };
path_ = [UIBezierPath bezierPath];
[path_ addArcWithCenter:topCenter radius:radius startAngle:M_PI_4 endAngle:-M_PI - M_PI_4 clockwise:NO];
[path_ addArcWithCenter:bottomCenter radius:radius startAngle:-M_PI_4 endAngle:M_PI + M_PI_4 clockwise:YES];
[path_ closePath];
}
Next we're going to want to compute the array of points along that path. We'll need a helper routine to pick out the endpoint of each path element:
static CGPoint *lastPointOfPathElement(CGPathElement const *element) {
int index;
switch (element->type) {
case kCGPathElementMoveToPoint: index = 0; break;
case kCGPathElementAddCurveToPoint: index = 2; break;
case kCGPathElementAddLineToPoint: index = 0; break;
case kCGPathElementAddQuadCurveToPoint: index = 1; break;
case kCGPathElementCloseSubpath: index = NSNotFound; break;
}
return index == NSNotFound ? 0 : &element->points[index];
}
To find the points, we need to ask Core Graphics to “dash” the path:
- (void)createPathPoints {
CGPathRef cgDashedPath = CGPathCreateCopyByDashingPath(path_.CGPath, NULL, 0, (CGFloat[]){ 1.0f, 1.0f }, 2);
UIBezierPath *dashedPath = [UIBezierPath bezierPathWithCGPath:cgDashedPath];
CGPathRelease(cgDashedPath);
It turns out that when Core Graphics dashes the path, it can create segments that slightly overlap. We'll want to eliminate those by filtering out each point that's too close to its predecessor, so we'll define a minimum inter-point distance:
static CGFloat const kMinimumDistance = 0.1f;
To do the filtering, we'll need to keep track of that predecessor:
__block CGPoint priorPoint = { HUGE_VALF, HUGE_VALF };
We need to create the NSMutableData that will hold the CGPoints:
pathPointsData_ = [[NSMutableData alloc] init];
At last we're ready to iterate over the elements of the dashed path:
[dashedPath forEachElement:^(const CGPathElement *element) {
Each path element can be a “move-to”, a “line-to”, a “quadratic-curve-to”, a “curve-to” (which is a cubic curve), or a “close-path”. All of those except close-path define a segment endpoint, which we pick up with our helper function from earlier:
CGPoint *p = lastPointOfPathElement(element);
if (!p)
return;
If the endpoint is too close to the prior point, we discard it:
if (hypotf(p->x - priorPoint.x, p->y - priorPoint.y) < kMinimumDistance)
return;
Otherwise, we append it to the data and save it as the predecessor of the next endpoint:
[pathPointsData_ appendBytes:p length:sizeof *p];
priorPoint = *p;
}];
Now we can initialize our pathPoints_ and pathPointsCount_ ivars:
pathPoints_ = (CGPoint const *)pathPointsData_.bytes;
pathPointsCount_ = pathPointsData_.length / sizeof *pathPoints_;
But we have one more point we need to filter. The very first point along the path might be too close to the very last point. If so, we'll just discard the last point by decrementing the count:
if (pathPointsCount_ > 1 && hypotf(pathPoints_[0].x - priorPoint.x, pathPoints_[0].y - priorPoint.y) < kMinimumDistance) {
pathPointsCount_ -= 1;
}
}
Blammo. Point array created. Oh yeah, we also need to update the path layer. Brace yourself:
- (void)layoutPathLayer {
pathLayer_.path = path_.CGPath;
pathLayer_.frame = self.view.bounds;
}
Now we can worry about dragging the handle around and making sure it stays on the path. The pan gesture recognizer sends this action:
- (void)handleWasPanned:(UIPanGestureRecognizer *)recognizer {
switch (recognizer.state) {
If this is the start of the pan (drag), we just want to save the starting location of the handle as its desired location:
case UIGestureRecognizerStateBegan: {
desiredHandleCenter_ = handleView_.center;
break;
}
Otherwise, we need to update the desired location based on the drag, and then slide the handle along the path toward the new desired location:
case UIGestureRecognizerStateChanged:
case UIGestureRecognizerStateEnded:
case UIGestureRecognizerStateCancelled: {
CGPoint translation = [recognizer translationInView:self.view];
desiredHandleCenter_.x += translation.x;
desiredHandleCenter_.y += translation.y;
[self moveHandleTowardPoint:desiredHandleCenter_];
break;
}
We put in a default clause so clang won't warn us about the other states that we don't care about:
default:
break;
}
Finally we reset the translation of the gesture recognizer:
[recognizer setTranslation:CGPointZero inView:self.view];
}
So how do we move the handle toward a point? We want to slide it along the path. First, we have to figure out which direction to slide it:
- (void)moveHandleTowardPoint:(CGPoint)point {
CGFloat earlierDistance = [self distanceToPoint:point ifHandleMovesByOffset:-1];
CGFloat currentDistance = [self distanceToPoint:point ifHandleMovesByOffset:0];
CGFloat laterDistance = [self distanceToPoint:point ifHandleMovesByOffset:1];
It's possible that both directions would move the handle further from the desired point, so let's bail out in that case:
if (currentDistance <= earlierDistance && currentDistance <= laterDistance)
return;
OK, so at least one of the directions will move the handle closer. Let's figure out which one:
NSInteger direction;
CGFloat distance;
if (earlierDistance < laterDistance) {
direction = -1;
distance = earlierDistance;
} else {
direction = 1;
distance = laterDistance;
}
But we've only checked the nearest neighbors of the handle's starting point. We want to slide as far as we can along the path in that direction, as long as the handle is getting closer to the desired point:
NSInteger offset = direction;
while (true) {
NSInteger nextOffset = offset + direction;
CGFloat nextDistance = [self distanceToPoint:point ifHandleMovesByOffset:nextOffset];
if (nextDistance >= distance)
break;
distance = nextDistance;
offset = nextOffset;
}
Finally, update the handle's position to our newly-discovered point:
handlePathPointIndex_ += offset;
[self layoutHandleView];
}
That just leaves the small matter of computing the distance from the handle to a point, should the handle be moved along the path by some offset. Your old buddy hypotf computes the Euclidean distance so you don't have to:
- (CGFloat)distanceToPoint:(CGPoint)point ifHandleMovesByOffset:(NSInteger)offset {
int index = [self handlePathPointIndexWithOffset:offset];
CGPoint proposedHandlePoint = pathPoints_[index];
return hypotf(point.x - proposedHandlePoint.x, point.y - proposedHandlePoint.y);
}
(You could speed things up by using squared distances to avoid the square roots that hypotf is computing.)
One more tiny detail: the index into the points array needs to wrap around in both directions. That's what we've been relying on the mysterious handlePathPointIndexWithOffset: method to do:
- (NSInteger)handlePathPointIndexWithOffset:(NSInteger)offset {
NSInteger index = handlePathPointIndex_ + offset;
while (index < 0) {
index += pathPointsCount_;
}
while (index >= pathPointsCount_) {
index -= pathPointsCount_;
}
return index;
}
#end
Fin. I've put all of the code in a gist for easy downloading. Enjoy.

iOS; How to scale UIimageView (permanently) and then move it

I've hit a wall here. I know how to move an Image using "CGAffineTransformMakeTranslation" and I also know how to scale an image using"CGAffineTransformMakeScale" but for the life of me, I can't seem to get one Image to do both of these and stay that way. It scales to the desired size for about a split second and then immediately reverts to its original size and moves to the desired location. What I need is for the image to get big, STAY big, and then move to a new location (while permanently staying its new size).
Here is what I've got going on in my .m file:
-(IBAction)PushZoomButton {
[UIWindow animateWithDuration:1.5
animations:^{
JustinFrame.transform = CGAffineTransformMakeScale(2.0, 2.0);
JustinFrame.transform = CGAffineTransformMakeTranslation(10.0, 10.0);}];
[UIWindow commitAnimations];}
Any help with this would be appreciated!
you can use CGAffineTransformConcat, for instance:
JustinFrame.transform = CGAffineTransformConcat(CGAffineTransformMakeScale(2.0, 2.0), CGAffineTransformMakeTranslation(10.0, 10.0));
You may need to adapt the translation to (5, 5) since you have doubled the scale
The second transform you set overrides the first one. You need to concat both transform actions into one, as Luis said. Another way of writing that would be:
CGAffineTransform transform = CGAffineTransformMakeScale(2.0, 2.0);
transform = CGAffineTransformTranslate(transform, 10, 10);
JustinFrame.transform = transform;
You may need to look into CoreAnimation, basically what UIView animation is controlling under the hood. If you set up a CAAnimation, then what you want to achieve is done with the fillMode property of the animation.
Here's some example code to make a UIView look like it's opening like a door (copy pasted some code I have, but perhaps you could modify it and find it useful):
- (void) pageOpenView:(UIView *)viewToOpen duration:(NSTimeInterval)duration pageTurnDirection:(PageTurnDirection) p{
// Remove existing animations before stating new animation
[viewToOpen.layer removeAllAnimations];
// Make sure view is visible
viewToOpen.hidden = NO;
// disable the view so it’s not doing anythign while animating
viewToOpen.userInteractionEnabled = NO;
float dir = p == 0 ? -1.0f : 1.0f; // for direction calculations
// create an animation to hold the page turning
CABasicAnimation *transformAnimation = [CABasicAnimation animationWithKeyPath:#"transform"];
transformAnimation.removedOnCompletion = NO;
transformAnimation.duration = duration;
transformAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
CATransform3D startTransform = CATransform3DIdentity;
if (p == NEXT_PAGE) {
// orig values
startTransform.m34 = 0.001f;
}else {
// orig values
startTransform.m34 = -0.001f;
}
// start the animation from the current state
transformAnimation.fromValue = [NSValue valueWithCATransform3D:startTransform];
// this is the basic rotation by 90 degree along the y-axis
CATransform3D endTransform = CATransform3DMakeRotation(3.141f/2.0f,
0.0f,
dir,
0.0f);
// these values control the 3D projection outlook
if (p == NEXT_PAGE) {
endTransform.m34 = 0.001f;
endTransform.m14 = -0.0015f;
}else {
endTransform.m34 = -0.001f;
endTransform.m14 = 0.0015f;
}
transformAnimation.toValue = [NSValue valueWithCATransform3D:endTransform];
// Create an animation group to hold the rotation
CAAnimationGroup *theGroup = [CAAnimationGroup animation];
// Set self as the delegate to receive notification when the animation finishes
theGroup.delegate = self;
theGroup.duration = duration;
// CAAnimation-objects support arbitrary Key-Value pairs, we add the UIView tag
// to identify the animation later when it finishes
[theGroup setValue:[NSNumber numberWithInt:[(BODBookPageView *)viewToOpen pageNum]] forKey:#"animateViewPageNum"]; //STEPHEN: We set the tag to the page number
[theGroup setValue:[NSNumber numberWithInt: p] forKey:#"PageTurnDirection"];
[theGroup setValue:[NSNumber numberWithBool:YES] forKey:#"isAnimationMidpoint"]; // i.e. is this the first half of page-turning or not?
// Here you could add other animations to the array
theGroup.animations = [NSArray arrayWithObjects:transformAnimation, nil];
theGroup.removedOnCompletion = NO; // THIS LINE AND THE LINE BELOW WERE CRUCIAL TO GET RID OF A VERY HARD TO FIND/FIX BUG.
theGroup.fillMode = kCAFillModeForwards; // THIS MEANS THE ANIMATION LAYER WILL STAY IN THE STATE THE ANIMATION ENDED IN, THEREBY PREVENTING THAT ONE FRAME FLICKER BUG.
// Add the animation group to the layer
[viewToOpen.layer addAnimation:theGroup forKey:#"flipViewOpen"];
}

Updating emitter.gravity on a CCParticleSystemQuad on touch event

I've created a simple cocos2d iPhone game that has a CCParticleSystemQuad emitter that emits particles across the scene that are shaped like leaves, to give the illusion of wind.
Right now, the wind (gravity) is blowing across the scene from right to left. I am currently stuck trying to figure out how to update the emitter.gravity to switch from (-500, 80) to (500, 80), hopefully without removing the particles that have already been drawn.
In this example, I'd like the switch to occur on a touch event that happens anywhere on the screen.
What should my touch event look like?
How do I detect a touch that happens any where on the screen?
I've also never implemented a scheduled update loop. Is this the direction I should be thinking? And I suppose a more basic question is, am I going about this the right way?
Here's the code I've got so far:
My init:
-(id) init
{
if( (self=[super init])) {
CCSprite * sky = [CCSprite spriteWithFile:#"sky.png"];
[self addChild:sky z:0 tag:1];
windDirection = -200;
[self leaveEmitters];
}
return self;
}
My leaveEmiiters function
-(void) leaveEmitters{
NSLog(#"The wind is :%i", windDirection);
CCParticleSystemQuad * emitter;
emitter = [[CCParticleSystemQuad alloc] initWithTotalParticles:100];
emitter.texture = [[CCTextureCache sharedTextureCache] addImage: #"particlesLeaves.png"];
emitter.emitterMode = kCCParticleModeGravity;
emitter.duration = -1;
emitter.gravity = ccp(windDirection, -80);
emitter.angle = 0;
emitter.angleVar = 360;
emitter.speed = 10;
emitter.speedVar = 100;
emitter.radialAccelVar = 0;
emitter.tangentialAccel = 0;
emitter.tangentialAccelVar = 0;
emitter.life = 10;
emitter.lifeVar = 0;
emitter.startSpin = 0;
emitter.startSpinVar = 360;
emitter.endSpin = 0;
emitter.endSpinVar = 720;
ccColor4F startColorVar = {255, 100, 0, 0};
ccColor4F startColor = {0, 240,0, 255};
emitter.startColor = startColor;
emitter.startColorVar = startColorVar;
emitter.endSize = emitter.startSize;
emitter.startSize = 60.0f;
emitter.emissionRate = 3;
emitter.blendAdditive = NO;
emitter.position = ccp(500,250);
[self addChild: emitter z:10];
emitter.autoRemoveOnFinish = YES;
CCParticleSystemQuad * emitter2;
emitter2 = [[CCParticleSystemQuad alloc] initWithTotalParticles:100];
emitter2.texture = [[CCTextureCache sharedTextureCache] addImage: #"particlesLeaves.png"];
emitter2.emitterMode = kCCParticleModeGravity;
emitter2.duration = -1;
emitter2.gravity = ccp(windDirection, 0);
emitter2.angle = 0;
emitter2.angleVar = 360;
emitter2.speed = 10;
emitter2.speedVar = 100;
emitter2.radialAccelVar = 0;
emitter2.tangentialAccel = 0;
emitter2.tangentialAccelVar = 0;
emitter2.life = 10;
emitter2.lifeVar = 0;
emitter2.startSpin = 0;
emitter2.startSpinVar = 360;
emitter2.endSpin = 0;
emitter2.endSpinVar = 720;
emitter2.startColor = startColor;
emitter2.endSize = emitter.startSize;
emitter2.startSize = 60.0f;
emitter2.emissionRate = 3;
emitter2.blendAdditive = NO;
emitter2.position = ccp(-500,250);
[self addChild: emitter2 z:10];
emitter2.autoRemoveOnFinish = YES;
}
And finally, my ccTouchesBegan function, which isn't working at all. Why?
-(void) ccTouchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch *touch = [touches anyObject];
CGPoint location = [touch locationInView:[touch view]];
location = [[CCDirector sharedDirector] convertToGL:location];
int x = location.x;
int y= location.y;
CCSprite * sky = (CCSprite *) [self getChildByTag:1];
sky.anchorPoint = ccp(0, 0);
CGRect skyHitBox = CGRectMake(sky.position.x, sky.position.y, 500, 500);
if (CGRectContainsPoint(skyHitBox, location)) {
NSLog(#"touch accepted: x: %i y:%i", x, y);
}
}
Any help, feedback, or suggested learning direction would be GREATLY appreciated. Thanks so much!
EDIT: I answered my own questions like 20 seconds after I posted this...
If someone wants to post their own answers, I'll leave this up for 7 more hours.
you just can keep a CCParticleSystemQuad * emitter as private instance member so you can modify emitter.gravity inside the ccTouchesBegan
i didnt get exactly what kind of wind effect you'r trying to achieve. If you want to simply switch from one 500,80 to -500,80 its pretty easy
emitter.gravity = ccp(-emitter.gravity.x, emitter.gravity.y);
If you want to change the wind direction based on witch side of the skybox you hit, with hitting the center equal no wind, and more your touch is far from the center the stronger the wind will get.
I didnt try this but should be a good starting point.
You first need to get get the touched point in skybox coordinates
CGPoint skyTouchedPoint = ccp( x - sky.position.x, y - sky.position.y)
then you can define the center point of you sky box as
CGPoint skyCenterPoint = ccp(sky.size.width/2, sky.size.height/2);
and get a vector pointing to the right side, if you touch the right half side of the skybox and pointing left if you touch the left half side of the skybox
CGPoint windDirection = ccpSub(skyTouchedPoint, skyCenterPoint);
this vector module is higher the more far from the center you touch happened, you should now increase this vector module by a factor that suites for you with
windDirection = ccpMult(windDirection, 10.f); //try different values here
now you can use only the x component of this vector if you want the wind to use always the same y (as you posted the value of 80)

How do i rotate a CALayer around a diagonal line?

I'm trying to implement a flip animation to be used in board game like iPhone-application. The animation is supposed to look like a game piece that rotates and changes to the color of its back (kind of like an Reversi piece). I've managed to create an animation that flips the piece around its orthogonal axis, but when I try to flip it around a diagonal axis by changing the rotation around the z-axis the actual image also gets rotated (not surprisingly). Instead I would like to rotate the image "as is" around a diagonal axis.
I have tried to change layer.sublayerTransform but with no success.
Here is my current implementation. It works by doing a trick to resolve the issue of getting a mirrored image at the end of the animation. The solution is to not actually rotate the layer 180 degrees, instead it rotates it 90 degrees, changes image and then rotates it back.
Final version: Based on Lorenzos suggestion to create a discrete keyed animation and calculate the transformation matrix for each frame. This version instead tries to estimate number of "guiding" frames needed based on the layer size and then uses a linear keyed animation. This version rotates with a arbitrary angle so to rotate around diagonal line use a 45 degree angle.
Example usage:
[someclass flipLayer:layer image:image angle:M_PI/4]
Implementation:
- (void)animationDidStop:(CAAnimationGroup *)animation
finished:(BOOL)finished {
CALayer *layer = [animation valueForKey:#"layer"];
if([[animation valueForKey:#"name"] isEqual:#"fadeAnimation"]) {
/* code for another animation */
} else if([[animation valueForKey:#"name"] isEqual:#"flipAnimation"]) {
layer.contents = [animation valueForKey:#"image"];
}
[layer removeAllAnimations];
}
- (void)flipLayer:(CALayer *)layer
image:(CGImageRef)image
angle:(float)angle {
const float duration = 0.5f;
CAKeyframeAnimation *rotate = [CAKeyframeAnimation
animationWithKeyPath:#"transform"];
NSMutableArray *values = [[[NSMutableArray alloc] init] autorelease];
NSMutableArray *times = [[[NSMutableArray alloc] init] autorelease];
/* bigger layers need more "guiding" values */
int frames = MAX(layer.bounds.size.width, layer.bounds.size.height) / 2;
int i;
for (i = 0; i < frames; i++) {
/* create a scale value going from 1.0 to 0.1 to 1.0 */
float scale = MAX(fabs((float)(frames-i*2)/(frames - 1)), 0.1);
CGAffineTransform t1, t2, t3;
t1 = CGAffineTransformMakeRotation(angle);
t2 = CGAffineTransformScale(t1, scale, 1.0f);
t3 = CGAffineTransformRotate(t2, -angle);
CATransform3D trans = CATransform3DMakeAffineTransform(t3);
[values addObject:[NSValue valueWithCATransform3D:trans]];
[times addObject:[NSNumber numberWithFloat:(float)i/(frames - 1)]];
}
rotate.values = values;
rotate.keyTimes = times;
rotate.duration = duration;
rotate.calculationMode = kCAAnimationLinear;
CAKeyframeAnimation *replace = [CAKeyframeAnimation
animationWithKeyPath:#"contents"];
replace.duration = duration / 2;
replace.beginTime = duration / 2;
replace.values = [NSArray arrayWithObjects:(id)image, nil];
replace.keyTimes = [NSArray arrayWithObjects:
[NSNumber numberWithDouble:0.0f], nil];
replace.calculationMode = kCAAnimationDiscrete;
CAAnimationGroup *group = [CAAnimationGroup animation];
group.duration = duration;
group.timingFunction = [CAMediaTimingFunction
functionWithName:kCAMediaTimingFunctionLinear];
group.animations = [NSArray arrayWithObjects:rotate, replace, nil];
group.delegate = self;
group.removedOnCompletion = NO;
group.fillMode = kCAFillModeForwards;
[group setValue:#"flipAnimation" forKey:#"name"];
[group setValue:layer forKey:#"layer"];
[group setValue:(id)image forKey:#"image"];
[layer addAnimation:group forKey:nil];
}
Original code:
+ (void)flipLayer:(CALayer *)layer
toImage:(CGImageRef)image
withAngle:(double)angle {
const float duration = 0.5f;
CAKeyframeAnimation *diag = [CAKeyframeAnimation
animationWithKeyPath:#"transform.rotation.z"];
diag.duration = duration;
diag.values = [NSArray arrayWithObjects:
[NSNumber numberWithDouble:angle],
[NSNumber numberWithDouble:0.0f],
nil];
diag.keyTimes = [NSArray arrayWithObjects:
[NSNumber numberWithDouble:0.0f],
[NSNumber numberWithDouble:1.0f],
nil];
diag.calculationMode = kCAAnimationDiscrete;
CAKeyframeAnimation *flip = [CAKeyframeAnimation
animationWithKeyPath:#"transform.rotation.y"];
flip.duration = duration;
flip.values = [NSArray arrayWithObjects:
[NSNumber numberWithDouble:0.0f],
[NSNumber numberWithDouble:M_PI / 2],
[NSNumber numberWithDouble:0.0f],
nil];
flip.keyTimes = [NSArray arrayWithObjects:
[NSNumber numberWithDouble:0.0f],
[NSNumber numberWithDouble:0.5f],
[NSNumber numberWithDouble:1.0f],
nil];
flip.calculationMode = kCAAnimationLinear;
CAKeyframeAnimation *replace = [CAKeyframeAnimation
animationWithKeyPath:#"contents"];
replace.duration = duration / 2;
replace.beginTime = duration / 2;
replace.values = [NSArray arrayWithObjects:(id)image, nil];
replace.keyTimes = [NSArray arrayWithObjects:
[NSNumber numberWithDouble:0.0f], nil];
replace.calculationMode = kCAAnimationDiscrete;
CAAnimationGroup *group = [CAAnimationGroup animation];
group.removedOnCompletion = NO;
group.duration = duration;
group.timingFunction = [CAMediaTimingFunction
functionWithName:kCAMediaTimingFunctionLinear];
group.animations = [NSArray arrayWithObjects:diag, flip, replace, nil];
group.fillMode = kCAFillModeForwards;
[layer addAnimation:group forKey:nil];
}
you can fake it this way: create an affine transform that collapse the layer along it's diagonal:
A-----B B
| | /
| | -> A&D
| | /
C-----D C
change the image, and trasform the CALayer back in another animation.
This will create the illusion of the layer rotating around its diagonal.
the matrix for that should be if I remember math correctly:
0.5 0.5 0
0.5 0.5 0
0 0 1
Update:
ok, CA doen't really likes to use degenerate transforms, but you can approximate it this way:
CGAffineTransform t1 = CGAffineTransformMakeRotation(M_PI/4.0f);
CGAffineTransform t2 = CGAffineTransformScale(t1, 0.001f, 1.0f);
CGAffineTransform t3 = CGAffineTransformRotate(t2,-M_PI/4.0f);
in my tests on the simulator there still was a problem because the rotations happens faster than te translation so with a solid black square the effect was a bit weird. I suppose that if you have a centered sprite with transparent area around it the effect will be close to what expected. You can then tweak the value of the t3 matrix to see if you get a more appealing result.
after more research, it appears that one should animate it's own transition via keyframes to obtaim the maximum control of the transition itself. say you were to display this animation in a second, you should make ten matrix to be shown at each tenth of a second withouot interpolation using kCAAnimationDiscrete; those matrix can be generated via the code below:
CGAffineTransform t1 = CGAffineTransformMakeRotation(M_PI/4.0f);
CGAffineTransform t2 = CGAffineTransformScale(t1, animationStepValue, 1.0f);
CGAffineTransform t3 = CGAffineTransformRotate(t2,-M_PI/4.0f);
where animationStepValue for ech of the keyFrame is taken from this progression:
{1 0.7 0.5 0.3 0.1 0.3 0.5 0.7 1}
that is: you're generating ten different transformation matrix (actually 9), pushing them as keyframes to be shown at each tenth of a second, and then using the "don't interpolate" parameter. you can tweak the animation number for balancing smoothness and performance*
*sorry for possible errors, this last part was written without a spellchecker.
I got it solved. You probably already have a solution as well, but here is what I have found. It is quite simple really...
You can use a CABasicAnimation to do the diagonal rotation, but it needs to be the concatenation of two matrices, namely the existing matrix of the layer, plus a CATransform3DRotate. The "trick" is, in the 3DRotate you need to specify the coordinates to rotate around.
The code looks something like this:
CATransform3DConcat(theLayer.transform, CATransform3DRotate(CATransform3DIdentity, M_PI/2, -1, 1, 0));
This will make a rotation that appears as though the upper-left corner of the square is rotating around the axis Y=X, and travelling to the lower-right corner.
The code to animate looks like this:
CABasicAnimation *ani1 = [CABasicAnimation animationWithKeyPath:#"transform"];
// set self as the delegate so you can implement (void)animationDidStop:finished: to handle anything you might want to do upon completion
[ani1 setDelegate:self];
// set the duration of the animation - a float
[ani1 setDuration:dur];
// set the animation's "toValue" which MUST be wrapped in an NSValue instance (except special cases such as colors)
ani1.toValue = [NSValue valueWithCATransform3D:CATransform3DConcat(theLayer.transform, CATransform3DRotate(CATransform3DIdentity, M_PI/2, -1, 1, 0))];
// give the animation a name so you can check it in the animationDidStop:finished: method
[ani1 setValue:#"shrink" forKey:#"name"];
// finally, apply the animation
[theLayer addAnimation:ani1 forKey#"arbitraryKey"];
That's it! That code will rotate the square (theLayer) to invisibility as it travels 90-degrees and presents itself orthogonally to the screen. You can then change the color, and do the exact same animation to bring it back around. The same animation works because we are concatenating the matrices, so each time you want to rotate, just do this twice, or change M_PI/2 to M_PI.
Lastly, it should be noted, and this drove me nuts, that upon completion, the layer will snap back to its original state unless you explicitly set it to the end-animation state. This means, just before the line [theLayer addAnimation:ani1 forKey#"arbitraryKey"]; you will want to add
theLayer.transform = CATransform3DConcat(v.theSquare.transform, CATransform3DRotate(CATransform3DIdentity, M_PI/2, -1, 1, 0));
to set its value for after the animation completes. This will prevent the snapping back to original state.
Hope this helps. If not you then perhaps someone else who was banging their head against the wall like we were! :)
Cheers,
Chris
Here is a Xamarin iOS example I use to flap the corner of a square button, like a dog ear (easily ported to obj-c):
Method 1: use a rotation animation with 1 for both x and y axes (examples in Xamarin.iOS, but easily portable to obj-c):
// add to the UIView subclass you wish to rotate, where necessary
AnimateNotify(0.10, 0, UIViewAnimationOptions.CurveEaseOut | UIViewAnimationOptions.AllowUserInteraction | UIViewAnimationOptions.BeginFromCurrentState, () =>
{
// note the final 3 params indicate "rotate around x&y axes, but not z"
var transf = CATransform3D.MakeRotation(-1 * (nfloat)Math.PI / 4, 1, 1, 0);
transf.m34 = 1.0f / -500;
Layer.Transform = transf;
}, null);
Method 2: just add an x-axis rotation, and y-axis rotation to a CAAnimationGroup so they run at the same time:
// add to the UIView subclass you wish to rotate, where necessary
AnimateNotify(1.0, 0, UIViewAnimationOptions.CurveEaseOut | UIViewAnimationOptions.AllowUserInteraction | UIViewAnimationOptions.BeginFromCurrentState, () =>
{
nfloat angleTo = -1 * (nfloat)Math.PI / 4;
nfloat angleFrom = 0.0f ;
string animKey = "rotate";
// y-axis rotation
var anim = new CABasicAnimation();
anim.KeyPath = "transform.rotation.y";
anim.AutoReverses = false;
anim.Duration = 0.1f;
anim.From = new NSNumber(angleFrom);
anim.To = new NSNumber(angleTo);
// x-axis rotation
var animX = new CABasicAnimation();
animX.KeyPath = "transform.rotation.x";
animX.AutoReverses = false;
animX.Duration = 0.1f;
animX.From = new NSNumber(angleFrom);
animX.To = new NSNumber(angleTo);
// add both rotations to a group, to run simultaneously
var animGroup = new CAAnimationGroup();
animGroup.Duration = 0.1f;
animGroup.AutoReverses = false;
animGroup.Animations = new CAAnimation[] {anim, animX};
Layer.AddAnimation(animGroup, animKey);
// add perspective
var transf = CATransform3D.Identity;
transf.m34 = 1.0f / 500;
Layer.Transform = transf;
}, null);