Live2dキャラクターをサイトに出す
先日、インターネットを彷徨っていたところ、とあるサイトに流れついた。サイトにアクセスすると左下に可愛い魔法少女が動いていて、視線は自分のマウスを追いかけていた。
(なんだ、これ)
気になって画面内でマウスをぐるぐるすると、少女の視線もぐるぐるした。また、クリックによって専用のモーションを再生したり、吹き出しによって喋っているようにするなど、反応が可愛くてしばらく遊んでいた。
詳しく見てみたところ、stevenjoezhang/live2d-widgetというリポジトリを使っているようだった――自分も導入したい!
その日と次の日はモデルを探すことしかしていなかった。Live2d用のリポジトリというのが中国にはある程度あるようで、次から次へと見ていった。Live2dはリポジトリを見てもテクスチャ画像(目、顔の背景、口などがバラバラになってる画像)しかないため、実際に動かしてみないとどんなものなのかわかりにくくて困った。
ダウンロードして確認しては、なんか違うなあと言って振り出しに戻るのを繰り返していたが、最終的にはboothで見つけたモデルに決めた。決めては髪色が自分の使っているアイコンのものと同じであることだった。
さて、実装していくわけだがここで困ったことになった。自分の使っているモデルだと上手く表情を変えてくれなかったのだ。通常は表情用のアニメーションなどが存在する事を期待しているようだが、自分のモデルは複数の表情差分モデルがあるだけで表情変化用のアニメーションがないみたいだ。面倒だったためClaude Codeに投げて実装させた。
本当なら常にモデルを出しておきたいところなのだが、
- Astroではページを移動しても出しっぱなしにしておくにはClientRouterを使わないといけないが、自分はこれを使っていない
- これに向けてデザインしていないため、PCでもいくつかの要素が押せなくなる。スマホなど尚更
という問題があるため、今のところはフッターの「召喚」ボタンから手動で出さないといけないし、ページを跨ぐと消えてしまう。
