웹 게임

getChildByName

1. 유니티의 Transform.Find 유니티에서 특정 오브젝트를 검색해서 찾아주는 함수는 Transform의 Find 함수가 대표적이다. 스크립트에서 간단하게 자식 노드들에 접근할 수 있고, 파라미터로 들어가는 path에 경로를 더하고 빼면서 다양하게 활용할 수 있다. 2. 코코스 크리에이터의 Node.getChildByName 유니티의 Find와 대응되는 함수가 코코스 크리에이터에는 getChildByName 이라는 함수로 존재한다. 문제는 이 함수는 노드의 자식을 한 단계밖에 검색하지 못 한다는 것이다. A 노드에서 getChildByName 함수를 통해서 B, C는 찾을 수 있지만 그 아래 D, E, F, G는 못 찾는다. 이런 큰 단점이 있지만 코코스 2.4.8 기준으로, 유니티의 Find와 ..

cc.tween

1. 유니티 Dotween 유니티에서 범용적으로 사용되는 에셋 중에 Dotween 이라는 에셋이 있다. 거의 필수 에셋으로 취급받고 있다. (UI를 포함하는) 어떤 오브젝트에 관한 컨트롤을 스크립트로 할 때 정말 편하게 사용할 수 있는 API다. 기능도 매우 다양하다. 트윈 간의 결합이나 콜백도 간단해서, 직관적이고 읽기 편한 코드를 추구하는 사람에게는 최고의 에셋인것 같다. 2. 코코스 크리에이터 cc.tween 그리고 코코스 크리에이터 v2.0.9 버전부터 dotween을 벤치마킹한 cc.tween이 업데이트됐다. 참고할 수 있는 레퍼런스 페이지는 두 개가 있다. https://docs.cocos.com/creator/manual/en/scripting/tween.html https://docs.co..

[예제 게임] 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..