ParallaxNode scrolling issue « cocos2d for iPhone

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

ParallaxNode scrolling issue

(28 posts) (8 voices)

Started 2 years ago by Farb
Latest reply from jp16

Tags:

Farb
Member

Hi all,

I'm having a problem porting my 0.7.3 app to 0.8.0. To scroll my game's background, I was adding sprites to a parent layer with different parallax values and changing the position of the parent layer. It appears that 0.8.0 uses a ParallaxNode and the sprites should be added to it with only the ParallaxNode itself being added to the parent layer. When I do this, the sprites positioning is completely messed up when I move the parent layer -- all the sprites seem to position themselves at the bottom left of the screen.

I've put together a sample app that demonstrates this issue. To demonstrate both scenarios, there are two method calls in ScrollingLayer.m's init method. Comment out either [self setupWithoutParallax] or [self setupWithParallax] to execute either scenario.

http://www.farbish.com/downloads/CocosTest.zip

Is there something I'm doing wrong?

->Dan

Posted 2 years ago #
Cypher
Member

I took a quick look at the code and I don't believe you are using the ParallaxNode properly. It can do all the scrolling for you. Please take a look at the ParallaxTest to see how it's done there.

Regards

Posted 2 years ago #
Farb
Member

Thanks for looking at it, Cypher. The only difference I see with what I'm doing vs. ParallaxTest is that ParallaxTest uses actions on the ParallaxNode and I'm setting the position manually. I'm purposely not using actions since in my real app I adjust the screen position to keep it centered with the player sprite and it would mean creating a lot of action objects to do so.

Posted 2 years ago #
marcotronic
Member

I think it´s a common way to deal with those parallax layers (centering the player and adjusting the layers positions according to the player´s movement.) I wonder if there is any sample code out there for this...? I´m sure that would help a lot of people (me included) :o))

So would anybody mind sharing his code snippet for this?

Thanks a lot in advance,
Marco

Posted 2 years ago #
Cypher
Member

Ahh, gotcha! I'm a newbie to Cocos2d and iPhone development, so this was my entirely uneducated attempt to help. :)

However, I did have a quick question for you on scrolling without Parallax. You setup 5 instances of your bunker at specific points and in the selector you're setting [self setPosition], is that changing the position of the camera such that the bunkers stay where they've always been but we're panning the camera to the left?

if you wanted to add random sized textures at random points (think clouds) and scroll them, would this be the same technique?

Regards

Posted 2 years ago #
Farb
Member

I appreciate the effort to assist!

The bunkers are all at fixed positions relative to their parent layer. The [self setPosition] is altering the position of the parent layer relative to the screen which, in turn, moves the bunkers. The bunkers remain at the same positions relative to the parent layer as the layer moves. I believe this is different than moving the camera (which is a different object associated with nodes).

This may not be the correct way to scroll but I've seen several examples of it being done this way and simply followed suit :-)

Hope this helps.

->Dan

Posted 2 years ago #
Farb
Member

marcotronic,

Assuming my sample code is a valid way to do things, the only thing you'd need to change is to call [self setPosition] in the layer's step: method with the position retrieved from the Sprite you want to follow. At least that's how I'm doing it :-)

Posted 2 years ago #
marcotronic
Member

Thanks, Farb. I´ll have a look at your code!
Marco

Posted 2 years ago #
PhilM
Member
Its been a while since I used a parallax node. Just took a quick look at your project.

Your not setting the parallax ratio when you add the sprites

For some reason setPosition isn't working either, but you can get around that with the positionOffset. Not sure if its a bug, if thats a limit of parallax nodes, or if something else in the project is mucking it up (I only had a quick scan). The demo project doesn't show usage of position, so perhaps thats a limitation by design.

But this worked for me:
```
// set up some objects
Sprite *s = [Sprite spriteWithFile:@"bunker1.png"];
//[s setPosition:ccp(100, 50)];
[s setAnchorPoint:ccp(0, 0)];
[pn addChild:s z:0 parallaxRatio:ccp(0.5f, 1.0f) positionOffset:ccp(0, 0)];

Sprite *s2 = [Sprite spriteWithFile:@"bunker1.png"];
//[s2 setPosition:ccp(150, 50)];
[s2 setAnchorPoint:ccp(0, 0)];
[pn addChild:s2 z:1 parallaxRatio:ccp(0.8f, 1.0f) positionOffset:ccp(150, 0)];
```
And then in your stepWithParallax tick, I changed it to, to try make it run a little smoother.
[self setPosition:ccp(self.position.x + (100 * delta), 0)];

Your also running your step at half speed, not sure if thats on purpose?

That gives a simple parallax effect, even though its a little jittery for some reason (might just be my laptop playing up), it should put you in the right direction at least.
Posted 2 years ago #
Farb
Member

PhilM,

That does help a lot. I didn't realize the setPosition was being ignored. I tried using positionOffset as you suggested and that seems to work in this simple demo. However, in my real app I'm updating the positions of the sprites constantly and that winds up creating an awful flickering effect since I'm calling the Sprite setPosition method.

What I've tried now is the following:

1. Create Layer.
2. Create ParallaxNode and add to Layer.
3. Add background images to Parallax Node.
4. Add Sprites to Layer with higher zOrder then background images.
5. Call Layer's setPosition in step method.

This causes the strange sprite flickering I mentioned above to go away, but as you noted, scrolling is horribly jumpy. I haven't seen smooth scrolling with cocos2d 0.7.x since I updated to iPhone 3.0 (it was silky smooth prior to that) and cocos2d 0.8.0 seems to have made the situation worse.

I'm really hoping this is a bug in the library or I'm doing something wrong since my app is useless at the moment :-(

Posted 2 years ago #
PhilM
Member

Interesting. I'll have time again to work on my main project next week, and that makes use of parallax scrolling, although its only scrolled on touch, not automatically by actions.

Don't think I've had much time (if any) on that project since I made the 3.0 upgrade.
I'll let you know if I run into the same issue.

If your moving the sprites manually yourself, perhaps it'd be better to implement your own parallax effect, instead of using the built in version, as I'm not sure its intended to be used that way (as your updating the position, whilst it does as well). Although I may well be wrong...

Posted 2 years ago #
Gricalus
Member

It seems that some of the problems you have are similar to mine. Look at this thread I started: http://www.cocos2d-iphone.org/forum/topic/816#post-4831

Also, I think it is related to 0.8, since I already had working project without flickering/erratic scrolling, and then only thing I replaced was cocos2d 0.7.2 with 0.8. Everything else remains same.

I have uploaded sample project I made to demonstrate this erratic scrolling problems that appeared in issue 471: http://code.google.com/p/cocos2d-iphone/issues/detail?id=471

There is still no official response, so I'm not sure if that is bug in 0.8, or are we supposed to do it some other way.

Posted 2 years ago #
riq
Key Master

I'm looking at this bug.
@Gricalus: I had some problems with your project.
http://code.google.com/p/cocos2d-iphone/issues/detail?id=471#c3

Posted 2 years ago #
riq
Key Master

@farb: could you post a project that reproduces the flicker ? thanks.

Posted 2 years ago #
riq
Key Master

I've added another parallax example (snv r1240)
it does the parallax scrolling as you drag the screen.

the correct way to use the parallax API, is by following either the example 1 or 2.
please, let me know if you still see flickers.

Posted 2 years ago #
riq
Key Master

I've just committed a patch. It might fix the issue, but I'm not sure yet.
r1241

Could anyone with the Parallax issue try it ? Thanks.

Posted 2 years ago #
Farb
Member

I get the following error when I try to compile using r1241:

Compiling ParallaxNode.m (1 error)
error: synthesized property 'parallaxArray' must either be named the same as compatible ivar or must explicitly name an ivar

Posted 2 years ago #
riq
Key Master

oops...
could you try again with r1242 ?
thanks.

Posted 2 years ago #
Farb
Member

Hi Riq,

Thanks for the quick turnaround!

Yes, that appears to have removed the flickering issue. However, the jumpy scrolling is still there.

Posted 2 years ago #
riq
Key Master

Farb, I can't reproduce the jumpy scrolling :-(
could you send me to my email your project (or a strip down version of it), so I can use it to fix this bug ?
thanks.

Posted 2 years ago #
Farb
Member

Riq,

I've e-mailed you a project that demonstrates the jumpy scrolling. Pay particular attention to the background layer (clouds). I just tried 0.8.1-beta and it still has the issue.

Posted 2 years ago #

Nightmare_82
Member

I have the same problem. The reason for this behaviour is the following method in ParallaxNode:

-(void) updateCoords: (ccTime) dt
{
	CGPoint	pos = [self convertToWorldSpace:CGPointZero];

	if( ! CGPointEqualToPoint(pos, lastPosition) ) {

		for( CocosNode *child in children) {
			CGPointObject *point = [parallaxDictionary_ objectForKey:[self addressForObject:child]];
			float x = -pos.x + pos.x * point.ratio.x + point.offset.x;
			float y = -pos.y + pos.y * point.ratio.y + point.offset.y;

			child.position = ccp(x,y);
		}

		lastPosition = pos;
	}
}

addChild does the same calculation.

The position of all childs is recalculated when this method is called(for example when the position of the parent has changed by scrolling).

My suggestion is that the parallax node should only change the draw position(transform) not the real position ? (That is what I expected using that node)

Posted 2 years ago #

riq
Key Master

@nightmare: could you try with the latest svn revision? it's fixed there.

Posted 2 years ago #
Nightmare_82
Member

Yes, I'll try it this weekend. Thanks for the info and the fix.

Posted 2 years ago #

Nightmare_82
Member

The problem is still the same:

-(void) visit
{
//      CGPoint pos = position_;
//      CGPoint pos = [self convertToWorldSpace:CGPointZero];
        CGPoint pos = [self absolutePosition_];
        if( ! CGPointEqualToPoint(pos, lastPosition) ) {

                for(unsigned int i=0; i < parallaxArray_->num; i++ ) {

                        CGPointObject *point = parallaxArray_->arr[i];
                        float x = -pos.x + pos.x * point.ratio.x + point.offset.x;
                        float y = -pos.y + pos.y * point.ratio.y + point.offset.y;
                        point.child.position = ccp(x,y);
                }

                lastPosition = pos;
        }

        [super visit];
}

I set the position of a child of the parallax node, my main character. When the character has moved I change the position of the parallax node to scroll wit the character. Now when the visit method of the parallax node is called the position of the child(the main character) will be set to 0/0(the characters current position is ignored here)
Is there a better way to have moving sprites inside a scrollable parallax node ?

Posted 2 years ago #

riq
Key Master

You can't reposition the inner children of the parallax.

your main character should not be part of the parallax. instead you should add the parallax to the main layer (like if it were a background image), and then add your main character as a child of the main layer too.

if you move the main layer, the parallax and your main character will be moved accordingly.

Posted 2 years ago #
Nightmare_82
Member

OK thanks for your help, its working perfect now. (I use one parallax node for the background, one normal node for the dynamic things in the center and one parallax node for the foreground instead of one parallax node for all now)
Keep up the good work!

Posted 2 years ago #
jp16
Member

I just tried this (still using 0.7.3) and I moved the main layer, only the main layer moves. Also, in ParallaxTest.m, the action is run on the voidNode, not the main layer. Does moving the main layer to move the parallax background only work with the current SVN build?

Posted 2 years ago #

RSS feed for this topic

Reply

You must log in to post.