Feature/psd animation

[aqiq-marine]

ゆっくり動画を簡単に作成するため、psdファイルを制御するコンポーネントを作成しました。
( #2 )

使用例

export const PROJECT = () => {
  const eyeUtilDict = {
      kind: "bool" as const,
      options: {
          Default: "顔パーツ/目/開き",
          Open: "顔パーツ/目/開き",
          HalfOpen: "顔パーツ/目/やや開き",
          HalfClosed: "顔パーツ/目/やや閉じ",
          Closed: "顔パーツ/目/閉じ",
      }
  }
  const mouthUtilDict = {
      kind: "bool" as const,
      options: {
          Default: "顔パーツ/口/閉じ",
          a: "顔パーツ/口/あ",
          i: "顔パーツ/口/い",
          u: "顔パーツ/口/う",
          e: "顔パーツ/口/え",
          o: "顔パーツ/口/お",
          x: "顔パーツ/口/閉じ",
      }
  }
  const LipSync = createLipSync(mouthUtilDict)
  const Blink = createBlink(eyeUtilDict)
  return (
    <Project>
      <TimeLine>
        <Clip label="Hello">
          <PsdCharacter psd="../assets/フリー.psd">
            <MotionSequence>
              <Block>
                <Voice voice="../assets/001.wav" volume={0.5} />
                <LipSync data={lipsync1} />
              </Block>
              <Voice voice="../assets/002.wav" />
            </MotionSequence>
            <Blink data={blink1} />
            <DeclareVariable variableName="t" initValue={0}>
              <DeclareAnimation f={async (ctx, variables) => {
                await ctx.move(variables["t"]).to(1, seconds(1), BEZIER_SMOOTH)
              }}>
                <Motion motion={(variables, frames) => {
                  const t = variables["t"].get(frames[0])
                  if (t == 1) {
                      return {}
                  } else if (t < 0.5) {
                    return {
                      [eyeUtilDict.options.Open]: false,
                      [eyeUtilDict.options.Closed]: true,
                    }
                  } else {
                    return {
                      [eyeUtilDict.options.Open]: true,
                      [eyeUtilDict.options.Closed]: false,
                    }
                  }
                }} />
              </DeclareAnimation>
            </DeclareVariable>
          </PsdCharacter>
        </Clip>
      </TimeLine>
    </Project>
  )
}

[bea4dev]

ありがとうございます！
近日中できるだけ早くレビューしますのでしばらくお待ち下さい。

[bea4dev]

おまたせしました。
全体的には良さそうなのですが、いくつかコメントさせてください。

1. 最初のコード例について

<MotionSequence>
  <Block>
    <Voice voice="../assets/001.wav" volume={0.5} />
    <LipSync data={lipsync1} />
  </Block>
  <Voice voice="../assets/002.wav" />
</MotionSequence>
<Blink data={blink1} />

ここの部分、<Block>が何を指しているのかがやや不明瞭なのと、lipsync1とblink1は何を指しているのでしょうか？

2. DeclareVariableについて
   ここは好みが出る部分かもしれませんが、variableName="t"というように生のstringを渡すのにはやや抵抗があります。
   ここはどちらかといえばVariableReferenceのような型を作って静的に解決しやすいようにしてtypoを排除しやすくするという方向性のほうが健全かなと考えています。
   ただ、コレに関しては絶対的にこちらが正しいというわけではないと思うので、これを採用するかどうかはおまかせします。

[aqiq-marine]

不明瞭な部分も多くすみません。
いくつか補足します。

1. 1.のlipsync, blinkについてです。
   LipSync内で使用していたlipsync1についてはrhubarbの出力ファイルに合わせる形で次のような形式のデータとなっています。
   start, endが時系列の区間、valueが口の形に対応しています。

type HasKey<K extends string, V = unknown> = {
  [P in K]: V
} & Record<string, unknown>

export type LipSyncData  = HasKey<"mouthCues", {start: number, end: number, value: string}[]>

例

const blink1 = {
  mouthCues: [
    { start: 0.00, end: 0.03, value: "X" },
    { start: 0.03, end: 0.09, value: "B" },
    { start: 0.09, end: 0.29, value: "C" }
}

Blink内のblink1についてもこれにならって次のようなデータになっています。

export type BlinkData = HasKey<"blinkCues", {start: number, end: number, value: string}[]>

2. 1.のBlockについてです
   確かに少し広すぎる名前でした。
   機能としてはMotionSequence, BlockがそれぞれClipSequence, Clipに相当するようなものです。
   もっと絞ってParallelBlockなどのほうが良いでしょうか？

3. 2.についてです。
   この実装となっている理由としては単に実装上容易だったというだけであり、可能であれば型で解決したいところではあります。
   しかし私自身typescriptに慣れていないところがあり、まだ実装イメージができていないので、これに関しては少し待ってもらっていいでしょうか？

[aqiq-marine]

いくつか修正を加えました。

1. Blockコンポーネントの名前をMotionClipに変更しました。
2. 次のようなコンポーネントを作成し、この中では型推論などが機能するようにしました。
   残念ながら内部的に型情報を保持するのは難しく、例えばDeclareVariableで宣言したものを内側のMotionから自動で型推論するというのはできませんでした。
   しかし表面的にでも型推論が効けば、タイポや型レベルのバグは減るかなと思います。

<MotionWithVars
  variables={{t: 0 as number}}
  animation={async (ctx, variables) => {
    await ctx.move(variables.t).to(1, seconds(0.5), BEZIER_LINEAR)
    await ctx.move(variables.t).to(0, seconds(0.5), BEZIER_LINEAR)
  }}
  motion={(variables, frames) => {
    if (variables.t.get(frames[0]) < 0.5) {
      return {
        "腕/右腕": "バンザイ"
      }
    } else {
      return {}
    }
  }}
/>

[bea4dev]

かなり良さそうに見えます。
（まだすべて読み切れていませんが）最終的には<Character/>と同じくシンプルな音量ベースの口パクを簡単に実装できる経路があると完璧かなと考えています。
（かなり負担をかけてしまっているのでこのあたりの実装は私でも良いです）
マージしても良さそうなレベルなので、後で実際に使って検証してみます。

[aqiq-marine]

コンポーネントをいくつか追加しました。

1. 音量依存の口パクを行うコンポーネントを作成しました。

export const PROJECT = () => {
  const SimpleLipSync = createSimpleLipSync({
    kind: "bool",
    options: {
      Default: "全身/顔パーツ/口/お",
      Open: "全身/顔パーツ/口/あ",
      Closed: "全身/顔パーツ/口/にま",
    }
  })
  return (
    <Project>
      <TimeLine>
        <Clip>
          <PsdCharacter psd="../assets/test.psd">
            <SimpleLipSync voice="../assets/test.wav" />
          </PsdCharacter>
        </Clip>
      </TimeLine>
    </Project>
  )
}

2. このプルリクでやるべきではなかったかもしれませんが、二人以上のキャラを出したときに待機状態のキャラを記述しなければならない面倒を軽減することを目的に次のようなコンポーネントを作成しました。
   （不要だったら消します）

export const PROJECT = () => {
  const AkaneLipSync = createSimpleLipSync({
    kind: "enum" as const,
    options: {
      Mouth: "目・口/口",
      Default: "開き",
      Open: "開き",
      Closed: "閉じ",
    }
  })
  const AoiLipSync = createSimpleLipSync({
    kind: "bool",
    options: {
      Default: "全身/顔パーツ/口/お",
      Open: "全身/顔パーツ/口/あ",
      Closed: "全身/顔パーツ/口/にま",
    }
  })

  return (
    <Project>
      <TimeLine>
        <Clip label="Hello">
          <DialogueSenario>
            <DeclareCharacters>
              <DeclareCharacter idleClassName="akane" speakingClassName="akane" name="akane" psd="../assets/akane.psd">
                <Motion motion={(_v, _f)=> {return {}}} />
              </DeclareCharacter>
              <DeclareCharacter idleClassName="aoi" speakingClassName="aoi" name="aoi" psd="../assets/aoi.psd">
                <Motion motion={(_v, _f)=> {return {}}} />
              </DeclareCharacter>
            </DeclareCharacters>
            <Senario>
              <Chapter>
                <Speaker name="aoi" >
                  <AoiLipSync voice={voice1} />
                </Speaker>
              </Chapter>
              <Chapter>
                <Speaker name="akane" >
                  <AkaneLipSync voice={voice2} threshold={0.1} />
                </Speaker>
              </Chapter>
            </Senario>
          </DialogueSenario>
        </Clip>
      </TimeLine>
    </Project>
  )
}

[bea4dev]

現在こちらのPSD立ち絵でテストしているのですが、うまく反映されずデフォルトの状態が表示されます。
私の使い方に問題があるかもしれないので、確認していただけますか？(5 #1指定でも変わらず...)

const PsdTest = () => {
  const SimpleLipSync = createSimpleLipSync({
    kind: "bool",
    options: {
      Default: "表情/口/5",
      Open: "表情/口/1",
      Closed: "表情/口/5",
    }
  })

  return (
    <PsdCharacter psd="assets/zundamonA.psd">
      <SimpleLipSync voice="assets/001_ずんだもん（ノーマル）_ずんだもんなのだ.wav" />
    </PsdCharacter>
  )
}