【Cocosd2d实例教程六】Cocos2d实现屏幕背景的自动滚动

简介: (转载请注明出处:http://blog.csdn.net/buptgshengod) 1.介绍     实现屏幕背景的自动滚动是游戏常遇到的功能,这样我们就不用绘制很长的背景图片,只要设计一张就可以,省时省力。这章将实现这个功能,并把源代码贡献给大家,废话不多说,先上个图,其实是动态的,只是截动态图有点麻烦。 2.代码实现部分      屏幕的动态滚动主要是一个刷新机制

(转载请注明出处:http://blog.csdn.net/buptgshengod

1.介绍

    实现屏幕背景的自动滚动是游戏常遇到的功能,这样我们就不用绘制很长的背景图片,只要设计一张就可以,省时省力。这章将实现这个功能,并把源代码贡献给大家,废话不多说,先上个图,其实是动态的,只是截动态图有点麻烦。

2.代码实现部分

     屏幕的动态滚动主要是一个刷新机制的问题。
第一步,还是进入HelloWorldLayer.h中定义一些节点的对象
#import <GameKit/GameKit.h>

// When you import this file, you import all the cocos2d classes
#import "cocos2d.h"

// HelloWorldLayer
@interface HelloWorldLayer : CCLayer <GKAchievementViewControllerDelegate, GKLeaderboardViewControllerDelegate>
{
    
    CCParallaxNode *backgroundNode;//这个节点是实现滚动的关键节点
 
  CCSprite *mainBg; CCSpriteBatchNode *batchNode; }// returns a CCScene that contains the HelloWorldLayer as the only child+(CCScene *) scene;@end 第二步当然是来到
 HelloWorldLayer.m中。 
首先来写一下刷新的函数
- (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,nil];
    for (CCSprite *background in backgrounds) {
        if ([backgroundNode convertToWorldSpace:background.position].x < -background.contentSize.width) {
           //if中判断是如果屏幕超出图片范围 
            backgroundNode.position = ccp(winSize.width*4,0);//图片就以这个速度移动
        }
    }
}
接着,将上一个函数加到update中,实现实时更新。
//实时更新
- (void)update:(ccTime)dt {
    
    [self updateBackground:dt];
   }
修改init函数
-(id) init
{
	// always call "super" init
	// Apple recommends to re-assign "self" with the "super's" return value
	if( (self=[super init]) ) {
		CGSize winSize = [CCDirector sharedDirector].winSize;
        
        // 1) 创建 CCParallaxNode视差滚动节点
        backgroundNode = [CCParallaxNode node];
        [self addChild:backgroundNode z:-2];
        
        // 2) 创建需要添加到CCParallaxNode视差滚动节点的精灵对象
        
        mainBg = [CCSprite spriteWithFile:@"bg.png"];
        // 3) 设置云彩的浮动速度 和背景速度
       
        CGPoint bgSpeed = ccp(0.05, 0.05);
        
        
        // 4) 将精灵对象添加为CCParallaxNode视差滚动节点的子节点
        [backgroundNode addChild:mainBg z:-1
                   parallaxRatio:bgSpeed
                  positionOffset:ccp(200,winSize.height*0.5)];
        
         [self scheduleUpdate];//调用update,注意了,这个调用方法很奇特
        	}
	return self;
}

源代码资源下载地址




目录
相关文章
|
20天前
|
前端开发 JavaScript 开发者
【QML进阶 进度条设计】打造动态弧形进度条特效
【QML进阶 进度条设计】打造动态弧形进度条特效
79 1
|
图形学
unity3d UGUI常用游戏进度条实现方式
测试.png 直接将脚本挂载到进度条image对象上即可,这种方式可以解决当进度条使用图片的时候,防止图片拉伸变形 using UnityEngine; using UnityEngine.
2705 0
|
3月前
|
前端开发
Flutter笔记:光影动画按钮、滚动图标卡片组等
Flutter笔记:光影动画按钮、滚动图标卡片组等
37 0
|
4月前
|
XML Java Android开发
Android App开发动画特效之实现百叶窗动画和马赛克动画效果实战演示(附源码和演示视频 可直接使用)
Android App开发动画特效之实现百叶窗动画和马赛克动画效果实战演示(附源码和演示视频 可直接使用)
57 0
|
11月前
|
UED
【Axure教程】鼠标滚动上下翻页效果
【Axure教程】鼠标滚动上下翻页效果
|
JSON Android开发 数据格式
原生app开发技巧——底部导航栏动画效果按钮制作方法之采用photoshop制作gif动画-过渡动画关键帧
原生app开发技巧——底部导航栏动画效果按钮制作方法之采用photoshop制作gif动画-过渡动画关键帧
原生app开发技巧——底部导航栏动画效果按钮制作方法之采用photoshop制作gif动画-过渡动画关键帧