취미
[7 Day] AI와 함께하는 즐거운 게임 제작

벌써 Perplexity.AI와 함께 D&D5e 기반의 웹게임을 만들기 시작한지 일주일이 되었습니다. 오늘도 컨텐츠보다 앞으로 더욱 견고한 게임을 위해 내부 아키텍처 개선이 좀더 많았습니다. ★ 레이어드 캔버스 사용단일 캔버스 활용 대신 3개로 분리한 캔버스(background, ui, character) 로 분리하였습니다. 이렇게 하면 전체를 다시 그리기 보다 갱신이 필요한 부분만 새로 그리고 합치는 방식으로 동작하기에전체적인 성능의 향상에 도움이 된다고 (AI가) 합니다. ㅎㅎ그리고 이번에 배운 내용이지만 캔버스 작업에 save, restore가 없으면 각각의 요소들이 서로 영향을 받기에원하는대로 캔버스에 정확하게 표현하고 싶으면 save와 restore를 활용하면 됩니다.  this.uiCtx.sa..

취미
[6 Day] AI와 함께하는 즐거운 게임 제작

중간에 너무 많은 일이 있었다.. 너무 힘들다.. 까지는 아니지만 중간에 perplexity.ai 에서 작업하던 스레드가 갑자기 에러가 나서 접속이 안되고 하는 등의 문제가 있었지만 다행히 잘 해결은 되었고..  오늘은 UI들을 조금 정리하면서 능력치 상승에 대한 부분을 손 보았습니다. 14이상의 스탯은 2포인트로 상승시키도록 수정하였고, 전투때 좀더 박진감을 주기위해 플레이어가 몬스터를 때릴때 그에 맞는 이펙트를 표시해줬었는데 이게 잔상이 남고 제대로 출력이 안되고.. 아.. canvas 어렵네요.. 그래서 우선 다시 제거해뒀습니다. 그리고 오늘은 마을에서 상호작용을 위한 ui와 관련 npc 작업을 했습니다. 이미지 만드는건 참 즐겁네요 ㅎㅎ이렇게 npc의 portrait를 생성하고 (상반신만 출력해달..

취미
[5 Day] AI와 함께하는 즐거운 게임 제작

오늘은 내실을 다지기 위한 시간을 가졌습니다. 무기와 방어구를 D&D5 기반으로 다시 설정하고 그에 따라 플레이어 장비, 공격보너스, 방어보너스 등을 관여하는 함수들을 모두 수정하였습니다. 그리고 종족과 직업에 따른 기본스탯과 초기 장비를 다르게 설정하게 변경하였고 몬스터들도 동일한 로직으로 장비와 전투를 진행하게 됩니다. 덕분에 화면적으로 바뀐 부분은 많이 없지만 앞으로를 생각하면 기반을 쌓는 시간이었다고 생각하네요. 이제 전투 중 액션(마법 등)을 다음엔 구현해보겠습니다! (설정 날먹하려고 D&D5 룰북 참고하기 시작했다가 점점 머리가 아파오고 있습니다...) 테스트 주소: https://ggoban.com/d2ng/ 도망" data-og-host="toy.ggoban.com" data-og-sour..

취미
[4 Day] AI와 함께하는 즐거운 게임 제작

주말이라 오늘도 간단한 기능 추가만 하고 마무리 하기로 합니다. 우선 equipments.js  파일을 추가하여 캐릭터와 몬스터가 장비를 착용하게 하고 장비의 능력치가 전투로직에 반영되도록 수정하였습니다.  그리고 hp가 남은 양에 따라 색깔을 흰색>노란색>빨간색 으로 표현해서 시인성을 높였습니다. 무기는 기본만 테스트 하였는데 D&D5 룰처럼 캐릭터 생성 시 직업에 따라 기본 장비를 차이나게 제공할 예정이고 장비 테스트 후 실제 다이스 기반으로 전투 명중, 데미지 등을 산정하게 데미지 산식부분 수정할 예정입니다. 그리고 탐험 중 전투가 발생 하지 않을때는 랜덤한 이벤트가 발생하고 플레이어 능력치에 따라 효과를 얻는 걸  추가해볼 예정입니다. (뭐 돌부리에 걸렸습니다, 함정에 걸렸습니다, 금화를 줍습니다..

취미
[3 Day] AI와 함께하는 즐거운 게임 제작

오늘은 주말이니 간단한 작업만 추가했습니다.빨간색 사각형 대신에 몬스터 이미지를 정식으로 출력해주었습니다.(이미지 재활용을 허해주신 지난 프로젝트에게 감사..) 그리고 이제 D&D5 룰에 따라 레벨업을 하며 레벨업 시 2개의 스킬 포인트를 얻어 능력치를 올려줄 수 있습니다. 사실은 D&D룰에 잘 몰라서 남는 시간에 룰북을 보며 어떻게 AI를 부려서 시스템을 만들지 고민 중입니다. 전투도 조금 손봐야 하고 장비템들도 구현을 하긴 해야 됩니다. 그리고 전투외 일반 탐험에서 발생하는 자잘한 이벤트를 추가하여 어느 정도 진짜 던전을 탐험하는 듯한 느낌적인 느낌이라도 내야 할테니까요. (지금도 아들한테 테스트 시키면 재미 없다고 안하지만... 아빠도 따..딱히 게임이 재밌는게 아니야! 만드는게 재밌는거다!) 네...

취미
[2 Day] AI와 함께하는 즐거운 게임 제작

2일차 입니다. 하루만에 꽤나 코드의 양과 복잡도가 슬슬 증가하고 있습니다.우선 전체적으로 구조를 정리했습니다.CSS, JS, Image는 모두 폴더 별로 위치 시켰습니다.js파일들은 최대한 기능별로 분리를 해가며 추가해가고 있습니다.던전에서 전투를 추가하기 위해 battle.js 와 monster.js를 추가했습니다.캐릭터 생성도 일부 수정하였습니다.D&D5 공개된 룰북을 기준으로 플레이어는 4개 종족/4개 직업을 선택 가능하고종족과 직업별로 스탯이 다르게 생성됩니다.몬스터도 D&D5 룰북 기준으로 추가하였고, 탐험 중 전투가 발생하면양쪽의 민첩으로 굴림을 진행해 선/후공을 정해 전투가 발생합니다.기본적인 전투는 현재 D&D5룰에 의해 진행된다고 보시면 됩니다.(AI가 다 알아서 만들어 주더라고요..)..

취미
[1 Day] AI와 함께하는 즐거운 게임 제작

새로운 프로젝트로 돌아왔습니다. 전편에서 느낀 점들이 많았기에 이번에는 초반부터 구조를 잡아두고 시작하기로 했습니다. 새로운 Thread를 생성하고 제일 처음 아래와 같은 질의를 했습니다. Q1. 앞으로 javascript와 html, css로 게임을 작성할 거야.Q2. 기본적은 구성은 다음과 같아. 게임은 마을에서 시작하고, 마을은 여관(휴식으로 체력과 마나 회복), 상점(일반적인 소모품 구매 및 판매), 길드(퀘스트와 스킬 제공), 대장간(무기와 방어구 제작과 구매 및 판매), 던전(지하 100층으로 매층마다 몬스터와 전투, 5층 구간에선 중간보스, 10층 구간은 층간보스, 100층은 최종보스 등장)이 있어.A2. 그렇군요! 매우 흥미로운 게임 컨셉입니다. 이 게임의 구조를 좀 더 구체화하고 구현하기..

취미
[5편] AI로 30분 만에 웹 게임 만들어 보기. -마지막-

우선 오늘은 꽤 오래 뚝딱 뚝딱 이것저것 추가한다고 오래 붙들고 있었다. 하지만 해보면서 느낀건 AI도 만능은 아니다.-> 기능이 점점 추가되고 코드가 길어질 수록 조금씩 퀄리티가 내려가고 버그가 생기는데 바로바로 해결되지 않아 결국 디버깅 걸고 내가 하나씩 추적해야 되는 일이 생김 처음부터 구조를 잘 구상해놓고 해야된다.-> 조금씩 조금씩 기능을 붙여가다 보니 단순했던 로직 안에 우겨넣다보니 나중엔 한계가 금방 나오더라. 이게 단순 전투에서 -> 자동 전투 -> 룰북을 추가 -> 룰북안에 페이지 추가 -> 페이지에 조건을 설정해서 해당 조건으로 전투를 수행 -> 일반 평타, 스킬 사용을 룰북에 설정하도록 추가 이렇게 주먹구구로 기능을 붙여나갔더니 제대로 동작시키기 어려워 지더라.. 상점에서 스킬도 판매..

취미
[4편] AI로 30분 만에 웹 게임 만들어 보기.

이렇게 성실하게 글를 올린 적이 없었는데.. 신문물이 너무 재밌다 보니 성실 연재가 되가고 있습니다. 우선 개선 사항은 아래와 같습니다. 1. 캐릭터(플레이어, 몬스터)에 크리티컬 확률과 크리티컬 데미지 능력치가 추가되어 전투중 크리티컬 확률에 따라 평상시보다 강한 데미지가 발생  1.1. 레벨업 시 크리티컬 확률도 올릴수 있도록 수정 2. 몬스터의 출현확률을 기존(단순 랜덤) 에서 몬스터에 가중치를 부여하고 가중치에 따라 생성되도록 수정  2.1. 몬스터의 종류를 기존 4종에서 12종으로 추가 3. 드랍하는 골드를 활용할 수 있도록 전투 후 상점에서 힐링포션(3종류)를 구매할 수 있도록 추가  3.1. 전투 이후에만 상점을 이용할 수 있도록 현재 상태(idle, battle, shop) 상태를 관리하고..

취미
[3편] AI로 30분 만에 웹 게임 만들어 보기.

갑분 시리즈가 되었지만 재밌으므로 오케이다. 이젠 조금씩 버그와 소소한 수정을 위한 질의들이 늘어나기 때문에 모든 질의를 다 기록하긴 어려울것 같지만 적어보자. 13. 위 게임에서 콘솔영역 위로 배경이미지와 캐릭터, 몬스터를 보여줄 캔버스 영역을 추가해줘-> 이후부터는 그래픽도 추가하기 위해 해당 질의를 요청하였고, 캔버스 영역을 추가해주면서 각각의 필요한 기능들을 분리한 3개의 파일에 추가하여 줌. 이때 배경, 캐릭터, 몬스터를 그릴 수 있는 기능과 함께 캐릭터와 몬스터 위로 healthbar를 추가하여 주었음. (와우), 각각의 hero, goblin, orc, troll, dragon, background 는 직접 준비해야 한다고 하여 새로운 탭으로 역시 perplexity에 이미지 생성을 요청 (..

티스토리툴바