그록 ai와 Godot 엔진으로 2D 플레이어 캐릭터 생성하기

이전 글에서 시작 화면 구성을 보여준 데 이어서 이번에는 캐릭터를 생성하는 과정을 거친다.

이전 글


플레이어 장면 생성

  1. File > New Scene을 눌러 새 장면을 만들고, 루트 노드를 CharacterBody2D로 설정(2D 물리 이동에 적합).
  2. 장면 이름을 player.tscn으로 저장.
  3. CharacterBody2D 아래에 노드 추가:
    • CollisionShape2D: 충돌 영역 정의.
      • 인스펙터에서 ShapeNew CircleShape2D로 설정, 반지름을 16으로 설정(원의 크기).
    • Sprite2D: 플레이어 시각화.
      • TextureNew CanvasTexture로 설정.
      • Modulate 속성에 랜덤 색상을 적용(스크립트에서 처리).
  4. 노드 이름을 명확히:
    • CharacterBody2D: Player
    • CollisionShape2D: Collision
    • Sprite2D: Sprite
Godot 엔진 플레이어 노드 구조
Godot 엔진 플레이어 노드 구조

처음 그록3 ai에게 게임 개요에 대해 설명할 때, 플레이어 그래픽을 랜덤 색상의 원으로 만들겠다고 얘기했었는데 이 점을 잘 반영해주었다. 다만 그록3가 숙지하고 있는 Godot 엔진의 문서와 내가 사용하고 있는 Godot 엔진의 버전이 맞지 않는지, CollisionShape 노드의 반지름을 설정하라는 것처럼 내가 사용할 수 없는 설정에 대해 얘기하는 문제가 있다. 이런 문제는 그록3의 설명을 무시하고 내가 리사이즈 핸들을 통해 직접 크기를 맞춰서 해결했다.


플레이어 스크립트

  1. Player 노드에 새 스크립트(player.gd)를 추가.
  2. 아래 코드를 작성해 이동, 점프, 랜덤 색상을 구현:
extends CharacterBody2D

@export var move_speed = 200.0
@export var acceleration = 1500.0  # 가속도 (관성 느낌)
@export var friction = 1000.0      # 마찰력 (바닥에서 감속)
@export var jump_strength = 250.0  # 낮춘 점프 힘
@export var gravity = 980.0        # 중력 유지
var player_color: Color

func _ready():
player_color = Color(randf(), randf(), randf(), 1.0)
$Sprite.material.set_shader_parameter("color", player_color)

func _physics_process(delta):
# 중력 적용
velocity.y += gravity * delta

# 수평 이동 (관성과 가속도)
var direction = 0
if Input.is_action_pressed("move_left"):
direction -= 1
if Input.is_action_pressed("move_right"):
direction += 1

if direction != 0:
# 가속도 적용
velocity.x = move_toward(velocity.x, direction * move_speed, acceleration * delta)
else:
# 마찰력 적용 (바닥에서만)
if is_on_floor():
velocity.x = move_toward(velocity.x, 0, friction * delta)
else:
# 공중에서는 약한 마찰 (관성 유지)
velocity.x = move_toward(velocity.x, 0, friction * delta * 0.2)

# 점프
if Input.is_action_just_pressed("jump") and is_on_floor():
velocity.y = -jump_strength

# 물리 이동
move_and_slide()

처음 만들어준 스크립트에서 관성이 적용되지 않았고 점프도 너무 높이 이루어져서 해당 부분을 수정해달라고 요청해 새로 적용한 스크립트다.


메인 장면에 플레이어 추가

  • main.tscn을 열고, 루트 Node2D 아래에 player.tscn을 인스턴스로 추가:
    1. 장면 트리에서 Node2D 선택 > + 버튼 > Instance Child Scene 선택.
    2. player.tscn을 선택해 추가.
    3. 플레이어 위치를 설정(예: Position: (640, 600)으로 바닥 근처).


지형 충돌 설정:
  • 기존 ColorRect(검정 직사각형)를 임시 지형으로 사용 중이라면, 물리 충돌을 추가:
    1. ColorRect를 제거하고 StaticBody2D 노드를 추가.
    2. StaticBody2D 아래에 CollisionShape2D 추가.
    3. ShapeNew RectangleShape2D로 설정, Extents(640, 50)으로 설정(화면 너비에 맞는 바닥).
    4. StaticBody2D의 위치를 (640, 670)으로 설정(화면 하단).
    5. 시각화를 위해 Sprite2D 추가, TextureNew CanvasTexture, 크기를 (1280, 100), 색상을 검정으로 설정.


플레이어 스프라이트를 원형으로 수정

플레이어의 스프라이트가 원형이어야 하는데 적용이 안된 점, 카메라를 플레이어에게 고정해 플레이어가 항상 화면의 중앙에 오도록 해야 하는 점을 해결해 달라고 요청했다.

수정 단계
  1. player.tscn을 엽니다.
  2. Sprite2D 노드를 선택하고, 인스펙터에서 TextureCanvasTexture로 설정되어 있는지 확인.
  3. 원형 모양을 위해 Sprite2DRegion 속성을 사용하거나, 쉐이더를 적용해 원형 마스크를 만듭니다. 여기서는 간단히 CollisionShape2D와 일치하도록 원형 텍스처를 만드는 방법을 사용:
    • Sprite2DTextureNew GradientTexture2D로 변경.
    • GradientNew Gradient로 설정, 색상을 단색(예: 흰색)으로 유지.
    • WidthHeight를 32x32로 설정(플레이어 크기와 맞춤).
    • 원형 모양은 쉐이더로 처리:
  4. Sprite2D에 새 쉐이더를 추가:
    • 인스펙터에서 Material > New ShaderMaterial > New Shader 선택.
    • 아래 쉐이더 코드를 입력:

shader_type canvas_item;

uniform vec4 color : source_color = vec4(1.0);

void fragment() {
    vec2 uv = UV - 0.5;
    float dist = length(uv);
    if (dist > 0.5) {
        COLOR.a = 0.0;
    } else {
        COLOR = color;
        COLOR.a = 1.0;
    }

}

 

카메라 고정

  • 카메라 추가:
    1. player.tscn에서 Player 노드(CharacterBody2D) 아래에 Camera2D 노드를 추가:
      • 장면 트리: Player > Camera2D.
      • 이름: PlayerCamera.
    2. Camera2D 속성 설정:
      • 인스펙터에서 Enabled 체크.
      • Zoom: (1, 1) (기본값).
      • Position Smoothing Enabled: 체크 (부드러운 이동).
      • Position Smoothing Speed: 5.0 (적당한 추적 속도).
    3. Camera2DPosition(0, 0)으로 설정(플레이어 기준 중앙).
  • 메인 장면에서 카메라 활성화:
    • main.tscn에서 Player 인스턴스가 이미 추가되어 있으므로, Camera2D가 자동으로 포함됨.
    • main.tscn의 루트 노드에 별도의 카메라 노드가 없도록 확인(중복 방지).


Godot 엔진 게임 테스트 실행 화면
Godot 엔진 게임 테스트 실행 화면

F5를 눌러 실행해보니, 플레이어의 랜덤 색상 적용, 적절한 물리환경, 좌우 이동과 Alt키를 통한 점프 조작 등이 잘 적용되었다.


댓글

이 블로그의 인기 게시물

전체 화면으로 현재 시간 보여주는 웹 시계 사이트 Bonfire Clock

블렌더 3D 카툰 렌더링으로 웹툰 배경 만들기

3D 디자인 툴의 혁명 spline.design