devon2013_cocostudio

CocoStudio?CocoStudio!

정주홍

저는요

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

소개할 기능

• Scene Editor

CocoStudio 가 뭐죠 ?

• ( 조금 ) 유용한 개발 툴

이 발표에서 다루지 않는 것들

• UI Editor 다루는 법• Animation Editor 쓰는 법• C++, JSON 문법• Visual Studio 사용법 • 대박나는 게임 만드는 법

진짜 시작 !

이런 경험 없으세요 ?

While( 1 ) {

Sprite 올리고 컴파일 ;화면 확인 ;좌표 수정 ;컴파일 ;

}

다른 예시를 들자면…

• 웹 페이지에 그림들 ‘예쁘게’ 띄우기• 안드로이드 레이아웃 ‘예쁘게’ 배치하기

생산성

• 툴 ! 제발 !

그러나…

생산성

• 만들어 주실 분 ?

SceneEditor 를 사용하면…

• 이렇게 많은 오브젝트를 가진 Scene 을 손쉽게 만들 수 있… .


• 진 않습니다 .


• 하지만 꽤나 유용• 생산성 측면에서 배울 가치 有

http://dic.daum.net/word/view.do?wordid=hhw000004113&q=%EC%9C%A0

SceneEditor 를 사용하려면…

• Engine Migration 필요 (Cocos2d-x v2.2)

SceneEditor 를 사용하려면…

• Scene Importer 부분만 빼오거나 직접 구현해도 OK

이제 슬픈 이야기는 그만 !

우리가 만들어 볼 Scene

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

어떻게 만드는지 설명을 듣고

라이브 코딩을 즐기시면 됩니다 .

SceneEditor

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

SceneEditor

1. 화면 크기 조절

SceneEditor

2. 리소스 복사

잠깐 꿀팁 ( 이라 쓰고 안습이라 읽는다 .)

• 종종 Resource Explorer 의 Refresh 가 잘 안 된다 .

-> 사용할 리소스들을 전부 프로젝트 폴더에 복사해두고 Studio 를 껐다가 다시 켠다 .

※ 간헐적 발생 타입의 버그인데 CocoStudio 프로젝트 폴더에 리소스를 아예 다 올려놓으면 편함

SceneEditor

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


• Anchor Point 는 (0.5, 0.5) 에서 바꿀 수 없다 .

-> 그냥 좌표 값으로 잘 계산을 하자 .


• 캔버스 이동이 드래그로 안 된다 .

-> 확대 축소를 이용한 시야 이동


• Alias, Tag, Z Order 등 속성 활용

-> 특히 Tag 는 소스상에서 오브젝트를 찾을 때 이용 . Z Order 값 문제로 화면에서 오브젝트가 안 보이는 경우가 자주 발생 .


• 오브젝트 잠금 기능

->Background Image 와 같은 것들은 잠금 설정해두면 편함


• 오브젝트 Visible 설정 가능

->Z order 가 낮은 오브젝트를 관리할 때 이용

SceneEditor

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


• CocoStudio 상에서 사운드 재생이 되지 않는 음원 존재

-> 골드웨이브와 같은 프로그램으로 살짝 수정하고 다시 저장하면 문제 해결

( 내가 제일 좋아하는 리스항구 노래 넣으려고 했는데… )

여기서 잠깐

• 프로젝트를 미리 만들어 둡시다 .

여기서 잠깐

• 어떤 방법으로든 !

여기서 잠깐

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

여기서 잠깐

•Cocos2dx_home/projects/디렉토리에 프로젝트를 위치시켜 주세요 !

쩨발 !

SceneEditor

5. 만든 Scene 을 Export 합니다 .

SceneEditor


SceneEditor


SceneEditor


SceneEditor


SceneEditor

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

SceneEditor

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

SceneEditor

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

SceneEditor

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

SceneEditor

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

SceneEditor

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

다양하게 씁시다

• GameScene UI 배치• ScoreScene UI 배치• 그 외 여러가지

라이브코딩 시작 !

Technology

devon2013_cocostudio