유한 상태 머신(FSM) & 노드 기반 게임 AI 행동 트리 비주얼라이저

유한 상태 머신(FSM) & 노드 기반 게임 AI 행동 트리 비주얼라이저(SUNSET CARAMEL AI VISUALIZER)는 게임 개발자, AI 프로그래머 및 게임 기획자를 위해 설계된 독립형 인터랙티브 웹 비주얼 에디터 & 실시간 시뮬레이터입니다.

복잡한 게임 AI 구조를 노드 그래프 형태로 직접 디자인하고 오른쪽에 위치한 실시간 2D 게임 시뮬레이션 무대를 통해 NPC의 시야(FOV), 소음 반응, 추적 및 전투 의사결정을 실시간 60 FPS로 관찰할 수 있습니다.

🌟 핵심 주요 기능

• 🌇 감성적인 노을 카라멜 & 오렌지 웜 톤 디자인 (Sunset Caramel & Amber Warm Tone):
  • 깊고 따뜻한 카라멜 모카 다크 배경(#120b08)과 은은하게 빛나는 앰버 골드 및 오렌지 코랄 네온 라인이 조화를 이루는 프리미엄 UI/UX.
  • 마우스 휠 줌/팬, 터치 제스처, 베지에 곡선 노드 연결 와이어 및 활성화 상태 펄스 애니메이션 적용.
• 🌲 두 가지 AI 아키텍처 통합 지원 (Behavior Tree & FSM Dual Mode):
  • 행동 트리 (Behavior Tree): Root, Composite Nodes (Selector ?, Sequence →, Parallel ≡), Decorator/Inverter (!), Action 및 Condition 노드 실시간 평가 엔진 (SUCCESS, FAILURE, RUNNING, IDLE 컬러 노드 하이라이팅).
  • 유한 상태 머신 (FSM): State 카드, 전이 조건 트리거 (Transition Wires) 및 활성화 상태 Glowing Particle 파동 및 상태 전환 사운드 효과.
• 🎮 실시간 2D 게임 AI 시뮬레이션 스테이지 (2D Interactive AI Arena):
  • 경비병 / 몬스터 AI: 시야각(FOV Cone), 장애물 가림 레이캐스팅, 체력 바, 머리 위 실시간 행동 상태 말풍선 탑재.
  • 플레이어 캐릭터 (Player Pawn): 마우스/터치 드래그로 맵 위에서 직접 움직여 AI의 시야 포착 및 추적을 반응 테스트.
  • 소음 핑 (Sound Ping): 스테이지를 클릭하거나 버튼을 눌러 확장되는 음파 핑을 발생시켜 AI의 경계/수색 행동 유도.
• 📋 실시간 블랙보드 & 메모리 디버거 (Blackboard Inspector):
  • canSeePlayer, heardSound, playerDistance, aiHealth, aiAction 등 AI의 실시간 내부 판정 변수를 실시간 갱신 표로 확인.
  • 노드 선택 시 이름, 실행 액션, 검사 조건 변수를 즉시 수정 가능한 속성 패널 제공.
• 💾 프로젝트 데이터 및 JSON/코드 내보내기:
  • 디자인한 행동 트리 및 유한 상태 머신 그래프 구조를 클린 JSON 형식으로 즉시 복사하여 Unity(C#) 또는 Unreal Engine/Custom JS AI 엔진에 이식 가능.

🎨 4가지 풍부한 AI 프리셋 라이브러리

1. 🛡️ 경비병 AI (Guard Patrol & Chase BT): 순찰 경로 이동 중 소음 감지 시 수색, 시야 발견 시 추적 및 Melee 공격 수행.
2. 🐺 야생 늑대 습격 AI (Wolf Pack Hunter BT): 체력이 떨어지면 도망치고, 기회가 오면 덮치는 야생 늑대 행동 트리.
3. ⚔️ 기사 경비병 유한 상태 머신 (Guard State Machine FSM): Patrol -> Alert -> Chase -> Attack -> Flee 상태 간 직관적인 전이 네트워크.
4. 🤖 채집 로봇 FSM (Gatherer Worker Bot FSM): 탐색 -> 채굴 -> 배터리 충전 자동화 순환 FSM.

사용 방법

1. 앱을 열고 화면에 표시된 초기 설정 또는 예시를 먼저 확인합니다.
2. 필요한 값·도구·조작 항목을 바꾸거나 입력해 현재 결과와 미리보기를 확인합니다.
3. 작업 목적에 맞는 설정을 선택한 뒤, 앱에서 제공하는 결과 화면 또는 저장·내보내기 기능을 활용합니다.

자주 묻는 질문 (FAQ)

어떻게 시작하나요?

앱을 열면 제공되는 기본 설정과 화면 안내를 확인할 수 있습니다. 먼저 예시 상태에서 주요 조작을 살펴본 뒤, 목적에 맞게 입력값이나 도구를 변경해 보세요.

별도 설치가 필요한가요?

이 앱은 웹 브라우저에서 실행하도록 구성되어 있습니다. 원활한 사용을 위해 최신 브라우저와 안정적인 인터넷 환경을 권장합니다.

결과가 예상과 다르게 보이면 무엇을 확인해야 하나요?

현재 선택한 설정, 입력값, 화면 크기, 브라우저 상태에 따라 결과가 달라질 수 있습니다. 초기화 또는 예시 설정으로 돌아간 뒤 값을 하나씩 바꿔 확인하면 원인을 파악하기 쉽습니다.