게임·미디어 제작Games & media

canvas-render-pixel-gate

게임 캔버스의 그레이박스 화면을 가려냅니다. 렌더된 스크린샷의 색 가짓수와 단색 비중을 재고, 못 재면 통과시키지 않습니다.

어떤 문제를 푸나The problem

'렌더된다'가 '게임처럼 보인다'는 아닙니다. 몇 개의 단색 사각형만으로 된 화면은 구조 테스트를 전부 통과합니다. 이 게이트는 기준 이미지 없이 스크린샷의 서로 다른 색 가짓수와 상위 24색이 차지하는 비율을 잽니다.

파일이 없거나 읽을 수 없거나 너무 작은 장식용 캔버스이면 통과가 아니라 측정 불가(종료 코드 3)입니다.

이런 분께 맞습니다Who it is for

웹 게임이나 캔버스 앱을 AI로 대량 생산하고 스프라이트가 실제로 그려졌는지 기계로 확인하고 싶은 사람.

무엇을 하나What it does

measure.py는 종료 코드 0은 통과, 1은 단색 위주 화면, 3은 측정 불가입니다.
색 가짓수는 채널당 6비트로 양자화해 센 값입니다. 기준은 --min-colors, --max-top24로 조절합니다.
scripts/capture.mjs는 가장 큰 캔버스를 찾아 캡처하는 Playwright 초안 도우미입니다(미검증).

직접 돌려 본 출력Real output

저장소의 examples 폴더를 실행한 결과입니다.

$ bash examples/demo.sh
# Does the rendered play canvas look like flat rectangles?
$ python3 scripts/measure.py .demo-tmp/greybox.png
FAIL 400x400 unique_colors=4 top24_share=100.0% (need colors>=1200 and top24<=92.0%): screen is dominated by flat fills
[exit 1]

$ python3 scripts/measure.py .demo-tmp/rich.png
PASS 400x400 unique_colors=119135 top24_share=0.1%
[exit 0]

# A screenshot that does not exist is 'unmeasured' (3), never a pass
$ python3 scripts/measure.py .demo-tmp/nope.png
UNMEASURED: .demo-tmp/nope.png not found
[exit 3]

알아둘 한계Limits

풍부함이 아름다움은 아닙니다. 잡음 이미지도 통과합니다.
기준은 시작점이며 자기 화면으로 보정해야 합니다.

받아서 쓰기Get it

# 저장소를 받습니다
git clone https://github.com/Kein-chronicle/canvas-render-pixel-gate.git

# Claude Code 스킬로 쓰려면 이 폴더 이름으로 받습니다
git clone https://github.com/Kein-chronicle/canvas-render-pixel-gate.git ~/.claude/skills/render-pixel-gate

정보Info

분류Category: 게임·미디어 제작Games & media
형태Type: 명령줄 도구Command-line tool
라이선스License: MIT
필요한 것Requires: Node.js 22 이상, Python 3.10 이상, Pillow
저장소Repository: canvas-render-pixel-gate
토픽Topics: game-development testing visual-testing screenshot canvas qa claude-skills playwright

2026-10-18 기준: 저장소의 테스트를 로컬에서 실행해 통과했고, 예제 출력은 저장소의 examples 폴더를 실제로 실행한 결과입니다.