Motion Tween effect ( like flash ) on iphone, maybe using cocos 2d? - ios

I thought doing a simple animation would be easy but is is taking hours and Im not getting even close to have the expected effect...
I need to simulate a simple Flash Motion Tween like for iphone/ipad using xcode
this is the desired effect: http://www.swfcabin.com/open/1340330187
I already tried setup a timer adding X position and it doens't get the same effect, my cooworkers suggested me cocos 2d to do this using actions and sprites, which might would be fine although I wouldn't like to third party frameworks, but if there is a way to do the same with cocos I would definitively use it.
Does anybody have any suggestions, I feel like it might be simpler than I thought
thanks all

If there is no troubles to you, that you will have to do it insinge OpenGL view, it is really very simple. To show some info, you need CCLabel class. To change it's position, you need CCMoveTo/CCMoveBy action, to change opacity, you need CCFadeTo/CCFadeIn/CCFadeOut actions, to make delay you need CCDelayTime. To make it all work together you need CCSpawn and CCSequence.
CCSpawn will run several actions at the same time(for example fade in and move from right to the center), CCSequence will run several actions one by one (sequence to fade in + move to center, delay for same time, sequence to fade out + move from center to the left). Then you should only schedule method, that will create labels and run actions on them. In code it will be something like
lets define full animation time
#define ANIMATION_TIME 4.f
schedule method in any place you want to start animation
[self schedule:#selector(runNextMessage) interval:ANIMATION_TIME];
it will call runNextMessage method every ANIMATION_TIME seconds
- (void) runNextMesage
{
NSString* message = //get next message
CCLabelTTF* label = [CCLabelTTF labelWithString:message
dimensions:desiredDimensionsOfTheLabel
alignment:UITextAlignmentLeft
lineBreakMode:UILineBreakModeWordWrap
fontName:#"Arial"
fontSize:20.f];
CGSize winSize = [[CCDirector sharedDirector] winSize];
// place the label out the right border
[label setPosition: ccp(winSize.width + label.contentSize.width, winSize.height / 2)];
// adding it to the screen
[self addChild:label];
ccTime spawnTime = ANIMATION_TIME / 3;
// create actions to run
id appearSpawn = [CCAction actionOne:[CCMoveTo actionWithDuration:spawnTime]
two:[CCFadeIn actionWithDuration:spawnTime]];
// create show action and disappear action
// create result sequence
id sequence = [CCSequence actions: appearSpawn, showAction, disappearAction, nil];
[label runAction: sequence];
}

Related

Cocos2d synchronise a sprite with another sprite's animation

I am trying to create a sprite animation of a character firing a gun in Cocos2d. I am struggling to find a way to instantiating and start moving the bullet sprite at the appropriate frame of the load/aim/fire animation of my character.
For example, my character goes through an 12 frame animation to fire his gun and the bullet should be released at frame 7.
Can anyone help?
Thanks in advance
Al
Here is one way of doing this, a similar scenario in a game i am developping. I want , on frame 10 of 16, to schedule an 'attackTurnAround' method (to animate damage animations, hurt on the victim, etc...). Dont waste time on 'frame notifications', sometimes a frame will be skipped, and you will end up with no notifications.
caveat : timing is key. Before getting at this point, i preload EVERYTHING that will happen in 'attackTurnAround' , namely the hurt (or dead) animation, the damage animation, the soundFx that will be heard when the sword hits on frame 10, etc .....
BattleAnimation *ba = [self attackerAttackAnination];
_attackerAttackSprite = ba.firstSprite;
[_attackerNode addChild:_attackerAttackSprite];
CCActionAnimate *anim = [CCActionAnimate actionWithAnimation:ba.animation];
id endAttack = [CCActionCallBlock actionWithBlock:^{
[self endAttack];
}];
id seq = [CCActionSequence actions:anim, endAttack, nil];
_attackerAttackSprite.visible = YES;
_attackerIdleSprite.visible = NO;
[_attackerAttackSprite runAction:seq];
[self scheduleOnce:#selector(attackTurnAround) delay:9. * ba.duration / 16.];

Cocos2d animate CCSprite width/height

Is there any way to animate CCSprite width/height in cocos2d ? I'm looking to animate the menu panel width, scaleX/scaleY property animation is not the solution for my case.
I'm not 100% sure what you want to do as there is very little data.
But you can take a look at CCMoveTo and CCScaleTo.
These will move and scale your sprite over a given time.
You can group these together (I think) to run them both at the same time.
Yes, there are a lot of animations available in cocos2d. you may want to run multiple action on a sprite sequentially or parallel on a node/sprite. For example i have a sprite and i want to scale its size, blink and then fade out to it. Then i would do
CCSPrite *mySprite = [CCSprite spriteWithFile:#"xyz.png"];
.....
CCScaleTo *scale = [CCScaleTo actionWithDuration:0.3 scaleX:20 scaleY:30];
CCBlink *blink = [CCBlink actionWithDuration:0.3 blinks:2];
CCFadeTo *fade = [CCFadeTo actionWithDuration:0.3 opacity:0];
To run all the above actions one after other:
[mySPrite runAction:[CCSequence actions:scale, blink, fade, nil]];
To run all the actions at same time:
[mySprite runAction:[CSPawn actions:scale, blink, fade, nil]];
There are a lot of action like this you implement inorder to get an animation effect. Read the cocos2d documentaion.

Slow down in iOS 7 in Cocos2D with transparent background

I've been developing a game in Cocos2D for about 3 years which utilizes a transparent background to show a UIView. The reason for this is to have the parallax background still run as Cocos2D does scene transitions.
I'm having a new issue that started when I updated to iOS 7. Slow down occurs in combination of these circumstances:
-ONLY if the parallax background's frame position has changed.
-If I destroy an enemy which emits small sprites and a particle effect.
So it's the combination of those two things and it only happens sometimes. The debug value of the frame rate does not dip when the slow down happens. If I load a new scene it goes back to normal. Sometimes when I destroy another enemy the slow down disappears as well.
I have code in my parallax UIView that runs just about every frame of in-gameplay. I summed down the issue to one line:
-(void)updateImagePosWithPos:(CGPoint)pos{ // in game
// create vel based on last currentPos minus new pos
CGPoint vel = CGPointMake(currentPos.x-pos.x, currentPos.y-pos.y);
// init variables tmpVel and tempTotalImages
CGPoint tmpVel = CGPointZero;
int tmpTotalImages = 0;
// create indexLayerArr
NSMutableArray *indexLayerArr = [NSMutableArray array];
// for every parallax layer, add the number of images horizontally minus 1 to indexLayerArr
for (int j=0; j<totalLayers; ++j){
[indexLayerArr addObject:[NSNumber numberWithInt:[[totalImagesArr objectAtIndex:j] intValue]-1]];
}
int i = 0;
for (UIImageView *imageView in self.subviews) {
CGRect tmpRect = CGRectZero;
NSMutableArray *tmpRectArr = [rectContainer objectAtIndex:imageView.tag];
float speed = 0.00;
tmpTotalImages = [[totalImagesArr objectAtIndex:imageView.tag] intValue];
speed = [[speedArr objectAtIndex:imageView.tag] floatValue];
tmpVel = CGPointMake(vel.x*speed, vel.y*speed);
i = [[indexLayerArr objectAtIndex:imageView.tag] intValue];
tmpRect = [[tmpRectArr objectAtIndex:i] CGRectValue];
if(tmpRect.origin.x - tmpVel.x > wins.width){
tmpRect.origin.x -= (tmpTotalImages)*tmpRect.size.width;
}
else if(tmpRect.origin.x - tmpVel.x < -tmpRect.size.width){
tmpRect.origin.x += (tmpTotalImages)*tmpRect.size.width;
}
tmpRect.origin.x -= tmpVel.x;
tmpRect.origin.y += tmpVel.y;
[tmpRectArr replaceObjectAtIndex:i withObject:[NSValue valueWithCGRect:tmpRect]];
imageView.frame = [[tmpRectArr objectAtIndex:i] CGRectValue]; // <-- slow down cause
i--;
[indexLayerArr replaceObjectAtIndex:imageView.tag withObject:[NSNumber numberWithInt:i]];
}
currentPos = CGPointMake(pos.x, pos.y);
}
See commented line imageView.frame = [[tmpRectArr objectAtIndex:i] CGRectValue];
So if I comment that line out, the problem will never happen. If I keep the line and as well as don't change the values of tempRect, the problem also won't happen.
It looks like there's an issue in iOS 7 in changing the UIImageView's frame position, but only sometimes. Just wondering what other alternatives could I use? Or am I doing something definitely wrong in iOS 7?
Not a solution to your problem but workarounds. I'll start with the one that's probably requires the most code changes.
You don't actually have to have a UIView in order to keep background with transitions. Instead if you implement the background entirely in cocos2d (as part of the scene), you can achieve the same effect if instead of replacing scenes you transition layers in and out. Scene transitions for the most part use the same actions that also work on nodes.
Implement the background using cocos2d nodes, and have one parent node acting as the container (ie "layer") of the background nodes. You can do one of two things with that node:
a. Edit CCDirectorIOS's code and add a reference to your background node. Update the node before all other nodes in the drawScene method, by calling visit on the background node just before [_runningScene visit].
b. When transitioning to a new scene, either remove the background node from the current scene and add it to the new scene, or create a copy of the background with all the same settings and add it to the new scene. Ensure the copy starts with the exact same state as the original. Though this won't work with most transitions due to the nature of their animation (ie move/flip/zoom).
If you need the background to animate while a transition is running, there's a simple trick. Schedule update on a non-CCNode object that has global lifetime (ie AppDelegate). Then manually send the update to all nodes that should continue to update their state during a transition, and only during a transition.
You can register updates on non-node objects like this:
[_director.scheduler scheduleUpdateForTarget:self priority:0 paused:NO];
This update method will be called even during scene transitions. Alternatively it should also be possible to continue updating nodes by changing their paused state and thus resuming scheduler and actions, either by overriding the paused property or by explicitly unpausing specific nodes when a transition occurs.

How to slow down CCMoveTo?

I have CCMoveTo action on sprite, which is moving it from one point to another. When user hits a button the sprite should slow down with ease and continue moving to target location with new speed. I have no clue how to make this happen.
Update. Actually I replaced CCMoveTo with CCMoveBy but question still same.
With the current implementation of CCEaseIn/CCEaseOut actions, you can only ease the rate of actions from and to zero. This means that if you ease CCMoveBy/CCMoveTo they will ease the movement speed from/to a standstill.
However, starting from cocos2d 2.1 CCMoveBy/CCMoveTo are stackable. With this feature you can implement a workaround that results in the effect you want.
Setup and simulataneously run two CCMoveBy actions for the sprite: actionA will have the slower movement speed that you get after the button press. actionB will have the speed corresponding to the difference of the faster speed and the slower speed.
Then, when the user presses the button, you can CCEeaseOut actionB (stop CCMoveBy, and then launch it again with the desired CCEaseOut). This will look like the sprite eases from the movement speed of actionA + actionB to the speed of actionA.
Despite this explanation, if you are implementing game controls that you want to precisely fine tune, it might be a better idea to avoid CCActions and just update the sprite position frame-by-frame by implementing custom movement code.
You can use the EaseIn/Out action to get that effect :
id action = [CCMoveTo actionWithDuration:2 position:ccp(100,100)];
id ease = [CCEaseIn actionWithAction:action rate:2];
[sprite runAction: ease];
Taken from here
You can find different types of easing to suit your needs .
To dynamically change the speed of a CCMoveBy/CCMoveTo, there is a CCSpeed action you can implement.
First, when adding the CCMoveBy action, wrap it in a CCSpeed action as follows:
CCSpeed *action = [CCSpeed actionWithAction:[CCMoveBy actionWithDuration:myDuration position:ccp(xPos,yPos)] speed:1];
action.tag = 42;
[mySprite runAction:action];
Then, when you wish to modify the speed, obtain the CCSpeed action and modify it:
CCSpeed *action = (CCSpeed*)[mySprite getActionByTag:42];
[action setSpeed:6];
CGPoint startPoint = ccp(10,100);
CGPoint endPoint = ccp(300,100);
float fastTime = 5.f;
CCSprite *sp = [CCSprite spriteWithFile:#"sprite.png"];
sp.position = ccp(10,100);
[self addChild:sp];
[sp runAction:[CCMoveTo actionWithDuration:fastTime position:endPoint]];
//on hit
float slowTime = 10.f;
[sp stopAllActions];
float newSlowTime = ccpDistance(sp.position, endPoint)*slowTime/ccpDistance(startPoint, endPoint);
[sp runAction:[CCMoveTo actionWithDuration:newSlowTime position:endPoint]];
you can replace the ccmoveto action by ccactionmoveto like:
CCActionMoveTo *mAction = [CCActionMoveTo actionWithDuration:0.2f position:_selectedSpritePos];
[_selectedSprite stopAllActions];
[_selectedSprite runAction:mAction];

background image is not properly scrolling in cocos2d

I write the code for scrolling image in background of game. Simply define two sprite and set their position.
CGSize screenSize=[[CCDirector sharedDirector]winSize];
sky1 = [CCSprite spriteWithFile:#"sky1.png"];
sky1.position=ccp(screenSize.width/2, screenSize.height/2);
[self addChild:sky1];
CCLOG(#"sky1 position width=%f height=%f",sky1.position.x,sky1.position.y);
sky2=[CCSprite spriteWithFile:#"sky2.png"];
sky2.position=ccp(screenSize.width/2, sky1.position.y+sky1.contentSize.height/2+sky2.contentSize.height/2);
[self addChild:sky2];
[self schedule:#selector(scroll:) interval:0.01f];
And write the code for scrolling in scroll method:
-(void)scroll:(ccTime)delta{
CGSize screen=[[CCDirector sharedDirector] winSize];
CCLOG(#"come from schedule method pos.y=%f",sky1.position.y);
sky1.position=ccp(sky1.position.x, sky1.position.y-1);
sky2.position=ccp(sky2.position.x, sky2.position.y-1);
if(sky1.position.y <= -([sky1 boundingBox].size.height));
{
sky1.position=ccp(sky1.position.x, sky2.position.y+[sky2 boundingBox].size.height);
CCLOG(#"COMING IN first ifin scroll mwthod position width=%f pos.y=%f",sky1.position.x,sky1.position.y);
}
if(sky2.position.y<= -[sky2 boundingBox].size.height);
{
sky2.position=ccp(sky2.position.x, sky1.position.y+[sky1 boundingBox].size.height);
CCLOG(#"coming in secnond if ");
}
}
When I remove the if conditions then it works properly for one time. I don't know what is wrong with my condition and what the hell is going on with my code.
Can anybody explain?
I'm not too sure why your code isn't working properly. One thought that pops in my head is your interval may be too short. In other words, 0.01f (1/100) is shorter than your game update speed which is most likely 0.016 (1/60). So first thing I would try is tweaking your interval to maybe 0.02f. You could also drop the interval argument from the schedule call so it just runs once every frame. I would also try dropping the ccTime argument since it isn't being used.
[self schedule:#selector(scroll)];
-(void)scroll {}
But besides all that, this is probably best handled using CCActions. This looks like a simple pair of CCMoveTo actions combined with a CCRepeatForever to get the effect you want. This is the way I would go.
EDIT: here is a bit more detail about using CCActions to accomplish this. There are multiple ways of doing the same thing, but here is one you could try:
float moveDuration = 3; // or however fast you want it to scroll
CGPoint initialPosition = ccp(screenSize.width/2, screenSize.height/2);
CGPoint dp = ccp(0, -1*sky1.contentSize.height); // how far you want it to scroll down
CCMoveBy *scrollSky1 = [CCMoveBy actionWithDuration:moveDuration position:dp];
CCMoveTo *resetSky1 = [CCMoveTo actionWithDuration:0 position:initialPosition];
CCSequence *sequence = [CCSequence actionOne:scrollSky1 two:resetSky1];
CCRepeatForever *repeat = [CCRepeatForever actionWithAction:sequence];
[sky1 runAction:repeat];

Resources