バンドリ! Live2DをAndroidの壁紙にする

本記事の内容/出来るようになること

・Live2D .moc構成の理解
・Android/PCのホーム壁紙にLive2Dを設定

必要な物

・Android(Live2DViewerEXが動作すればなんでも)/PC(Windows)
・steamアカウント
・498円(一回きり,動作確認だけならタダ)
・所要時間:多めに見積もっても1~2時間

更新履歴

18/12/11
・余分な手順の削除
・手順の簡略化

19/08/18
・共有アイテムの変更(.jsonのみに)

簡単な目次


1.バンドリの鯖からLive2Dのmoc構成一式をダウンロードする
2.Live2DViewer(公式)をPCにインストール/modelファイル作成
3.steamで「Live2DViewerEX」を購入(動作確認だけなら不要)
4.Android版「Live2DViewerEX」をインストール


1.バンドリの鯖からLive2Dファイルを落とす

ここではお菓子作り紗夜を例にして説明します。以下のファイルを用意してみてください。

・sayo_event023_story01_t05.moc
・texture_00(sayo_event023_story01_t05に対応するやつ)
・sayo.physics(sayo_event023_story01_t05に対応するやつ)
・motionファイル(~~~.mtn)

moc/texture/physicsファイルは ここ

motionファイルは ここ

から調達できます。取得したらAsset Studioで開きましょう。各ファイルの説明を簡単にしますと

・moc…Live2Dの基本構成を記録したような物
・texture…構成にばらばらの画像をはめる元
・physics…動きが自然になるように調整する物
・motion…動きのルールをまとめた物

という感じですね。それらを用意できたらsayoってフォルダを作ってその中にこんな感じでまとめてください。画像の中にはexpというフォルダがありますが,今回はexpは用意しなくていいです。

sayo_event023_story01_t05の中(physicsファイルの拡張子をjsonにする)

motionの中

これらのファイル一式のことをmoc構成って言うらしいです。

2.Live2DViewerをPCにインストール/model作成

ここからダウンロードしてください。
早速起動するとmocファイルを放り込んでくれと書いてあるので放り込んでいく。

この画面になったらTexturesってとこにTexture_00を放り込む。その後Texturesを選択するとファイルが読み込まれてるのがわかると思う。useのリストにあるチェックマークをつけて適用ボタンを押します。一回では適用されないこともあるんでテクスチャ番号を名前から推測して指定 等複数回適用を押してみてください。

上手く適用されるとこうなるはずです。この後同じ要領でmotion,physicsファイルを放り込んでいきます。投げ終えたら以下の画像の様に各mtnファイルの設定欄のグループ名にidleを設定してください。

いや,面倒くさいやろ・・・という方はViewerに読み込ませる前のmtnファイルの名前に「idle」という文字列を入れてください。読み込んだ時に自動的にidleというグループに所属するように設定されるそうです。allrename」あたりのフリーのリネームソフトで一括変更してしまえば楽です。

※これを設定しないと一部のmtnのみしか壁紙設定時にしてくれないです。(逆に全部確認してみて,気に食わないのは設定しなくてもいいですね)

ここまで全て設定した後,左上メニューのプロジェクト>書き出し>モデル設定ファイル(サンプル用)を選択してmodelファイルを書きだします。(.jsonとして保存してください)

この時”””必ず”””相対パスにチェックを入れ,sayo_event023_story01_t05の中にmodelファイルを保存してください。平たく言うなら絶対パスで記録するとファイルの位置を移動しただけで大体使えなくなるためです。

{
 "version":"Sample 1.0.0",
 "model":"sayo_event023_story01_t05.moc",
 "textures":[
 "texture_00.png"
],
"motions":{
 "idle":[
   {"file":"../motion/angry01.mtn"},
   {"file":"../motion/angry02.mtn"},
   {"file":"../motion/angry03.mtn"},
   {"file":"../motion/bye01.mtn"},
   {"file":"../motion/cry01.mtn"},
   {"file":"../motion/cry02.mtn"},
   {"file":"../motion/idle01.mtn"},
   {"file":"../motion/idle02.mtn"},
   {"file":"../motion/kime01.mtn"},
   {"file":"../motion/nf01.mtn"},
   {"file":"../motion/nf02.mtn"},
   {"file":"../motion/nf03.mtn"},
   {"file":"../motion/nf04.mtn"},
   {"file":"../motion/nf05.mtn"},
   {"file":"../motion/nf_left01.mtn"},
   {"file":"../motion/nf_right01.mtn"},
   {"file":"../motion/odoodo01.mtn"},
   {"file":"../motion/pui01.mtn"},
   {"file":"../motion/sad01.mtn"},
   {"file":"../motion/serious01.mtn"},
   {"file":"../motion/shame01.mtn"},
   {"file":"../motion/smile01.mtn"},
   {"file":"../motion/smile03.mtn"},
   {"file":"../motion/surprised01.mtn"}
 ]
 },
"physics":"sayo.physics.json"
}

説明した通りなら恐らくこういう記述になっているはずです。(mtnファイルの名前にidleって入れた場合はファイルネームが多少違うくらい) 後はディレクトリ関係を崩さないように,sayoフォルダのままAndoridに渡しましょう。

3.steamで「Live2DViewerEX」を購入

以下のリンクから購入してください。
Live2DViewer

EXと今さっき弄ったやつ何が違うの・・・?って感じですので説明すると EXの方は非公式のビューワーで,こいつは公式と違って壁紙設定機能を持っており,また,ワークショップでいろんな人の作った/×××したLive2Dファイルのダウンロードができる機能なども有しています。

AndoridでLive2Dを壁紙にできるアプリ版EXViewerは,これのライセンスを購入しないと動かないので購入する必要があります。

19/03/27現在,購入しなくても一回?限りで読み込ませることはできるようになりました。動作確認等するために購入前に試してみるといいと思います。

Android版EXをインストール

playstoreでLive2DViewerをインストールしてください。
steam連携すれば使えるようになります。

その後,GoogleDrive等で先ほど作ったsayoフォルダをAndroidに渡した後EXを起動してメニューからモデル1の交換を押して,JSONタブへ移動した後右上の+ボタンを押してJSONファイルを指定して,設定します。

細かい操作はまあわかるやろ・・・これで完了(書くの疲れた)

補足

・modelファイルの簡単な作り方

いや,いちいちLive2DViewerでModelファイル作るの面倒やろ・・・という方へ
実は同一キャラクターならModelファイルの中身のmoc,Physicsファイルを書き換えてしまえばModelファイルをいちいちソフトから作る必要はないです。
記事の通りの構成で新しいmoc構成を作ってみましょう。
ここでは千聖を例としましょう。同じキャラクターの場合,モーションファイルは基本的に同じなため,
.mocファイルと.physicsファイルを書き換えれば問題ないです。(青線部分)
Textureファイルももちろん違うのですが,このファイルの名前はTexture_00
と名前が統一されているため,Live2Dフォルダ毎に保存を分けてやれば書き換えてやる必要はないわけです。

同一キャラクターでない場合も,モーション部分を書き換えてやればいいといえばいいんですけど,それ結構面倒なので僕は新しいキャラを追加するときはViewerで作り,それ以降は↑と同じ要領で作ってますね。ちなみに,モーションは全キャラクターの間で互換があるため,一人のキャラに全キャラのモーションを読み込ませることも可能です。一回その記述をidle設定してしまえば,モーションの書き換えすら不要になります。

・注意点

Live2DViewerEXはファイルを物理的に消す機能もあるんですけど,絶対使わないでください。ファイルだけじゃなくそのファイルが存在してるディレクトリ毎消してきます。普通に不具合です。

19/06/06 追記その1

【密技】讓BGD的角色在你的手機桌面動起來!Live2DViewerEX-Android/Win/Mac  同業者が中国のどういったサイトなのかわからないけど本記事と関係のありそうな記事を書き起こしてくれたみたいです。model.jsonを編集してtap判定を追加するという内容が追加で書かれており、興味が沸いたため少し調べてみました。(時間取れないのでさっとだけど) 一応上記サイトで紹介されているのを簡単にまねしたmodelを作成してみました。

こちらで共有しておきます。(.jsonに合わせて適宜設定してください)

{
  "name": "sample",
  "model": "moc/Live2D.moc",
  "textures": [
    "Texture2D/texture_00.png"
  ],
  "hit_areas": [
    {
      "name": "head",
      "id": "D_PSD.124"
    },
    {
      "name": "hand",
      "id": "D_PSD.72"
    },
    {
      "name": "body",
      "id": "D_PSD.12"
    }
  ],
 "motions": {
    "idle": [
      {
        "name": "idle01",
        "file": "motion/rokka_idle01.mtn",
        "expression": "default",
        "priority": 2,
        "weight": 65
      }
    ],
"tap_body": [
      {
        "name": "nf01",
        "file": "motion/rokka_nf01.mtn",
        "priority": 9,
        "weight": 1
      }
    ],
"tap_head": [
      {
        "name": "nf03",
        "file": "motion/rokka_nf03.mtn",
        "priority": 9,
        "weight": 1
      }
    ],
"tap_hand": [
      {
        "name": "nf04",
        "file": "motion/rokka_nf04.mtn",
        "priority": 9,
        "weight": 1
      }
    ]
  },
 "expressions": [
    {
      "name": "angry01",
      "file": "exp/rokka_angry01.exp.json"
    }
  ],
  "physics": "physics/physics.json",
  "lip_sync": "true"
}

こんな感じです。僕の方ではsoundは削除していますが。(これは六花に応用した物) 基本的な要素は先のサイトで紹介されているため省略。多分皆が気になりそうなのは

"hit_areas": [
    {
      "name": "head",
      "id": "D_PSD.124"
    },
    {
      "name": "hand",
      "id": "D_PSD.72"
    },
    {
      "name": "body",
      "id": "D_PSD.12"
    }
  ]

この箇所かなと思うのでここについて説明したい。IDの部分で見られるこのD_PSDってなんなんだ?という方が多いと思うんだけどこれはパーツの場所を示していて、その場所も一応ビューワーで確認できます。

画像の中にD_PSD.124って書いてあると思うんだけどそれがmodelファイルの中で頭のタップ判定と対応しているところです。つまり、大体モデル情報からパーツの場所を推測してタップ判定を割り当てるってことができるわけです。わけなんですが・・・僕が配布したモデルだとbody/handのPSDがちゃんとモデル情報にあるのに反応してくれない・・・

いろいろbodyのPSD弄ってみましたけど頭だけですねえ・・・反応してくれるの。よくわからん。まあjsonファイルの書き損じもあるのかもだけど,パッと見おかしい箇所はないので困ってる。,が足りないとかじゃないし・・・というわけで詳しい人教えてくださいって感じです。

19/06/06 追記その2

実際に配布されていたような香澄モデルを作ってみるかあと思ったりしたんですけど思った以上に面倒くさい作業が多いな~という感想。自動でなんとかぱさぱさ書いてくれるプログラムとか欲しい・・・欲しくない?あと音源の確保もめんどいなあという。宝石研物語のLive2Dとかなら量少なそうだしゲーム本編に近いようなモデル作ってみたさはあるけどバンドリは大変そうだあ・・・;

バンドリ! Live2DをAndroidの壁紙にする” に対して1件のコメントがあります。

  1. th より:

    こんばんは
    六花の当たり判定はこれで問題なく動作するかと思います↓

    “hit_areas”: [
    {
    “name”: “head”,
    “id”: “D_PSD.124”
    },
    {
    “name”: “handr”,
    “id”: “D_PSD.62”
    },
    {
    “name”: “handl”,
    “id”: “D_PSD.66”
    },
    {
    “name”: “body”,
    “id”: “D_PSD.15”
    }
    ]

    手の当たり判定は左右で別になっています
    handrが右手でhandlが左手です
    どの描画オブジェクトID(D_PSD)がどこの部分なのかは、ひとつずつ手動でチェックしなければいけないので、大量のモデルの設定ファイルを作る場合は苦労しますね…

    1. Maya Yamato より:

      コメントありがとうございます。(返信遅れて申し訳ない)

      >六花の当たり判定はこれで問題なく動作するかと思います↓

      実際に設定したところ,体,左手が反応したのを確認しました。

      ですが,立花の右手判定については反応がなかったです。

      ※おま環だ!とかこちらの不手際が何かありましたら申し訳ないです。。。

      >どの描画オブジェクトID(D_PSD)がどこの部分なのかは、ひとつずつ手動でチェックしなければいけないので、大量のモデルの設定ファイルを作る場合は苦労しますね…

      そうですね~すごく面倒くさそうです。

      ところで,コメント返信できなかった間に少し調べて分かったことなのですが, hitareaを振らないでモーション「tap」グループを作るとどうやら全体を当たり判定として認識するグループができるみたいです。(詳しくは19/06/06 追記その1に貼ってあるDriveの共有フォルダの中の千聖のmodelを参照してください。)

      特定の部位を触ったら特定の行動をする ということはできなくなりますが,この手法を使うと当たり判定を調べることなくモデルを楽に作ることはできそうですね。

      1. th より:

        https://drive.google.com/open?id=18qUPf9dif85hikugc3zMpCbV7HGKyg3h
        編集したjsonをアップしてみました
        こちらのLive2DViewerEX(PCとスマホの両方)で動作確認済です
        参考になれば幸いです

        1. Maya Yamato より:

          スマホ版の方で確認しました。本当にちゃんと動いてる…! ありがとうございます!

        2. Windows より:

          1番目の、サーバーからファイルを落とす方法がわかりません。
          詳しく教えていただけないでしょうか?
          また、@@@ファイルは[ここ]の、リンクをクリックしたときにダウンロードされるファイルの使い道も教えていただけないでしょうか?
          よろしくお願いいたします。

          1. Windows より:

            すみません。
            moc/texture/physics/motionファイルを落とすURLがわかりません。
            どのようにすればバンドリ鯖からダウンロードできますか?

  2. ド素人 より:

    全くのド素人でしたが、この記事を参考にさせて頂きmodel.jsonをイジったりしながら当たり判定付きの壁紙を作ることができました!
    キャラで“body”と“hand”の当たり判定がどの部分か探す作業が苦労しましたけどなんとか完成させることができたのでよかった…
    記事を書いてくださってありがとうございます。

    1. Maya Yamato より:

      ご丁寧にありがとうございます~

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

前の記事

18/11/13 進捗/日記

次の記事

ガンダムAGE-1 フルグランサ