How to trigger different animations from one spitesheet based on user input

cocos2d for iPhone » Programming » cocos2d support (graphics engine)

How to trigger different animations from one spitesheet based on user input

(11 posts) (6 voices)

Started 1 year ago by imrik
Latest reply from changminpak

Tags:

imrik
Member

Hello all cocos2d devs,

I'm trying to trigger different animations based on user input and can't get this to work.
First thing first - I'm new to Obj-C and Cocos2d.

I have PNG image and PLIST file created in Zwoptex. PNG contains images of knight: standing, walking and attacking. PLIST file contains former names of image files and coordinates of them.

The way I setup it inside init method:

// Set Sprite Cache - .plist will tell all about .png atlas
		CCSpriteFrameCache *KnightCache = [CCSpriteFrameCache sharedSpriteFrameCache];
		[KnightCache addSpriteFramesWithFile:@"Knight.plist"];

		// Make standing animation
		CCAnimation *knightStandingAnimation = [[CCAnimation alloc] initWithName:@"KnightStandingAnimation" delay:1/10.0];
		for ( int i=1; i < 7; ++i ) {
			// frame name format: KnightStand1.png .. KnightStand6.png
			NSString *frameName = [NSString stringWithFormat:@"KnightStand%i.png", i];
			[knightStandingAnimation addFrame:[KnightCache spriteFrameByName: frameName]];
		}

		// Make walking animation
		CCAnimation *knightWalkingAnimation = [[CCAnimation alloc] initWithName:@"KnightWalkingAnimation" delay:1/10.0];
		for ( int i=1; i < 9; ++i ) {
			// frame name format: KnightWalk1.png .. KnightWalk8.png
			NSString *frameName = [NSString stringWithFormat:@"KnightWalk%i.png", i];
			[knightWalkingAnimation addFrame:[KnightCache spriteFrameByName: frameName]];
		}

		// Make attacking animation
		CCAnimation *knightAttackingAnimation = [[CCAnimation alloc] initWithName:@"KnightAttackingAnimation" delay:1/10.0];
		for (int i=1; i < 10; ++i) {
			// frame name format: KnightAttack1.png .. KnightAttack9.png
			NSString *frameName = [NSString stringWithFormat:@"KnightAttack%i.png", i];
			[knightAttackingAnimation addFrame:[KnightCache spriteFrameByName: frameName]];
		}

		// Set KnightSprite to animate standing
		KnightSprite = [CCSprite spriteWithSpriteFrameName:@"KnightStand1.png"];

		// Set standing action
		id knightStanding = [CCRepeatForever actionWithAction:[CCAnimate actionWithAnimation:knightStandingAnimation]];
		id knightWalking = [CCRepeatForever actionWithAction:[CCAnimate actionWithAnimation:knightWalkingAnimation]];
		id knightAttacking = [CCAnimate actionWithAnimation:knightAttackingAnimation];

		// Make Knight standing
		[KnightSprite runAction:knightStanding];

		// position our knight
		KnightSprite.position = ccp(100, 150);

		// add knight to scene ( self should be a visible CCLayer or CCScene )
		[self addChild:KnightSprite];

That's the way I understand it from documentation and few (one) tutorial on animating sprites.
First I setup SpriteFrameCache with name and add to it PLIST file. PLIST file points to different frames inside big PNG file.
Then I create different animations based on frames in that frame cache.
Then I have to initialize main sprite of character with one of the frames inside frame cache.
Then I create actions that play animations
Finally I can setup initial sprite to run action, which runs animation and place it on screen (and add to layer).

Now to keep it simple, let's say I have Buttons: Walk and Attack. I want my knight to make standing animation when nothing is clicked and to perform it's animation when corresponding button is pressed. Whenever player stops pushing button knight should perform standing animation.

I'm trying to implement SneakyInput v0.2 which contains button and joy. Let's just focus on buttons.

//Implement Attack Button
		SneakyButtonSkinnedBase *atkBut = [[[SneakyButtonSkinnedBase alloc] init] autorelease];
		atkBut.position = ccp(448,32);
		atkBut.defaultSprite = [ColoredCircleSprite circleWithColor:ccc4(255, 255, 255, 128) radius:32];
		atkBut.pressSprite = [ColoredCircleSprite circleWithColor:ccc4(255, 0, 0, 255) radius:32];
		atkBut.button = [[SneakyButton alloc] initWithRect:CGRectMake(0, 0, 64, 64)];
		AttackButton = [atkBut.button retain];
		AttackButton.isToggleable = YES;
		[self addChild:atkBut];

		[self schedule:@selector(tick:) interval:1.0f/120.0f];

                //Implement Walk Button
		SneakyButtonSkinnedBase *wlkBut = [[[SneakyButtonSkinnedBase alloc] init] autorelease];
		wlkBut.position = ccp(348,32);
		wlkBut.defaultSprite = [ColoredCircleSprite circleWithColor:ccc4(255, 255, 255, 128) radius:32];
		wlkBut.pressSprite = [ColoredCircleSprite circleWithColor:ccc4(255, 0, 0, 255) radius:32];
		wlkBut.button = [[SneakyButton alloc] initWithRect:CGRectMake(0, 0, 64, 64)];
		WalkButton = [atkBut.button retain];
		WalkButton.isToggleable = YES;
		[self addChild:wlkBut];

		[self schedule:@selector(tick:) interval:1.0f/120.0f];

And I have "tick" method:

-(void)tick:(float)delta {
        // I also have joystick in my code and it's working but let's focus on buttons for now to keep it as simple as it can be
	[self applyJoystick:Joystick toNode:KnightSprite forTimeDelta:delta];
}

To make this work I have to add to .h file this code:

@class SneakyJoystick;
@class SneakyButton;

// Practice Arena Layer
@interface PracticeArena : CCLayer {
	SneakyJoystick *Joystick;
	SneakyButton *AttackButton;
        SneakyButton *WalkButton
	CCSprite *KnightSprite;
}

This is just a variation of sample code Sneaky provided. It isn't self explanatory enough for me to understand it completely.
I do understand it adds two buttons to layer and setup how they look. How they work is written inside button.m file provided (I set it up to be toggle button). I also understand that tick callback is running and listening for user input.

Here is my problem. I can't get it to work.
I know about stopAllActions
If I modify tick method to check the value of buttons it ether doesn't compile, doesn't do anything or just crashes the app.

-(void)tick:(float)delta {
	if (AttackButton.value == 1){
		[KnightSprite stopAllActions];
                [KnightSprite runAction: knightAttacking];
	}
        else {
                [KnightSprite stopAllActions];
                [KnightSprite runAction: knightStanding];
        }
	if (WalkButton.value == 1){
		[KnightSprite stopAllActions];
                [KnightSprite runAction: knightWalking];
	}
        else {
                [KnightSprite stopAllActions];
                [KnightSprite runAction: knightStanding];
        }
	[self applyJoystick:leftJoystick toNode:text forTimeDelta:delta];
}

I thnik I should add something to .h file, like this:
CCAction *knightAttacking;

But I don't know what exactly. I'm new to Obj-C and Cocos2d (and prgraming for that matter) I didn't found any tutorials or sample code about using different animations for same sprite based on user input so I work like I'm blind.

I tried to NSLog inside those ifs to see if code even gets there and console log is empty. That is strange since buttons do change color when I touch them and it is not too much changed from sample Sneaky provided.

I tried to use simple CCMenu with 2 CCMenuItems just to check if I can trigger those actions (first stopAllActions and then runAction) and this just stops running animation.

I'd really appreciate some help. I'm not asking for code (but it'd be much much much appreciated), but rather for direction, or what APIs to use, or in general how to do this. Keep in mind I'm new to all of this.

Posted 1 year ago #

MikeTron
Member

Im not sure, but maybe you had the same problem I had.
Correctme if Im wrong. you whant to call a preloaded animation and in the schedule create action with it an run on a sprite.
(All what Im going to say is what I understand so maybe Im compleatle wrong XD)
This is going to be long but lets start.

-First the spriteSheet is the one that had the content (PNG ATLAS)&(PLIST)
I saw that your sprite was added as child to self so to the scene, bu you have
to ad the sprite as child of your spritesheet and the spritesheet as child of your scene, (this is very helful for exaple when you make the hud or make rigged bodies with physics), I think that by now the grandsons of a spritesheet cant be redered.

-Well first I recomend you one thing to start first; make your actions and also your animations at class level property or in a NSMutableArray, both in your class or in a singleton class a singleton is better to manage the animations and the class level properti to manage the actions.why? well the animations are going to be the same all the time and they are not atached to a sprite when you run an action, instead the action is atached to a sprite and some times you whant to know if the action si done([action isDone]),(avoiding probles with speed user clicking ie:in an atack with a sword)

-If you what to make an NSObject class property(class level variable) you also have to ad this:
In the h. file:

@interface {
@private CCAnimation *anim;
}
@property (readwrite, retain) CCAnimation *anim;
@end

in the m. file:
after @Implementation
@Synthetize anim;

-I also think that you only have to call schedulle once for each schedulle and also I thing that a 1.0/60 interval is more than enof for almost evrything.

-If you want details on a singleton askhere or send me a PM

Posted 1 year ago #
imrik
Member

First - thank you very very much for your post.
I'm very new to cocos2d - been like a week since I started to play with it.

- "Correctme if Im wrong. you whant to call a preloaded animation and in the schedule create action with it an run on a sprite."

Umm... I'm more interested in the outcome than "to call preloaded...". I'm to new to be sure if method I've chosen is good.

I want to animate character (and in future enemies, duh) based on user input. If user moves joy to the right I want knight to be walking right, if left to be walking left (flipped animation). If player press attack button the knight should perform attack animation.
In future I plan to make knight jump, take damage, perform various special attacks (on various key combinations like forward, forward + attack button) etc.

For now I need to understand how to use different animations based on user input. I try to google something about it and can't find anything (or I find old old OLD tutorials, or 404 pages) - it either means people don't deal with it or it's so basic and intuitive no one cares to write some sample code.

I just followed this tutorial: http://www.gehacktes.net/2010/02/programming-iphone-games-with-cocos2d-part-3/
But it isn't about using different animations - it just shows how to create CCSpriteFrameCache, how to add frames to animations, how to initialize sprite and how to make it run forever single animation. Ah it also adds it to scene.

- "First the spriteSheet is the one that had the content (PNG ATLAS)&(PLIST)
I saw that your sprite was added as child to self so to the scene, bu you have
to ad the sprite as child of your spritesheet and the spritesheet as child of your scene"

I don't understand that one.
Spritesheet is the PNG file + PLIST file, and actual "content" is in CCSpriteFrameCache, right?
I "setup" sprite with one of the frames from cache with code:
CCSprite *KnightSprite = [CCSprite spriteWithSpriteFrameName:@"KnightStand1.png"];
and then I add it to the scene.
[self addChild:KnightSprite];
You advise me to do what exactly? use code like this?
[KnightCache addChild:KnightSprite];
Maybe I'm just confusing pre 0.99 "names" with post 0.99 names (all those atlas sprites, sprite sheets, sprite managers, sprite frame caches etc. - it does not help at all)

- "Well first I recomend you one thing to start first; make your actions and also your animations at class level property or in a NSMutableArray, both in your class or in a singleton class a singleton is better to manage the animations and the class level properti to manage the actions.why? well the animations are going to be the same all the time and they are not atached to a sprite when you run an action, instead the action is atached to a sprite and some times you whant to know if the action si done([action isDone]),(avoiding probles with speed user clicking ie:in an atack with a sword)"

This actually make sense, I'll try that (if I manage).

Posted 1 year ago #
MikeTron
Member

I read my post and it isnt a NSMutableArray is a NSMutableDictionary(to hold objects), Im at work right now when I get home Im going to pm some sample code from my project game is similar to yours knight with sword but in top view

Posted 1 year ago #
MikeTron
Member

I had PM you some code that can help u

Posted 1 year ago #
imrik
Member

Thank you very very much for code in PM. I study it right now, think I understand like 90% of it. That singleton stuff is new for me.

It seems I have to go back to documentation, both Obj C one and Cocos2d one. Gosh it'd be so awesome if someone'd made a tutorial on this kind of stuff.

Posted 1 year ago #
jsttesting
Member

Hi guys,

I have the exact same issue where I can load the Sprites into a Cache, but I can't seem to run or trigger a walking/jumping/idle animation upon touching the screen.

Any sample code that can be PM'ed will be greatly appreciated.

Thanks guys!

Posted 1 year ago #
adesugbaa
Member

Hi Guys,

Any sample code that can be PM'ed will be greatly appreciated.

Thanks guys!

Posted 1 year ago #

MikeTron
Member

Hi I didnt paste the code here before because Im not a good programer so Im a liltle bit shy with posting my code, but there are a couple of guys asking to PM the code, I think that it could be better if I make a player class but right now this is my code for the player.

//Here I create my spriteSheet and my sprite
		[[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile:@"Ca.plist"];		

		CCSpriteSheet *spriteSheetPlayer = [CCSpriteSheet spriteSheetWithFile:@"Ca.png"];
		[self addChild:spriteSheetPersonaje z:1 tag:kTagPersonaje];

		CCSprite *spritePlayer = [CCSprite spriteWithSpriteFrameName:@"Ca0220.png"];
                [spriteSheetPersonaje addChild:spritePersonaje z:1 tag:kTagPersonajeSprite ];

		spriteSheetPlayer.position = ccp(s.width/2,s.height/2);
//

//Here I load my animations and ad to a NSMutableArray in a singleton
for(int i = 220; i < 260; i+=5)
{
CCSpriteFrame *frame = [[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:[NSString stringWithFormat:@"Ca0%d.png",i]];
[framesCaminando addObject:frame];
}
CCAnimation *animCaminando = [CCAnimation animationWithName:@"_Caminando" delay:0.05f frames:framesCaminando];
[_aniManager.animDic setObject:animCaminando forKey:@"_Caminando"]; //HERE I SVAVE  THE ANIMATION In MY SINGLETON
//You can istead of save it ina singleton save it on a class propertie

//What I do is to make a type definition
typedef enum playerStates {
	isStanding
	isWalkingForwar
....etc
}

//In your touch method you can serch for the direction and say for example
playerState.isStanding

//in Your Schedule(GAME LOOP)

- (void) playerGameLoop: (ccTime) dT {
	CCNode*spriteSheet =[self getChildByTag:kTagPersonaje];
	CCNode*spritePlayer = [spriteSheetPersonaje getChildByTag:kTagPersonajeSprite];
	switch (playerStates)
	{
		case isStanding:
			break;
		case isWalkingForward:
			{
				if( [_aniManager.actCaminando isDone] && [_aniManager.actAtacando isDone] && [_aniManager.actCombo1 isDone])
				{
					CCAnimation *animCaminando =  [_aniManager.animDic objectForKey:@"_Caminando"];
					_aniManager.actCaminando = [CCAnimate actionWithAnimation:animCaminando restoreOriginalFrame:NO];
					[spritePersonaje runAction: _aniManager.actCaminando];
					[self avanceAvance];
				}
			}
			break;
		default:
			break;
		}

Posted 1 year ago #

Jesster
Member

MikeTron, can you explain more about how you make the animation singleton?

Thank you

Posted 1 year ago #
changminpak
Member

I created CCAnimate objects for different animations and put them into NSMutableDictionary and reused for the main character. And for enemies, I created CCAnimation objects, and created a new CCAnimate for a different enemy before running the animation. I used this for my game, Zomvader, and it worked very well.

** The code has indentations, but they are all gone when posted. Sorry. **
** Please, let me know how I can keep those indentations, then I will update the code. **

[[CCSpriteFrameCache sharedSpriteFrameCache]
addSpriteFramesWithFile:@"main_basic.plist"];

NSArray *keysArr = [NSArray arrayWithObjects:@"main_idle_", @"main_walk_",
@"main_kickR_",@"main_punchL_", @"main_punchR_",
@"main_dmg_", @"main_dying_", nil];
int numFrames[7] = { 6, 8, 8, 6, 6, 6, 6 };
float frameIntervals[7] = { 0.12, 0.10, 0.08, 0.07, 0.07, 0.12, 0.15 };

for(NSInteger idx = 0; idx < 7; idx++) {
NSMutableArray *frames = [NSMutableArray array];
float frameInterval = frameIntervals[idx];
NSString *key = (NSString*) [keysArr objectAtIndex:idx];

for(int i = 1; i <= numFrames[idx]; i++) {
NSString *fileName = [[NSString alloc] initWithFormat:@"%@%0004d.png", key, i];
CCSpriteFrame *frame = [[CCSpriteFrameCache sharedSpriteFrameCache]
spriteFrameByName:fileName];
[frames addObject:frame];
[fileName release];
}

CCAnimation *animation = [CCAnimation animationWithName:key delay:frameInterval frames:frames];

CCAnimate *animate = [[CCAnimate alloc] initWithAnimation:animation
restoreOriginalFrame:YES];
animate.tag = idx;
[self.princeAnimatesDic setObject:animate forKey:key];
[animate release];
}

--------

// actionType = kAction_Walk, for example.
NSString *key = [[NSString alloc] initWithFormat:@"main_%@_",
[actionStrArr objectAtIndex:actionType]];
CCAnimate *animate = [self.princeAnimatesDic objectForKey:key];
[key release];

CCAction *action = [CCRepeatForever actionWithAction:animate];
action.tag = actionType;
[self.princeSprite runAction:action];

Posted 1 year ago #

RSS feed for this topic

Reply

You must log in to post.