Cocos Creator

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

https://growy.tistory.com/48 특정 노드를 화면 가득 차게 늘리는 법 #Basic 1. 캔버스의 이해 1280x720 사이즈의 캔버스 밑에 1280x720 사이즈의 이미지 노드를 놓았다. 이 상태에서 씬을 실행하고서 가로:세로 비율이 2.36인 해상도에서 확인하면 위와 같이 나온다. 메인 캔버 growy.tistory.com Canvas와 Fit Height, Fit Width의 적용 원리와 같은 기본 개념은 이전에 작성한 글에서 확인 가능하다. 위 글에서 정리한 기본적인 개념을 더 확장하고, 추가 개념을 입혀서 내가 만든 게임이 PC와 모든 모바일 기기 해상도에서 문제없이 잘 나오도록 하는 것이 목표다. 또한 UI를 PC용, 태블릿용, 모바일 가로용, 모바일 세로용으로 각각 만든다..

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

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() { // 미니맵 ..

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 애니메이션은 현재 상태에 따라서 여러 애니메이션을 적용하거나 나중에 애니메이션이 재생할 수 있도록하는 애니메이션 큐잉, 크로스 ..

런타임 중에 노드의 뎁스(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(..

스크롤 뷰(Scroll View)와 스크롤 바(Scroll Bar)

엔진에서 Node with Scroll View를 선택하면 위와 같이 기본 스크롤 뷰가 생성된다. 이 스크롤 뷰 안에는 스크롤 바가 포함돼있다. 움짤을 잘 보면 스크롤 바를 움직일 때 스크롤 바가 반대 방향으로 움직이는 것을 볼 수 있다. 그렇다. 스크롤 바를 드래그하는 것처럼 보이지만, 사실은 터치 이벤트는 스크롤 뷰가 받아서 스크롤 뷰가 움직이고 있는 것이고 연쇄적으로 스크롤 바의 위치도 업데이트가 되는 것이다. 그래서 스크롤 바가 반대 방향으로 움직이는 것처럼 보이는 것이다. 스크롤 뷰와 별개로 스크롤 바를 드래그해서 먼저 움직일 수는 없다. 정리하면 [ a. 스크롤 뷰 드래그 → b. 스크롤 뷰 움직임 → c. 스크롤 바 움직임 ] 이 행동은 디폴트 스크롤 뷰에서 지원을 해줘서 작동을 하지만 [ ..

Swallow Touch

Swallow 단어 뜻은 '삼키다'인데, 보통 게임 쪽에서 Swallow Touch는 어떤 오브젝트들이 겹쳐있을 때 아래쪽에 있는 오브젝트에 대한 터치를 허용하는가를 의미한다. 빨간색 노드를 A, 파란색 노드를 B라고 할 때, 노드 트리에서 B가 A보다 위에 있다. 코코스 엔진에서는 기본적으로 Swallow Touch가 막혀있기 때문에 노란색으로 표시한 영역을 터치하면 파란색 노드 B의 터치 이벤트만 발생한다. @ccclass export default class SwallowTest extends cc.Component { @property(cc.Node) underNode: cc.Node = null; @property(cc.Node) topNode: cc.Node = null; onLoad() { ..

드로우 콜(Draw Call)

1. 드로우 콜(Draw Call) 유니티와 코코스 크리에이터 같은 상용 엔진에 동일하게 존재하는 개념이다. 매 프레임마다 캔버스를 클리어하고 구성 요소들을 새로 그리기 위해, CPU가 GPU에게 보내는 요청을 Draw Call이라 할 수 있다. 한 프레임 안에 모든 Draw Call을 처리해야 하므로, Draw Call이 높아서 한 프레임의 길이가 길어지면 이는 곧 프레임 저하로 이어지게 된다. 코코스 크리에이터에서는 런타임 중에 FPS나 Draw Call을 확인할 수 있도록 지원해주고 있다. 2. 배칭(Batching) 비어있는 캔버스의 경우 기본적으로 1의 Draw Call을 차지한다. 오브젝트가 하나씩 추가될 때마다 Draw Call이 +1 증가한 것을 확인할 수 있다. 정확히 따지면 항상 그렇지..