配置オーバーレイ

モデルをドラッグで配置し、その fit の値を読み取ります。

いつ必要か

fit: 'upper-body' は、キャラクターがキャンバスの縦を埋める全身リグを前提とします。すでに上半身だけ描かれたリグは 2 倍でははみ出し、キャンバスの中央から外れて描かれたリグは片側に寄ります。model3.json にはキャンバスサイズしかなく、その中のどこにキャラクターが描かれているかは記録されないため、どの既定値でも自動では補正できません。

そこでオーバーレイを使います。モデルをドラッグして置き、その値をコードに書き写します。

有効にする

Avatar.tsx

<Live2DModel src="/models/model.model3.json" debug fit="upper-body" />

必要なのはこれだけです。オーバーレイが表示されている間は配置をオーバーレイが持ち、実際には変わっていない fit prop がその上に再適用されることはありません。

保存したり自前の UI に表示したりと、値をアプリ側でも使いたいときだけ onFitChange を付けます。

Avatar.tsx

const [fit, setFit] = useState<ModelFit>('upper-body')
 
<Live2DModel src="/models/model.model3.json" debug fit={fit} onFitChange={setFit} />

バニラでも同じフラグを受け取ります。

avatar.ts

const live2d = await createLive2D({
  container: document.querySelector('#avatar')!,
  coreUrl: '/live2dcubismcore.min.js',
  src: '/models/model.model3.json',
  debug: true,
})
 
live2d.setDebug(false)

オーバーレイは必要になったときに読み込まれるため、debug を無効のままにしても root バンドルには影響しません。別の場所に接続するなら live2d-web/debug の mountLive2DDebugOverlay() を使います。

一度に1つのモデル

オーバーレイはポインターを受け取るためにキャンバスを覆うので、2つで分け合えません。あるモデルの debug を有効にするとオーバーレイはそのモデルへ移り、そのモデルが消えると一緒に消えます。

いま調整したいモデルに debug を付けてください。どのモデルを調整中かはアプリがすでに知っている情報なので、ライブラリが選ぶのではなく prop を移せば済みます。

ドラッグで移動、ホイールでカーソルを中心に拡大縮小、矢印キーで微調整します（Shift でさらに細かく）。+ と - は基準点から拡大縮小します。Full と Upper body はプリセットへ移動し、いまの配置がどちらのプリセットかが示されます。Reset はオーバーレイを開いたときの配置、またはアプリが最後に適用した配置に戻ります。戻す対象がないときは無効になります。

バーに出るのは値ではなく倍率です。値は成果物なので必要なのは一度だけで、それは Copy が担います。セキュアでないコンテキストなどクリップボードが使えない場所では、リテラルがバーに表示され、手で選択できます。

ポインターイベントはオーバーレイで止まります。押したときに生成される click も同様です。そうしないと followPointer がカーソルを追いかけながらモデルが引きずられ、指を離した瞬間に onTap でモーションまで再生されます。

得られる値

fit={{ scale: 1.4, offsetX: -0.12, offsetY: -0.24, units: 'stage' }}

units: 'stage' はオフセットをステージの幅と高さに対する比率として読みます。そのためキャンバスのサイズが変わっても配置は保たれます。オフセットの既定は units: 'px' で、これは計測したときのサイズに固定されます。サイズが決まったオーバーレイには十分ですが、レイアウトが変わる画面ではずれます。

scale はどちらの場合も upper-body の配置に掛かる値なので、単位は必要ありません。

いつ必要か

有効にする

一度に1つのモデル

ドラッグ、ホイール、微調整

得られる値