픽셀 아트로 구현된 AI 오피스 시뮬레이션 제작기
by DD
1개월 전
조회수 66
1인 개발자가 Flutter, Supabase, Gemini LLM을 활용해 AI 오피스 시뮬레이션 구축 중
텍스트 로그의 한계를 극복하기 위해 2D 픽셀 월드를 구현하여 몰입감 증대 시도
Bonfire 엔진을 활용해 타일맵 기반 오피스 공간과 캐릭터 이동 로직 구현
사용자가 에이전트에게 직접 개입하여 상호작용 및 서사 변화를 유도하는 기능 추가
Bonfire 엔진을 활용한 2D 타일맵 기반 월드 구현
본문에서는 Flutter 기반의 Flame 엔진 위에 구축된 Bonfire 플러그인을 활용하여 2D 오피스 월드를 구현했다고 설명함. Bonfire는 **타일맵(Tilemap) 로딩, 장애물 레이어 분리, A* 알고리즘 기반 패스파인딩(Pathfinding) 기능을 내장하고 있어, 개발자는 복잡한 길 찾기 로직 대신 에이전트의 이동 목표 설정에 집중할 수 있었음. Tiled Map Editor로 맵 레이아웃과 속성(walkable, obstacle)을 지정하면, Bonfire가 이를 기반으로 캐릭터의 최단 경로를 계산하고 장애물을 피해 이동하도록 함. 16x16 픽셀 타일 크기**와 고유 좌표 관리를 통해 캐릭터 간 겹침이나 벽 끼임 같은 문제를 효과적으로 해결함.
텍스트 데이터의 시각화 및 몰입감 증대 전략
기존 텍스트 로그 방식의 한계를 극복하기 위해, 에이전트의 상태 변화를 이모티콘, 조명, 하트 이펙트 등 시각적 요소로 표현하여 몰입감을 높였음. 예를 들어, 스트레스 수치 변화에 따라 캐릭터 표현이 달라지거나, 로맨스 이벤트 발생 시 하트 이펙트가 나타나는 식임. 또한, 를 Flame의 컬러 필터(Color Filter) 오버레이(Overlay)로 구현하여 현장감을 더함. 이러한 시각적 연출은 단순한 텍스트 정보 전달을 넘어, 사용자가 이라는 인식을 갖게 하는 데 기여함.
