cocos2d와 UIScrollView 같이 사용하기 및 touch 처리

위의 그림과 같이 물결 처리를 위해 cocos2d는 사용해야 겠고, 기존의 UIKit도 같이 사용해야 해서 일주일동안 밤새면서 삽질했다. (정지 화면 캡쳐를 하니 물결이 잘 안보이는 군요...ㅠ.ㅠ 위쪽 약간 왼쪽에 유심히 보시길... 위 화면은 개발 중인 화면임)

결과론적으로는 OpenGL과 cocos2d를 사용해 볼 수 있는 좋은 기회가 되었다.

본 글을 통해 얻을 수 있는 지식

cocos2d와 UIScrollView를 같이 사용하여 두 가지의 장점을 한꺼번에 사용할 수 있는 시너지 효과를 얻을 수 있다. 스크롤뷰가 위에 올려져 있으면 밑에 깔려 있는 cocos2d의 Scene에 터치가 작동하지 않는 문제를 해결한다.

1. OpenGL ES 기반으로 그래픽 처리에 뛰어난 cocos2d 설치 방법

2. cocos2d 맛보기 프로그래밍 (항상 동작하는 애니메이션 및 터치에 따른 애니메이션 처리)

3. 일반적인 아이폰 프로그램 처럼 시작하고 부분적으로 cocos2d 화면을 사용하는 방법

4. cocos2d와 UIScrollView를 동시에 사용하는 방법

5. UIScrollView에서 터치한 이벤트를 cocos2d로 전달하는 방법

6. cocos2d에서 터치의 좌표를 제대로 변환하는 방법

cocos2d 설치

먼저 cocos2d를 다운로드 받아서 설치한다. iPod touch 2.5세대까지는 OpenGL 2.0을 지원하지 않으므로 cocos2d 1.0을 사용해야 한다.

http://www.cocos2d-iphone.org/download

위의 홈페이지에서 다음을 다운로드 받는다 (아니면 아래 링크 클릭). 현재 (2012년 6월 23일) 안정화된 버전이라고 되어 있다.

cocos2d-iphone-1.0.1.tar.gz 

다운로드 받은 후에는 다음의 링크에 따라서 설치한다.

http://www.cocos2d-iphone.org/wiki/doku.php/prog_guide:index

응용프로그램-유틸리티에서 터미널을 실행하여 다음을 실행한다. 이때 디렉토리명이 혹시 다를 경우는 뒤에 붙은 버전까지 모두 입력해야 한다.

cd cocos2d-iphone-1.0.1
./install-templates.sh -u

cocos2d 프로젝트 생성

cocos2d를 설치하였다면 cocos2d 템플릿으로 프로젝트를 생성한다. UIKit을 주로 사용하고 부분적으로만 cocos2d를 사용할지라도 cocos2d 템플릿으로 프로젝트를 생성한다.

그림에서는 cocos2d를 먼저 설치 했었기 때문에 cocos2d v2.x도 있으나 위의 1.0.1을 사용해야 한다.

프로젝트명은 TestTouch으로 입력한다.

프로젝트를 생성한 후에는 일단 실행~ (Command + R)

이렇게 나오면 cocos2d까지는 성공 !!!

cocos2d 프로그래밍 가이드를 따라서 만들어 봅시다~

http://www.cocos2d-iphone.org/wiki/doku.php/prog_guide:lesson_2._your_first_game

이미지 파일을 다운로드 하여 프로젝트 Resources에 추가하는 것을 잊지 말 것!!!

http://www.cocos2d-iphone.org/wiki/lib/exe/detail.php/prog_guide:seeker.png?id=prog_guide%3Alesson_2._your_first_game

HelloWorldLayer.m 파일을 다음과 같이 수정한다.

화면을 터치하면 아이콘이 그 곳으로 이동한다.

UIKit으로 시작되도록 수정

이제는 처음 시작한 뒤에 바로 cocos2d 화면이 보이는 것이 아니라, 일반적인 아이폰 앱처럼 실행되도록 수정한다.

Supporting Files에 보면 main.m 파일이 있다. 이 파일을 다음과 같이 수정한다.

이제는 시작시 화면이 될 XIB 파일을 생성한다.

 MainWindow.XIB 파일을 선택하고 File's Owner를 UIApplication으로 변경한다.

Object를 추가한다.

Object를 선택하고 클래스를 AppDelegate로 써준다.

File's Owner를 선택하고 Outlets에 있는 delegate를 마우스로 끌어다가 방금 만들었던 App Delegate에 연결 시켜준다. 아니면 File's Owner에서 Control + 클릭한 후에 끌어다가 App Delegate에서 놓아 주면 연결된다.

그리고 나서 실행(Command + R)해서 검은 화면이 나타나면 일단 여기까지는 성공!!!

TestTouch를 선택하고 Main Interface를 방금 추가한 MainWindow로 지정한다.

그러면, AppDelegate가 작동하므로 아까랑 같이 seeker는 계속 움직이고 있고 클릭하면 cocos2d 아이콘이 따라오는 화면이 나온다.

AppDelegate.m 파일의 - (void) applicationDidFinishLaunching:(UIApplication*)application 내의 모든 내용을 주석 처리한다.

그리고, 실행하면 다시 검은 화면이 나온다.

MainWindow.XIB 파일을 선택하고 Window를 추가한다.

AppDelegate.h 파일의 window에 IBOutlet을 추가해 준다.

MainWindow.XIB 파일에서 App Delegate를 선택하고 window 오른쪽에 있는 동그라미를 끌어다가 왼쪽 App Delegate 밑에 있는 Window에 놓는다. 또는, App Delegate에서 Control + 클릭한 후에 끌어다가 바로 밑에 있는 Window에 놓는다.

Navigation Controller를 추가한다.

첫 화면으로 네비게이션 컨트롤러 사용

UIViewController 클래스로부터 상속받은 MyViewControllerClass를 생성한다.

디렉토리를 한 단계 아래로 지정한다.

MyViewControllerClass.XIB 파일에서 View에 Round Rect Button을 추가한다. Orientation을 Landscape로 변경하고 버튼의 Title은 그림과 같이 입력한다.

MainWindow.XIB 파일에서 Window를 선택하고 오른쪽의 Outlets 중에서 rootViewController의 오른쪽에 있는 동그라미를 끌어다가 왼쪽에 있는 Navigation Controller에 놓는다. 또는 Window에서 Control + 클릭한 후에 끌어다가 밑에 있는 Navigation Controller에 놓아서 rootViewController를 연결시킨다.

View Controller를 선택하고 오른쪽에서 Class를 MyViewControllerClass로 지정한다.

MyViewControllerClass.m 파일의 다음 메소드를 수정한다.

그리고 실행하면 다음과 같이 화면이 나타난다.

버튼을 누르면 cocos2d 화면 출력

RootViewController.m 파일을 다음과 같이 추가 및 수정한다.

 MyViewControllerClass.h 파일을 다음과 같이 수정한다.

MyViewControllerClass.m 파일을 다음과 같이 수정한다.

버튼을 눌렀을 때 RootViewController로 연결되도록 연결한다. 먼저 위의 버튼 중에서 양복 모양 버튼을 눌러서 Assistant Editor가 나오도록 한다. 그 뒤에 MyViewControllerClass.xib 파일을 선택한 후에 버튼을 선택한다. Control을 누른 상태에서 버튼을 클리하고 마우스를 끌어다가 오른쪽에 있는 buttonTapped 메소드에 놓아서 Connect Action이 되도록 연결한다.

그리고 나서, 실행하여 나오는 첫 화면에서 버튼을 누르면 seeker와 아이콘이 나오는 cocos2d 화면이 나온다.

당연히 왼쪽 위의 버튼을 누르면 첫 화면으로 돌아간다.

처음에 만들어 놓은 cocos2d 화면을 _rootViewController 변수에 저장하고 있으므로 버튼을 눌러 다시 들어와도 화면이 유지된다.

UIScrollView와 cocos2d의 openGL view 동시 사용

UIScrollView는 확대/축소 및 스크롤을 지원하므로 사용하기 매우 편리하다. 그러므로, 배경은 cocos2d의 화면을 사용하고 사용자에게 주된 정보는 UIScrollView를 통해 지원하는 방식이 가능하다.

UIScrollView에서 touch

UIScrollView를 사용하니 매우 편리했는데, 밑에 깔려 있는 cocos2d에 터치를 제공하려고 하니, 되질 않았다. UIScrollView에서는 제스쳐를 인식하려고 노력하기 때문에 touch가 안된다고 한다.

해결 방법은 UIScrollView를 상속받아서 touch를 처리하는 View를 만들면 된다. RootViewController.m 파일에서 @implementation RootViewController 앞에 다음을 추가해 준다.

View 생성 및 연결 방법

RootViewController.h 파일에 imageView 프로퍼티를 추가한다.

RootViewController.m 파일에 imageView 프로퍼티의 메소드를 만들기 위해 synthesize 해준다.

viewDidLoad에서 다음과 같이 연결한다. seeker.png를 확대/축소 및 스크롤하도록 만들었다. 그리고, 소스코드 뒷 부분의 viewForZoomingInScrollView에서는 imageView를 사용하여 줌 및 스크롤이 되도록 한다.

userInteractionEnabled는 여기 저기에 넣어 두었다.

다 되었으면 실행하여 커다란 seeker가 있는지 확인하자. 핀치 액션을 통한 확대/축소, 스크롤 등이 잘 되는지 확인하자.

좌표 이상 해결

seeker를 대상으로 한 동작은 모두 제대로 수행되지만 아이콘의 움직임을 위해 터치 했을 때는 좌표가 정확하지 않다. 이를 수정하는 방법은 다음과 같다.

HelloWorldLayer.m 파일을 다음과 같이 수정한다.

이제 실행해 보면 아이콘의 움직이는 좌표도 정확해 졌음을 확인할 수 있다.

스크롤 뷰를 움직이는 동안 멈추는 현상 해결

스크롤 뷰에 터치하고 움직이는 동안 애니메이션이 멈추는 경우가 있다. 이를 해결하는 방법은 다음과 같다.

프로젝트에서 freezing을 검색하면 CCDirectorIOS.m 파일의 startAnimation 메소드 내의 comment가 검색된다.

이를 다음과 같이 주석 해제하면 된다.

이제 실행해 보면 스크롤 뷰를 터치하여 움직이는 동안에도 cocos2d 애니메이션은 별도로 잘 움직임을 확인할 수 있다.

http://cafe.naver.com/mcbugi/172046 의 글에서는 AppDelegate의 applicationDidFinishLaunching 함수도 고쳐 주라고 되어 있다. 위의 방법만 써도 해결되므로 필요 없을 것으로 생각한다. 

본 예제에서는 애초에 해당 부분을 setupCocos2d 함수에 가져오질 않았었다.

결론

cocos2d와 UIScrollView를 같이 사용하여 두가지의 장점을 한꺼번에 사용할 수 있는 시너지 효과를 얻을 수 있다. 다만, 이때 스크롤뷰가 위에 올려져 있으면 밑에 깔려 있는 cocos2d의 Scene에 터치가 작동하지 않는다. 본 글은 cocos2d와 UIScrollView를 같이 사용하는 방법과 이러한 현상을 해결하기 위한 방법을 설명하였다.

1. 기본적인 앱은 Cocoa Touch를 사용하고 부분적으로 cocos2d를 UIKit과 같이 사용하려고 할 때 적용 가능하다.

2. UIScrollView 밑에 cocos2d를 놓고 사용할 때 터치가 되지 않는 현상을 서브클래싱을 통해 해결하였다.

<참고 문헌>

http://www.cocos2d-iphone.org/wiki/doku.php/prog_guide:lesson_2._your_first_game

http://www.raywenderlich.com/4817/how-to-integrate-cocos2d-and-uikit

http://blog.backpackholic.tv/6

cocos2d를 사용한 물결 효과에 관심이 있으시면 이전에 포스팅한 글에 가보시면 유튜브 영상과 소스코드, 작가의 설명 모두 링크가 되어 있으니 참고하시길...

http://bwoh.tistory.com/14