How to scroll the background screen continuously from top to bottom??
Using MoveTo i can move the screen from one position to another. but how to move continuously??
How to scroll the background screen continuously from top to bottom
(64 posts) (28 voices)-
you could use moveBy instead, i think.
Posted 1 year ago # -
Repeat the MoveBy Action like this:
id actionToRepeat = [MoveBy actionWithDuration:0.01 position:ccp(1, 1)];
id repeat = [RepeatForever actionWithAction:actionToRepeat];
[mySprite runAction:repeat];And I also think you need to use 2 images and loop them. (although I'm not too familiar with game programming).
Posted 1 year ago # -
Andrew
MemberHere's what I've used. This is for an image which is the same on the top and bottom so you can seamlessly loop it. It's 320 x 482px to avoid the black line between the two:
Sprite *riverBed=[Sprite spriteWithFile:@"river_bed_f.png"];
[riverBed setPosition:ccp(160,720)];
Sprite *riverBed2=[Sprite spriteWithFile:@"river_bed_f.png"];
[riverBed2 setPosition:ccp(160,240)];
id goUp1=[MoveTo actionWithDuration:4.4f position:ccp(160,240)];
id goDown1=[MoveTo actionWithDuration:0 position:ccp(160,720)];
id seq1=[Sequence actions: goUp1, goDown1, nil];
id goUp = [MoveTo actionWithDuration:4.4f position:ccp(160,-240)];
id goDown = [MoveTo actionWithDuration:0 position:ccp(160,240)];
id seq = [Sequence actions: goUp, goDown,nil];
[riverBed runAction: [RepeatForever actionWithAction:seq1]];
[riverBed2 runAction:[RepeatForever actionWithAction:seq]];
[self addChild:riverBed z:kRiverBedZ tag:kRiverBedTag];
[self addChild:riverBed2 z:kRiverBedZ tag:kRiverBed2Tag];Cheers,
Andrew.Posted 1 year ago # -
Greg
MemberAs a follow-up, I was doing a side-scroller on landscape with the following code:
Sprite *bg1 = [Sprite spriteWithFile:@"level1-bg.png"];
[bg1 setPosition:ccp(240, 160)];
Sprite *bg2 = [Sprite spriteWithFile:@"level1-bg.png"];
[bg2 setPosition:ccp(720, 160)];
id enterRight = [MoveTo actionWithDuration:4.4f position:ccp(240, 160)];
id exitLeft = [MoveTo actionWithDuration:4.4f position:ccp(-240, 160)];
id reset = [MoveTo actionWithDuration:0 position:ccp(720, 160)];
id seq1 = [Sequence actions: exitLeft, reset, enterRight, nil];
id seq2 = [Sequence actions: enterRight, exitLeft, reset, nil];
[bg1 runAction:[RepeatForever actionWithAction:seq1]];
[bg2 runAction:[RepeatForever actionWithAction:seq2]];
[self addChild:bg1 z:-1 tag:1234];
[self addChild:bg2 z:-1 tag:2345];
When I re-used the MoveTo objects I got funky behavior and the scrolling didn't work. So I created another set of MoveTos with the same inputs and then changed the corresponding references and everything worked out:
Sprite *bg1 = [Sprite spriteWithFile:@"level1-bg.png"];
[bg1 setPosition:ccp(240, 160)];
Sprite *bg2 = [Sprite spriteWithFile:@"level1-bg.png"];
[bg2 setPosition:ccp(720, 160)];
id enterRight = [MoveTo actionWithDuration:4.4f position:ccp(240, 160)];
id exitLeft = [MoveTo actionWithDuration:4.4f position:ccp(-240, 160)];
id reset = [MoveTo actionWithDuration:0 position:ccp(720, 160)];
id enterRight2 = [MoveTo actionWithDuration:4.4f position:ccp(240, 160)];
id exitLeft2 = [MoveTo actionWithDuration:4.4f position:ccp(-240, 160)];
id reset2 = [MoveTo actionWithDuration:0 position:ccp(720, 160)];
id seq1 = [Sequence actions: exitLeft, reset, enterRight, nil];
id seq2 = [Sequence actions: enterRight2, exitLeft2, reset2, nil];
[bg1 runAction:[RepeatForever actionWithAction:seq1]];
[bg2 runAction:[RepeatForever actionWithAction:seq2]];
[self addChild:bg1 z:-1 tag:1234];
[self addChild:bg2 z:-1 tag:2345];
Can someone explain why re-using the MoveTos was problematic?Posted 11 months ago # -
Greg
MemberI am getting a bit of a flickered edge on the first background image as it enters the screen from the right. Any ideas on how to eliminate that? I tried increasing / decreasing the X coordinate of my reset to try to overlap the flicker, but that didn't work. I also re-made my background images to have a width of 484px to try to overlap that as well. No luck.
Posted 11 months ago # -
Andrew
MemberIf you're using png files, you might need to either change the glBlendFunc to (GL_ONE, GL_ONE_MINUS_SRC_ALPHA), but that might stuff up your labels. The alternative is to subclass the sprite object as follows:
@implementation AlphaSprite
-(void)draw {
glBlendFunc (GL_ONE, GL_ONE_MINUS_SRC_ALPHA);
[super draw];
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
}
@endThen your declaration for the sprite is:
AlphaSprite *bg1 = [AlphaSprite spriteWithFile:@"level1-bg.png"];Clear as mud?
Posted 11 months ago # -
Greg
MemberThanks for the tip, Andrew. I'll try sub-classing as you suggested. Question: why isn't there already a PNGSprite or AlphaSprite sub-class in cocos2d? Just curious from a framework perspective.
UPDATE 1: I tried subclassing and I still see the glitch. Any other ideas? Is there something else I needed to do besides sub-classing?
UPDATE 2: I realized I was still using a release candidate version of 0.8. I am going to go upgrade to v0.8 release and see what happens.
Posted 11 months ago # -
Out of curiousity, is there some big performance gain by using actions rather than just scheduling an update function that moves the background position? Seems to me it would be much easier to simply do something to the effect of:
[self schedule: @selector(update:)];
and then:
- (void) update: (ccTime) dt
{
float dy = scroll_speed_per_second * dt;
[self setPosition:ccp(self.position.x,self.position.y + dy)];
}Posted 11 months ago # -
trump-card
MemberHello! If you need loop the background sprite I think the best way might be subclass Sprite class, overload 'draw' method and enable GL_REPEAT mode. I think CPU will work less but video CPU will take all work.
I prepare demo project for you (based on Cocos 0.8.0)
http://users.omsknet.ru/sskuratov/MyFirstGameSrc.zipPosted 11 months ago # -
Greg
Member@Blue Ether: Would you do that on a subclass of Layer? Is that for one long background image or can I use that strategy with several backgrounds and just position them offscreen as appropriate?
@trump-card: Thanks for your sample. I couldn't get it to run locally, though. I get an error "library not found for -ICocosDenshion". I tried throwing the CocosDenshion into the project but that added about 35 compilation errors. It sounds like what you suggest is similar to what Andrew previously recommended, in that I could alter the image display properties in order to remove the flickering line.
Posted 11 months ago # -
I'm not 100% sure what you mean by "flickered edge." I'm imagining that you mean the image is not scrolling all the way from the edge but appearing suddenly a little ways in from the edge. Or do you mean that the image is flashing in and out of view for some time while it scrolls?
Posted 11 months ago # -
sunzyj
Member@trump-card: Thank you for your demo code.Your code is work well on *.gif, but I can't load a png picture to scrolling from right to left for full screen. Could give me some suggests ? Thank you .
Posted 11 months ago # -
Greg
Member@Blue Ether: I have two backgrounds that are 484px wide and I am scrolling them landscape-style, right to left. As the first one leaves the screen, the second one enters from the right. When the first one reaches it destination offscreen, it moves directly to where the second one started and start scrolling left again, onto the screen. The left edge at that point, which is now entering the screen, is flickering. The flickering is a thin line that seems to display and hide itself.
Posted 11 months ago # -
Sounds like one of a couple things. Could be that your images have a little bit of anti-aliasing going on on one end. Or it could be that you aren't positioning them exactly the correct width apart. Or it could be that they aren't moving quite identically because you are using Actions and this causes the timing and exact coordinates being moved to be inexact on a sub-pixel level. I still think you would be better off scheduling a scroll function. Per your previous question, there are any number of ways to do this. I used an example where it referred to self as if I were writing a subclass, but you could also keep an array of background image and assign the selector to their parent (or the layer, scene, etc) and have that handle the positioning of its background array items each frame.
Posted 11 months ago # -
Maybe you mean something like what I did in hopple with the trees scrolling continuously?
For that I used 2 images and wrapped the action in a repeat forever. Essentially I ran the action on both images. This gave a nice continuous scrolling effect. Unfortunately I can't post actual code due to NDA but believe me it's very straightforward.
Posted 11 months ago # -
Greg
MemberI will try scheduling a scroll function. I have two follow-up questions: isn't setting up multiple BG scrolls doing what Parallax does?
Also, I'm using Photoshop CS4 ... should I be doing something differently when I generate the images to prevent any anti-aliasing?
Thanks for the help!
Posted 11 months ago #
Reply »
You must log in to post.