精灵上的无限滚动(视差)

Posted

技术标签:

【中文标题】精灵上的无限滚动(视差)【英文标题】:Infinite scrolling on a sprite(Parallax) 【发布时间】:2013-08-28 09:38:53 【问题描述】:

我是 cocos2d 世界的新手,我正在开发我的第一个教程并面临一个问题 我的问题是我有一个图像(1024 X 320)并且我的方向是横向我需要从右到左连续移动该图像为此我使用了 Ray 的太空射击教程(感谢他)但图像没有似乎一次又一次地出现。 我的代码是..

-(id) init

    if( (self=[super init])) 
        CGSize screenSize = [CCDirector sharedDirector].winSize;

        // 1) Create the CCParallaxNode
        backgroundNode = [CCParallaxNode node];
        [self addChild:backgroundNode z:-1];

        // 2) Create the sprites we'll add to the CCParallaxNode
        Back = [CCSprite spriteWithFile:@"bg_front_spacedust.png"];
        //Back.position=ccp(screenSize.width/2, screenSize.height/2);
        Back.rotation = -90;
        Back1 = [CCSprite spriteWithFile:@"bg_front_spacedust.png"];
        Back1.rotation = -90;

        // 3) Determine relative movement speeds for space dust and background
        CGPoint dustSpeed = ccp(0.1, 0.1);

        // 4) Add children to CCParallaxNode
        [backgroundNode addChild:Back z:0 parallaxRatio:dustSpeed positionOffset:ccp(screenSize.width/2, screenSize.height/2)];
        NSLog(@"back.content width is...%f",Back.contentSize.width);
        [backgroundNode addChild:Back1 z:1 parallaxRatio:dustSpeed positionOffset:ccp(screenSize.width/2, screenSize.height*2)];

        // 5) Enable updates
        [self scheduleUpdate]; 

    return self;



- (void)update:(ccTime)dt 

    // 1) Update background position
    CGPoint backgroundScrollVel = ccp(0,-1000);
    backgroundNode.position = ccpAdd(backgroundNode.position, ccpMult(backgroundScrollVel, dt));

    // 2) Check for background elements moving offscreen
    NSArray *spaceDusts = [NSArray arrayWithObjects:Back, Back1, nil];
    for (CCSprite *spaceDust in spaceDusts) 
        if ([backgroundNode convertToWorldSpace:spaceDust.position].x < -spaceDust.contentSize.width) 
            [backgroundNode incrementOffset:ccp(2*spaceDust.contentSize.width,0) forChild:spaceDust];
        
    

请帮我解决这个问题 提前致谢。

【问题讨论】:

【参考方案1】:

试试这个

if (backgroundNode.position.y <-screenSize.height*2)
            backgroundNode.position = ccp(0,0); 

因为 init 方法仅在您正在执行的方法中调用一次,因此您需要在更新方法中再次将 backgroundNode 的 Position 设置为 0 时才会执行一次。 这里的倍数可能会有所不同

【讨论】:

【参考方案2】:

试试这个代码,它正在创建一个从下到上移动的视差,在 paraNode addChild 行中将 CGPointMake(0, 1.0) 更改为这个 CGPointMake(1.0,0)。

-(id) init
 
// always call "super" init
// Apple recommends to re-assign "self" with the "super's" return value
if( (self=[super init]) )

    float yPos =0.0;
    NSMutableString *fileNameString = [[NSMutableString alloc]initWithCapacity:0];
    if (IS_IPHONE_5)
    
        [fileNameString appendString:@"Background-568h.png"];
        yPos= 560.0;
    
    else
    
        [fileNameString appendString:@"Background.png"];
        yPos= 470.0;
    
    background1 = [CCSprite spriteWithFile:fileNameString];
    background1.tag = 1;
    background1.anchorPoint = CGPointMake(0,0);

    background2 = [CCSprite spriteWithFile:fileNameString];
    background2.tag = 2;
    background2.anchorPoint = CGPointMake(0,0);

    background3 = [CCSprite spriteWithFile:fileNameString];
    background3.tag = 3;
    background3.anchorPoint = CGPointMake(0,0);

    background4 = [CCSprite spriteWithFile:fileNameString];
    background4.tag = 4;
    background4.anchorPoint = CGPointMake(0,0);


    paraNode = [CCParallaxNode node];
    [paraNode addChild:background1 z:1 parallaxRatio:CGPointMake(0, 1.0) positionOffset:CGPointMake(0, 0)];
    [paraNode addChild:background2 z:2 parallaxRatio:CGPointMake(0, 1.0) positionOffset:CGPointMake(0, -yPos)];
    [paraNode addChild:background3 z:3 parallaxRatio:CGPointMake(0, 1.0) positionOffset:CGPointMake(0, -yPos*2)];
    [paraNode addChild:background4 z:4 parallaxRatio:CGPointMake(0, 1.0) positionOffset:CGPointMake(0, -yPos*3)];



    [self addChild:paraNode z:-1 tag:123];
    [self updateFrameRate:0.7 andYposition:yPos];

    [fileNameString release];
    fileNameString = nil;

return self;
 

 -(void)updateFrameRate:(float)speedValue andYposition:(float)yposToSet
 

   move1 = [CCMoveBy actionWithDuration:speedValue position:CGPointMake(0, yposToSet)];
   move2 = [CCMoveBy actionWithDuration:0.0 position:CGPointMake(0, -yposToSet)];
   move3 = [CCMoveBy actionWithDuration:0.0 position:CGPointMake(0, 0)];
   CCSequence* sequence = [CCSequence actions:move1,move2,move3, nil];
   CCRepeatForever* repeat = [CCRepeatForever actionWithAction:sequence];
   [paraNode runAction:repeat];


【讨论】:

以上是关于精灵上的无限滚动(视差)的主要内容,如果未能解决你的问题,请参考以下文章

使用视差滚动实现类似 twitter Profile 的视图

libgdx上的无限滚动背景

Facebook Feed 上的网页无限滚动

行编辑插件上的 Extjs4 无限滚动分页

jQuery无限滚动未触发

逐步淡入无限滚动附加项目