만재송

Slot 슬롯은 Bone 과 스킨을 연결해주는 매개체입니다. Bone에는 Slot 이 존재하고 그 Slot 안에는 우리가 눈에 보이는 이미지(스킨)가 존재하게 됩니다. 즉, Slot 의 주 된 역할은 Spine 애니메이션의 이미지 변경입니다. Slot 에 접근은 Bone 의 접근과비슷하게 findSlot 으로 합니다. 똑같이 Slot 의 이름을 알아야 접근이 가능합니다. 아래캡쳐는 spineboy 의 Slot 종류를 나타냅니다. 그럼 findSlot을 사용하여 고글에 한번 접근해보겠습니다. this.goggle = this.spine.findSlot("goggles"); // 고글 슬롯에 접근console.log(this.goggle); 간단하게 접근이 가능합니다. 콘솔에 확인해보시면 goggles Sl..

Spine 의 JSON 파일 데이터를 살펴보면 여러 항목으로 구성되어 있습니다. 이번 포스팅에서는 Spine 애니메이션의 뼈대가 되는 bone 과 ik 에 대해 설명 하겠습니다. Bone Spine 애니메이션은 여러개의 뻐대로 이루어져 있습니다. 실제로 우리 눈에 보이는 Spine 이미지는 1개로 보여지지만 실제로는 여러 이미지가 Bone에 의해서 연결되어 있는것입니다. Spine 애니메이션도 Bone의 위치와 회전 등, 어떻게 하냐에 따라서 애니메이션이 달라지는 것입니다. _skeletonJson -> ik) 여러 IK 가 있네요. 그중 다리를 한번 움직여 보겠습니다. IK 도 똑같이 Bone 에 속해 있기 때문에 findBone 으로 접근합니다. let leg = this.spine.findBone(..

EventListener 애니메이션을 실행할 때, 중단될 때, 끝날 때 등등 해당 지점에서 이벤트를 수신하여 그에대한 콜백을 처리 할 수 있습니다. 어떤 이벤트 리스너가 있는지 알아보겠습니다. setStartListener setStartListener는 애니메이션이 시작하면 호출되는 메서드입니다. this.spine.setStartListener((trackEntry) => { console.log(trackEntry); console.log(trackEntry.animation.name + " anim start.");}); 모든 리스너의 콜백함수는 trackEntry 라는 인자값을 받습니다. trackEntry 객체는 애니메이션정보, 트랙정보, 애니메이션 시간 등 여러 정보들을 담고있습니다. set..

Animation Spine 애니메이션은 현재 상태에 따라서 여러 애니메이션을 적용하거나 나중에 애니메이션이 재생할 수 있도록하는 애니메이션 큐잉, 크로스 페이딩이 되기위한 믹싱, 여러 애니메이션 동시적용 등 다양한 기능을 지원하고 있습니다. 이번 포스팅에서는 Animation을 효율적이고 잘 구현 할 수 있게 해주는 메서드들에 대해 알아보겠습니다. Mix 믹스는 애니메이션을 변경할 때 크로스 페이드 되어서 애니메이션을 부드럽게 전환해주는 기능입니다. this.spine.setMix("idle", "walk", 0.4); // (fromAnimation, toAnimation, duration) 위의 코드를 예로들면 "idle" 상태에서 "walk" 상태로 애니메이션이 전환될 때 0.4 초의 시간동안 믹..

Spine 스파인은 게임에서 사용하는 2D 애니메이션 툴입니다. 디자인을 작업하시는 분이 스파인 툴로 애니메이션을 만들고 그것을 게임에 사용하여 기존 애니메이션 보다 훨씬 효율적이고 부드럽게 동작을 하게됩니다. 스파인의 장점은 아래와 같습니다. - 작은 용량: 기존 애니메이션은 애니메이션의 각 프레임마다 이미지가 필요합니다. Spine 애니메이션은 용량이 매우 작은 뼈대 데이터만을 저장하며 이는 독특한 애니메이션이 많이 있는 게임을 만들 수 있도록 해줍니다. - 그림 파일 요구량: Spine 애니메이션은 필요한 그림 파일이 훨씬 적기 때문에 게임에 들어가는 시간과 비용을 현저히 줄일 수 있습니다. - 부드러움: Spine 애니메이션은 보간법을 사용하기 때문에 항상 프레임 속도에 맞춰 부드럽습니다. 애니메..

Cocos Creator 에서 Enabled 란 Cocos Creator API 레퍼런스에서 enabled 는 아래와 같이 설명되어 있다. Boolean indicates whether this component is enabled or not. 해당 컴포넌트의 사용가능 여부를 Boolean 값을 통해서 나타낸다. Sprite 컴포넌트 같은 경우는 화면에 보이지 않게 할 수 있고, Collider 컴포넌트 같은 경우는 충돌을 무시 할 수도 있다. 그중 가장좋은 기능으로는 생명주기중 update 콜백함수의 호출을 중단해주는 순기능을 가지고 있다. 모든 컴포넌트는 생명주기 콜백함수를 가지고 있는데 이것이 무엇인지 먼저 확인해보고 enabled 사용방법에 대해 알아보자. 생명주기 Cocos Creator 의 ..

Physics Collider rigidBody 가 물리공간에서 움직임을 담당한다면 Physics Collider 는 물체간의 충돌을 담당하고 있습니다. rigidBody도 중요하지만 Collider 역시 중요한 일을 하고 있습니다. 예들 들면 괴물이 주인공을 공격했을 때 데미지를 입게한다던가, 공이 땅에 부딪쳤을 때 소리를 내게 하는 일은 모두 Collider 가 담당하는 일입니다. 이번 챕터에서는 Collider 의 주요 프로퍼티와 콜백 메서드에 대해서 알아보겠습니다. 기능들 기존 프로젝트에 Orange 스크립트에 이어서 추가하겠습니다. Physics Collider Component 에 접근하기 위해 getComponent 를 호출합니다. this.collider = this.node.getComp..

RigidBody 란 리지드바디는 물체의 위치를 제어합니다. 여기서 위치제어는 중력에 영향에 의해 물체를 아래로 떨어지도록 만들고 속도값을 부여해 앞으로 나아가게 할수도 있습니다. 또한 회전값을 주어 회전도 가능하게 할 수 있죠. 리지드바디의 역할은 단순히 물체에 운동성만 부여할 뿐, 충돌과 관련된 일에는 관여하지 않습니다. 처음에 테스트 했었던 터치시 rigidBody Component 가 아닌 Coliider Component 값을 가져오는것도 이유중 하나입니다. Physics Component 를 추가하면 Collider와 RigidBody Component가 생성됩니다. 여기서 중요한것은 collider 와 rigidbody 의 관계입니다. 다른 컴포넌트이지만 둘은 밀접한 관계를 가지고 있습니다...

Physics Manager 메서드 해당 화면에 있는 물리 객체들의 정보를 알고 싶을 때도 있습니다. 예를 들어, 폭탄이 폭팔하면 범위 내의 물체를 손상시킬수도 있고, 유저가 드래그하여 캐릭터를 이동시킬수도 있습니다. 또한 주변에 있는 물체를 효율적이고 신속하게 찾을 수 있는 방법을 제공합니다. Physics Manager 는 이러한 장면을 쉽게 만들 수 있는 기능을 제공하고 있습니다. Point Test 포인트 테스트는 특정 좌표에 포함된 Physics Component가 있는 노드가 있는지 테스트합니다. 테스트에 성공하면 해당 노드의 Physics Component 객체를 반환합니다. 단, 여기서 좌표는 Canvas 좌표가 아닌 절대좌표(왼쪽아래가 0,0) 을 사용하므로 이점에 유의해 주시기 바랍니다..

물리엔진 물리엔진이란 게임 등에서 물체에 작용하는 물리적 현상, 즉, 중력이나 관성 등에 관한 부분을 처리하는 프로그래밍 파트입니다. 물리엔진은 여러종류가 있는데 Cocos Creator 는 그중 Box2d 엔진을 Physics Manager를 통해 사용하기 편하게 제공하고 있습니다. 그럼 Physics Manager를 어떻게 사용하는지 알아보겠습니다. 프로젝트생성 Physics Manager 를 사용하기 위해서 먼저 테스트 할 프로젝트를 만들고 테스트를 위해서 Sprite Node 2개를 추가하겠습니다. 그다음 Physics Component 를 추가합니다. Node Tree 에서 해당 Node 를 클릭하고 Add Component -> Add Physics Component -> Collider 에서..