Cocos2d添加多层滚动背景

By | 2014/04/20

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

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

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

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

Action.h文件实现如下:

[code lang=”objc”]
//  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

[/code]

Action.m文件实现如下:

[code lang=”objc”]
// 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

[/code]

注意:
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

发表评论

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

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据