본문 바로가기

프로그래밍/cocos2d

디바이스 화면보다 큰 배경 스크롤하기

아이폰 가로 화면의 픽셀 크기는 480x320 입니다. (아이폰4 이전 버전)
화면의 가로 크기보다 훨씬 큰 배경 이미지를 스크롤 할 수 있게 해 보겠습니다.

여기서는 CCSprite와 CCParallaxNode를 사용합니다.

작업할 파일은 다음과 같습니다.

(1) GameScene.h
(2) GameScene.m
(3) GameDemo_Delegate.m


GameScene.h

//

//  GameScene.h

//  GameDemo_BGScroll

//

//  Created by cmpak on 5/10/10.

//  Copyright 2010 thefirstgood.com. All rights reserved.

//


//#import <Foundation/Foundation.h>

#import "cocos2d.h"


//@interface GameScene : NSObject {

@interface GameScene : CCScene {

    CGSize winSize;

    CCLayer *gameLayer;

}


- (void) createBackgroundParallax;

- (void) moveBackground;


@end


CCScene 클래스를 상속받는 GameScene 클래스를 정의하고 멤버와 메서드를 정의합니다.


 


GameScene.m

//

//  GameScene.m

//  GameDemo_BGScroll

//

//  Created by cmpak on 5/10/10.

//  Copyright 2010 thefirstgood.com. All rights reserved.

//


#import "GameScene.h"


#define IMG_WIDTH 1600


enum {

    kTag_Parallax

};


@implementation GameScene



- (id) init {

    if( ![super init] )

        return nil;

    

    // 화면의 픽셀 크기를 구합니다.

    winSize = [[CCDirector sharedDirector] winSize];

    

    [self createBackgroundParallax];

    return self;

}



- (void) createBackgroundParallax {

    // 이미지로 백그라운드에 쓰일 CCSprite 만듭니다.

    //CCSprite *bgSprite = [CCSprite spriteWithFile:@"background.png"];

    CCSprite *bgSprite1 = [CCSprite spriteWithFile:@"background1.png"];

    CCSprite *bgSprite2 = [CCSprite spriteWithFile:@"background2.png"];

    

    // Transform 사용되는 anchorPoint 왼쪽 아래 귀퉁이 (0, 0) 잡습니다

    //bgSprite.anchorPoint = ccp(0, 0);

    bgSprite1.anchorPoint = ccp(0, 0);

    bgSprite2.anchorPoint = ccp(0, 0);

    

    // 위에서 만든 sprite 담을 parent CCParallaxNode 만듭니다.

    CCParallaxNode *voidNode = [CCParallaxNode node];

    

    // 배경 sprite Parallax 넣습니다.

    // parallaxRatio 가로/세로로 움직이는 속도라고 보시면 되겠습니다

    // 우리는 가로로만 움직이므로 y 값을 0으로 줍니다.

    // 배경 sprite 원래있던 위치 그래로 있도록 offset (0, 0) 잡습니다.

    //[voidNode addChild:bgSprite z:0 parallaxRatio:ccp(1.0f, 0) positionOffset:CGPointZero];

    

    // background1.png 파일의 세로 크기가 160 픽셀이기 때문에 positionOffset 이용하여 

    // 화면 위에 위치하도록 좌표를 조정합니다.

    // 뒤쪽에 깔릴 배경인 background1.png 천천히 움직이도록 parallaxRatio x 값을 1보다 작은

    // 0.4 설정합니다.

    [voidNode addChild:bgSprite1 z:0 parallaxRatio:ccp(0.4f, 0) positionOffset:ccp(0, winSize.height / 2)];

    

    [voidNode addChild:bgSprite2 z:1 parallaxRatio:ccp(1.0f, 0) positionOffset:CGPointZero];

    

    // Layer 만든 거기에 ParallaxNode child 넣습니다.

    gameLayer = [CCLayer node];

    [gameLayer addChild:voidNode z:kTag_Parallax tag:kTag_Parallax];

    

    // gameLayer GameScene child 넣습니다.

    [self addChild:gameLayer];

}


- (void) onEnter {

    [super onEnter];

    

    [self moveBackground];

}


- (void) moveBackground {

    // gameLayer 들어있는 parallax node 받습니다.

    CCNode *voidNode = [gameLayer getChildByTag:kTag_Parallax];

    

    // 배경화면을 왼쪽끝에서 오른쪽 끝까지 8초간 움직입니다.

    CGFloat duration = 8.0f;

    CGFloat xRatio = 1.0// CCParallaxNode 만들 정해주었던 X parallaxRatio

    id go = [CCMoveBy actionWithDuration:duration position:ccp(-(IMG_WIDTH - winSize.width) / xRatio, 0)];

    id goBack = [go reverse];

    

    // 왼쪽/오른쪽으로 계속해서 움직여봅니다.

    id seq = [CCSequence actions:go, goBack, nil];

    [voidNode runAction:[CCRepeatForever actionWithAction:seq]];

}


@end







GameDemo_AppDelegate.m

- (void) applicationDidFinishLaunching:(UIApplication*)application

{

// Init the window

window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];

// cocos2d will inherit these values

[window setUserInteractionEnabled:YES];

[window setMultipleTouchEnabled:YES];

// Try to use CADisplayLink director

// if it fails (SDK < 3.1) use the default director

if( ! [CCDirector setDirectorType:CCDirectorTypeDisplayLink] )

[CCDirector setDirectorType:CCDirectorTypeDefault];

// Use RGBA_8888 buffers

// Default is: RGB_565 buffers

[[CCDirector sharedDirector] setPixelFormat:kPixelFormatRGBA8888];

// Create a depth buffer of 16 bits

// Enable it if you are going to use 3D transitions or 3d objects

// [[CCDirector sharedDirector] setDepthBufferFormat:kDepthBuffer16];

// Default texture format for PNG/BMP/TIFF/JPEG/GIF images

// It can be RGBA8888, RGBA4444, RGB5_A1, RGB565

// You can change anytime.

[CCTexture2D setDefaultAlphaPixelFormat:kTexture2DPixelFormat_RGBA8888];

// before creating any layer, set the landscape mode

[[CCDirector sharedDirector] setDeviceOrientation:CCDeviceOrientationLandscapeLeft];

[[CCDirector sharedDirector] setAnimationInterval:1.0/60];

[[CCDirector sharedDirector] setDisplayFPS:YES];

// create an openGL view inside a window

[[CCDirector sharedDirector] attachInView:window];

[window makeKeyAndVisible];

//[[CCDirector sharedDirector] runWithScene: [HelloWorld scene]];

    

    GameScene *gameScene = [[GameScene alloc] init];

    [[CCDirector sharedDirector] runWithScene:(CCScene*)gameScene];

    [gameScene release];

}