30
동국대학교 앱창작터 모바일게임과정II:Cocos2dX 3일차: CocosBuilder

Ccx03.cocos builder

  • Upload
    -

  • View
    759

  • Download
    1

Embed Size (px)

Citation preview

Page 1: Ccx03.cocos builder

동국대학교 앱창작터 모바일게임과정II:Cocos2d-­‐X

3일차: CocosBuilder

Page 2: Ccx03.cocos builder

목차

}  CocosBuilder  소개  }  다운로드 및 사용방법  }  CCB파일 작업하기  }  Cocos2d-­‐x에서 사용하기  }  참고자료  

Page 3: Ccx03.cocos builder

COCOSBUILDER 소개

Page 4: Ccx03.cocos builder

}  UI,  애니메이션 등 게임 화면 구성을 간편하게 구현할 수 있는 오픈소스 툴(MIT  라이센스)  

}  Cocos2d  엔진에서 사용  }  Cocos2d-­‐x  }  Cocos2d-­‐iPhone  }  Cocos2d-­‐HTML5  

}  JavaScript  Editor  +  cocosPlayer  }  Mac  OS  X에서만 사용가능  

CocosBuilder 소개

Page 5: Ccx03.cocos builder

다운로드 및 사용방법

모바일게임과정II:Cocos2d-­‐X 5

Page 6: Ccx03.cocos builder

}  Cocosbuilder  다운로드  }  http://cocosbuilder.com/?page_id=11  }  Stable  version  :  2.1  }  Latest  version  :  3.0  alpha5  

}  Github  }  https://github.com/cocos2d/CocosBuilder    

다운로드 및 사용방법

Page 7: Ccx03.cocos builder

}  새 프로젝트 생성하기  }  File-­‐>New-­‐>Project  선택 경로와 프로젝트명을 작성후 ‘save’  

다운로드 및 사용방법

Page 8: Ccx03.cocos builder

}  화면 구성  

다운로드 및 사용방법

리소스 뷰        

프로젝트 리소스 리스트  

편집 화면            

타임라인  

속성창  

상단 메뉴  

Page 9: Ccx03.cocos builder

}  프로젝트 설정  }  File-­‐>Project  Settings  

다운로드 및 사용방법

     

리소스 경로 추가/삭제        

 JavaScript 프로젝트 설정  

     

Page 10: Ccx03.cocos builder

}  퍼블리싱 설정  }  File-­‐>Publish  Settings  

다운로드 및 사용방법

iOS  리소스 설정      

안드로이드 리소스 설정        

HTML5  리소스 설정        

     

기타 설정        

Page 11: Ccx03.cocos builder

}  새 화면 추가  }  File-­‐>New-­‐>Interface  File  선택  

다운로드 및 사용방법

오브젝트 타입 설정, 풀스크린 여부  

지원 해상도 리스트  

Page 12: Ccx03.cocos builder

}  미리 보기(브라우저)  }  File-­‐>Run  in  Browser-­‐>(해당 브라우저) 선택  

다운로드 및 사용방법

Page 13: Ccx03.cocos builder

CCB파일 작업하기

모바일게임과정II:Cocos2d-­‐X 13

Page 14: Ccx03.cocos builder

}  노드 추가하기  }  상단 메뉴에서 노드 선택->좌측하단(0,  0) 지점에 노드 생성  

CCB파일 작업하기

Page 15: Ccx03.cocos builder

}  속성값(프로퍼티) 수정 }  편집 화면에서 해당 노드  선택하면 오른쪽에 선택된  노드의 각종 프로퍼티가  나타남  

CCB파일 작업하기

Page 16: Ccx03.cocos builder

}  노드의 순서(Z-­‐Order) 변경  }  타임라인에서 드래그하여 변경  }  타임라인에서 상단으로 갈수록 뒤에 위치(Z-­‐Order값 감소)  

CCB파일 작업하기

Page 17: Ccx03.cocos builder

}  애니메이션: 키프레임 추가  }  타임라인에서 아래 화살표 클릭-­‐>원하는 프로퍼티의 시간 영역에 ‘option키’  +  클릭  

CCB파일 작업하기

Page 18: Ccx03.cocos builder

}  애니메이션: 키프레임 편집 }  타임라인에서 키프레임 더블클릭  

CCB파일 작업하기

Page 19: Ccx03.cocos builder

}  애니메이션: 키프레임 삭제 }  타임라인에서 키프레임 선택->‘delete키’  

CCB파일 작업하기

Page 20: Ccx03.cocos builder

}  애니메이션: 연속적인 이미지 사용 }  리소스 리스트에서 프레임 선택 후 Animation-­‐>’Create  Fra

mes  from  Selected  Resources’  

CCB파일 작업하기

Page 21: Ccx03.cocos builder

}  애니메이션: 이징 액션(Easing  Action)  적용  }  연결된 두 키프레임 사이에서 오른 클릭  

CCB파일 작업하기

Page 22: Ccx03.cocos builder

}  애니메이션: 다중 타임라인 }  타임라인 제목 클릭-­‐>Edit  Timelines-­‐>’+’ 클릭  

CCB파일 작업하기

Page 23: Ccx03.cocos builder

}  애니메이션: 타임라인 연계(chain)  }  타임라인 하단 ‘No  chained  timeline’  클릭-­‐>연계할 타임라인 선택  

CCB파일 작업하기

Page 24: Ccx03.cocos builder

COCOS2D-X에서 사용하기

모바일게임과정II:Cocos2d-­‐X 24

Page 25: Ccx03.cocos builder

}  프로젝트  퍼블리싱  }  File-­‐>Publish  :  *.ccbi및 리소스 출력  

Cocos2d-x에서 사용하기

Page 26: Ccx03.cocos builder

q  Cocos2d-­‐x  프로젝트에  *.ccbi  및 리소스 포함  

Cocos2d-x에서 사용하기

Page 27: Ccx03.cocos builder

}  Cocos2d-­‐x  프로젝트에서  *.ccbi  불러오기  

Cocos2d-x에서 사용하기

AppDelegate.cpp  

헤더 추가, 네임스페이스 명시  

수정  

Page 28: Ccx03.cocos builder

}  실행화면  

Cocos2d-x에서 사용하기

Page 29: Ccx03.cocos builder

참고자료

모바일게임과정II:Cocos2d-­‐X 29

Page 30: Ccx03.cocos builder

}  CocosBuilder  User  Guide  }  Help-­‐>CocosBuilder  User  Guide  

}  Cocos2d-­‐x  사용자 모임(저자 카페)  }  http://cafe.naver.com/cocos2dxusers    }  코코스 빌더 강좌(정회원 이상 읽기 가능)  

참고자료