Adding Endless parallax background in cocos2d android

Question

I am working on CoCos2d with android.I want to add an endless scrolling background to my Screen by using CCParallaxNode. I am able to add background and move it but after the completion of that move action the screen goes black. Can someone help me out?

My code is

CCParallaxNode parallaxNode;
CCSprite spacedust1;
CCSprite spacedust2;
CCSprite planetsunrise;
CCSprite galaxy;
CCSprite spacialanomaly;
CCSprite spacialanomaly2;

parallaxNode = CCParallaxNode.node();

    spacedust1 = CCSprite.sprite("bg_front_spacedust.png");
    spacedust2 = CCSprite.sprite("bg_front_spacedust.png");
    planetsunrise = CCSprite.sprite("bg_planetsunrise.png");
    galaxy = CCSprite.sprite("bg_galaxy.png");
    spacialanomaly = CCSprite.sprite("bg_spacialanomaly.png");
    spacialanomaly2 = CCSprite.sprite("bg_spacialanomaly2.png");
    // 3) Determine relative movement speeds for space dust and background
    // CGPoint cgPoint = CGPoint.ccp(0.1, 0.1);

    CGPoint dustSpeed = CGPoint.ccp(10, 10);
    CGPoint bgSpeed = CGPoint.ccp(5, 5);
    // CGPoint bgSpeed = ccp(0.05, 0.05);

    parallaxNode.addChild(spacedust1, 0, dustSpeed.x, dustSpeed.y, 0,
            winSize.height / 2);
    parallaxNode.addChild(spacedust2, 0, dustSpeed.x, dustSpeed.y,
            spacedust1.getContentSize().width, winSize.height / 2);
    parallaxNode.addChild(galaxy, -1, bgSpeed.x, bgSpeed.y, 0, 10);
    parallaxNode.addChild(planetsunrise, -1, bgSpeed.x, bgSpeed.y, 600, 5);
    parallaxNode
            .addChild(spacialanomaly, -1, bgSpeed.x, bgSpeed.y, 900, 20);
    parallaxNode.addChild(spacialanomaly2, -1, bgSpeed.x, bgSpeed.y, 1500,
            30);
    CCIntervalAction go = CCMoveBy.action(4, CGPoint.ccp(winSize.width, 0));
    CCIntervalAction goBack = go.reverse();
    CCIntervalAction seq = CCSequence.actions(go, goBack);
    CCRepeatForever action = CCRepeatForever.action(goBack);
    parallaxNode.runAction(action);

if you will get the answer then its good otherwise you can do this thing with the logic after one completion second start AND second completion first start ... it works fine for me but i'm not using the parallaxNode mode — Akarsh M, Apr 14 '13 at 18:45
Thanks for your comment. I just want to know if you are not using parallax node then how you move your background in backside?Are you simply using moveBy actions on sprite? — Rishabh Bhardwaj, Apr 15 '13 at 05:01
Have you done this work ? If yes , then which process u choose ? — , Jun 22 '13 at 09:39
below I add some line of code for move the background using parallax node . May be it will help you — Akarsh M, Jul 31 '13 at 12:36

score 7 · Accepted Answer · edited Apr 29 '14 at 05:06

I see that since not a single answer worked for you. I will provide a simple code which will help you for your parralax scrolling background.

Add this code in your game layers constructor

background1 = CCSprite.sprite("bg2.png");
background2 = CCSprite.sprite("bg2.png");

background1.setPosition(CGPoint.ccp(winSize.width*0.5f,winSize.height*0.5f));
addChild(background1);

background2.setPosition(CGPoint.ccp(winSize.width+winSize.width*0.5f,winSize.height*0.5f));
addChild(background2);

and a scroll method which is scheduled every millisecond. add this in constructor

this.schedule("scroll");

and now the scroll method.

public void scroll(float dt) {

    CGPoint pos1 = background1.getPosition();
    CGPoint pos2 = background2.getPosition();

    pos1.x -= 5.0f;
    pos2.x -= 5.0f;

    if(pos1.x <=-(winSize.width*0.5f) )
    {
        pos1.x = pos2.x + winSize.width;
    }

    if(pos2.x <=-(winSize.width*0.5f) )
    {
        pos2.x = pos1.x + winSize.width;
    }

    background1.setPosition(pos1);
    background2.setPosition(pos2);


}

mark my answer if it worked.

Thanks for your answer. It works. But my background png image doesn't become fullscreen. Could you suggest something ? — Taras Vovkovych, Jul 05 '19 at 09:22

score 1 · Answer 2 · answered May 22 '13 at 07:55

Call this method from the class Constructor. I found this trick from Example : "shotingblock-master" available on github...

private void endlessBackground() {
    // Create the two background sprites which will alternate
    _oddBackground = CCSprite.sprite("blue_background.png");
    _evenBackground = CCSprite.sprite("blue_background.png");
    // One starts dead centre and one starts exactly one screen height above
    oddBackground.setPosition(_winSize.width / 2, _winSize.height / 2);
    evenBackground.setPosition(_winSize.width / 2, _winSize.height
            + (_winSize.height / 2));
    // Schedule the scrolling action
    schedule("scroll");
    // Add sprites to the layer
    addChild(_oddBackground).addChild(_evenBackground);
}

public void scroll(float dt) {
    // move them 100*dt pixels down
    _oddBackground.setPosition(_oddBackground.getPosition().x,
            _oddBackground.getPosition().y - 150 * dt);
    _evenBackground.setPosition(_evenBackground.getPosition().x,
            _evenBackground.getPosition().y - 150 * dt);
    // reset position when they are off from view.
    if (_oddBackground.getPosition().y < -_winSize.height / 2) {
        _oddBackground.setPosition(_winSize.width / 2, _winSize.height / 2);
        _evenBackground.setPosition(_winSize.width / 2, _winSize.height
                + (_winSize.height / 2));
    }
}

}

IT works excellent in my case. May be it'll help full for you.

Thanks for your answer It is working but in my case I'll by myself by using your code and I'll tell you. — Rishabh Bhardwaj, May 22 '13 at 10:13

score 0 · Answer 3 · answered May 07 '13 at 05:24

0

try using this:

CCTexture2D *texture = CCTextureCache::sharedTextureCache()->addImage("pic.png");
ccTexParams params = {GL_LINEAR, GL_LINEAR, GL_REPEAT, GL_REPEAT};
texture->setTexParameters(&params);

CCSprite *sprite = CCSprite::spriteWithTexture(texture, CCRectMake(0, 0, 90, 90));

and make sure that The image's height and width must be power of 2.

answered May 07 '13 at 05:24

M.Tahir Ashraf

222
5
15

Thanks for your answer and sorry this code is not working in android.Your first line of code has not the same CCTextureCache class in android.Please help me out if you have any idea how to work for android – Rishabh Bhardwaj May 08 '13 at 05:18
andd what are GL_LINEAR,GL_LINEAR,GL_REPAET? – Rishabh Bhardwaj May 08 '13 at 11:13

score 0 · Answer 4 · answered May 14 '13 at 03:42

0

It looks like the CCRepeatForever action is only running it goBack, which means that it's not reversing. Try the following:

CCIntervalAction go = CCMoveBy.action(4, CGPoint.ccp(winSize.width, 0));
CCIntervalAction goBack = go.reverse();
CCIntervalAction seq = CCSequence.actions(go, goBack);
CCRepeatForever action = CCRepeatForever.action(seq); // change to seq instead of goBack
parallaxNode.runAction(action);

answered May 14 '13 at 03:42

Oleg Vaskevich

12,444
6
63
80

I think you don't get my question .I want to move my background always in backward side .I want to repeat image movement.With the above code you gave in your answer background firstly move in forward then in backward and then this sequence repeated forever.I want something like endless parallax same as in i-phone cocos 2d. Thanks for your answer – Rishabh Bhardwaj May 14 '13 at 07:31

Akarsh M · Answer 5 · 2013-08-01T07:17:08.190

This is trick for make it happen. You can Use the large png and working on it or check the sample test code which is available in coocs2d-android library

CCSprite background = CCSprite.sprite("background.png");

// create a void node, a parent node
CCParallaxNode voidNode = CCParallaxNode.node();

// background image is moved at a ratio of 0.4x, 0.5y
voidNode.addChild(background, -1, 0.4f, 0.5f, 0, 0);

// write your own code for the parallax node 
CCIntervalAction goUp = CCMoveBy.action(4, CGPoint.make(0,-200));
CCIntervalAction goDown = goUp.reverse();
CCIntervalAction go = CCMoveBy.action(8, CGPoint.make(-1000, 0));
CCIntervalAction goBack = go.reverse();
CCIntervalAction seq = CCSequence.actions(goUp, go, goDown, goBack);
voidNode.runAction(CCRepeatForever.action(seq));

addChild(voidNode);

It's just a simple way to use the parallax but you can use your own point — Akarsh M, Aug 01 '13 at 07:42
downVoters Add your review what exactly you thing, where I am wrong ? — Akarsh M, Aug 01 '13 at 08:51

score 0 · Answer 6 · answered Jul 26 '14 at 18:04

Please check out below link for Parallax vertical endless background: http://kalpeshsantoki.blogspot.in/2014/07/create-vertical-endless-parallax.html

    CGSize winSize = CCDirector.sharedDirector().displaySize();

    //I made graphics for screen 720*1200....so I made this dynamic scale to support multiple screens
    float sX = winSize.width / 720.0f;
    float sY = winSize.height / 1200.0f;
    background = CCVerticalParallaxNode.node(sX, sY, true);

    background.addEntity(1f, "background.png", 0);
    background.addEntity(3, "road_simple.png", winSize.width / 2);
    background.addEntity(1.7f, "road_side.png", 0);
    addChild(background);

Adding Endless parallax background in cocos2d android

6 Answers6