[Cocos] Editor가 익숙해지는 첫 단계! Node & Component 다뤄보기 🎨

안녕하세요 게임 개발자 GamJia 입니다

오늘은 Cocos Creator에서 Node와 Component를 처음 다뤄보는 분들을 위해
기초 구조부터 Interface 사용법까지 쉽게 설명해드리려고 합니다!

✍️ 이 글에서 다룰 내용
✅ Cocos Creator의 기본 구조: Node와 Component
✅ Hierarchy에서 Node 생성하고 기본 Transform 알아보기
✅ Component 추가 및 활용: Collider와 RigidBody
✅ Script Component를 이용하여 간단한 움직임 만들기

---

Cocos에서 Node는 Scene 안에 있는 모든 것을 뜻해요.
캐릭터, 나무, 총알, UI 버튼, 심지어 카메라나 빛도 Node랍니다.

“게임 안의 모든 존재는 Node로 시작한다” 고 생각하면 이해가 쉬워요.

Hierarchy 안에 있는 요소는 Node!

 

마치 우리가 레고 블록으로 무언가를 만들기 시작할 때,

가장 먼저 블록 하나를 꺼내는 것과 같아요.

---

BUT! Node는 그냥 빈 껍데기 같은 존재고,

실제 기능은 Component를 통해 부여돼요.

 

Component는 Node의 기능과 동작을 정의하는 모듈 단위입니다.

마치 레고 블록에 다양한 기능을 가진 부품을 추가하는 것과 같아요.

 

예를 들어,
위치를 담당하는 Transform
그림을 보여주는 Sprite Renderer
3D 형태를 나타내는 Mesh Renderer
물리적인 충돌을 감지하는 Collider
물리적인 움직임을 부여하는 Rigidbody
사용자가 작성하는 Script
등이 있죠.

 

하나의 Node에는 여러 개의 Component를 추가하여

다양한 기능과 역할을 부여할 수 있습니다.

---

이제 직접 Node를 만들고 가장 기본적인 Component인

Transform에 대해 알아보는 실습을 해볼까요?

---

Editor를 열고, 지난 시간에 만들었던 Project

또는 새로운 Project를 생성해주세요.

 

Hierarchy 창 상단의 Create 버튼을 클릭하거나,
Hierarchy 창의 빈 공간에 마우스 우클릭을 해줄게요.

나타나는 메뉴에서 3D Object -> Cube를 선택해주세요.

---

Hierarchy 창에 Cube라는 이름의 오브젝트가 생긴 것을 확인할 수 있습니다.

Scene 창에도 하얀색 Cube가 나타났을 거예요.

 

Hierarchy 창에서 Cube 오브젝트를 선택하면, Inspector 창에 다양한 정보가 나타납니다.

가장 상단에 있는 Transform Component를 확인해 주세요.

 

Transform은 GameObject의 위치(Position), 회전(Rotation), 크기(Scale)를

결정하는 가장 기본적인 Component입니다.

 

모든 GameObject는 반드시 이 Transform Component를 가지고 있답니다.

 

이름	설명
Position	Scene 안에서의 GameObject의 좌표를 나타냅니다.X, Y, Z 축으로 이루어져 있으며, GameObject의 위치를 이동시키는 데 사용됩니다.
Rotation	GameObject의 회전 각도를 나타냅니다. X, Y, Z 축을 기준으로 회전시킬 수 있으며, 게임 오브젝트의 방향을 조절하는 데 사용됩니다.
Scale	GameObject의 크기를 나타냅니다. X, Y, Z 축을 기준으로 크기를 조절할 수 있으며, 게임 오브젝트의 외형을 변경하는 데 사용됩니다.

 

Inspector 창에서 Cube의 Position, Rotation, Scale 값을 직접 변경해보세요.

Scene 창에서 큐브의 위치, 회전, 크기가 실시간으로 변하는 것을 확인할 수 있답니다.

---

이번에는 Cube에 물리적인 속성을 부여하기 위해

Collider와 Rigidbody Component를 추가해 보겠습니다!

---

Hierarchy 창에서 Cube Object를 선택하고
Inspector 창 하단의 Add Component 버튼을 클릭해주세요.

검색창에 Collider를 입력하고, 나타나는 목록에서 Box Collider를 선택해주세요.

 

Collider는 GameObject의 형태에 맞춰진 충돌 영역을 설정해주는 Component입니다.

이제 Cube는 다른 Object와 "부딪힐 수 있는" 속성을 가지게 되었어요.

---

이번에는 검색창에 Rigidbody를 입력하고,

나타나는 목록에서 Rigidbody를 선택해주세요.

 

Rigidbody는 GameObject에 물리 법칙(중력, 힘, 토크 등)을 적용하여

현실과 유사한 움직임을 가능하게 해주는 Component입니다.

이제 우리 Cube는 중력의 영향을 받게 될 거예요!

---

바닥 충돌을 보여드리기 위해 밑에 Plane을 깔았습니다!

자, 게임을 실행 해볼까요?

와! 이번에는 Cube가 아래로 떨어지는 모습이 보일 거예요.

만약 바닥이 없다면 계속해서 아래로 떨어지겠죠?

Collider 덕분에 다른 Collider를 가진 Object와 충돌하면 멈추게 됩니다.

---

마지막으로 우리가 직접 작성한 Code를 담은

Script Component를 추가하여 Cube를 움직여 보겠습니다!

---

Project 창의 빈 공간에 마우스 우클릭을 하거나,

Project 창 상단의 [+ Create] 버튼을 클릭해주세요.

나타나는 메뉴에서 TypeScript를 선택하고,

Script 이름을 JumpCube라고 입력해주겠습니다.

---

import { _decorator, Component, input, Input, KeyCode, EventKeyboard, RigidBody, Vec3 } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('JumpCube')
export class JumpCube extends Component {
    @property
    private jumpForce: number = 5;

    private rigidbody: RigidBody | null = null;

    onLoad () {
        this.rigidbody = this.getComponent(RigidBody);
    }

    onEnable () {
        input.on(Input.EventType.KEY_DOWN, this.onKeyDown, this);
    }

    onDisable () {
        input.off(Input.EventType.KEY_DOWN, this.onKeyDown, this);
    }

    onKeyDown (event: EventKeyboard) {

        if (event.keyCode === KeyCode.SPACE) {
            if (this.rigidbody) {
                this.rigidbody.applyImpulse(new Vec3(0, this.jumpForce, 0));
            }
        }
    }
}

생성된 JumpCube 스크립트를 더블 클릭하여 열어주세요.

Visual Studio 또는 다른 코드 편집기가 실행될 거예요.

위의 코드를 작성하거나 복사해서 붙여넣어 주세요.

코드	설명
@ccclass('JumpCube')	이 스크립트를 Cocos Creator의 기능 단위인 '컴포넌트'로 만들어 줍니다.
@property private jumpForce: number = 5;	점프의 높이를 결정하는 변수입니다. Cocos Editor에서 이 값을 조절할 수 있습니다.
this.rigidbody = this.getComponent(RigidBody);	게임 시작 시 이 Node에 붙어있는 RigidBody을 찾아서 사용할 준비를 합니다.
input.on(Input.EventType.KEY_DOWN, this.onKeyDown, this);	키보드 키가 눌렸을 때 onKeyDown 함수를 실행하도록 설정합니다.
onKeyDown (event: EventKeyboard)	실제로 키가 눌렸을 때 실행되는 함수입니다. 스페이스바가 눌리면 Node에 점프하는 힘을 줍니다.

 

---

 

Add Component로 Script Component를 연결해줄게요.

Script 드래그도 가능하긴 한데 JumpCube라는 이름의

Node를 새로 생성하기 때문에 AddComponent를 추천할게요.

 

Inspector 창의 Jump Cube Component를 확인해보면,

Jump Force라는 항목이 추가된 것을 볼 수 있어요.

이 값을 원하는 점프 높이에 맞춰 조절해보세요. 기본값은 5로 설정했습니다.

---

게임을 실행하고 스페이스바 키를 눌러보세요!

스페이스바를 누를 때마다 큐브가 위로 점프했다가

다시 중력에 의해 바닥으로 떨어지는 것을 확인할 수 있을 거예요.

직접 만든 Script Component가 Cube에 새로운 기능을 부여한 순간입니다!

---

오늘은 Node와 Component의 기본적인 개념을 배우고,

직접 Code를 작성해서 간단한 움직임까지 구현해 보았습니다.

 

처음 접하시는 분들도 차근차근 따라오시니 어렵지 않으셨죠?

Node와 Component는 Cocos Creator 게임 개발의 가장 중요한 기초가 되니,

오늘 배운 내용을 잘 기억해두시면 앞으로 더욱 다양한 것들을 만드실 수 있을 거예요!

 

앞으로도 Cocos를 처음 시작하는 분들을 위해
실전 팁과 초보자용 가이드를 계속 공유할 예정이니,
다음 글도 기대해주세요!

 

 

감사합니다!