Live2D Cubism SDK for Webを使ってブラウザにモデルを表示しよう(1)

2021/02/17 18:13Live2D難しめ

プロフィールページにある僕の分身は既にご覧頂けたでしょうか
これはLive2D Cubism SDK for Web(以下WebSDKと表記)を使ってLive2Dモデルを表示しています
この記事ではそのWebSDKを使ってブラウザにモデルを表示するまでの方法をご紹介します

入門編ではありますが、初心者向けではありませんのでご注意ください・・・!

完成サンプル: https://astie-dog.github.io/live2d-for-web-example/

対象

  • Live2DモデルをWebサイトで動かしたい人
  • Node.jsがインストールされていてnpmが使える人
  • Gitを使ってクローンができる人


WebSDKの難しいところ

WebSDKはTypeScriptでのみ配布されています
そのためJavaScriptとして使いたい場合は事前にビルドする必要があるのはもちろんのこと
TypeScriptで使う場合もそのままimportして使うのではなく一度ビルドして使いましょう!(これ大事)

なぜビルドが必要か

このSDKはwebpackなどを通してコンパイルすることを推奨とした構造になっています
またTypeScriptはstrictモードで書かれていないためstrictな環境下では型不整合のエラーが複数出てしまいビルドできません
そのため一度ビルドをして出力されたものを使っていきます

導入敷居がやや高くハマりどころも多く、少々難易度が高いSDKということもあり情報も少ないです

既に公式のサンプルコードをダウンロードしてコードを見た方もいるかと思いますが
なかなか複雑なため諦めてしまうことも多いと思います

今回はそんな環境構築やら面倒なものはすべて済ませたコードを使ってとりあえず動かすところまでやっていきたいと思います

準備

下記リポジトリをCloneしてください
https://github.com/astie-dog/live2d-for-web-example

SDKを入れるところはすべて済ませてあります
規約は下記URLにありますのでご一読ください
https://www.live2d.com/download/cubism-sdk/download-web/

※ 執筆当時 Cubism 4 SDK for Web R1

動かしてみる

必要なパッケージをダウンロードします

npm install


完了したら

npm start


で開発サーバーを起動します。 localhost:8080 にブラウザでアクセスすると完成サンプルと同じ状態になります

モデルを差し替える

modelフォルダ以下にCubismEditor4で出力したmoc3を含むファイルを配置します
(moc3, model3.json, physics.jsonとテクスチャが必要です)

index.tsのモデルファイルを参照している部分を自分のモデルのものに置き換えます

const MODEL_FILES = {
  moc3: './model/Hiyori/hiyori.moc3',
  model3: './model/Hiyori/hiyori.model3.json',
  physics3: './model/Hiyori/hiyori.physics3.json',
  textures: [
    './model/Hiyori/hiyori.2048/texture_00.png',
    './model/Hiyori/hiyori.2048/texture_01.png'
  ]
}

https://github.com/astie-dog/live2d-for-web-example/blob/main/src/index.ts#L7-L15

この状態で改めてnpm startをするとモデルが差し替わっていると思います

モデルの位置がズレていたり小さいとき

index.tsに以下のように設定が書いてある箇所があります

{
  autoBlink: true,
  x: 0,
  y: 1,
  scale: 1
}

https://github.com/astie-dog/live2d-for-web-example/blob/main/src/index.ts#L31-L35

autoBlink: 自動まばたき
x: 横の位置
y: 縦の位置
scale: 全体の大きさ

これらの設定を変更して最適な位置と大きさに調整してください

完成版の出力

一通り調整ができたら次のコマンドを実行します

npm run build


distフォルダが作成されて中に完成されたhtmlやjsなどが入っています
このフォルダの中身を自身のWebサーバーなどにアップしたら公開できます

公開するときの注意

この実装で作られたものは少し知識のある人であればモデルのデータをダウンロードすることが可能です
ダウンロードされたくない場合は基本的にインターネット上にモデルデータをアップしないようにしましょう!

※ 抜き出せても勝手に使うのは駄目です
※ 抜き出せる人はやらない & やり方を教えないようにしましょう!!

次回

今回は動かせるところまでを駆け足でやりましたので、次回はもう少し実装の中身を説明していきたいと思います

※ いろんなところでコードを参考にして積み上げてきたので、参考にした先がわからなくなってしまいました・・・

この記事の作者
アスティ

ASTIE(アスティ)

バーチャルプログラミング犬

2021年2月生まれ
JavaScriptが得意なシェルティでWeb制作の情報を発信中!

プロフィール