Hackathon-Cleave 팀 게임 씬 WebCanvas 마이그레이션 - #1
Conversation
There was a problem hiding this comment.
Pull request overview
게임 씬의 배경/도마/장식 렌더링을 기존 DOM/CSS 기반에서 ThorVG WebCanvas 기반으로 이관하고, 이에 따라 Vite 템플릿 잔여물 및 미사용 리소스를 정리하는 PR입니다.
Changes:
kitchen/board/leaves/calyx를 TVG.Picture로 로드해 WebCanvas에 렌더링하도록 전환- 장식(
leaves,calyx)의 표시/페이드 아웃 동작을 WebCanvas 애니메이션 루프에서 처리 - 기존 DOM/CSS 및 Vite 기본 템플릿 파일/에셋 제거 및 HTML 정리
Reviewed changes
Copilot reviewed 4 out of 7 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/style.css | 기존 Vite 템플릿 스타일 제거 |
| src/main.ts | 배경/도마/장식 WebCanvas 렌더링 및 장식 페이드 로직 추가, 레이어 관리 도입 |
| src/counter.ts | Vite 템플릿 카운터 코드 제거 |
| src/assets/vite.svg | Vite 기본 에셋 제거 |
| src/assets/typescript.svg | Vite 기본 에셋 제거 |
| index.html | 보드/장식 DOM 제거 및 canvas를 스테이지 전체로 확장 |
Suppressed comments (1)
src/main.ts:924
- addToLayer('knife', ...) appends every per-frame knife shape into layerShapes.knife, but the animation loop only clears bladeShapes. As a result, layerShapes.knife grows unbounded over time. Clear layerShapes.knife alongside bladeShapes before creating the new knife shapes each frame.
addToLayer('knife', blade);
bladeShapes.push(blade);
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| shape.appendCircle(x, y, r, r); | ||
| shape.fill(255, 214, 150, 255); | ||
| canvas.add(shape); | ||
| addToLayer('effects', shape); |
YoungB0
left a comment
YoungB0
left a comment
There was a problem hiding this comment.
확인이 늦어져 죄송합니다. 로컬에 받아서 돌려봤습니다.
WebCanvas 마이그레이션 자체는 잘 동작하고, 배경/도마/장식 모두 정상적으로 렌더링됩니다. 페이드 아웃도 원래 CSS transition으로 하던 것과 비슷하게 나옵니다! DOM 정리랑 Vite 잔여 파일 제거도 같이 해주셔서 코드가 훨씬 깔끔해진 것 같습니다.
다만 main이랑 비교해보니 게임 씬 스케일이 달라진 것 같습니다.
- 재료(당근/토마토/파)가 원래보다 크게 보입니다.
- 자른 후 튕겨나가는 조각의 거리도 같이 커진 것 같습니다.
- 조각이 도마 밖 배경 부분까지 튕겨나갑니다. (원래는 도마 안에서만 튕겼습니다.)
원인은 index.html의 #canvas 크기 변경 때문인 것 같습니다. 원래는 canvas가 도마 영역에만 얹혀 있어서(left 21% / top 19% / 66% x 57%) main.ts의 WIDTH 900 x HEIGHT 560이 곧 도마 크기였는데, 지금은 canvas가 화면 전체를 커버해서 같은 좌표가 더 넓은 영역에 매핑되는 것 같습니다.
배경을 canvas에 그리려면 canvas를 전체로 키우는 게 맞다고 생각하는데, 그럼 게임 좌표 쪽 조정이 같이 필요해 보입니다. 어떻게 가는 게 좋을까요? 제가 잘못 본 걸 수도 있습니다.
main:
PR:
Hackathon-Cleave팀의 코드를 리팩토링 및 수정하였습니다.
변경 내용
leaves,calyx) 렌더링 및 페이드 동작을 WebCanvas로 이관목적
테스트
npm run build성공