코코스

[예제 게임] GameScene #5 (스프라이트 로드와 교체)

게임 일시정지 온오프 버튼과 사운드 음소거 온오프 버튼을 만든다. 버튼은 누를 때마다 2장의 스프라이트를 번갈아서 교체하는 Toggle 형식으로 만든다. 오른쪽 상단에 버튼 두 개를 만들어준다. 버튼의 스프라이트 교체는 버튼 컴포넌트의 Transition 속성으로 구현할 수도 있다. 기본 트랜지션 상태는 보다시피 4 종류밖에 제공하지 않는데, 버튼을 누를 때마다 스프라이트를 교체하는 건 이 상태들로 구현할 수 없다. 그래서 트랜지션은 NONE으로 두고서 스크립트로 조작을 한다. @property(cc.Sprite) pauseGameButton:cc.Sprite = null; @property(cc.Sprite) pauseSoundButton:cc.Sprite = null; pauseGameSprite:c..

[예제 게임] GameScene #4 (오디오 매니저)

배경 음악, 물고기 잡았을 때 효과음, 떨어트렸을 때 효과음. 3개를 준비한다. 그리고 씬에 AudioManager 노드를 만들고 AudioSource 컴포넌트를 추가한다. AudioSource와 AudioClip 개념은 유니티와 거의 동일하다. AudioSource 컴포넌트가 붙은 노드는 일종의 MP3 플레이어가 된다. 이번 포스팅에서는 오디오 매니저가 클립 리스트를 가지고 있고 외부에서 오디오 매니저에게 클립의 키 값(음원 이름)을 주고서 재생해달라고 요청하는 방식에 대해 쓰려고 한다. 그리고 재생 요청을 받은 오디오 매니저는 자신이 가지고 있는 오디오 소스로 클립을 재생할 수도 있고 코코스 오디오 엔진에게 클립을 다시 전달해서 엔진이 재생시키도록 할 수 있다. 1. AudioManager const..

[예제 게임] GameScene #3 (게임 일시 정지)

1. 게임 오버 패널 만들기 사진과 같이 게임 오버 패널을 만들어주고 비활성화 상태로 한다. 패널 안에는 게임 화면을 검은색 반투명 처리하는 스프라이트와 게임을 다시 시작할 수 있는 버튼 등도 추가해준다. 기본 레이아웃을 만들면 흰색 박스가 만들어지는데, 흰색을 검은색으로 바꾸고 알파 값을 128로 낮춰서 반투명 스프라이트를 만들었다. 다른 방법은 빈 노드에 스프라이트 컴포넌트를 붙이고 Sprite Frame, Type, Size Mode를 사진과 같이 설정하면 된다. @property(cc.Node) gameOverPanel:cc.Node = null; 만든 게임 오버 패널을 GameScene 스크립트에 연결해준다. 스크립트에서는 라이프가 0 이하가 되어서 게임 오버 됐는지, 일시정지 버튼을 눌렀는지 ..

[예제 게임] GameScene #2 (UI 배치, 클릭 이벤트, 스코어 갱신)

스폰되는 물고기들을 클릭하면 점수를 추가하고, 아래로 떨어지면 라이프가 감소하도록 한다. 물고기를 클릭하거나 바닥에 떨어트렸을 경우 물고기를 비활성화하고 오브젝트 풀에 반납하도록 한다. 1.Status UI 배치 먼저 현재 점수, 현재 라이프, 기존 최고 점수를 표시할 UI를 추가한다. 크롬 디버거를 통해 여러 디바이스에서 게임을 실행하면 iPad 시리즈에서는 화면 양 옆과 UI가 잘리는 것을 볼 수 있다. 캔버스 속성을 Fit Height에 맞춰놓았기 때문이다. 이런 경우에는 StatusUI 노드에는 Widget 컴포넌트를 추가하고 패딩을 설정한다. 유니티의 RectTransform의 Anchor와 비슷한 역할을 한다. StatusUI 아래의 UI 노드들은 항상 화면 왼쪽으로부터 간격을 띄우고 위치하도..

[예제 게임] GameScene #1 (오브젝트 풀링)

1. 레이아웃(Layout) 생성 GameScene에도 똑같이 기본 캔버스 아래에 배경 이미지를 넣어준다. 그리고 물고기들이 참조할 영역(어디를 기준으로 +5 높이에서 떨어지고, 어디를 기준으로 아래로 내려가면 사라지는지)이 필요한데, 이를 위해 Layout 노드를 만들어준다. 레이아웃은 기본으로 스프라이트 컴포넌트를 가지고 있는데 배경은 필요 없으므로 스프라이트 컴포넌트는 비활성화하거나 지워준다. 사이즈도 캔버스와 동일한 크기로 설정해준다. 원래 레이아웃은 자식 노드들을 규칙성을 가지고 정렬할 때 (ex. 인벤토리의 아이템들 정렬) 사용하는 노드다. Type은 이 레이아웃 아래 자식들의 정렬 방식을 뜻한다. Resize Mode는 부모 캔버스의 사이즈가 바뀔 때, 이 레이아웃도 사이즈를 변경하는데 컨테..

[예제 게임] 씬 전환과 버튼 클릭 이벤트

버튼을 누르면 씬 전환이 이뤄지도록 한다. 다음 씬인 GameScene을 만들고, 버튼에 붙여줄 StartGameButton.ts 스크립트를 만든다. 그리고 TitleScene의 로직을 작성할 TitleScene.ts 스크립트로 만들어준다. (참고로 앞으로 대부분의 스크립트는 타입 스크립트로 작성할 것이다) // TitleScene.ts const {ccclass, property} = cc._decorator; @ccclass export default class TitleScene extends cc.Component { start () { cc.director.preloadScene("GameScene"); } } 타이틀 씬의 로직은 별다른건 없고, 다음 씬인 GameScene을 미리 로드한다. N..

[예제 게임] TitleScene 만들기 (해상도와 UI)

1. 해상도 설정 상단 탭에서 Project - Project Settings에서 해상도를 변경할 수 있다. Preview Start Scene은 이 게임을 실행할 때 어떤 신으로 시작할지에 대한 설정이다. 유니티에서는 Build Settings - Scenes In Build 에서 빌드에 포함할 씬, 씬의 순서를 정해줄 수 있는데 이와 비슷하다. Web Preview Port는 로컬에서 실행했을 때 localhost의 포트넘버다. 건들 필요는 없는 것 같고 launch.json에 적혀있는 url과 동일해야 한다. Design Resolution은 게임 해상도를 의미한다. 아래 Fit Width와 Fit Height는 고정된 높이를 사용할 것인지에 대한 설정이다. 디바이스의 해상도가 설정한 960x640..

개발 환경 갖추기

1. 코코스 크리에이터 설치 https://www.cocos.com/en/creator/download 2021.05.28 기준으로 코코스 크리에이터 V3.1.0까지 릴리즈 됐다. 3.x 버전부터 여러 가지 3D 관련 기능과 플러그인들이 추가되면서 방향성이 3D 쪽에 기울어진 느낌이 든다. 그리고 3.x 이전 버전의 UI 체계는 유니티의 UGUI와 비슷했다면 이후 방향은 NGUI와 가깝다는 평가도 있다. UGUI와 NGUI 둘 다 사용해봤지만 개인적으로는 UGUI가 더 직관적이고 사용하기 편하다는 생각이 든다. 3.x 버전에서 2D 프로젝트를 만들면 UI의 depth 관련한 이슈가 있다고 해서 나는 2.x 버전을 사용하기로 했다. 3.0 버전 프리뷰 노트를 보면 2.4 버전도 향후 2년 동안 지속적인 업..