Cocos2d添加多层滚动背景

By | 2014/04/20

Cocos2d实现视差滚动的背景可以使用CCParallaxNode实现。

1.创建CCparallaxNode对象,并将其添加到层中

2.创建希望产生视差滚动效果的节点对象,并添加为CCParallax的子节点

3.移动CCParallax以滚动背景。根据设置的parallaxRatio可以让子节点比CCParallaxNode更快或者慢

Action.h文件实现如下:

//  Created by wildcat on 14-4-20.

//  Copyright 2014年 com.wildcat. All rights reserved.

//

#import <Foundation/Foundation.h>

#import "cocos2d.h"

@interface ActionLayer : CCLayer {

    CCSprite *_mainBg;

    CCSprite *_mainBg2;

    CCSprite *_cloud1;

    CCSprite *_cloud2;

    CCSprite *_cloud3;

    CCParallaxNode *_backgroundNode;

    

    

}

+(id)scene;

@end

Action.m文件实现如下:

//  Created by wildcat on 14-4-20.
//  Copyright 2014年 com.wildcat. All rights reserved.
//

#import "ActionLayer.h"
@interface ActionLayer()
//场景初始化
-(void)setupBackground;
-(void)updateBackground:(ccTime) dt;
@end

@implementation ActionLayer
+(id)scene{
    CCScene *scene=[CCScene node];
    ActionLayer *layer=[ActionLayer node];
    [scene addChild:layer];
    return scene;

}
-(id)init{

    if (self=[super init]) {
        [self setupBackground];
        [self scheduleUpdate];
    }
    return self;
}

#pragma mark - 添加滚动背景
-(void)setupBackground{
    CGSize winSize=[[CCDirector sharedDirector] winSize];
    //1.创建CCParallaxNode 视差滚动节点
    _backgroundNode=[CCParallaxNode node];
    [self addChild:_backgroundNode z:-2];

    //2.创建需要添加到CCParallaxNode视察滚动节点的精灵对象
    _mainBg=[CCSprite spriteWithFile:@"bg.png"];
    _mainBg2=[CCSprite spriteWithFile:@"grass.png"];
    _cloud1=[CCSprite spriteWithFile:@"bg_cloud_1.png"];
    _cloud2=[CCSprite spriteWithFile:@"bg_cloud_2.png"];
    _cloud3=[CCSprite spriteWithFile:@"bg_cloud_3.png"];

    //3.设置云彩的浮动速度和背景速度
    CGPoint cloudSpeed=ccp(0.1f, 0.1f);
    CGPoint bgSpeed=ccp(0.05f, 0.05f);
    //4.将背景对象添加为CCParallaxNode视察滚动节点的子节点

    [_backgroundNode addChild:_cloud1 z:0 parallaxRatio:cloudSpeed positionOffset:ccp(0, winSize.height*0.6)];
    [_backgroundNode addChild:_cloud2 z:0 parallaxRatio:cloudSpeed positionOffset:ccp(winSize.width*0.5, winSize.height*0.7)];
    [_backgroundNode addChild:_cloud3 z:0 parallaxRatio:cloudSpeed positionOffset:ccp(winSize.width*0.9, winSize.height*0.8)];
    [_backgroundNode addChild:_mainBg z:-1 parallaxRatio:bgSpeed positionOffset:ccp(200, winSize.height*0.5)];
    [_backgroundNode addChild:_mainBg2 z:0 parallaxRatio:bgSpeed positionOffset:ccp(winSize.width*0.5,0)];

}
#pragma mark - 更新背景图片方法
-(void)updateBackground:(ccTime) dt{
    CGSize size = [CCDirector sharedDirector].winSize;

    CGPoint backgroundScrollVel = ccp(-size.width, 0);
    _backgroundNode.position =ccpAdd(_backgroundNode.position,ccpMult(backgroundScrollVel, dt));

    CGSize winSize = [CCDirector sharedDirector].winSize;

    NSArray *backgrounds = [NSArray arrayWithObjects:_mainBg, _mainBg2, _cloud1, _cloud2,_cloud3, nil];
    for (CCSprite *background in backgrounds) {
        if ([_backgroundNode convertToWorldSpace:background.position].x < -background.contentSize.width) {

            _backgroundNode.position = ccp(winSize.width*4,0);
        }
    }

}

#pragma mark - 更新
-(void)update:(ccTime)delta{
    [self updateBackground:delta];

}

@end

注意:
1.设置子节点的速度时:
CGPoint cloudSpeed=ccp(0.1f, 0.1f);
CGPoint bgSpeed=ccp(0.05f, 0.05f);
小于1代表比背景速度慢,反之则快。
2._backgroundNode.position = ccp(winSize.width*4,0);
之所以设置为四倍,是因为所选背景图片是屏幕的两倍。。
结果展示:
屏幕快照 2014-04-20 下午7.51.03

屏幕快照 2014-04-20 下午7.51.10

 

 

源码下载:http://pan.baidu.com/s/1kTkcSE7

发表评论

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.