Skip to main content

creating a endless parallax in cocos2dx (best for endless games).

code hpp file


#ifndef NMBirdParallax_hpp

#define NMBirdParallax_hpp

#include "cocos2d.h"

#include "Box2D/Box2D.h"

using namespace cocos2d;

using namespace std;

class NMBirdParallax: public cocos2d::Node

{

    public:

        // Constructor private to make misuse of this class difficult.

         // Destructor declared and defined here.

        CREATE_FUNC(NMBirdParallax);

        virtual bool init();

        void drawParallax(vector<string> &backgrounds,float distanceBetween,float Speed);

        void onEnter();

        void onExit();

    NMBirdParallax();    // Constructor declared but defined in the cpp file.

    ~NMBirdParallax(){}

   

    

    void update(float dt);

       private:

    float movingVelocity;

    

       unsigned long numberofBgs;

    /*

    __block NSMutableArray *_backgrounds;

    NSInteger _numberOfImagesForBackground;

    NSTimeInterval _lastUpdateTime;

    NSTimeInterval _deltaTime;

    float _pointsPerSecondSpeed;

    BOOL _randomizeDuringRollover;

    float _min,_max;

    */

    //add background sprites which can be same or different

    Vector<Sprite*> backgroundArray;

        float _max=0;

    int totalBackgrounds;

    CC_SYNTHESIZE(float, boundWidth, BoundWidth);

    CC_SYNTHESIZE(float, boundHeight, BoundHeight);

    

};

#endif /* NMBirdParallax_hpp */






//cpp file

//11110

#include "NMBirdParallax.hpp"



NMBirdParallax::NMBirdParallax()

{

    

}


bool NMBirdParallax::init()

{

    

    if (!Node::init()) return false;

    return true;

}

//void draw parallax

void NMBirdParallax::drawParallax(vector<string> &backgrounds,float distanceBetween,float Speed)

{

    numberofBgs=backgrounds.size();

    movingVelocity=Speed;

    int index=-1;

    for (auto pname: backgrounds)

    {

        index++;

        Sprite *parallaxPart=Sprite::createWithSpriteFrameName(pname);

        parallaxPart->setPosition(((parallaxPart->getContentSize().width+distanceBetween)*index),0);

        addChild(parallaxPart);

        backgroundArray.pushBack(parallaxPart);

        _max+=parallaxPart->getContentSize().width;

       if(index==0)

       {

           setBoundWidth(parallaxPart->getContentSize().width);

           setBoundHeight(parallaxPart->getContentSize().height);

       }

        

    }

}

//

void NMBirdParallax::update(float dt)

{


    for (auto parallaxPart: backgroundArray)

    {

        parallaxPart->setPositionX(parallaxPart->getPositionX()+(dt*movingVelocity));

        if(parallaxPart->convertToWorldSpace(parallaxPart->getPosition()).x<-(parallaxPart->getContentSize().width+parallaxPart->getContentSize().width/2))

        {

              parallaxPart->setPositionX(parallaxPart->getPositionX()+_max);

        }

    }

        

}



//on enter sprite

void NMBirdParallax::onEnter()

{

    Node::onEnter();

}

//onexit sprite

void NMBirdParallax::onExit()

{

        Node::onExit();

}




how to use it 


create a instance of NMBirdParallax class


   //draw main background

    vector<string> allbg;

    allbg.push_back("part1.png");

    allbg.push_back("part2.png");

    allbg.push_back("part3.png");

    allbg.push_back("part4.png");

    allbg.push_back("part1.png");

    Parallax=NMBirdParallax::create();

    //right background

    Parallax->drawParallax(allbg, 0, -50);

    Parallax->setPosition(origin.x-Parallax->getBoundWidth()/2,origin.y+Parallax->getBoundHeight()/2);

     Parallax->setVisible(false);

   

    this->addChild(Parallax);



//move parallax inside your update function enjoy!


if(Parallax!=nullptr)

    {

        Parallax->update(dt);

    }

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