코코스 크리에이터

순환 참조

옛날에 C++ 공부할 때 경험했던 순환 참조는 위와 같이 두 개의 헤더 파일이 서로를 include 했을 때 발생하는 문제였다. 이런 경우에는 주로 헤더파일 include 없이 참조하려는 클래스를 전방 선언하는 방법으로 해결했다. 최근에 타입스크립트에서도 비슷한 문제를 겪게 되었다. A-Script.ts import { B } from "B-Script"; export class A {} class Main { nodeA: A; constructor() { this.nodeA = new B(); } } B-Script.ts import { A } from "A-Script"; export class B extends A {} 이러한 구조에서 컴파일을 하니 코코스 크리에이터 에디터에서 아래와 같은 에러가 ..

생명주기(Life Cycle)

코코스 크리에이터의 cc.Component는 유니티의 MonoBehavior 비슷하게 Life Cycle에 의해 순차적으로 콜백 함수들이 실행된다. 워낙 유니티와 흡사해서 따로 정리할 생각은 없었는데, 코코스 크리에이터를 다루려면 기본 중의 기본이라 한번 정리해본다. 간단하게 Life Cycle은 위와 같다. 1. onLoad 컴포넌트 스크립트가 초기화되는 단계에서 가장 처음 실행되는 콜백 함수다. 씬에 배치돼있던 컴포넌트들은 씬이 로드되면 onLoad 함수가 실행되고 런타임 중에 cc.instantiate로 컴포넌트를 생성하면 그때 실행된다. 주로 onLoad 함수 안에는 각종 변수들을 초기화하는 코드들을 넣는데 A 컴포넌트의 onLoad에서 B 컴포넌트의 onLoad에서 초기화되는 변수를 참조하는 경..

런타임 중 스프라이트 교체

만약 런타임 중에 어떤 노드의 이미지를 바꿔야 한다고 하면 Sprite 컴포넌트에 접근해서 spriteFrame을 새로운 cc.SpriteFrame으로 바꿔주면 된다. 그 경우 이미지는 바뀌겠지만 노드의 사이즈는 유지가 된다. 즉 500x500 사이즈의 SpriteFrame으로 교체를 해도 1280x720 사이즈에 맞게 이미지가 늘어날 것이다. static ChangeSprite(target: cc.Sprite, newSpriteFrame: cc.SpriteFrame, resize: boolean){ target.spriteFrame = newSpriteFrame; if (resize) target.node.setContentSize(newSpriteFrame.getOriginalSize()); } 그럴..

노드를 화면 가득 차게 늘리는 법 #Basic

1. 캔버스의 이해 1280x720 사이즈의 캔버스 밑에 1280x720 사이즈의 이미지 노드를 놓았다. 이 상태에서 씬을 실행하고서 가로:세로 비율이 2.36인 해상도에서 확인하면 위와 같이 나온다. 메인 캔버스의 옵션에서 Fit Width와 Fit Height에 체크를 모두 했으면 물리적으로는 둘 다 적용할 수 없기 때문에 에디터는 둘 중 하나를 선택해서 적용한다. 실제 화면의 가로:세로 비율이 캔버스 가로:세로 비율보다 큰 경우(가로로 긴 경우) Fit Height를, 실제 화면의 가로:세로 비율이 캔버스 가로:세로 비율보다 작은 경우(세로로 긴 경우) Fit Width를 적용한다. (여기서 비율은 가로 사이즈를 세로 사이즈로 나눈 가로:세로 비율을 의미) 위는 실제 화면 비율인 2.36이 캔버스 ..

모바일 해상도를 PC에서 확인하는 방법

1. 스크립트에서 화면 사이즈를 확인하는 방법 const frameSize: cc.Size = cc.view.getFrameSize(); 실제로 게임이 보이는 영역의 사이즈를 반환하는 함수다. 어떤 UI를 화면에 가득 차게 그리거나 어떤 예외처리를 하거나 할 때 무조건 사용해야 하는 함수다. 2. 에디터에서 화면 사이즈를 바꾸는 방법 에디터에서 크롬을 통해 게임을 실행하면 위와 같이 기본 해상도 프리셋들이 존재한다. 프리셋의 종류도 적고, 이 프리셋이 어떤 비율의 해상도인지 알기 힘들다. C:\CocosDashboard_1.0.11\resources\.editors\Creator\2.4.8(version)\resources\static\preview-templates\boot.js 코코스 크리에이터 대시..

Label Update

https://growy.tistory.com/39?category=1206374 Layout Update 위와 같은 구조에서 Layout 노드에 아이템을 추가/삭제할 때마다 Layout 노드의 사이즈도 유동적으로 변한다. 아이템 간의 padding(간격)과 레이아웃에 속해 있는 아이템들의 넓이들을 모두 더한 값을 growy.tistory.com 위와 비슷한 내용을 다루려고 한다. Label 컴포넌트는 내용(string)에 따라서 노드 사이즈가 유동적으로 변하는 특징이 있다. 문제는 에디터의 프로퍼티창에서는 확인할 수 있지만, 스크립트에서도 똑같이 작동할까? let size = this.targetLabel.node.getContentSize(); this.targetLabel.string = '1111..

프리팹 안에 프리팹

코코스 크리에이터에서도 프리팹을 씬에 배치했을 때 유니티의 Select, Revert, Apply에 대응하는 Select, Go Back, Save 버튼이 있다. Select : assets 폴더에서 프리팹의 위치로 이동 Go Back : 씬에 배치된 프리팹의 내용을 원본 프리팹의의 내용으로 덮어쓰기 Save : 씬에 배치된 프리팹의 내용을 원본 프리팹에 저장 하지만 A 프리팹 안에 B 프리팹을 배치한 구조에서는 B 프리팹의 Go Back, Save 기능이 사라진다. B 프리팹을 수정하면 A 프리팹을 열어서 기존 B 프리팹을 삭제하고 새 B 프리팹을 다시 배치해야 된다. 이러한 불편함은 왼쪽의 파란색 클립 모양을 눌러 해결할 수 있다. 이걸 누르면 해당 B 프리팹은 auto-syncable 프리팹이 되고..

오브젝트 풀링 (Ojbect Pooling)

위 게임은 뱀파이어 서바이벌이라는 게임인데, 오브젝트 풀링에 분명히 신경을 많이 썼을 것으로 예상돼서 가져왔다. 오브젝트 풀링은 대표적이고 전통적인 최적화 기술 중 하나고 다양한 방면에서 활용할 수 있다. 꽤나 중요하고 자주 쓰는 기술이다 보니 검색하면 관련 내용들이 무수히 나온다. 하지만, 그렇다고 유니티가 따로 오브젝트 풀링 관련된 API를 제공하지는 않는다. 반면 코코스 크리에이터에서는 오브젝트 풀링 API를 제공하고 있다. 그리고 코코스는 오브젝트를 노드로 부르기 때문에 그 이름이 노드 풀링(Node Pooling)이다. 오브젝트 풀링은 여러가지 예외처리, 최적화 처리를 해줘야 해서 built-in 된 API를 그대로 쓰는 것보다는 직접 구현하는 것이 적절하다고 생각하지만, 그래도 한 번 정리해본..