습관만들기 Pawbit TIL 2

퍼즐을 켜 보니 같은 그림이 아홉 장 깔려 있었다

퍼즐 화면 첫 버전을 돌려 봤는데, 그림이 아홉 조각으로 나뉜 게 아니라 같은 그림이 작게 줄어든 채 아홉 칸에 하나씩 들어가 있었다.

칸을 격자로 늘어놓는 GridView에 그림을 그대로 넣으면 이렇게 된다. Flutter에서는 부모가 자식에게 크기 제약(constraint)을 내려주고 자식은 그걸 그대로 받는 게 기본이라, 그림 전체가 칸 크기 안으로 억지로 들어간다.

---

자르지 않고 창을 옮겨서 풀었다

바꾼 방식은 그림을 아홉 장으로 자르는 게 아니었다. 원본 한 장을 칸의 세 배 크기로 키워 두고, 칸마다 그 큰 그림의 다른 부분만 보이게 한다. 칸은 창문이고, 창에 걸리는 부분만 보인다.

필요한 부품은 셋이다.

• OverflowBox — 부모의 제약을 무시하고 자식에게 원하는 크기를 준다. 그림을 칸보다 크게 키우는 역할이다
• ClipRect — 칸 밖으로 삐져나온 부분을 잘라 낸다. 창틀 역할이다
• Alignment(x, y) — 큰 그림의 어느 지점을 칸에 맞출지 비율로 정한다. 왼쪽·위 끝이 -1, 가운데가 0, 오른쪽·아래 끝이 +1이다

칸 위치	Alignment	결과
좌상단	(-1, -1)	그림의 좌상단이 칸에 맞는다
가운데	(0, 0)	그림의 가운데가 칸에 맞는다
우하단	(+1, +1)	그림의 우하단이 칸에 맞는다

위치를 픽셀이 아니라 비율로 잡으니, 칸 크기가 바뀌든 격자가 3×3에서 7×7로 늘든 식이 그대로다.

---

원판을 1:1로 정해 둔 게 여기서 맞물렸다

전날 퍼즐 밸런스를 짜면서 난이도를 3×3·5×5·7×7 정방형 격자로 바꾸고, 그림 원판 규격을 1:1로 통일하기로 했다. 어떤 난이도를 골라도 조각이 정사각형으로 나오게 하고, 원판을 난이도마다 따로 만들지 않아 제작 비용을 관리하려는 결정이었다.

창을 옮기는 방식이 이 결정과 맞물린다. 조각 파일을 따로 만들지 않으니 1:1 그림 한 장이 세 난이도를 전부 그대로 커버한다.

• 판단: 관리해야 할 수가 조각 파일 수가 아니라 그림 수로 유지된다. 콘텐츠를 계속 공급해야 하는 게임에서는 이 차이가 제작 부담을 가른다.

---

웹의 배경 그림과 같은 원리였다

알고 보니 웹 CSS에서 배경 그림을 다루는 방식과 똑같다.

.cell {
  background-size: 300% 300%;  /* OverflowBox — 크게 키우기 */
  background-position: 0% 0%;  /* Alignment — 볼 위치 */
  overflow: hidden;            /* ClipRect — 나머지 잘라 내기 */
}

• 판단: 새 프레임워크의 부품 이름을 하나씩 외우기보다, 이미 아는 어느 개념과 같은지 찾는 게 빠르다.

---

Series: Today I Learn