diff --git a/voicevox-remotion-template/README.md b/voicevox-remotion-template/README.md index 1500b3b..81c3de0 100644 --- a/voicevox-remotion-template/README.md +++ b/voicevox-remotion-template/README.md @@ -110,6 +110,7 @@ - 音声タイミング: `src/data/voicevox-manifest.json` (自動生成) - 口パクタイミング: `src/generated/lipsync/manifest.json` (自動生成) - 映像の構成: `src/yukkuri-composition.tsx` +- 立ち絵セット: `src/standee-sets.ts` ## 字幕方針 @@ -123,11 +124,94 @@ - `VOICEVOX_URL` (既定: `http://host.docker.internal:50021`) - 話者とスタイルは `src/data/script.ts` の `characters.*.voicevox` で指定します。 -## 立ち絵の差し替え -現在の小夜は CSS の仮立ち絵です。画像素材を使う場合は `public` 配下に画像を置き、 -`characters.sayo.avatar.imagePath` に `images/sayo.png` のような `public` からの相対パスを設定してください。 -口パクを使う場合は、立ち絵本体と同じ寸法の `a.png` / `i.png` / `u.png` / `e.png` / `o.png` / -`closed.png` / `rest.png` を `image/<キャラクター>-rhubarb-mouths/` に置くか、 -`avatar.mouthImageDir` で配置先を指定してください。 +## 立ち絵セットの追加・差し替え +立ち絵本体、口パク画像、通常表示時の基本レイアウトは `src/standee-sets.ts` の `standeeSets` にまとめています。 +新しい立ち絵を追加する場合は、次の流れで修正します。 + +### 1. 画像素材を配置 +`public/image/` 配下に、立ち絵本体と口パク画像を配置します。`imagePath` や `mouthImageDir` には +`public` からの相対パスを指定します。 + +```txt +public/image/zundamon_ohnegus_ai_base.png +public/image/zundamon-ohnegus-ai-rhubarb-mouths/ + a.png + i.png + u.png + e.png + o.png + closed.png + rest.png +``` + +口パク画像は、立ち絵本体と同じキャンバス寸法・同じ位置合わせにしてください。 +口だけが差分として重なる前提で、`LipSyncedStandeeImage` が本体画像の上に同じサイズで重ねます。 + +### 2. `src/standee-sets.ts` にセットを追加 +`standeeSets` に、素材パスと基本レイアウトを追加します。 + +```ts +"zundamon_ohnegus_ai": { + kind: "zundamon", + imagePath: "image/zundamon_ohnegus_ai_base.png", + mouthImageDir: "image/zundamon-ohnegus-ai-rhubarb-mouths", + imageLayout: { + width: 540, + maxHeight: 730, + translateY: 0, + flipX: true, + }, +}, +``` + +- `kind`: キャラクター種別です。既存は `"zundamon"` / `"sayo"` です。 +- `imagePath`: 立ち絵本体のパスです。 +- `mouthImageDir`: `a.png` などの口パク画像を置いたディレクトリです。 +- `imageLayout.width`: 通常コンポジションでの表示幅です。 +- `imageLayout.maxHeight`: 通常コンポジションでの最大表示高さです。 +- `imageLayout.translateY`: 通常コンポジションで上下位置を微調整します。 +- `imageLayout.flipX`: 左右反転したい場合に `true` にします。 + +### 3. キャラクター定義で使うセットを選ぶ +通常コンポジションは `src/data/script.ts`、ピザ窯コンポジションは +`src/data/pizza-kiln/script.ts` の `characters.*.avatar` で、使いたい立ち絵セットを展開します。 +対象ファイルで `getStandeeSet` を import して使います。 + +```ts +avatar: { + ...getStandeeSet("sayo_ohnegus_ai"), + accentColor: "#6b5f83", + nameplatePosition: "none", + idleAnimationType: "none", + speakingAnimationType: "rhubarbLipSync", +}, +``` + +`speakingAnimationType: "rhubarbLipSync"` を指定すると、`src/generated/lipsync/manifest.json` +の口形タイムラインに合わせて `mouthImageDir` の画像を切り替えます。 + +### 4. コンポジション固有の見栄えを調整 +通常の全身表示は `src/standee-sets.ts` の `imageLayout` で調整します。 +コンポジションごとに特別な配置がある場合だけ、描画側を調整します。 + +- 通常コンポジション: `src/yukkuri-composition.tsx` の `Stage` / `CharacterAvatar` +- ピザ窯コンポジション: `src/pizza-kiln-composition.tsx` の `SayoStandee` + +ピザ窯コンポジションは、通常背景用の `STAGE_STANDEE_*` と、実写動画右下用の +`CORNER_*` でサイズと切り抜き方を分けています。 + +### 5. 確認 +変更後は、可能な範囲で次を実行します。 + +```bash +./node_modules/.bin/tsc --noEmit +npm run lint +./node_modules/.bin/remotion still src/index.ts YukkuriZundamon /tmp/yukkuri.png --frame=160 +./node_modules/.bin/remotion still src/index.ts PizzaKilnSayo /tmp/pizza-kiln.png --frame=30 +``` + +音声や `say(...)` を変更した場合は、`npm run voice:generate` と +`npm run lipsync:generate` も実行してください。立ち絵画像だけを差し替える場合は、 +口パクタイミングの再生成は不要です。 以前の `public/audio/zundamon.txt` と `src/data/script.json` は互換用に残していますが、現在は参照しません。