Polybridge식 물리 퍼즐 + ThorVG API 튜토리얼을 합친 웹 게임.
플레이어가 ThorVG api로 직접 그린 도형이 그대로 물리 오브젝트가 되어 캐릭터가 그 위를 건너는 컨셉입니다.
vimtutor 나 learngitbranching.js.org/ 같은 유익함에 폴리브릿지식 재미를 담는게 목표입니다.
핵심 게임 루프
스테이지 진입 (무언가 결핍된 화면)
↓
좌측 코드 에디터에 ThorVG API 작성 ←──┐
↓ │
[적용] → 캔버스에 즉시 렌더 (미리보기) │ 실패 시 반복
↓ │
[재생] → 도형이 물리 바디로 변환 │
↓ │
삼각형 캐릭터가 굴러가며 통과 시도 ────┘
↓
골인 → 클리어 + 이번에 배운 API 요약
화면 구성
┌───────────────────────────┬──────────────────┐
│ │ 📘 미션 │
│ ThorVG Canvas │ "배경을 흰색으로"│
│ (게임 뷰 / 횡스크롤) │ │
│ ├──────────────────┤
│ △ → → → 🚩 │ 💻 코드 에디터 │
│ ▬▬▬▬▬ ▬▬▬▬▬ │ canvas.bg(...) │
│ │ │
│ │ [적용] [▶ 재생] │
└───────────────────────────┴──────────────────┘
스테이지 대략 기획
- 화면이 검다! -> fill rect로 전체좌표 하얗게 해주니까 땅이랑 다리 나옴 -> clear~~~!
- 다리가 없다! -> 스트로크나 rect를 올바른 좌표에 위치하게 해서 건너게 함 -> clear~~~!
- …
- …
- 다리가 깜빡인다! -> 기본 제공된 로티 애니메이션을 수정해서 아무튼 건너게 함 -> clear~~~!
목표
- 디자인은 포기하더라도…기능은 구현하기
- 스테이지 5개 만들기
- 완성도 높혀서 ThorVG 소개란에 이름 올리기
1 -> 2 -> 3 순서대로 목표합니다.
당장 생각나는대로 마구 적은거라 기획이 몹시 미흡합니다.
기능이 많아서 외면받는게 두렵습니다. 함께 하실분있나요.
댓글
이슈 원문