目次

私がゲーム開発アプリを試してみて、キャラクターを動かすまでにハマった箇所などをまとめます。

はじめに

現在のゲーム開発の主流はiOS/Androidへの対応です。したがって、これらのアプリ用にビルドできる開発エンジンを選択することが重要だと思います。

ここで、UnityUE4(Unreal Engine 4)はiOS/Android互換に対応しています。また、互換性においてはHTML5が有望です。

例えば、ノベルゲーム開発エンジンであるTyrano Builderというものがあり、HTML5にビルドできます。したがって、ブラウザで動かすこともできます。また、iOS/Androidにも対応できます。

この記事では、主に入門としてUnity, UE4, Tyrano Builderを使って簡単なゲームを作ってみるまでの手順を紹介します。また、ゲーム制作に役立つ他の補助ツールも紹介します。

方針について

当記事の方針の一つは、著者が後々利用しやすいように作っていく方針です。

一部、表現等に正確ではないものも含まれると思いますが、この記事では正確さよりも分かりやすさを重視します。もし正確な情報が欲しければ、公式ドキュメントなど参照してください。

なお、内容が充実してきたら別ページにも保存するかもしれません。

著者のレベル

著者はゲーム開発については全くの初心者です。一緒に勉強していきましょう。

Unity

Unityとは

Unityとは無料ゲームエンジンとして最も有名な開発アプリです。Linuxにも対応しており、コミュニティも活発です。

UnityでMMDモデルを使ってダンスモーションをセットする

モデル : Api Miku Costume Arrangement A

モーション : Heart Beats モーションデータ

プラグイン :

MikuMikuDance for Unity

MMD4Mecanim

基本的な手順としては、ダウンロードしたMMDモデルをMMD4Mecanimを使ってUnityで読み込みます。どちらも解凍したディレクトリをUnityプロジェクトのルートにでも置けばよいです。プラグインの場合は、ディレクトリ内にUnityの実行ファイルが置かれていると思いますので、それを開くと、プラグインをインポートできるようになってると思います。

モデルは、モデルディレクトリ内にある.mmd4mecanim.assetを開くと変換できると思います。

次に、変換したモデルをSceneにドラッグアンドドロップします。

ここで、初音ミクの3DモデルがUnityで表示できました。

VMDモーションをUnityで読み込むには、MikuMikuDanceを使う必要があります。MMD4Mecanimと同じように、プラグインをインポートして、先ほどモデルを変換する前に使った.mmd4mecanim.assetをもう一度開き、表示されたVMDの項目のところに、モーションデータである.vmdを指定します。(最新バージョンではHumanoidにした上でモーションを指定していると、モーションが動かない問題があります。モーションを.vmdで付けたい場合は、RigをHumanoidから外してください)

後は実行すると、モデル内にApi Miku Costume Arrangement A ponytail.fbx > heartbeats_miku.vmdというものができていますが、これがモーションになります。

モーションをコントロールするには、Creat > Animation Controllerを使います。これをモデルのinspector > Animation > Controllerに指定します。そして、このコントローラーに先ほどのモーションを紐付ければよいです。

なお、モデルのAnimation TypeはHumanoidにしておきましょう。でないと動きません。

まあ、そんな感じで、後はステージと曲を用意して、それを組み合わせると、一般的な初音ミク動画の完成です。

追記 :

モデル及びモーションを設定するまでの流れを再確認します。

  • MMD4Mecanimをインストール後にモデルである.pmxがあるファイル群(フォルダ)をUnityにコピーします。これはUnityのプロジェクトルート、ディレクトリにコピーするという意味です。

  • .pmxを開くとプラグインに問題がない限り変換できるようになっています。Unityのバージョンによって動作は異なります。ここでモーションフォイルである.vmdを指定できます。変換する際は、RigをHumanoidから外しておいてください。モーションが有効になりません。

  • 次に、Animation Controllerを新しく作成して、それを変換後のモデル.fbxのアニメーションに指定します。指定したAnimation Controllerファイルを開いてアニメーション動作を編集します。新しいステート(New State)を作成後に、作成したステートのモーション欄に.vmdに指定したモーションが表示されると思うので、それを選択します。

  • 最後に、.fbxをメイン画面に持っていけば、再生ボタンで動きます。

UE4

UE4とは

UE4とは、Unreal Engine 4の略で、有料アプリでしたが、現在は無料で誰でも使うことができます。

コミュニティは上級者が多いですが、Unityよりは緩やかな印象です。また、そのためかライブラリも若干少ない印象を受けます。

UE4を使ってMMDモデルを表示する

このようなゲームエンジンは、MMDモデルを直接読み込めるわけではありません。モデルを読み込むには、プラグインを使ったり、変換したりする必要があります。

プラグインを使ったMMDの読み込み

まず、プラグインを使った方法を紹介します。しかし、バイナリがWindowsのものしか配布されておらず、ソースも公開されていないため、Macでは使えませんでした。

なぜソースが公開されていないかというと、処理中にUE4本体のコードを含むらしいからとのこと。

https://github.com/bm9/IM4U

$ git clone https://github.com/bm9/IM4U
$ cd IM4U
$ git checkout 4.11.X
$ cp -rf Plugins ~/Documents/Unreal\ Projects/MyProject/

この場合、マテリアルに適切なテクスチャが設定されるため煩わしさは軽減されると思われます。使ってないので分かりませんが。

PMXからFBXに変換してMMDを読み込む

プラグインを使わない場合はこちらの方法になります。

MMD4Mecanimというものがあります。これを使って変換を行います。

モデルは、Appearance Mikuを使います。pmx2fbx.exeがあるところで変換したい.pmxを置いて実行します。実行は、cmd上で行います。Windowsです。

> pmx2fbx.exe Appearance_Miku.pmx

変換が終わると、Appearance_Miku.fbxができますが、これをUE4にインポートします。

普通にファイルをドラッグアンドドロップすればいけます。

その前に展開先のフォルダを作っておくと便利です。

マテリアルが上手く設定されない問題

インポートしてもそのままではマテリアルに色がついていません。

したがって、私の場合、手動で各マテリアル(1肌, 2髪など)にテクスチャを設定しました。この作業は非常に面倒でした。必要な情報は、変換した際にできた.xmlを見ます。

まず、モデルを解凍したディレクトリにあるテクスチャ(PNGファイルなど)をUE4にインポートします。

そして、各マテリアルをダブルクリックで開き、エディタが起動すると思いますが、そこで先ほどインポートしたテクスチャ(PNG画像ファイル)をドラッグアンドドロップし、ベースカラーへのリンクを貼ります。

これで、モデルがある程度はちゃんと表示されると思います。

ちなみに、マテリアルを変更した際、ビルドには多少時間がかかりますので、その間、マテリアルが反映されないことがあります。気長に待ちましょう。

キャラクターにモーションを付ける

プロジェクトを作成する画面で階段とかがあるマップ選択すると、サンプルキャラクターとモーションがついてきます。今回はそれを利用してモデルに動きをつけます。

まず、サンプルキャラのスケルトン、Mannequin/Character/Mesh/UE4_Mannequin_Skeletonを編集します。

そこでリターゲットマネージャーを起動し、リグを選択にてHumanoidを指定します。すると、自動で各ボーンが割り当てられます。最後にポーズを保存します。

次に、Mikuのスケルトンを編集します。先ほどと同じようにリターゲットマネージャーを起動し、リグを選択にてHumanoidを指定します。そして、各ボーンを手動で割り当てます。これが非常に面倒です。

部位 ue4標準ボーン MMD標準ボーン
head
neck_01
肩(左) clavicle_l 左肩
肩(右) clavicle_r 右肩
上腕(左) upperarm_l 左腕
上腕(右) upperarm_r 右腕
前腕(左) lowerarm_l 左ひじ
前腕(右) lowerarm_r 右ひじ
手首(左) hand_l 左手首
手首(右) hand_r 右手首
背中1 spline_01 下半身
背中2 spline_02 上半身1
背中3 spline_03 上半身2
pelvis
大腿(左) thigh_l 左足
大腿(右) thigh_r 右足
下腿(左) calf_l 左ひざ
下腿(右) calf_r 右ひざ
足首(左) foot_l 左足首
足首(右) foot_r 右足首
親指(左1) thumb_01_l 左親指0
親指(左2) thumb_02_l 左親指1
親指(左3) thumb_03_l 左親指2
親指(右1) thumb_01_r 右親指0
親指(右2) thumb_02_r 右親指1
親指(右3) thumb_03_r 右親指2
人差し指(左1) index_01_l 左人差1
人差し指(左2) index_02_l 左人差2
人差し指(左3) index_03_l 左人差3
人差し指(右1) index_01_r 右人差1
人差し指(右2) index_02_r 右人差2
人差し指(右3) index_03_r 右人差3
中指(左1) middle_01_l 左中指1
中指(左2) middle_02_l 左中指2
中指(左3) middle_03_l 左中指3
中指(右1) middle_01_r 右中指1
中指(右2) middle_02_r 右中指2
中指(右3) middle_03_r 右中指3
薬指(左1) ring_01_l 左薬指1
薬指(左2) ring_02_l 左薬指2
薬指(左3) ring_03_l 左薬指3
薬指(右1) ring_01_r 右薬指1
薬指(右2) ring_02_r 右薬指2
薬指(右3) ring_03_r 右薬指3
小指(左1) pinky_01_l 左小指1
小指(左2) pinky_02_l 左小指2
小指(左3) pinky_03_l 左小指3
小指(右1) pinky_01_r 右小指1
小指(右2) pinky_02_r 右小指2
小指(右3) pinky_03_r 右小指3

これでアニメーションを動かせるようになったと思います。もし試したいならMannequin/Animationsにて好きなアニメーションを選択し、右クリックにてAnimアセットをリターゲットするを選択します。ここでMikuモデルを選択すれば再生されると思います。

再生すると分かりますが、の曲がり具合がサンプルモデルとMMDモデルでは異なっているため調整が必要です。しかし、今回は省略します。調整したい方は、サンプルモデルの各ボーンをできるだけまっすぐにすると良いでしょう。

最後に、初音ミクモデルを自由にコントロールする方法です。

これは、ThirdPersonBP/Blueprints/ThirdPersonCharacterMeshを初音ミクのものにし、かつAnimationのClassをThirdPerson_AnimeBP...に指定することで設定できます。

あとは、プレイするとキーボードで初音ミクを操作できます。

ボーンの指定や調整などが非常に面倒でした。Unityの場合、この辺りはプラグインでほぼ全部やってくれたような記憶があります。

Tyrano Builder

Tyrano Builderとは

Tyrano Builderとは、日本人が開発しているノベルゲーム開発エンジンです。非常に簡単にゲームを制作できるのが特徴です。これもノベルゲームの性質上、ある程度は予想できることです。過去有名だったノベルゲームエンジンに触発されているということです。

Live2D

まず、Live2Dで初音ミクのモデルを作成し、それをUnityで動かしてみました。動き方は、マウスやタッチの感度、時間経過などを元に、動作を設定するプログラムを書きます。デフォルトでも基本的な設定はなされているようです。サンプルモデルなので。

これは、10分ほどで作成できます。なぜなら、Live2Dのマニュアル、初期説明が充実しているからです。個人的にはこのマニュアルは素晴らしい出来だと思います。基本説明ではあるものの、それが応用可能な説明になっているからです。

SpriteStudio

SpriteStudioは、2D画像をアニメーションするためのアプリで、UnityやUE4とも連携でき、そのためのプラグインがいくつか用意されています。

https://github.com/SpriteStudio

補助ツールなども豊富で、分かりやすく説明されているためすぐに使えました。

http://www.webtech.co.jp/help/ja/spritestudio/download/fordesigner/

GIMPからPSDを作成し、それをSpriteStudioで読み込む

以下のツールを使います。これにより.psdから.ssce(ssae,sspj)ができます。

(正確には、.psdからレイヤーごとの.pngが作られ、その構成を記した.txtから.ssceなどが作成されます)

https://github.com/SpriteStudio/PSDtoSS/wiki

SpriteStudioで.ssceを読み込む

先ほど作成した.ssceを開きます。当該アプリと拡張子が関連付けされていると思います。

しかし、Mac(Free版)ではアプリを開いた後に再度読み込まないと、できたりできなかったりでした。

また、当該環境下では、GIMPプラグインであるGIMPWin_PSDtoSS_PNGExport.pyで作成し、PSDtoSS for Macで作成した.ssceは「セルマップ画像とパーツ毎のX,Y座標、縦横サイズを含む.SSCEファイルとパーツのレイアウト情報」を正確には含んでいませんでした。したがって、「セルマップの登録とパーツの配置まで自動で行」われませんでしたので、手動で配置しました。

アニメーションの振り付け

自動(私の場合は手動)でパーツの配置を完了した後は、アニメーションをつけていきます。

ヒント : 手の重心を下のほうに変更すれば、もう少しスムーズに手をふることが出来ます!

Live2DとSpriteStudio

まず、SpriteStudioはLive2Dより遥かに使いやすい印象でした。ただし、Live2Dは完全無料版があるのに対し、SpriteStudioは基本有料です。

しかし、Live2D(Free)は制限がきつくて実際はあまり使いものにならないような気がします。

次に、Live2Dが使えない理由は他にもあります。

具体的には、QuickTimeJavaに依存しているからです。Windowsの場合もMacの場合も、これは最悪です

Macの場合はJava SE6をインストールしなければいけません。Windowsは脆弱なQuickTimeが必要になるため使いたくありません。

さらに、Live2DはViewerなどにAdobe Airが必要だったりと、技術者が使うにはとても抵抗があるアプリです。

なので、2Dを作るならSpriteStudioのほうが良いと私は思いました。これは、使いやすさや依存関係などを見て総合的に判断しています。

まず、こちらにサンプルが用意されていると思います。それを読み込んで動作を確認してみても良いし、イチから作ってみても良いです。

私の場合、イラストから作成し、アニメーションを付けてみました。

使い方は、画像ファイルを読み込んで、一つ一つのパーツに時間軸のアニメーションを付けていきます。この際、プラグインを使っても構いません。

アニメーションの付け方ですが、パーツをダブルクリックすると重心を設定できます。重心は基本的に胸や腰の方向に向けて設定すると良いでしょう。

また、アニメーションを付ける際には、ツールバーの下記にマーク(的?のマーク)されたものを使うと設定しやすいです。

UnityでMMDモデル及びモーションを動かす際にハマったこと

  • Macで異なるディスク上にUnityをインストールして、更にそのディスクがMacのフォーマットでない場合、例えば、exFATなどの場合は、読み込み時にエラーが出る場合があったりするので、一旦、ファイルをMacのSSDにコピーしてそれを読み込むようにしたらいけた。

  • pmxからfbxへのモデル変換の際にモーションを選択できるのだけど、ここで選択しておくと、モーションが作成され、それはアニメーションのモーションで選択できるようになっているので、アニメーションコントローラーを作成し、新しいステート(New State)を作成した上でそこのmotionとして選択すると読み込んだモーションが動作する。通常は右からリスト選択する。自分の場合、RigがHumanoidならそれを外すことでモーションが現れるので選択できるようになる。

blender+pmx+unity

MMDのpmxはBlenderで変換してから読み込むことができます。

まずは、Blender本体をインスール。その後起動して終了することで設定フォルダが作成される。

https://blender.jp/

設定フォルダは以下のようになっている。ディレクトリ構造例も載せる。ディレクトリはFile > Save Startup file…で作成される。

Windows :~/AppData/Roaming/Blender Foundation/Blender/$version/scripts/addons

Mac : ~/Library/Application Support/Blender/$version/scripts/addons

# ~/Library/Application Support/Blender/$version/scripts/addons/mmd_tools/__init__.py
Linux : ~/.config/blender/$version/scripts/addons

次に、File > User Preferences...(Cmd+,)でアドオンを選択し、検索からチェックを入れる。項目がなければ一旦更新する。

次に、File > Importからpmxを読み込めるようになってるので読み込む。

ファイルをエクスポートして、それをUnityで読み込む。