← Hackathon

ThorBridge 코드로 다리를 놓는 횡스크롤 게임

@DaengDo
Image

Polybridge식 물리 퍼즐 + ThorVG API 튜토리얼을 합친 웹 게임.

플레이어가 ThorVG api로 직접 그린 도형이 그대로 물리 오브젝트가 되어 캐릭터가 그 위를 건너는 컨셉입니다.

vimtutor 나 learngitbranching.js.org/ 같은 유익함에 폴리브릿지식 재미를 담는게 목표입니다.

핵심 게임 루프

스테이지 진입 (무언가 결핍된 화면)

좌측 코드 에디터에 ThorVG API 작성  ←──┐
   ↓                                  │
[적용] → 캔버스에 즉시 렌더 (미리보기)   │ 실패 시 반복
   ↓                                  │
[재생] → 도형이 물리 바디로 변환        │
   ↓                                  │
삼각형 캐릭터가 굴러가며 통과 시도 ────┘

골인 → 클리어 + 이번에 배운 API 요약

화면 구성

┌───────────────────────────┬──────────────────┐
│                           │  📘 미션         │
│    ThorVG Canvas          │  "배경을 흰색으로"│
│    (게임 뷰 / 횡스크롤)     │                  │
│                           ├──────────────────┤
│         △ → → →  🚩       │  💻 코드 에디터   │
│    ▬▬▬▬▬      ▬▬▬▬▬       │  canvas.bg(...)  │
│                           │                  │
│                           │  [적용] [▶ 재생]  │
└───────────────────────────┴──────────────────┘

스테이지 대략 기획

  1. 화면이 검다! -> fill rect로 전체좌표 하얗게 해주니까 땅이랑 다리 나옴 -> clear~~~!
  2. 다리가 없다! -> 스트로크나 rect를 올바른 좌표에 위치하게 해서 건너게 함 -> clear~~~!
  3. 다리가 깜빡인다! -> 기본 제공된 로티 애니메이션을 수정해서 아무튼 건너게 함 -> clear~~~!

목표

  1. 디자인은 포기하더라도…기능은 구현하기
  2. 스테이지 5개 만들기
  3. 완성도 높혀서 ThorVG 소개란에 이름 올리기

1 -> 2 -> 3 순서대로 목표합니다.

당장 생각나는대로 마구 적은거라 기획이 몹시 미흡합니다.

기능이 많아서 외면받는게 두렵습니다. 함께 하실분있나요.

댓글

이슈 원문