Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
6
Help us understand the problem. What is going on with this article?
@kurisaka_konabe

ティラノビルダー用Live2Dモデルを作る方法 Cubism3、Cubism4

More than 1 year has passed since last update.

はじめに

ティラノビルダー公式:
Live2Dを活用したゲーム制作(Cubism3.x 用)
を見れば、Live2Dモデルを表示させる方法はすぐにわかる。
サイト内にセットアップ済みのLive2D組み込み用データも既に用意していただいている。

でも、そのデータ自体の作り方が現時点ではweb上に見当たらず、質問も多いので解説したい。
(2019年012月20日現在、雑にググった感じ…すでにあったらゴメンなさい)

ティラノではどんなLive2Dデータが必要なのか

結論から話すと、

  • モーションデータが最低1個は必須、無いと表示すらできない
  • そのモーションデータをモデル設定ファイルに紐付ける必要がある

対象読者と必要知識、開発環境

想定する読者レベル

  • Live2Dで1体以上何かモデリングしたことがあるひと
  • ティラノビルダーに自作Live2Dモデルを表示させたいひと

usa.png

Live2Dの想定バージョンや環境

  • Live2D Cubism3 (4でも3として書き出せばできる筈たぶん...)
  • ティラノビルダーV184以降
  • Windows 10

組込み用ファイル作成

組込み用ファイルとは?

.cmo3はLive2D Modelerで扱うエディターの為の編集形式である。
データとしては無駄な情報が含まれていてゲームに使う用途としては向いていない。
なので、組込み用の.moc3という形式に変換してやる必要がある。

モーションに関しても.can3のままでは使えないので、組込み用に書き出してやる必要がある。

テクスチャアトラス編集

テクスチャアトラス編集とは?

moc3ファイルの書き出しを選ぶと、
image.png
警告が出ます。
image.png

そのままだと書き出しできないので、テクスチャアトラス編集という作業をしてやる必要がある。
これは画像の情報を1枚(もしくは複数枚)のPNG画像に全てぎゅうぎゅうに詰め込む作業になる。
ファイルサイズが軽くのなるのでこの方がコンピュータにもメモリにもやさしくてゲーム向きである。

アトラスの編集方法

image.png
まず、テクスチャアトラス編集ボタンを押す。
image.png
面倒くさがりのひとは2048×2048の1枚でOKを押す。
個人制作ならほとんどのケースでそれで困らない筈。

ここでは、解説の為に1024×1024のカツカツサイズで説明する。
(スマホゲーム案件とかだとそのくらいであることが多い)

image.png
どれか1つ適当にオブジェクト選択してみよう。
image.png
原画に対する倍率が表示されており、100%を切っている。
1024×1024 1枚では収まり切らなかったので、自動的に縮小して配置されている。このままだと、実際のゲーム画面では表示がモザイク状に荒くなる可能性がある。

試しに小さくしてみる

image.png
40%程度だとあまり劣化がわからないと思う。
なので、試しに前髪オブジェクトだけ極端に小さくしてみる。
赤いバウンディングボックスの角をドラッグするか倍率の欄に直接数値を打って、思い切り小さくしてみよう。
OKボタンを押すと、アトラスの編集内容が確定、キャンセルボタンを押すと編集内容が無かったことになる。
image.png

キャンバス上で「テクスチャアトラス表示」になり、前髪がモザイク状になっていることを確認できる。
(Tキーのショートカットで「テクスチャアトラス表示」←→「モデル用画像表示」を切り替え)
(ファイルメニューからも切り替え可能)
これが実際のゲーム画面の上の表示イメージになる。

スマホ案件などでテクスチャサイズの制約が厳しい場合は、優先順位を付けて目立つオブジェクトほど倍率を上げて、比較的どうでもいい部分は倍率を低めにしておく…などのトリアージが必要になる。
image.png

Cubism3以降のテクスチャアトラス編集のすばらしさ

アトラス編集上で一度小さく配置してしまっても、内部的には.cmo3ファイルが100%のテクスチャ情報(PSDデータ)を保持している。なので、後から幾らでも配置倍率を弄ることができる。小さくしてしまったものを大きく再配置しても画質が劣化しない。神!!

テクスチャアトラス編集まとめ

  • まつ毛、目、口、眉、前髪、横髪、など表情に関するものは目立つので、可能な限り高い倍率を確保
  • 描画順が低く、ユーザーがあまり見ない箇所、実質隠れて見えない箇所などは低めの倍率に
  • 再配置するときには、他のオブジェクトに重ねて踏ん付けないようにする(表示がおかしくなる)
  • ゴマ粒のような鼻の点やまつ毛の細かい部品など小さすぎるオブジェクトは100%の倍率に (見やすく、選択しやすくなるので100%にしておくと作業上便利!踏ん付け防止にも)
  • 作業時間があるなら、可能な限り高い倍率で収まるようにぎっちり敷き詰める(ちょっとしたパズルゲーム)
  • 回転させてもいいが、なるべく90度単位、最悪45度単位で(半端な角度だと劣化するので)
  • できれば、関連するオブジェクトは近づけて綺麗に並べてあるとベスト
  • 最終的な使用目的や原画サイズにも依るが、PSDの原画が縦2千ピクセルくらいあるなら50%もあれば十分

IDの変換

必須ではないが推奨。
「テンプレート適用」でモデリングしたひとは(公式テンプレートモデルが旧IDのままである都合で)旧IDになっている筈。
新IDにしておいた方が公式サンプルのモーションファイルを流用しやすい。

モーションの流用と新旧ID

例えば、
image.png
↑EpsilonのIDは旧形式だが…
image.png
任意箇所のキーフレームをコピーして…
image.png
↑新形式のIDのモデルへ…
image.png
↑キーフレームを貼り付けることができる

  • 旧形式→新形式のキーフレーム貼り付けは何故か可能(自動的に変換されている?)
  • 新形式→旧形式の貼り付けは不可

IDの変換方法

image.png
このような「大文字_大文字」のIDが旧形式のIDです。
image.png

ファイルメニューから「モデルIDの変換」を選択する。
image.png
PARAM_ANGLE_X→ParamaAngleX形式に変換される。

まばたきリップシンクの設定

ティラノ上では台詞に合わせてリップシンクができる。

image.png
ついでにまばたきの設定もやっておこう(物理設定画面等で自動でまばたきしてくれるようになる)。
image.png

組み込み用ファイル書き出し

IDを新形式に変換したら(しなくてもいいが)、
image.png
ファイルメニューから「組込み用ファイル書き出し」→「moc3ファイル書き出し」
image.png
設定項目はデフォルトのままで恐らく問題ない。
image.png
半角英数のキャラ名フォルダを作り、そのフォルダの中にフォルダと同名で.moc3ファイルを保存する。

image.png
(例では「nekochan」フォルダ内に「nekochan.moc3」という名前で保存。

  • nekochan.1024(テクスチャサイズによって名前が変わる)
  • nekochan.moc3
  • nekochan.model3.json
  • nekochan.physic3.json

が生成される。
nekochan.1024の中にはテクスチャアトラス編集で敷き詰めたPNG画像が入っている。

Animatorで組込み用モーションファイルの書き出し

image.png

シーン名

タグ名が実質的なモーション名になる。
シーン名は書き出したときに、そのままファイル名になるので、半角英数で設定すること。
公式のhiyoriちゃんに倣うなら
「半角キャラ名_m01」
のような命名になる。
「m01」とかじゃなくsmileのようなわかりやすい名前でもいいが、エディタ上でシーンの並び替えができず、名前順になっている。
image.png
書き出します。

image.png

image.png
「motions」というフォルダを作ってその中に保存する。
image.png

Viewerでモデル設定ファイルの設定

モデル設定ファイルを開く

image.png
半角キャラ名.model3.jsonファイルをドラッグ&ドロップ(以下D&D)して開きます。

motionsフォルダ

nekochanフォルダ内に「motions」という名前のフォルダがあり、
ここにアニメータから出力したモーションファイルが入った状態にしておく。
入れておいた状態でViewerにフォルダごとD&Dする。

image.png
Viewer内にmotionsフォルダができます。+ボタンを展開することができます。
image.png

注意!

Viewerは、D&D時点でのファイルの相対パス(位置関係)を覚えている。
よくある典型的なミスとして、

  • デスクトップに適当に作ったフォルダ内にモーションを出力→
  • D&DでViewerに放り込む→
  • その後になって半角キャラ名のフォルダ内にmotionsフォルダを移動する

…っとやってしまと、D&D&時点でのファイルパスと違ってしまって読み込まれなくなってしまいまう。

モーションのグループ名

各モーションにグループ名を付ける。
このグループ名がティラノビルダー上での実質的なモーション名になる。
image.png

アイドリングモーションに設定したいモーションには「Idle」と設定する。
image.png
他のモーションも設定していく。
自分でわかりやすい名前にしよう。
(頭文字は大文字が推奨)

モデル設定ファルの保存

設定し終わったら、
image.png
モデル設定ファイルを上書する。

念のため、モーション設定ファイルをビューワに再度D&Dしてみよう。
image.png
motionsフォルダやグループ名の設定が残っていたら正しく設定できている。
これでティラノビルダーにインポート可能なデータができた。

余談 モデル設定ファイルって何?

json形式というのは、Live2D特有のものではなく、プログラムの世界では一般的なファイル形式である。適当なテキストエディタで中を見ることできる。
大雑把に説明すると、.moc3ファイルやテクスチャファイル、物理設定ファイルが何処のフォルダにあって、なんて名前のファイルなのか?…等の各種設定が記述されている。

「モーションファイルが何処にあるのか? の記述が無かったので、ビューワ上でモーションファイルの設定をして紐付け、保存しました」…っというのが一連の作業の意味である。もちろん、直接テキストエディタで編集することも可能である。

半角キャラ名.motoins3.json(モデル設定ファイル)

{
    "Version": 3,
    "FileReferences": {
        "Moc": "nekochan.moc3",
        "Textures": [
            "nekochan.1024/texture_00.png"
        ],
        "Physics": "nekochan.physics3.json",
        "DisplayInfo": "nekochan.cdi3.json",
        "Motions": {
            "Idle": [
                {
                    "File": "motions/nekochan_m01.motion3.json"
                }
            ],
            <以降省略>
}

その他、注意事項

Animatorのモーション

これはティラノ用モデルに限ったことではないが、

  • Animatorの「配置トラック」による移動や拡大は無視される

っということに注意が必要である。
もし、左右に移動したりこちらに近付いたり遠のいたりするモーションを作りたい場合は、配置トラックによる座標、拡大率ではなく、専用のパラメータを作ってモーションを作る必要がある。

ティラノ上での拡大表示

内部的に拡大に耐えうるテクスチャ解像度が十分にあったとしてもシャギってしまう(恐らく、100%の大きさに表示したものをそのまま拡大処理している)。
モデルを小さく作りすぎた場合は、Cubism Editor上で「ファイル」→「モデルのリサイズ」しで大きくして書き出し直した方がよい。

更新履歴

2019/12/19

  • 存在を思い出して、続きを記述、修正

2019/09/20

  • 取り敢えず投稿…していたのを長い間放置
6
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
kurisaka_konabe
うさぎを飼ったり、Live2D SDKでゲームを作ったり

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
6
Help us understand the problem. What is going on with this article?