전체 글

숫자 세 자리마다 콤마 찍기

let value = 12523401.515; let str = value.toLocaleString(); // '12,523,401.515' Number 타입의 내장 함수인 toLocaleString 함수를 통해 세 자리마다 콤마를 찍는 표기방식을 적용한 string 값을 얻을 수 있다. let value = 12523401.515.toFixed(2); // '12523401.52' let str = value.toLocaleString(); // '12523401.52' 문제는 toFixed 함수(소수점 표시 제한)를 거친 뒤 toLocaleString 함수를 실행하면 세 자리마다 콤마를 찍지 않는다. 왜냐하면 toFixed로 인해 value의 타입이 string으로 바뀌었고, string의 내장 함..

노드 안에 노드가 들어있는지 확인하기

let rectLocal = this.node.getBoundingBox(); let rectWorld = this.node.getBoundingBoxToWorld(); 코코스 크리에이터에는 유니티의 RectTransform에 대응되는 BoundingBox가 있다. 함수의 리턴값은 x, y, width, height로 구성된 cc.Rect 다. 이때 x, y는 노드의 왼쪽 하단 모서리를 의미한다. let rectA = this.boxA.getBoundingBoxToWorld(); let rectB = this.boxB.getBoundingBoxToWorld(); if ((rectA.x = rectB.x + rectB.width) && // Right (rectA.y + rectA.height >= rec..

간단한 미니 맵

위와 같이 씬에는 캐릭터 노드가 하나만 존재하지만, 고정된 랜더링 영역에서 추가된 미니맵 카메라가 캐릭터를 새로 그리고 있다. 미니맵 카메라는 메인 카메라를 복사했다. 메인 카메라는 씬에 있는 모든 것을 보여주고, 미니맵 카메라는 일부만 보여주길 원한다면 cullingMask 옵션을 활용하면 된다. const {ccclass, property} = cc._decorator; @ccclass export default class MiniMap extends cc.Component { @property(cc.Camera) miniMapCamera: cc.Camera = null; @property(cc.Sprite) miniMapSprite: cc.Sprite = null; onLoad() { // 미니맵 ..

Key와 Value 쌍의 컬렉션

1. 사용자 정의 타입 컬렉션 (Object) let elixirLevels: {[heroLevel: number]: number} = {}; elixirLevels[1] = 10; elixirLevels[2] = 20; elixirLevels[3] = 30; 가장 간단하게 Key와 Value 쌍으로 이뤄진 컬렉션은 위와 같이 만들 수 있다. 이러한 타입은 Object라고 한다. key값은 string과 number(enum number도 가능)만 사용할 수 있으며 value는 제약이 없다. 컬렉션에 원소 추가, 삭제, 검색 등의 함수들은 본인이 따로 만드는 것이 아닌 이상 존재하지 않으며, 이 Object의 key와 value에 접근할 수 있는 함수들은 ObjectConstructor에 존재한다. le..

Spine

코코스 크리에이터에서 스파인을 사용할 것이라면 아래 글들을 꼭 봐야한다. https://thd0011.tistory.com/32 [Cocos Creator] Spine 정복하기(1) - 기본 프로퍼티 Spine 스파인은 게임에서 사용하는 2D 애니메이션 툴입니다. 디자인을 작업하시는 분이 스파인 툴로 애니메이션을 만들고 그것을 게임에 사용하여 기존 애니메이션 보다 훨씬 효율적이고 부드럽 thd0011.tistory.com https://thd0011.tistory.com/33 [Cocos Creator] Spine 정복하기(2) - Animation Animation Spine 애니메이션은 현재 상태에 따라서 여러 애니메이션을 적용하거나 나중에 애니메이션이 재생할 수 있도록하는 애니메이션 큐잉, 크로스 ..

클라우드 웹 서버 설치 & 연동하기 #2

1. 유니티 프로젝트에 JSON 설치 https://postiveground.com/etc/%ec%9c%a0%eb%8b%88%ed%8b%b0-json-%ec%82%ac%ec%9a%a9-%eb%b0%a9%eb%b2%95/ PHP는 서버 DB를 탐색한 결과값을 JSON 형식으로 유니티 클라이언트에게 전달할 것이기 때문에 그 결과값을 받아서 처리할 프로젝트에는 당연히 JSON이 설치돼있어야 한다. 요즘 유니티는 Newtonsoft.json 라이브러리 사용을 권장하는 듯하다. 위 링크를 보고서 유니티 패키지 매니저를 통해 설치하고 학습하면 된다. 2. DB에서 테이블 읽기 서버 DB에 위와 같이 몬스터 정보에 관한 테이블이 있다. (다시 말하면, 서버 DB에 위와 같이 몬스터나 아이템 정보들을 놓고서 이를 클라..

클라우드 웹 서버 설치 & 연동하기 #1

요즘은 뒤끝, 플레이팹, 파이어베이스 등 상용 Game BAAS와 관련 레퍼런스가 많아져서 혼자 게임 개발을 하는 사람들도 쉽게 내 게임에 작은 서버를 붙일 수 있다. 학원 졸업 후 같이 공부하던 스터디 네이버 카페를 보다가 신입 포트폴리오를 만들기 위해 BAAS를 이용하지 않고, 작은 클라우드 서버를 만들어서 게임에 연동했던 과정을 3년에 정리했던 글을 찾게 됐다. 그때는 닷홈이라는 업체의 웹 호스팅을 통해 서버 내의 DB를 긁는 방식까지만 학원에서 배웠었고, 이 글은 여러 클라우드 서버 중에서 네이버 클라우드에 작은 서버와 DB를 만들고 내 게임에서 해당 DB를 참조하는 방법에 대한 글이다. 그나저나 지금 생각해 보니 서버 DB에 유저 정보는 그렇다 치고, 몬스터나 아이템 정보까지 넣어 놓고서 게임에..

런타임 중에 노드의 뎁스(Depth) 정렬하기

이러한 씬에서 여러 가지를 확인해보려고 한다. 코코스 크리에이터에서 노드의 뎁스를 결정하는 요소는 Sibling Index와 z Index 두 가지가 있다. 두 가지 모두 cc.Node의 멤버 변수로서 접근할 수 있다. 1. Sibling Index Sibling Index는 '해당 노드가 부모 노드 안에서 몇 번째에 위치하는지'를 의미한다. let siblings = this.root.children.map(x => { return x.getSiblingIndex() }); A, B, C 노드의 Sibling Index를 구하면 [0, 1, 2] 값이 나온다. this.root.children[0].setSiblingIndex(1); let siblings = this.root.children.map(..