데브온 2013 CocoStudio 관련 발표 자료입니다.

1. CocoStudio?
CocoStudio!
정주홍

2. 저는요
• 숭실대학교 13학번
• 소프트웨어 마에스트로 2기
• 게임 개발 매우 사랑함
• 철야를 잘 함

3. 소개할 기능
• Scene Editor

4. CocoStudio가 뭐죠?
• (조금)유용한 개발 툴

6. 이 발표에서 다루지 않는 것들
• UI Editor 다루는 법
• Animation Editor 쓰는 법
• C++, JSON 문법
• Visual Studio 사용법
• 대박나는 게임 만드는 법

7. 진짜 시작!

8. 이런 경험 없으세요?
While( 1 )
{
Sprite 올리고 컴파일;
화면 확인;
좌표 수정;
컴파일;
}

9. 다른 예시를 들자면…
• 웹 페이지에 그림들 ‘예쁘게’ 띄우기
• 안드로이드 레이아웃 ‘예쁘게’ 배치하기

10. 생산성
• 툴!
제발!

11. 그러나…

12. 생산성
• 만들어 주실 분?

13. SceneEditor를 사용하면…
• 이렇게 많은 오브젝트를 가진 Scene을
손쉽게 만들 수 있….

14. SceneEditor를 사용하면…
• 진 않습니다.

15. SceneEditor를 사용하면…
• 하지만 꽤나 유용
• 생산성 측면에서 배울 가치 有

16. SceneEditor를 사용하려면…
• Engine Migration 필요(Cocos2d-x v2.2)

17. SceneEditor를 사용하려면…
• Scene Importer 부분만 빼오거나
직접 구현해도 OK

18. 이제 슬픈 이야기는
그만!

19. 우리가 만들어 볼 Scene
• 요정의숲:달려양 타이틀화면
(조만간 안드로이드 마켓에서 받을 수 있어요!)

21. SceneEditor
0. 툴을 켜고, 프로젝트 생성

22. SceneEditor
1. 화면 크기 조절

23. SceneEditor
2. 리소스 복사

24. 잠깐 꿀팁(이라 쓰고 안습이라 읽는다.)
• 종종 Resource Explorer의 Refresh가
잘 안 된다.
->사용할 리소스들을 전부 프로젝트 폴더에 복
사해두고 Studio를 껐다가 다시 켠다.
※ 간헐적 발생 타입의 버그인데 CocoStudio 프
로젝트 폴더에 리소스를 아예 다 올려놓으면 편
함

25. SceneEditor
3. 리소스들을 드래그하여 Node 배치

26. 잠깐 꿀팁(이라 쓰고 안습이라 읽는다.)
• Anchor Point는 (0.5, 0.5)에서 바꿀 수 없다.
->그냥 좌표 값으로 잘 계산을 하자.

27. 잠깐 꿀팁(이라 쓰고 안습이라 읽는다.)
• 캔버스 이동이 드래그로 안 된다.
->확대 축소를 이용한 시야 이동

28. 잠깐 꿀팁(이라 쓰고 안습이라 읽는다.)
• Alias, Tag, Z Order등 속성 활용
->특히 Tag는 소스상에서 오브젝트를 찾을 때
이용. Z Order 값 문제로 화면에서 오브젝트가
안 보이는 경우가 자주 발생.

29. 잠깐 꿀팁(이라 쓰고 안습이라 읽는다.)
• 오브젝트 잠금 기능
->Background Image와 같은 것들은 잠금 설정
해두면 편함

30. 잠깐 꿀팁(이라 쓰고 안습이라 읽는다.)
• 오브젝트 Visible 설정 가능
->Z order가 낮은 오브젝트를 관리할 때 이용

31. SceneEditor
4. 배경음 등록은 드래그로

32. 잠깐 꿀팁(이라 쓰고 안습이라 읽는다.)
• CocoStudio 상에서 사운드 재생이 되지 않는 음
원 존재
->골드웨이브와 같은 프로그램으로 살짝 수정
하고 다시 저장하면 문제 해결
(내가 제일 좋아하는 리스항구 노래 넣으려고 했는데…)

33. 여기서 잠깐
• 프로젝트를 미리 만들어 둡시다.

34. 여기서 잠깐
• 어떤 방법으로든!

35. 여기서 잠깐
• Github에도 올려뒀습니다.
(Github에서
gdgssu
repository를
검색해주세요.)

36. 여기서 잠깐
• Cocos2dx_home/projects/
디렉토리에 프로젝트를 위치시켜 주
세요!
쩨발!

37. SceneEditor
5. 만든 Scene을 Export 합니다.

38. SceneEditor
5. 만든 Scene을 Export 합니다.

39. SceneEditor
5. 만든 Scene을 Export 합니다.

40. SceneEditor
5. 만든 Scene을 Export 합니다.

41. SceneEditor
5. 만든 Scene을 Export 합니다.

42. SceneEditor
6. 소스코드를 만집니다.
- 해상도 조절 (win32/main.cpp)

43. SceneEditor
6. 소스코드를 만집니다.
- Extension 헤더 추가
(Classes/HelloWorldScene.cpp)

44. SceneEditor
6. 소스코드를 만집니다.
- 기존 코드 삭제 (Classes/HelloWorldScene.cpp)

45. SceneEditor
6. 소스코드를 만집니다.
- 만든 Scene 로드
(Classes/HelloWorldScene.cpp)

46. SceneEditor
7. 잘 로딩 되는 것을 확인합니다.

47. SceneEditor
8. 그냥 있으면 심심하니까 액션도 넣어줘요.

49. 다양하게 씁시다
• GameScene UI 배치
• ScoreScene UI 배치
• 그 외 여러가지