제목

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

앱 개발

대상자

• 대상자: 스토리텔러, 초보 개발자, 교육자, 퍼블리셔
• 난이도: 초보자 대상으로 코딩 없이 시각적 편집기 사용 가능

핵심 요약

• Whimsy는 Bitsy를 기반으로 한 시각적 게임 엔진으로, Svelte와 SvelteFlow를 사용해 개발 (코드: Svelte, SvelteFlow)
• 비코딩 기반의 시나리오 편집기 제공, CanvasContext2D 기반의 최적화된 렌더링
• PWA 지원으로 오프라인 사용 가능, vite-plugin-singlefile를 통한 단일 HTML 파일 배포

섹션별 세부 요약

1. 개요

• Whimsy는 스토리 중심의 게임 개발을 위한 경량 엔진
• Bitsy의 기능 확장, 시각적 블록 편집기 제공 (Unreal Blueprints 유사)
• 웹 브라우저 기반으로 설치 없이 즉시 사용 가능

2. 주요 기능

• 시나리오 편집기를 통한 캐릭터 상호작용, 스테이지 전환, 대화 시스템 구현
• 타일맵 편집 및 색상 팔레트 관리 기능 포함 (초보자 대상 튜토리얼 필요)
• 모바일 최적화된 렌더링 (CanvasContext2D 활용, 배터리 효율성 강화)

3. 기술 스택

• 프레임워크: Svelte (첫 번째 Svelte 프로젝트, SvelteFlow 사용)
• 빌드 툴: Vite + vite-plugin-singlefile (단일 HTML 파일 생성)
• 타입 관리: TypeScript + type-fest (프로젝트 데이터 스키마 버전 관리)

4. 개발 과정

• Svelte 5의 반응형 상태 시스템 문제: WeakMap 사용 제한, 모든 객체에 Primary Key 추가 필요
• PWA 구현 시 IDE와 플레이어 빌드 순서 문제: IDE에 미리 빌드된 플레이어 파일 삽입 해결
• 비코딩 시나리오 편집기 한계: 데이터 입력/흐름 기능 미구현, if/else 조건문 구현 예정

5. 미래 계획

• 대화 시스템 개선: 플레이어 선택 기반 대화, 캐릭터 음성 효과 지원
• 배경 음악 추가, 변수/조건문 지원
• 데스크탑 앱 버전 출시 예정

결론

• Whimsy는 초보자 대상으로 코딩 없이 게임 개발 가능한 툴로, Svelte 기반의 최적화된 렌더링과 PWA 지원이 주요 특징
• 커뮤니티 피드백 및 테스트 유저 확보가 필요하며, 데이터 입력 기능 개발이 다음 단계
• 프로젝트는 무료이며, GitHub 및 Discord를 통해 커뮤니티 참여 가능