Skip to main content

creating a endless parallax scrolling background in spritekit and objective c

//
//  cloneParallax.h


#import <SpriteKit/SpriteKit.h>

@interface cloneParallax : SKSpriteNode
{
    
}
-(id) initParallax:(float)PtotalWidth parallaxSpeed:(float)Pspeed parallaxY:(float)Py;
//properties
@property float PtotalWidth;
@property SKTexture *Ptexture;
@property float RXY;
@property float Pspeed;
@property float Py;
@property float clonewidth;
-(void)DrawParallax:(SKTexture*)Ptexture  scaleXY:(float)R;
-(void)DrawParallaxSprites:(NSMutableArray*)textureArray widthofSprite:(float)_width scaleXY:(float)R;
-(void) updateParallax:(CFTimeInterval)interval;
@end






//
//
//  cloneParallax.m
//  milkhunt
//
//  Created by Manish Chauhan on 26/12/13.
//  Copyright (c) 2013 skidos. All rights reserved.
//

#import "cloneParallax.h"
#import "sprite.h"
@implementation cloneParallax
{
     int numberofclones;
     SKSpriteNode *realsprite;
     sprite *realanimation;
}
-(id) initParallax:(float)PtotalWidth parallaxSpeed:(float)Pspeed parallaxY:(float)Py
{
    self=[super init];
    if(self)
    {
        
        _Py=Py;
        _PtotalWidth=PtotalWidth;
        _Pspeed=Pspeed;
    }
    return self;
}
//if you are looking for plain sprite parallax
-(void)DrawParallax:(SKTexture*)Ptexture  scaleXY:(float)R
{
    _RXY=R;
    _Ptexture=Ptexture;
    realsprite=[SKSpriteNode spriteNodeWithTexture:_Ptexture];
    _clonewidth=realsprite.size.width*_RXY;
    
    numberofclones=ceil((_PtotalWidth+_Pspeed)/realsprite.size.width);
    numberofclones++;
    [self fillParallax];
}
//if you are looking for animated sprite parallax such as water or animated clouds etc
-(void)DrawParallaxSprites:(NSMutableArray*)textureArray widthofSprite:(float)_width scaleXY:(float)R

{
    _RXY=R;
    realanimation=[[sprite alloc] init];
    
    [realanimation runAnimation:textureArray type:@"loop"];
    
    _clonewidth=_width;
    numberofclones=ceil((_PtotalWidth+_Pspeed)/_width);
    numberofclones++;
    [self fillParallaxSprites];
    
}
-(void)fillParallaxSprites
{
    for(int i=0;i<numberofclones;i++)
    {
        
        sprite *clonesprite=[realanimation copy];
        clonesprite.speed=16;
        //clonesprite.xScale=clonesprite.yScale=_RXY;
        clonesprite.position=CGPointMake(i*(_clonewidth-1), _Py);
        [self addChild:clonesprite];
    }
    
}

-(void)fillParallax
{
    
    for(int i=0;i<numberofclones;i++)
    {
        SKSpriteNode *clonesprite=[realsprite copy];
        clonesprite.anchorPoint=CGPointMake(0, 0);
        clonesprite.xScale=clonesprite.yScale=_RXY;
        clonesprite.position=CGPointMake(i*(_clonewidth), _Py);
        [self addChild:clonesprite];
        
    }
    
}
-(void) updateParallax:(CFTimeInterval)interval
{
    
    
    float oldX=(self.position.x-_Pspeed);
    float newX = (float)((int)oldX % (int)_clonewidth);
    
    self.position=CGPointMake(newX, _Py);
    
}
@end


//adding clone parallax to your main class

@implementation milkhuntStartScene
{
    cloneParallax *waterParallax;
}

    waterParallax=[[cloneParallax alloc] initParallax:1024 parallaxSpeed:2 parallaxY:30];
    
   // [waterParallax DrawParallax:your texture scaleXY:1];//for simple sprite
  //  [waterParallax DrawParallaxSprites:your texture array widthofSprite:width of each texture scaleXY:1];//for animated sprite
    
    [self addChild:waterParallax];


//update clone parallax with speed
  -(void)update:(NSTimeInterval)currentTime
{
    [waterParallax updateParallax:currentTime];
}


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" : ...