2D 캐릭터
브랜드의 마스코트 규칙을 먼저 읽으세요(brands/<slug>/README.md, 마스코트). 브랜드 마스코트는 브랜드 자체 파일에서만 그려야 하며, 기억에 의존해 다시 그리지 마세요.
SVG 리그 (디자이너 파일 없음)
- 브랜드 색상의 단순한 도형으로 인라인
<svg>에 캐릭터를 그립니다. 부품 이름을 다음과 같이 지정하세요:#body,#eyes,#mouth-closed,#mouth-open,#arm-l,#arm-r(일부는 생략 가능). const c = SvgRig(svgEl)를 호출한 후 체이닝:.idle(from, to),.blink([t…]),.talk(from, to),.wave(t),.hop(t).- 팔은 팔 박스의 안쪽 아래 모서리를 기준으로 회전합니다. 팔이 몸에서 떨어져 움직이는 경우
data-pivot="x% y%"속성을 설정하세요. - 보이스오버 말하기: 립싱크(다음 섹션). Rhubarb 없이 저렴한 립 플랩을 원한다면: 단어 시작은
scripts/transcribe.sh audio/vo.wav audio/vo를 실행하고 결과를.talk(0, 0, { beats: [...] })로 전달하세요. - 재사용: 캐릭터가 승인되면 SVG를
brands/<slug>/assets/characters/에 저장하고 브랜드 README에 추가하세요.
립싱크 (캐릭터가 보이스오버를 말함)
- VO 라인별 큐:
scripts/lipsync.sh audio/vo.wav audio/vo.visemes.json --dialog audio/vo.txt(Rhubarb Lip Sync; 스크립트에 설치 방법이 있습니다). 승인된 대본을 대화 파일로 사용하세요. 각 라인의 시간(초). - 컴포지션에
<script src="../audio/vo.visemes.js">와<script src="/engines/lipsync.js">를 로드하세요. - SVG 리그: 입 모양을
#mouth-A…#mouth-H로 그리고,#mouth-closed(또는#mouth-X)를 기본 입으로 사용하세요. A (입술 다문), B (약간 열림, 이빨), C (열림), D (크게 열림), E (O), F (OO)가 대부분을 차지합니다. G (F/V) 와 H (L)는 그리지 않은 경우 A와 C로 대체됩니다. 그런 다음.lipsync(LipSync.cues("vo.visemes"), { offset: <VO 시작> })을 호출하세요. 각 라인마다 한 번씩 호출합니다. 한 라인에.talk()또는.lipsync()중 하나만 사용하세요. 예시:examples/engines-demo/index.html. - 이미지로만 존재하는 마스코트 (브랜드의 PNG):
LipSync.mountMouth(wrapper, { cx, cy, w, aspect, shapes: LipSync.mouthSet({ ink, cover }) })가 그 위에 입을 그립니다 (cover= 얼굴 색상, 말하는 동안 이미지 자체의 입을 가림; 가만히 있을 때는 이미지의 입이 보입니다).cx,cy,w는 이미지의 비율로 측정합니다: 한 번 측정하고, 몇 개의 큐에서 스틸 컷을 확인한 후, 숫자를 브랜드 README (마스코트)에 유지하세요. 그런 다음LipSync.addToTimeline(Studio.tl, cues, mouth, { offset })를 호출하세요. - 브랜드 마스코트에 그려진 입은 새로운 아트웍입니다: 브랜드 소유자가 승인한 후에야 해당 내용이 포함된 모든 것을 게시할 수 있습니다.
- 말하는 동안 얼굴을 생동감 있게 유지하세요: 2~4초마다 눈 깜빡임, 강세가 있는 단어에서 작은 고개 끄덕임.
LipSync.talking(cues, t, offset)은 캐릭터가 말하고 있는 시점을 알려줍니다. - QA: 큐 파일 옆에 몇 개의 큐 시간에 해당하는 스틸 컷(각 입이 소리와 일치하는지 확인), 그런 다음 믹스와 함께 한 번 듣기.
규칙 및 3D 측면: engines/README.md, 립싱크.
Lottie (디자이너 파일)
Studio.lottie(el, "/brands/<slug>/assets/lottie/<file>.json", { start, loop, speed }). 런타임 전에
/core/node_modules/lottie-web/build/player/lottie.min.js를 로드하세요. 파일에 lottie-web이 그릴 수 없는 표현식이나 효과가 없는지 확인하세요(스틸 컷을 렌더링하여 디자이너의 미리보기와 비교).
Rive (디자이너 파일)
riveLayer(el, "/brands/<slug>/assets/<file>.riv", { animation | stateMachine, start, loop, inputs })를
engines/rive.js에서 가져옵니다. 타임라인(animation)은 t에서 바로 포즈가 취해집니다. 상태 머신은 프레임 레이트에서 0부터 스텝되므로,
입력값을 시간으로 제공하세요: inputs: [{ at: 1.2, name: "wave" }, { at: 2, name: "mood", value: 2 }] (값이 없으면 트리거).
두 가지 순서로 몇 개의 스틸 컷을 렌더링하고(--workers 1, 그런 다음 시간을 반대로 하여 --workers 2) md5가 일치하는지 확인하세요.
examples/reel-layer/rive.html은 작동 확인 페이지입니다.
캐릭터 제작
- 움직임 전의 예비 동작(점프 전 작은 스쿼시), 움직임 후의 오버슈트(
back.out). - 2~4초 간격으로 불규칙하게 눈 깜빡임. 가만히 있는 캐릭터는 죽어 보입니다.
- 포즈를 충분히 길게(≥ 0.4초) 유지하여 휴대폰에서도 읽을 수 있도록 하세요.