hipolygon

저번 글에서 Git, Vercel Cli, Supabase Cli 설치가 끝냈는데, 이번 글에서 GitHub 저장소를 만들고 Vercel 프로젝트 설정을 위한 준비를 하도록 하겠다. Git 저장소 초기화 Vercel은 GitHub 저장소와 연동하여 배포한다. 프로젝트를 Git 저장소로 초기화해야 한다. 다음 명령 줄을 하나씩 실행한다. cd '프로젝트 폴더 경로'  프로젝트 폴더로 이동한다. git init git init 하면 '.git'이라는 폴더를 만들어서 해당 폴더를 Git이 관리할 수 있게 해준다. 해당 파일은 숨김 처리 되어있으므로, 설치한 프로젝트 폴더에서 숨긴 파일 표시하면 나타난다.  git add .  처음 커밋할 파일 추가한다. git commit -m "Initial commit" 첫 커밋을 실행하는 명령을 하면 Git이 "누가 커밋을 했는지" 정보를 모르겠다는 오류가 발생할 수 있다. Git 커밋에는 항상 작성자 이름과 이메일이 들어가는데, 사용자의 정보를 아직 Git이 모르는 상태이다. 아래 두 명령어로 사용자 정보를 설정해야 한다. 이름은 실명이 아니어도 되므로 닉네임을 사용해도 된다. git config --global user.email "이메일" git config --global user.name "이름" 프로젝트 루트 폴더에서 .gitignore 파일을 생성한다. 메모장을 만들어서 이름을 변경하면 된다. 그리고 cmd에서 다음의 명령줄을 이용해 배포에 불필요한 파일을 제외한다. 또는 VSCode 등 사용하는 편집기에서 제외할 파일 이름을 직접 작성해도 된다. 그 때는 큰 따옴표 안에 파일 이름을 작성한다. echo "node_modules/" > .gitignore  echo ".env" >> .gitignore GitHub 저장소 생성 및 푸시 먼저 GitHub에서 새 저...

얼마 전 그록3와 Phaser를 이용해 제작한 웹 2D 게임을 Vercel의 호스팅 서비스를 이용해 배포하고 Supabase 클라우드 서버를 통해 리더보드를 구축해보려고 한다. Vercel 호스팅 Supabase 클라우드 서버 연동 두 서비스 모두 이용하려면 Git이 설치되어 있어야 한다.   깃 설치 깃을 설치하려면 아래 깃 공식 사이트에서 설치 파일을 받아서 설치해야한다. 깃 공식 사이트 파일을 받은 후 cmd 에서 'git --version'을 통해 정상 설치 되었는지 확인할 수 있다. Vercell Cli 설치 cmd에서 다음 명령어를 입력한다. npm install -g vercel  vercel --version Supabase Cli 설치 Window 환경에서 Supabase Cli를 설치하려면 Scoop이 필요하다. Scoop 은  Windows에서 패키지(프로그램)를 간편하게 설치하고 관리할 수 있게 도와주는 명령줄 기반 패키지 관리자이다.  cmd로는 안 되고 powershell을 통해 scoop을 설치한 다음 cmd에서 Supabase Cli를 설치해야 한다.  바로 scoop을 설치하려고 하면 PowerShell의 "실행 정책"이 너무 엄격하게 설정되어 있어서 Scoop을 설치할 수 없다는 메시지가 출력되므로 다음의 명령을 먼저 입력한다. Set-ExecutionPolicy RemoteSigned -scope CurrentUser 그 다음 아래 명령을 입력하면 scoop이 설치된다. iwr -useb get.scoop.sh | iex 이제 cmd로 넘어와서 아래 명령어를 입력하면 supabase Cli가 설치된다. scoop install supabase 이제 Git, Vercel Cli, Supabase Cli 설치가 끝났으니 다음 글에서 GitHub 저장소를 만들고 Vercel 프로젝트 설정을 위한 준비를 하도록 하겠다.

올해 초 안드레이 카파시(Andrej Karpathy)가 처음 개념을 제안한 이후 여러 ai 커뮤니티에서 바이브 코딩이 주목을 받고 있다. 얼마 전에는 인디해커인 피터 레벨스(Peter Levels)가 커서 ai로 바이브 코딩해 3d게임을 만들어서 바이브 코딩이라는 개념이 더 가능성을 보게 된 것 같다. 몇 년 전 취미 삼아 웹 게임 개발을 공부했다가 잠깐 접어뒀었는데, 최근의 ai 업계 업데이트들을 계기로 바이브 코딩에 도전해보았다. 사흘 정도 걸려서 간단한 2D 웹 게임을 만드는데 성공해서 게임을 소개하고 어떤 요소들에 주의해 작업했는지 기록해두겠다.  cheese-game.vercel.app 위 링크를 통해 실행해 볼 수 있고, 간단히 적들을 피해 노란 원을 모아 오면 되는 게임이다. 스프라이트 이미지는 없고, 그냥 점수 아이템이 노란색이라 치즈라고 이름 붙였다. 게임 규칙 치즈 게임 접속 화면 게임에 처음 접속하면 이름을 입력하는 화면을 보여준다. 이름을 아무거나 입력하고 Start 버튼을 누르면 게임을 시작한다. 치즈 게임 플레이 화면 플레이어는 검정색 원으로 표시된 캐릭터로, 플레이어의 본진인 회색 원 위에 시작한다. 키보드 방향키로 조작하거나 모바일에서는 터치한 기점을 기준으로 조이스틱처럼 조작하면 된다. 치즈 게임 플레이 화면 치즈 게임 플레이 화면 플레이어가 노란색 원인 치즈를 먹으면 플레이어 위에 표시된 점수가 올라간다. 본진인 회색 원으로 돌아오면 플레이어 캐릭터에 있던 점수가 본진에 표시된 점수로 치환된다. 본진에 있는 점수가 진짜 점수이다. 플레이어는 맵에 돌아다니는 적 유닛을 피해 무사히 치즈를 운반해와야 한다. 치즈 게임 종료 화면 적은 일정 반경 안에 플레이어 캐릭터가 들어오면 추격해오기 시작한다. 플레이어가 적에게 충돌하면 게임이 종료되고 리더보드와 재시작 버튼이 나타난다. 개발 기록 개발 도구 개발은 자바스크립트를 이용한 게임 엔진 중 하나인 Phaser를 이용했다. Pygame이나 고도 엔진 같은 다른 게임 엔...

이전 글에서 그록3 ai를 이용해 플레이어 이름과 현재 높이를 표시하는 UI 렌더링까지 구현했다. 이번에는 플레이어가 떨어졌을 때 캐릭터를 사망 처리하고, 재시작 버튼을 통해 다시 시작할 수 있도록 구현했다. 이전 글  그록3 채팅 그록3에게 세 가지를 요구했다. 첫 번째는 플레이어가 특정 지점 아래로 내려가면 캐릭터를 사망 처리할 것, 두 번째는 캐릭터가 사망하면 Retry 버튼을 나타낼 것, 버튼을 누르면 다른 플레이어에게 영향 가지 않도록 게임을 재시작 할 것. 그록3의 요구사항 분석 그록3가 스스로 내 요구 사항을 분석한다. 그록3의 설계 요구사항을 분석한 다음 스스로 임의의 값을 설정해서 설계하고 코드를 제공해주었다. 구현된 재시작 버튼 플레이어가 시작 위치에서 아래로 일정 거리만큼 떨어지자, 플레이어의 이동이 멈추고 Retry 버튼이 나타나는 모습을 확인했다. 버튼을 누르면 가지고 있던 자원이 초기화되고 시작 위치로 다시 돌아온다. 이번에는 아무런 버그 없이 한 번에 작동해서 만족스러웠다. 자원 클러스터의 배치나 캐릭터 사망시 효과 등 소소한 설정을 개선하고, 바로 멀티플레이 구현 단계로 넘어가면 될 것 같다.

이전 글에서 게임 내에 플레이어가 채굴할 수 있는 자원을 설치할 수 있도록 했는데, 이번에는 플레이어가 게임 시작 전 캐릭터의 이름을 지정하고, 게임 내에서 캐릭터 아래쪽에 이름이 렌더링 되도록 했다. 이전 글 Godot 엔진 이름 라벨 적용 플레이 화면 이름 라벨을 적용해서 플레이 해본 화면이다. 원이 플레이어의 캐릭터이고 아래에 이름이 표시된다. 그록3에게 했던 요청 캐릭터의 이름 라벨을 구현하기 위해 그록3에게 Play 버튼 화면에서 플레이어가 캐릭터의 이름을 지을 수 있게 하고, 캐릭터 아래에 이름이 표시되게 해달라고 했다. 처음에는 이름 라벨을 적용하고 플레이어의 현재 높이도 표시해 달라고 했는데, 한 번에 여러 부탁을 하니 오류가 많아져 요청을 여러 차례 수정했다. Godot 엔진 이름 라벨 그렇게 해서 위 이미지와 같이 이름 입력란을 추가했다. 중간에 이름 UI가 업데이트 되지 않는 문제도 생겼는데, 그록3에게 몇 차례 오류 메시지를 알려주니 코드의 실행 순서 때문이라는 문제를 찾아내고 해결했다. 그 밖에 이름이 지형에 겹치면 가려지는 문제도 있었는데, 그록3가 이름 라벨의 Z인덱스 갚을 지형보다 높이면 된다고 해서 그대로 해결할 수 있었다. 이름 라벨의 Z 인덱스 값 수정 지형의 Z 인덱스 값은 기본 값인 0으로 두고, 플레이어 아래 이름 라벨 UI의 Z 인덱스 값을 1로 높이니 문제가 해결되었다. 플레이어 높이 표시 UI 추가로 플레이어의 현재 높이가 표시되도록 했다. 플레이어가 블럭을 쌓고 올라가면 우측 상단에 몇 미터 올라갔는지 실시간으로 업데이트 된다.

이전 포스팅에서 플레이어 캐릭터를 생성했는데, 이어서 이번에는 플레이어가 채굴할 수 있는 자원을 배치해보려고 한다. 이전 글 Godot 엔진 게임 테스트 플레이 화면 플레이어에게 초기 자원을 할당하고 조작키를 통해 자원을 배치할 수 있게 했다. 초기에 랜덤하게 배치된 자원 덩어리를 향해 나아가 새로운 자원을 채굴할 수 있다. 그록3에 요청한 내용은 다음과 같다.

이전 글에서 시작 화면 구성을 보여준 데 이어서 이번에는 캐릭터를 생성하는 과정을 거친다. 이전 글 플레이어 장면 생성 File > New Scene 을 눌러 새 장면을 만들고, 루트 노드를 CharacterBody2D 로 설정(2D 물리 이동에 적합). 장면 이름을 player.tscn 으로 저장. CharacterBody2D 아래에 노드 추가: CollisionShape2D : 충돌 영역 정의. 인스펙터에서 Shape 를 New CircleShape2D 로 설정, 반지름을 16으로 설정(원의 크기). Sprite2D : 플레이어 시각화. Texture 를 New CanvasTexture 로 설정. Modulate 속성에 랜덤 색상을 적용(스크립트에서 처리). 노드 이름을 명확히: CharacterBody2D : Player CollisionShape2D : Collision Sprite2D : Sprite Godot 엔진 플레이어 노드 구조 처음 그록3 ai에게 게임 개요에 대해 설명할 때, 플레이어 그래픽을 랜덤 색상의 원으로 만들겠다고 얘기했었는데 이 점을 잘 반영해주었다. 다만 그록3가 숙지하고 있는 Godot 엔진의 문서와 내가 사용하고 있는 Godot 엔진의 버전이 맞지 않는지, CollisionShape 노드의 반지름을 설정하라는 것처럼 내가 사용할 수 없는 설정에 대해 얘기하는 문제가 있다. 이런 문제는 그록3의 설명을 무시하고 내가 리사이즈 핸들을 통해 직접 크기를 맞춰서 해결했다. 플레이어 스크립트 Player 노드에 새 스크립트( player.gd )를 추가. 아래 코드를 작성해 이동, 점프, 랜덤 색상을 구현:

이전 글에 이어서 그록 ai와 Godot 엔진을 이용한 게임 제작을 이어서 진행해보려고 한다. 이전 글 그록3 ai를 이용한 게임 제작 처음에 개발 계획을 얘기할 때 시작 화면에 대한 얘기를 빠트렸더니, 이후 작업 과정에 포함시키지 않을 것 같아서 짚고 넘어갔다. 플레이어가 Play 버튼을 클릭하면 게임이 시작되게 하고 싶다고 말하니 캐릭터 생성 과정을 진행하기 전에 시작 화면 구현 방법을 알려주었다. 시작 장면 생성 File > New Scene 을 눌러 새 장면을 만들고, 루트 노드를 Control 로 설정(UI에 적합). 장면 이름을 start_menu.tscn 으로 저장. Control 노드 아래에 Button 노드를 추가: 장면 트리에서 Control 선택 > + 버튼 > Button 검색 > Create . Button 의 속성 설정: Text : Play Rect > Position : (560, 300) (1280x720 해상도 기준, 화면 중앙 근처). Rect > Size : (200, 100) (버튼 크기). 필요하면 이름을 PlayButton 으로 변경. Godot 엔진에서 노드 설정 Godot 엔진에서 버튼 설정 버튼 스크립트 추가 Button 노드를 선택하고, 인스펙터에서 Node > Signals 탭으로 이동. pressed() 시그널을 더블 클릭해 스크립트를 자동 생성하거나, Control 노드에 새 스크립트( start_menu.gd )를 추가해서 아래 코드를 작성

이전 글에서 얘기했듯이 그록 ai와 Godot엔진을 이용해 간단한 게임을 만들어 보려고 한다. 이전 글 그록 ai에게 가장 먼저 해야할 일을 알려달라고 하니 첫 단계로 엔진 설치부터 프로젝트 생성, 프로젝트의 기본 설정과 기본 장면(Scene) 구성 등을 안내한다.  프로젝트 생성 Godot 엔진 프로젝트에서 생성 Godot 엔진은 이전에 4.4.1 버전을 설치해두어서 바로 새 프로젝트를 만들었다. 프로젝트 이름은 게임 이름으로 생각해 두었던 'Life'로 지었다. 렌더링 설정은  기본적으로 Vulkan을 사용하나, 웹 배포를 고려해 HTML5 호환성이 좋은 OpenGL ES 3.0으로 설정할 수 있다고 한다. 프로젝트 기본 설정 해상도 설정 Project > Project Settings > Display > Window 로 이동. 기본 해상도를 1280x720으로 설정(웹에서 적당한 크기). Stretch Mode 를 canvas_items , Aspect 를 keep 으로 설정해 다양한 화면 크기에 대응. 입력 매핑 Project > Project Settings > Input Map 에서 커스텀 입력 추가 move_left : Left Arrow move_right : Right Arrow jump : Alt place_block : Ctrl mine_resource : Shift Godot 엔진 해상도 설정 Godot 엔진 입력 매핑 알려준 대로 해상도를 설정하고 입력 매핑에서 커스텀 입력을 추가했다. 커스텀 입력을 추가하는 방법을 모르겠어서 구체적인 방법을 물어보니 입력 이름을 정해 액션을 추가하고 '+' 버튼을 눌러 키를 할당하라고 구체적으로 알려주었다. 기본 장면(Scene) 구성 새 장면 생성: File > New Scene 에서 2D Scene 선택. 루트 노드를 Node2D 로 설정하고 저장( main.tscn ). 테스트용 노드 추가: Node2D 아래에 Colo...

게임 개발 입문자도 그록 ai의 도움을 받아 Godot엔진으로 게임을 개발할 수 있을까? 그록 ai와 Godot 엔진을 이용해 간단한 게임 개발을 해보고자 한다. 프로그래밍에 대한 기초 수준의 지식만 가지고 있는 상태에서 그록 ai의 도움을 받으면 실제 상업성 있는 게임까지 개발하고 운영할 수 있을까? 그록 ai 먼저 간단한 아이디어는 기획한 상태로 그록 ai에게 게임 개요, 플레이어 시점, 그래픽, 물리 환경, 조작 등을 어떻게 할지 간단히 설명했다. 게임 구현을 위해 구체적인 단계를 게획하고 하나씩 알려 달라고 부탁했다.

지난 글에서 HP와 기력 바를 만들었는데, 이어서 플레이어와 상호작용할 몬스터를 구현해보려고 한다. 몬스터는 무작위 방향으로 일정 시간 동안 이동한 뒤, 쉬는 동작을 반복하도록 한다. 이를 위해 상태 머신(State Machine)을 사용해서 몬스터의 행동을 관리한다. Godot 4.4에서 CharacterBody2D 를 기반으로 몬스터를 구현하고, 플레이어와의 충돌을 감지해서 데미지를 주도록 설정하겠다. 몬스터 씬 생성 새 씬 생성 몬스터 씬 추가 먼저 몬스터를 재사용 가능하게 하기 위해 별도의 씬을 만든 다. main 씬 옆에 '+' 버튼을 눌러 씬을 추가하고 'monster'라는 이름으로 저장했다. 몬스터 씬 노드 구성 몬스터 씬 노드 구성 'ChracterBody2D' 노드를 루트 노드로 만들고 이름을 'Monster'로 바꾸어주었다. 하위 노드에 'Sprite2D' 노드를 만들어 이미지를 추가하고 'CollisionShape2D'를 만들어 다른 개체와 겹치지 않게 설정해준다. 'Area2D' 노드를 추가하고 그 하위에 'CollisionShape2D'를 또 추가해주었는데, 이는 플레이어가 이 영역에 진입할 시 피해를 입게 하도록 설정하기 위함이다. 몬스터 스프라이트 추가 스프라이트 이미지 설정 'Sprite2D' 노드의 인스펙터에서 'Texture' 항목을 통해 이미지를 설정하면 된다. 임시로 색상을 채워넣기 위해 'CanvasTexture'를 선택하고 색상을 노란색으로 만들어주었다. 충돌 영역 추가 충돌 영역 설정 충돌 영역도 인스펙터의 'Shape' 항목을 통해 모양을 지정해준 뒤 스프라이트 이미지에 맞춰 크기를 조절해주었다. 몬스터 스크립트 작성 스크립트 붙이기 Monster 노드에 '스크립트 붙이기'를 통해 새 스크립트 추가해주고 아래와 같이 코드를 작성했다.

그록3 AI를 이용해서 간단한 게임 아이디어를 구현해보는 테스트를 진행하려고 한다. 게임 아이디어는 다음과 같다.

지난 글에서 캐릭터에 중력과 가속도 등 물리를 적용해 점프 등을 구현했다. 이번 글에서는 몹을 만들어보기에 앞서 플레이어의 HP, 기력 등의 속성을 부여하고 체력바 등의 GUI로 구현하려고 한다. Godot 4.4에서 체력과 기력 바는 ProgressBar 노드로 쉽게 만들 수 있다. 플레이어의 상태를 관리하는 변수를 UI와 연동해서 실시간으로 반영되도록 설정해보겠다. UI 노드 추가 CanvasLayer 추가 이전에 Main으로 이름 붙였던 루트 노드의 하위 위치에 'CanvasLayer' 노드를 추가한다. 추가한 뒤 다른 노드와 구분을 위해 노드의 이름을 'UI'로 변경해주었다. 이제 화면 위에 표시되는 그래픽 인터페이스 요소는 이 UI 노드 안에 생성해주면 된다. ProgressBar 노드 추가 이제 HP와 기력을 나타내는 바를 만들어야 하므로 UI 노드 안에 'ProgressBar'노드를 추가한다. 생성된 ProgressBar 'ProgressBar' 노드를 추가하고 뷰포트를 확대해보면 바 요소가 추가된 모습을 확인할 수 있다. 인스펙터에서 크기를 변경할 수 있고 상단 탭에서 프리셋을 선택해 만들 수도 있다. 노드 이름 변경 다른 노드와 구분하기 위해 'CanvasLayer' 노드의 이름은 UI로 변경하고 'ProgressBar' 노드의 이름은 HPBar라고 변경했다.(이미지 상에서는 띄어쓰기를 했으나 나중에 없앴다. 이후에 스크립트에서 표기할 때 똑같이만 써주면 된다.) ProgressBar 인스펙터 'ProgressBar' 인스펙터를 보면 'Show Percentage' 옵션이 있는데, 체크를 해제하면 뷰포트에 표시되어있던 퍼센트가 사라진다. ProgressBar 스타일 변경 'Theme Overrides'에서 'Styles'를 보면 'Background'와 'Fill' 옵션이 ...

저번 글에서 배경과 플레이어 캐릭터, 플레이어가 디딜 땅까지 구현했으니, 이번에는 플레이어에게 중력을 적용해보려고 한다. 사실 단순 중력만 적용하면 플레이어 컨트롤이 상당히 어색하기 때문에 가속도와 마찰력 등 현실에서 겪는 물리력을 최대한 반영하고자 했다. 개인적으로 구현하기는 어려워 AI 서비스인 Grok3의 힘을 빌렸다. 플레이어 노드에 추가된 물리 적용 스크립트 이전 글의 과정에서 플레이어 캐릭터를 만들 때 플레이어 노드에 스크립트를 추가했었는데, 해당 부분에 아래 코드를 붙여 넣으면 된다. 물리 적용 코드

Godot에서 플레이어가 디딜 발판을 만들려면 물리적 충돌을 처리하는 노드를 사용하면 된다. 이전 글에서 ' CharacterBody2D' 노드 로 플레이어를 만들었으니 플레이어가 디딜 수 있는 발판(플랫폼)을 추가해보도록 하겠다. 발판은 ' StaticBody2D' 노드 를 사용해서 구현하면 된다. StaticBody2D 노드 추가 StaticBody2D 노드 추가 Scene 패널에서 "Main"으로 이름 붙였던 노드를 선택하고 하위 노드에 'StaticBody2D' 노드를 추가한다. Main 노드 선택 후 "+" 버튼 클릭 > "StaticBody2D" 검색 > 추가 StaticBody2D 노드 이름 변경 노드 구분을 위해 이름을 "Platform1"으로 변경해주었다. 필요한 만큼 여러 개를 만들면 되는데, 하나를 만든 뒤 복사해 편집하는 편이 편하다. 이미지와 충돌 노드 추가 Sprite2D, CollisionShape2D 노드 추가 발판에 이미지와 충돌을 적용하기 위해 'Platform1' 노드 하위에 'Sprite2D' 노드와 'CollisionShape2D' 노드를 추가해준다. Sprite2D 노드 텍스처 적용 일단은 단순 박스로 적용하기 위해 인스펙터에서 'Texture'를 'CanvasTexture'로 변경하고 'Visibility' 항목에서 'Modulate' 색상을 회색으로 변경해주었다. CollisionShape2D 노드 크기 조절 'CollisionShape2D' 노드를 선택 후 인스펙터 패널의 'Shape'항목에서 모양을 지정할 수 있다.  뷰포트에서 빨간 점을 클릭해 Sprite 이미지 크기에 맞춰 크기를 조절해 준다. 위치 이동 노드 위치 이동 플랫폼의 위치를 옮기려면 플랫폼 노드를 ...