Scrolling backgrounds and parallax (code)

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

Scrolling backgrounds and parallax (code)

(39 posts) (19 voices)

Started 2 years ago by rolando
Latest reply from Tapouillo

Tags:

12 Next »

rolando
Moderator
Hi all,
I created some really small classes to help you building a scrolling layers with parallax. The code is based on some posts I found in this forum.
Feel free to modify/adapt/use/abuse :-)

The code is Public Domain

http://gist.github.com/256168

Small example of usage:
```
// main parallax node
GFFParallaxNode *voidNode = [GFFParallaxNode node];

// first background
RepeatableLayer *bg01 = [RepeatableLayer layerWithFile:@"BG01.png"];
[voidNode addChild:bg01 z:0 parallaxRatio:0.5f];
RepeatableLayer *bg02 = [RepeatableLayer layerWithFile:@"BG02.png"];
[voidNode addChild:bg02 z:1 parallaxRatio:0.8f];
RepeatableLayer *fg01 = [RepeatableLayer layerWithFile:@"FG01.png"];
[voidNode addChild:fg01 z:4 parallaxRatio:1.1f];

// run some tests
[voidNode runAction:[RepeatForever actionWithAction:[CallFunc actionWithTarget:voidNode selector:@selector(scrollTest)]]];
```
the method scrollTest just calls scroll with a fixed parameter of 0.3f. In order to move the main parallax node, you *must* call scroll and not just set the position. You might want to override setPosition: to make it work with common Move* actions.
RepeatableLayer is a Sprite subclass and GFFParallaxNode is just a CocosNode subclass.
Oh, it only works for horizontal scrollers, but with a small ammount of work, you can make it scroll vertically :-P
Posted 2 years ago #
Lam
Member

That is pretty cool. I always wanted scrolling with the added feature of parallax-ed layers and this is a nice cocos convention of doing that.

Posted 2 years ago #
riq
Key Master

Yes, nice tip.

I've just created a thread regarding tips:
http://www.cocos2d-iphone.org/forum/topic/3422

Posted 2 years ago #
MikeSz
Member

oh, that is just great :)

Riq - something like this should be in the "official" cocos, repeatable scrolled backgrounds are really useful for all the platformer game types

Posted 2 years ago #
Steve Oldmeadow
Administrator

It should be made clear to people that if you use the GL_REPEAT technique for scrolling then the scrolled images must have power of two dimensions otherwise you will see a gap.

Posted 2 years ago #
gnusma
Member

will be there an update of rolando's code for cocos 0.99.0-rc?
plz@rolando or someone else :-)

it would be great if cocos have a included and easy-one-line-code for repeating backgrounds.

Posted 2 years ago #
pwillems
Member

Hi All,

This is just what I need, but I'm struggling with an "unrecognized selector sent to instance" error on the CallFunc. I'm fairly new to iPhone dev and would really appreciate some help. Anyone?

Thanks.

Posted 1 year ago #
rolando
Moderator

make sure that the "voidNode" object responds to scrollTest or whatever method you're calling on the action. Also, this is just a test, so you might want to do the scrolling in some other fashion, maybe in the draw method or in your main game loop.

hth,
r.

Posted 1 year ago #
pwillems
Member

Wow, thanks for the VERY quick response. Going more into details, I believe that the voidNode object is being released. I say this because looking in the console, it appears the first call works and fails for all subsequent calls. Also when it fails it just says "[CCCallFunc elapsed]: unrecognized selector sent to instance 0x3c13380" without making reference to the class type of GFFParallaxNode.

This is all very confusing to me coming from the java world where memory management is all hidden.

I have made voidNode a class member rather than just declaring it in the block, but still getting the error... utterly confused :(

Posted 1 year ago #
veteranu
Member

I am experiencing the same problem with pwillems. One thing to point out is that GFFParallax code seems to work fine with v0.8.2. The problem started showing up from v0.9.0.

Posted 1 year ago #
pwillems
Member

Confirm I am using v0.9.0.

Posted 1 year ago #

veteranu
Member

I did some testing and found out that if you place an action before the CCCallFunc, making it a sequence action, then the GFFParallax works for cocos v0.9.0. This may not be the fundamental solution, but it works.

GFFParallaxNode* voidNode = [GFFParallaxNode node];
[self addChild:voidNode];

RepeatableLayer *bg01 = [RepeatableLayer layerWithFile:@"desert.png"];
RepeatableLayer *bg02 = [RepeatableLayer layerWithFile:@"128x128_User.png"];
[voidNode addChild:bg01 z:1 parallaxRatio:0.4f];
[voidNode addChild:bg02 z:2 parallaxRatio:1.0f];

id a1 = [CCMoveBy actionWithDuration:0.0f position:ccp(0,0)];
id a2 = [CCCallFunc actionWithTarget:voidNode selector:@selector(scrollTestVertically)];
id seq = [CCSequence actions:a1, a2, nil];
[voidNode runAction:[CCRepeatForever actionWithAction:seq];

Posted 1 year ago #

mack
Member

Does this code work for 0.99?

Posted 1 year ago #
mack
Member

How come there is a gap when it scrolls the next iteration of the images?

Posted 1 year ago #
Techy
Member

Here, steve posted this:
"It should be made clear to people that if you use the GL_REPEAT technique for scrolling then the scrolled images must have power of two dimensions otherwise you will see a gap."

Posted 1 year ago #
mack
Member

I don't get what is meant by that.

Posted 1 year ago #
Techy
Member

that mean the scrolled images have to be an exact square

Posted 1 year ago #
mack
Member

It's still kind of confusing. Right now my background image is 1440 x 320. So I would have to make it 1440x1440?

Posted 1 year ago #
Techy
Member

correct

Posted 1 year ago #
mack
Member

Can I just add empty space onto my 1440 x 320 and turn it into 1440 x 1440? Would I have to put the 1440x320 embedded picture on the center of the 1440 x1440 canvas?

Posted 1 year ago #
abitofcode
Moderator

I believe the dimensions can vary for width and height unless you are using PVRTC. The following post gives a little more detail on;

http://www.cocos2d-iphone.org/forum/topic/2861#post-17794

If you can get away with it, rather than use a 1440 x 512 texture (the smallest that covers the 320 width of the screen you could try 1440 x 256 and plugging the gap with a static image.

Posted 1 year ago #
Steve Oldmeadow
Administrator

http://www.cocos2d-iphone.org/wiki/doku.php/faq#what_size_can_textures_be

Posted 1 year ago #
mack
Member

I tried using 1440 x 512 and I still got the gap. If I do 1440x 256 I will lose part of my image though. I'll try 2048 x 512. If thats too big i'll try to shorten my background.

Posted 1 year ago #
mack
Member

I tried 1024 x 512 and it didn't work.

Posted 1 year ago #
mack
Member

Never mind its working, thanks a alot. I got another question regarding this scrolling method. Can I change the speed of how they scroll? Like at any given time while its scrolling I can change its speed? Also, when I do this method. My other layers disappear even though I set their z-order higher than this background layer. Any ideas what's wrong?

Posted 1 year ago #
mack
Member

Never mind, I see that the function scrollTest determines the speed. But my other layers aren't showing right.

Posted 1 year ago #
RomeoRx2
Member

hey this is awesome and works great i just had one question, can anyone point my in the right direction as to where i could find out how to add collision detection to the tilemap (so the player won't fall thru the ground or walk thru walls)

Any help or tip would be greatly appreciated

THX in advance

Posted 1 year ago #

mack
Member

This is what I have for my BackgroundLayer: CCLayer class.

-(id) init
{

	if( (self=[super init] )) {

			CGSize winSize = [[CCDirector sharedDirector] winSize];

			CCSprite *staticBackground = [CCSprite spriteWithFile:@"bg4.png"];
			staticBackground.position = ccp(winSize.width/2,winSize.height/2);
			[self addChild:staticBackground];

			GFFParallaxNode *voidNode = [GFFParallaxNode node];
			[self addChild:voidNode];

			RepeatableLayer *frontLayer = [RepeatableLayer layerWithFile:@"bg1.png"];
			RepeatableLayer *middleLayer = [RepeatableLayer layerWithFile:@"bg2.png"];
			RepeatableLayer *lastLayer = [RepeatableLayer layerWithFile:@"bg3.png"];

			[voidNode addChild:frontLayer z:3 parallaxRatio:0.25];
			[voidNode addChild:middleLayer z:2 parallaxRatio:1.5f];
			[voidNode addChild:lastLayer z:1 parallaxRatio:3.0f];

			id a1 = [CCMoveBy actionWithDuration:0.0f position:ccp(0,0)];
			id a2 = [CCCallFunc	actionWithTarget:voidNode selector:@selector(scrollTest)];
			id seq = [CCSequence actions:a1, a2, nil];
			[voidNode runAction:[CCRepeatForever	actionWithAction: seq]];
	}
	return self;
}

And this is what I have in my game play scene.

+(id) scene
{
	// 'scene' is an autorelease object.
	CCScene *scene = [CCScene node];

	// 'layer' is an autorelease object.

	HUDLayer *hud = [HUDLayer node];
	CarLayer *car = [CarLayer node];
	BackgroundLayer *background = [BackgroundLayer node];

	// add car
	[scene addChild:car z:2];

	//add HUD : displays score, life, speed meter, and time
	[scene addChild: hud z: 1];

	// add background
	[scene addChild: background z:0];

	// return the scene
	return scene;
}

Shouldn't my car and hud layer show in front of the background layer? The hud and car layers functionality works but it just won't show the images. Any ideas? Thanks. This only happens when I use the GFFParallaxNode and RepeatableLayer class but when I use CCParallaxNode and normal CCLayers it works fine.

Posted 1 year ago #

mack
Member

It started showing when I replaced all my CCSprites to RepeatableLayer. So I can't mix RepeatableLayer and CCSprites? But my CCLabels still won't show, only sprites

Posted 1 year ago #
mack
Member

All the layers of the scene can be seen if I remove the -(void) draw method of RepeatableLayer but then I cant get it to scroll without that method. It's like the z-order isn't being affected with the RepeatableLayer class. Am I doing something wrong?

Posted 1 year ago #

RSS feed for this topic

12 Next »

Reply »

You must log in to post.