iOS용 게임 개발기 -5-

오늘은 sprite에 대해서 이야기 해보자.
sprite는 우리가 게임을 만들때,(2d게임) 반드시 사용하게 되어 있는 이미지들을 말한다.

iOS용 앱에서는 주로 png 파일을 많이 사용하는데, cocos2d에서는 개발자가 따로 처리를 하지 않아도, 이미지들을 쉽게 콘트롤하고 가지고 놀수 있게 많은 api들을 제공하고 있다.  

4.1에서 만들었던, 정말 간단한(?) 시계에 이제는 이미지를 넣고, 약간의 효과를 줘보자.!!!
시계 이미지의 배경은 바로, 본인이 개발했던 BlueOcean게임의 배경들을 일정한 시간을 두고 FadeIn/Out 효과를 주고 바뀌도록 하는 것으로 한번 만들어 보겠다. 

이번에도 역시 두개의 파일만 수정하면 된다.  

배경이미지들을 이 예제에서는 3개룰 사용하여 정해진 시간이 되면, 배경이미지를 교체해주도록 하기위해서 아래 굵게 표시된 부분처럼, 인덱스하는 정수형 변수 하나(나중에 배열의 인덱서로 사용된다.), 배경이미지들을 관리할수 있도록 배열을 하나 선언한다.

// //  HelloWorldLayer.h //   // // When you import this file, you import all the cocos2d classes #import "cocos2d.h" // HelloWorldLayer @interface HelloWorldLayer : CCLayer {     CCLabelTTF *label;          int             _currentBg;     // 배경화면 이미지가 무엇인지 확인하기 위한 인덱스.     NSMutableArray* _bgSpriteList;  // 배경화면 이미지들을 저장할 배열. } // returns a CCScene that contains the HelloWorldLayer as the only child +(CCScene *) scene; @end

objective-C 언어는 C언어의 문법을 그대로 사용할수 있다. 위에서 보는 바와 같이 int 형 변수를 선언하는 것도, C와 똑같이 하면 된다. 
NSMutableArray 는 정적 배열이 아닌(처음부터 그 크기가 정해진 배열) 동적 배열이다, 자바의 ArrayList와 비슷하다고 생각하면 된다. 
아래 소스에서 확인할수 있겠지만, 생성후 필요할때 오브젝트들을 마음대로 추가해주고 꺼내 쓸수 있다. 그리고 그 오브젝트들을 지우는 것도 간단하게 할수 있다.



원래 시간을 찍어주던 부분에서, 배경 이미지들을 생성해서 배열에 넣어주고, 스케쥴러를 이용해서, 4초마다 이미지들을 빠꿔주게 하는 부분이 추가 되었다.아래 굵은 부분만 수정되고 추가된 부분이다. 해당 주석들을 참고하면 어떤것인지 바로 이해할수 있다.

// //  HelloWorldLayer.m //    -(void)bgControl {         CCSprite *sprite = (CCSprite *)[_bgSpriteList objectAtIndex:_currentBg];  // 배열에서 이미지를 하나 꺼내온다.          id action1 = [CCFadeIn actionWithDuration:2.0f];    // FadeIn Effect를 2초동안에 걸쳐 동작하게 함.     id action2 = [CCFadeOut actionWithDuration:2.0f];  // FadeOut Effect를 2초동안에 걸쳐 동작허게 함.     [sprite runAction:[CCSequence actions:action1, action2,nil]]; // FadeIn -> FadeOut순서로 효과가 동작되게 지정함.        _currentBg++; // 다음이미지를 불러올수 있게 인덱서를 증가 시켜줌.     if(_currentBg==3) // 이미지는 3개 밖에 없으므로 다시 0으로 초기화 해준다.         _currentBg=0; } -(id) init { // always call "super" init // Apple recommends to re-assign "self" with the "super" return value if( (self=[super init])) { // create and initialize a Label label = [CCLabelTTF labelWithString:@"Hello World" fontName:@"AppleGothic" fontSize:32]; // ask director the the window size CGSize size = [[CCDirector sharedDirector] winSize]; // position the label on the center of the screen label.position =  ccp( size.width /2 , size.height/4 ); // add the label as a child to this Layer [self addChild: label z:2 tag:2];                          [self schedule:@selector(updateTime) interval:1];                                   _bgSpriteList = [[NSMutableArray alloc] init];  // 배열 생성.                          // 루프를 돌면서, 이미지들을 생성하고, 배열에 넣는다.                  for(int i=0;i<3;i++)                 {                      CCSprite *sprite=                             [CCSprite spriteWithFile:[NSString stringWithFormat: @"scenario%02d.png",i]];                                                [_bgSpriteList addObject:sprite]; // 배열에 추가.                                   sprite.anchorPoint = CGPointZero;// 해당 이미지의 기준이 되는 점을 정해줌. 이후 포지션등을 지정할때 기준이 됨.                                              sprite.opacity=0; //FadeIn Effect를 사용할것이므로, 이미지가 보이지 않게 한다.                       [sprite setPosition: ccp(0, 0)];  // 위에서 anchorPoint를 0,0으로 정의하고, 여기서 이미지의 위치를 0,0으로                                                               // 정의했으므로,  이미지는 화면의 0,0좌표에 이미지의 0,0좌표를 맞게 설정한다.                      [self addChild:sprite z:1 tag:1]; // layer에 sprite를 추가해줌.(이부분이 없으면 아무것도 안된다.                 }                 _currentBg=0;                  [self bgControl];                 [self schedule:@selector(bgControl) interval:4]; // 배경이미지를 효과를 주고 교체해줌. } return self; } // on "dealloc" you need to release all your retained objects - (void) dealloc { // in case you have something to dealloc, do it in this method // in this particular example nothing needs to be released. // cocos2d will automatically release all the children (Label)           [self unschedule:@selector(updateTime)];   // 스케쥴러 해제         [self unschedule:@selector(bgControl)];     // 스케쥴러 해제         [_bgSpriteList release];  // 배열 해제         _bgSpriteList=nil;      // don't forget to call "super dealloc" [super dealloc]; }

백문이 불여일견이다. 어떻게 동작하는지 아래 동영상을 보자.

 

사실 구현을 위해서 정말 진짜!!! 진짜!! 기본적인 내용들로만 구현했지만, 위의 코드들 이용해서 이미지들을 수백개정도를 관리하도록(이때는 파일명만 리스토에 넣고 그때 그때 sprite를 생성하돌고 해야 메모리 부족이 생기지 않는다.) 하고, 단순하게 4초 마다가 아니라, 특정 시간이 변하거나,할때마다 이미지들을 교체하게 해주면, 정말 그럴사한 슬라이드 어플이 될수 있다.  생각보다 효과 넣는것도 쉽고, 코드만들기도 쉬우므로, 다른 이펙트들을 찾아서 한번 응용해보는것도 좋다.

다음 포스트에서 Effect들을 더 많이 알아보도록 하겠다.