코드 카툰은(는) 무엇을 하나요?
여기서 영화는 하나의 웹 페이지입니다. 각 장면은 자신의 세계 프레임 u를 그리는 하나의 JavaScript 파일입니다. 작은 엔진이 녹음된 음성으로부터 구축된 타임라인에 맞춰 장면을 재생하고, 헤드리스 Chrome이 모든 프레임을 스크린샷으로 캡처하며, ffmpeg가 음성, 생성된 효과음, 분위기음을 믹싱합니다. 이미지 모델이나 비디오 모델은 그림에 전혀 사용되지 않습니다.
example/는 이 방식으로 제작된 완성된 영화입니다: 풍선, 2분 41초, 13가지 스타일, 16장면. 새 영화는 example/를 복사하고 장면을 교체하여 시작하세요. 엔진, 도구, 계약은 그대로 재사용하도록 설계되었습니다.
작업 순서 (순서를 바꾸지 마세요)
- 스타일 보드 우선 (
references/styles.md). 각 후보 스타일별로 하나의 정지 이미지, 각각 다른 기법으로, 모두 같은 캐릭터를 보여줍니다. 팔레트와 서체를 공유하는 스타일은 하나의 스타일로 읽히므로, 팔레트, 질감, 차원, 기법이 모두 다르게 만드세요. 보드는 애니메이션 작업 전에 승인을 받아야 합니다. - 스토리 (
references/story.md). 모든 장면에 등장하는 하나의 운반체 객체(carrier object)와 스타일 변경에 대한 이유를 만듭니다. 각 대사의 감정 태그와 함께 대본을 작성하세요. - 그림보다 음성 먼저 (
references/voices.md). 모든 대사를 녹음한 후 실제 지속 시간으로 타임라인을 구축합니다. 장면은 그 타임라인에 맞춰 애니메이션되며, 그 반대는 안 됩니다. - 엔진과 계약.
example/balloon.html,example/balloon/film.js,example/tools_balloon.mjs,example/balloon/CONTRACT.md를 재사용하세요. 장면을 작성하기 전에 계약을 읽으세요. 짧고 모든 규칙은 그 규칙 없이 무언가가 망가졌던 경험에서 비롯되었습니다. - 장면 (
references/styles.md에서 각 스타일의 레시피,references/parallel-build.md에서 여러 장면을 동시에 제작하는 방법). 장면당 하나의 파일,draw(u, S)는u의 순수 함수입니다. - 사운드 (
references/sound.md). 각 장면은 자신의 효과음, 큐 시간, 분위기음을 선언하며, 도구가 이를 생성하고 믹싱합니다. - 장면별 렌더링 후 조립.
bash balloon/final.sh는 장면당 하나의 MP4를 렌더링하므로, 변경된 장면만 다시 렌더링됩니다. - 완성된 파일 확인 (
references/checking.md). 보고 들을 수 없으므로 측정 가능한 것을 확인하고, 확인하지 않은 것을 명확히 밝히세요.
모든 장면에 적용되는 규칙
- 프레임은 시간의 순수 함수입니다. 프레임은 한 번에 하나씩, 때로는 순서에 상관없이 렌더링됩니다. 이전 프레임의 상태, 시계, 시드 없는 난수는 없습니다. 비용이 많이 드는 고정 작업은
init에 넣습니다. - 운반체는 모든 장면의 시작과 끝을 동일한 화면 위치에서 엽니다 (예제에서는 (700, 560)에 있는 빨간 풍선, 반지름 64). 다음 장면은 정확히 그 지점에서 자라나는 원으로 나타나므로 모든 전환이 자동으로 매치 컷이 됩니다.
- 주인공은 모든 스타일에서 비율을 유지합니다. 렌더링을 다시 스타일링하고, 모양은 절대 바꾸지 마세요.
- 말하는 사람이 움직이며, 다른 사람은 움직이지 않습니다. 립 싱크는 없습니다. 바운스, 부리, 깜빡이는 커서면 충분합니다.
- 화면의 숫자는 사실입니다. 600라인 또는 512광선이라고 표시된 카운터는 프레임이 실제로 사용한 값을 보여줍니다.
- 움직임에는 원인이 있습니다: 점프 전의 예비 동작, 착지 시의 스쿼시, 충격이 프레임에 미치는 효과, 펀치라인 전의 1/3에서 1/2초의 정적.
- 자막은 엔진에 속합니다. 장면은 얼굴과 손을 그 영역 밖에 유지합니다.
명령어 (영화 폴더에서 실행)
npm install # three + puppeteer-core; Chrome이 기본 위치에 없으면 CHROME_PATH 설정
node tools_styles8.mjs # 스타일 보드: 스타일별 정지 이미지 하나 -> out/styles8/board.jpg
python tools_balloon_vo.py # 음성 + 타임라인 (ELEVENLABS_API_KEY 필요); --timeline은 타임라인만 재구축
node tools_balloon.mjs --scene=book --sheet=auto # 한 장면의 정지 이미지 8장 + 타일 시트
node tools_balloon.mjs --glide=book # 한 장면의 최종 포즈
node tools_balloon.mjs --film --sheet=13.1,24.8 # 해당 초에서 전체 영화의 정지 이미지 (장면 경계에서 사용)
bash balloon/final.sh # 모든 장면 렌더링, 사운드, 조립, 먹싱; `final.sh comic pixel`은 해당 장면만 재렌더링
Node 18+, Chrome, ffmpeg, Python 3 + requests numpy soundfile pyloudnorm 필요. 그림에는 API 키가 필요 없으며, 음성과 사운드에는 ElevenLabs 키가 필요합니다.
참고 파일
| 파일 | 읽을 시점 |
|---|---|
references/styles.md | 스타일 선택 시, 또는 열세 가지 스타일 중 하나로 장면 제작 시 |
references/story.md | 대본 작성 시 |
references/voices.md | 캐스팅, 녹음, 타이밍 시 |
references/sound.md | 효과음, 분위기음, 믹스 시 |
references/checking.md | 장면이나 영화가 완료되었다고 말하기 전 |
references/parallel-build.md | 여러 장면을 동시에 제작하거나, 머신의 GPU가 약할 때 |
example/balloon/CONTRACT.md | 항상, 첫 장면 전에 |