Skip to main content

adding multiple sprite animation or texture animation in a sprite using sprite kit

while working with textures animations many time you need to store multiple animation with a single sprite

for eg hero is a sprite  now hero contain different animation such as walk left , walk right ,walk  up, walk down


so here i come with a solution 

in .m file copy this code
===================================

#import <SpriteKit/SpriteKit.h>
//spriteSequence
@interface spriteSheet : SKSpriteNode
{
    //private variable no one
  
}

@property SKTexture  *startingFrame;
@property SKSpriteNode *animatedsprite;
@property SKAction   *Animation;
@property SKAction  *currentAction;
@property NSMutableArray *spritesArray;
@property NSMutableArray *frameRateArray;
@property NSMutableArray *actionKeys;
//public mehods
-(id) initSpritesheet:(NSString*)firstFrame;
-(void)addAnimation:(NSMutableArray*)frames frameRate:(float)time withKey:(NSString*)Key;
-(void)gotoAndPlay:(int)animationindex label:(NSString*)framelabel;
//for ground hero
@property float totalWidth;
//for zipline
@property float Hspeed;

//
@end




=============================.h file copy this code



#import "spriteSheet.h"
@implementation spriteSheet
-(id) initSpritesheet:(SKTexture*)firstFrame{
   
    self=[super init];
    if(self)
    {
    
         //passing rect to rectangle
         _startingFrame=firstFrame;
          [self addRefernce];
      }
    return self;
}

-(void) addRefernce
{
    //adding a reference
    _animatedsprite=[SKSpriteNode spriteNodeWithTexture:_startingFrame];
    _animatedsprite.anchorPoint=CGPointMake(0.5, 0.5);
    [self addChild:_animatedsprite];
    _spritesArray=[[NSMutableArray alloc] init];
    _frameRateArray=[[NSMutableArray alloc] init];
    _actionKeys=[[NSMutableArray alloc] init];
}
//
-(void)addAnimation:(NSMutableArray*)frames frameRate:(float)time withKey:(NSString*)Key
{
  
    [_spritesArray addObject:frames];
    [_frameRateArray addObject:[NSNumber numberWithFloat:time]];
    [_actionKeys addObject:Key];
}
-(void)gotoAndPlay:(int)animationindex label:(NSString*)framelabel;
{

    
    NSMutableArray *frames=_spritesArray[animationindex];
    float time=[_frameRateArray[animationindex] floatValue];
    NSString *key=_actionKeys[animationindex];
    _Animation = [SKAction animateWithTextures:frames timePerFrame:time resize:TRUE restore:TRUE];
    if([framelabel isEqualToString:@"loop"])
    {
        
        _currentAction = [SKAction repeatActionForever:_Animation ];
        
    }
    else if([framelabel isEqualToString:@"playonce"])
    {
        
        _currentAction=_Animation;
    }
    [_animatedsprite runAction:_currentAction  withKey:key];
   
}
-(void)removeThisAction:(int)index
{
  
    [_animatedsprite removeActionForKey:_actionKeys[index]];
}




@end


now how to add animation in ur main file 

where texture is a single frame which store first frame of our animation

 NSString  *frame =texture];
    
    _gameHero=[[herospriteSheet alloc] initSpritesheet:frame];

where textures1,textures2,textures3,textures4 are array which store textures array 

 //adding animation
    [_gameHero addAnimation:textures1 frameRate:1 withKey:@"moveright"]; //index 0
    [_gameHero addAnimation: textures2 frameRate:6 withKey:@"move up"]; //index 1
    [_gameHero addAnimation textures3 frameRate:1 withKey:@"movedown"];//index 2
    [_gameHero addAnimation: textures4 frameRate:0.5 withKey:@"moveleft"];//index 3




play a animation


  [_gameHero gotoAndPlay:0 label:@"loop"]; //plays moveright animation and loop it

  [_gameHero gotoAndPlay:3 label:@"playonce"]; //plays moveleft animation but only once


adding also a complete handler when animation is complete


 [_gameHero runAction_gameHero.currentAction completion:^{
    
       [_gameHero gotoAndPlay:0 label:@"loop"];
     }];




Comments

Popular posts from this blog

Better Memory management with PixiJS or How to manage cpu and cpu memory in PixiJS.

PixiJS is my favorite framework when i am looking for a web games specially for mobile or desktop  PixiJS is fast blazing fast and you can get a decent FPS even on older device.   so here is my optimization techniques for PixiJs 1. manage your sprites in a better way use spritesheet to reduce the draw calls create big sprite sheet which contain multiple sprites can be draw in gpu with a single draw call. use TexturePacker  https://www.codeandweb.com/texturepacker  best tool when its comes to spritesheet 2. for floating point calculation round off calculation for example let  speed = 0.75 ; let  position = 100 ; console . log ( Math . round ( speed * position )) 3. don't create very big canvas when u need a big canvas size game just try to create a small canvas and translate it. 4. its very important one managing TextureCache in memory you can get all TextureCache list by using  Object.entries(PIXI.utils.TextureCache); so even you use ap...

adding particles Effect in pixijs using https://pixijs.io/pixi-particles-editor/

adding particle in pixijs is very easy using the below tool more information can be found below https://github.com/pixijs/pixi-particles https://pixijs.io/pixi-particles-editor/ required packages  /// < reference path = "node_modules/pixi-particles/ambient.d.ts" /> import 'pixi-particles' code of particle delcare a     global variable   private emitter ?: Emitter ; const img = PIXI . Texture . from ( "./assets/images/particle.png" ); this . emitter = new Emitter ( this ,[ img ],{ "alpha" : { "start" : 0.62 , "end" : 0.39 }, "scale" : { "start" : 0.1 , "end" : 0.9 , "minimumScaleMultiplier" : 1.25 }, "color" : { "start" : "#ffff8f" , "end" : ...