MagicaVoxel to Smile game builder

• MagicaVoxelでキャラを作ろう
• Blenderにインポートしよう
• Blenderでアニメーション確認
• ボーンをインポートしよう
• テクスチャの設定をしよう
• FBXでエクスポートしよう

MagicaVoxelでキャラを作ろう

MagicaVoxelのダウンロード

まずMagicaVoxelのサイトからソフトをダウンロードしましょう
zip版だとインストール不要ですぐに使えます。

ソフトを起動したら
さっそくキャラを作ってみましょう。



右のリストからサンプルを選ぶことができます。
chr‗knightとかchar_swordとかをもとに
キャラを作っていくとやりやすいかな、と思います。

ポチポチドットを置いていくだけなので
直観的に作れると思いますが、操作方法などは下記のサイトを見てみてください

【MagicaVoxel】お絵描き初心者でも簡単な３Dドット絵 - 使い方 -


Attachでボクセルを置く
Eraseでボクセルを消す
Paintでボクセルの色を変える
Alt押しながらボクセルクリックでスポイト

くらいを覚えておけばOKかな？

モデルを分割しよう

スマイルゲームビルダーに使うときに
ボーンの設定をしやすいように
モデルを「頭」「体」「手足」にわけてエクスポートします。

今回はデフォルトで入っているソードマンを使って試してみましょう。

まず「AS」ボタンで別名をつけて保存します。
普通にセーブしてしまうと上書きしてしまうので注意です。


ボーンの設定をするために、手を水平にした状態にします。
武器はあとで追加できるので、外します。


このモデルができたら、いったんセーブして
ふたたび「AS」ボタンでコピーを３つ作ります。



コピーできたら、消しゴムツール（Erase）を使って頭だけにします。
「sword‗head」などわかりやすい名前にしておきましょう。

同じように、「体」「手足」も作ります。


消しゴムで消すときに、モデルの場所を動かさないようにしましょう。
手足は体の中にめりこむぐらいで作るほうがいいかな？
このへんはお好みですが、1マスめりこませてます。（手４マス・足４マスで作ってる）




できたら画面右下の「Export」をクリックし「ply」ファイルを選びます。
「頭」「体」「手足」の３つともエクスポートしましょう。

Blenderにインポートしよう

Blenderのダウンロード

Blenderのサイトからダウンロードして解凍しましょう。
zip版でインストールせずに使うことができます。

スマイルゲームビルダーのモデルをダウンロード

スマイルゲームビルダーの各素材のデータ仕様のページから
キャラクターのサンプルデータをダウンロードしましょう。

ページの一番下に
「素材制作時の技術情報　3Dキャラクターサンプルデータ」というリンクがあります。

ダウンロードしたら解凍して
「Blender」フォルダの「c_001a_sample.blend」を開きましょう。
このファイルを編集していくので、「別名で保存」しておきましょう。



c_001a_sample.blendを開くと、シオン君のモデルが現れます。

MagicaVoxelのデータをインポート

さきほど作ったボクセルのデータをインポートしましょう。

画面左上の「ファイル」メニューから
「インポート」「PLYファイル」を選びます。

ファイルは複数選べるので「頭」「体」「手足」の３つのPLYファイルを
インポートしましょう。


インポートするとこうなります。
めっちゃでかいです。

サイズを小さくしましょう。

Sキーでサイズを変えることができます。
Sキーを押すとサイズ変更のカーソルにかわるので
マウスで調整してもいいですし、キー入力で変えることもできます。

MagicaVoxelにデフォルトで入っているナイトやソードマンは
0.09くらいがちょうどいい感じです。

少しぐらいの大小の違いは、ボーンに影響ないっぽいので
マウスでテキトーにやっても大丈夫です。

Blenderでアニメーション確認

VertexGroupの設定

さて、フツーならここでウェイトペイントでボーンとの関連付けをするのですが
このシオン君はどうやら「VertexGroup」というのを使って
ボーンと関連づいているようです。
なので、ソードマンも同じように「VertexGroup」を使って設定してみましょう。

頭からやっていきます。

まず、頭のオブジェクトを選択して編集モードに
（右上のリストからメッシュを選択すると勝手にエディットモードになる）

VertexGroupの右側にある「＋」ボタンをクリックすると
あたらしいVertexGroupが作成されます。
VertexGroupの名前はダブルクリックで変えることができます。
名前はボーンの関連付けに使われるので、かならずシオン君に準拠すること

今は頭を選択しているので、VertexGroupの名前は「head」にします。

名前をつけたら「Assign」ボタンを押して
選択されているメッシュとVertexGroupを関連付けます。

ちゃんと関連付けできているか不安なときは
「Assign」の右側にある「Select」「Deselect」ボタンを押すと
そのグループが選択・非選択と切り替わるので確認できます。


同じように、体・手足もグループを作っていきましょう。

手足は同じオブジェクト内にメッシュが４つあるので
それぞれに
左手「Larm」右手「Rarm」左足「Lleg」右足「Rleg」という風に
名前を付けて関連付けしていきます。

体は「body」という名前で関連付けします。

メッシュの選択は「Cキー」を押して
マウスでドラッグすると選択しやすいです。
ワイヤーフレームにしておくと、反対面も選択してくれます。


あ、忘れてましたが三角化もしておきましょう！


メッシュを選択して「Ctrl＋T」で三角化できます。
頭・体・手足 すべて三角化しておきましょう。

オブジェクトを結合する

頭・体・手足を一つのオブジェクトに統合しましょう。


まずは右上のリストから、統合したいオブジェクトを
「Shift」キーを押しながらクリックしていきます。


オブジェクトを選んだ状態で「Ctrl+J」を押すと統合されます。
（統合されない時はオブジェクトモードになっているか確認）

アーマチュアの設定

統合できたらいよいよ、アニメーションの確認をしましょう。

ボーンとモデルを関連付けるには
「アーマチュア」というモノを使います。
スパナのアイコンから
「AddModifies」をクリックして「アーマチュア」を選びます

フツーはここでボーンを作るのですが
すでにシオン君のボーンがあるのでこれを使います。

アーマチュアの設定で「root」を選びます。
これでシオン君のボーンが動くと、このモデルも動きます。

はじめは「リセットポジション（手が水平の状態）」になっているので
「ポーズポジション」に変えましょう。

画面の下に、アニメーションのタイムラインウィンドウが現れますので
再生ボタンを押してみましょう。

ちゃんとシオン君と同じようにアニメーションすれば成功です！

アニメーションしないときは…
VertexGroupの設定がうまくいってないのかもしれません

ボーンをインポートしよう

さぁ、ここまでできたらもうエクスポートしてもよさそうですよね。
ただこのサンプルにはアニメーションが途中までしか入っていないので
戦闘のアニメーションなどは自分で作らなければなりません。

逆に言うと、アニメーション作れる人は
好きなアニメーションを設定することができます。
（モーション設定ファイル.defでフレーム数などを設定すればOK）

私はアニメーション作れないので
スマイルゲームビルダーにある既存のモーションを使いたいと思います。

スマイルゲームビルダーのボーンをインポートする

スマイルゲームビルダーのモーションを使うには
スマイルゲームビルダーからシオン君のデータをエクスポートします。

「A_Hero01A」フォルダ内にある「motion」ファイルをそのまま使いまわししましょう。

Blenderとスマイルゲームビルダーでは
座標系が違うので、普通にBlenderのボーンをつかうと
モーションのときにモデルがバギョっとなってしまいます。

こんなかんじに…

なので、スマイルゲームビルダーの座標系に合わせたボーンが必要になります。


「ファイル」の「インポート」から「FBXファイル」を選びます。

スマイルゲームビルダーからエクスポートしたシオン君のデータ
「A_Hero01A」フォルダ内にある
「c_001a.fbx」というファイルをBlenderにインポートしましょう



インポートしたデータは、スケールが0.01で保存されているので
とっても小さいです。


インポートしたFBXのアーマチュアは
c_001a001に入っていますが、これをc_001aに入れましょう

parentの項目で親を変えることができます。

ここでいらないメッシュやオブジェクトを削除しておきましょう。

１：今まで使っていた「mdl」という名前のメッシュ
２：「c_001a.001」というカラのオブジェクト
３：「root.001」の中にある「body」という名前のメッシュ

これらはもう使いませんので削除します。
アイテムフックは後で使うのでけしません。



つぎにボクセルキャラのペアレントもかえましょう。
インポートしたFBXのアーマチュア「root.001」を親にします。

すると、キャラの向きが変わってしまいましたね。


ボクセルの向きを-90にしましょう。
（c_001aではなく、キャラのメッシュの向き）


インポートしたほうのボーンにアーマチュアの関連付けをしましょう。
root.001に関連付けします。

これでボーンの設定は終わりです。

Blenderで見るとボーンがバギョってなってますが
スマイルゲームビルダーの座標系のまま保存しないとうまく表示されないので
これはこのままおいておきます

テクスチャの設定をしよう

頂点カラーの焼きこみ

ボクセルデータには頂点カラーで色がついていますので
これをテクスチャにしましょう。


まずはボクセルキャラのメッシュを選択します。
エディットモードで
「RemoveDoubles」で重複する頂点を削除します。

つぎに「U」キーを押して、UVmappingのメニューのなかから
「SmartUVProject」をクリックします。


ウィンドウが出てきたら「OK」を押します。



つぎに画面上のスクリーンレイアウトを変える部分で
「UVEditing」を選びます。

UVエディット画面が開くので、こんどは画面下の
「New」というボタンをクリックしましょう。




名前をつけるウィンドウが出るので
キャラの名前などわかりやすい名前をつけて「OK」を押します。



キャラの展開図ができました。


展開図ができたら、画面をデフォルトにもどして
「カメラのアイコン」をクリック

したのほうに「Bake」という項目があるので
その中にある「Bakemode」を「Vertex Colors」にしてから
「Bake」ボタンをクリックします。



UVエディット画面を開くと、テクスチャが焼きこみされていることがわかります。
画面下の「Image」メニューから「Save as image」で
テクスチャを保存しておきましょう。


テクスチャができたら、デフォルトの画面にもどって
マテリアルの設定をします。

マテリアルのアイコンをクリックして「New」ボタンをクリック


あたらしいマテリアルが追加されました。


つぎに「テクスチャ」のアイコンから
「Image」の「Open」ボタンをクリックして
さきほど保存したテクスチャを選びましょう。

これでテクスチャの設定は終わりです。

アイテムフックの設定

ボーンをインポートしたときに、一緒に「Itemhook」というオブジェクトが
ついてきましたね。

これはアイテムを手に持つときに、どこに持たせるかを決めるオブジェクトなのですが
Blenderにインポートしてしまうと親子設定が解除されてしまうようですので
もういちど設定してあげましょう。



「Litemhook」は「Lhand」のボーンに
「Ritemhook」は「Rhand」のボーンに関連付けましょう。

2頭身キャラはarmまでしかないのでarmにつけそうになるのですが
handにつけないと表示がバギョるので注意です。

FBXでエクスポートしよう

設定をまちがえないように

各素材のデータ仕様のページからダウンロードしたサンプルデータ
「SGB_3Dsamples_chr_20170725.zip」の中に

「３Dキャラクターサンプルデータ.pdf」というPDFファイルがあります。
ここにBlenderでエクスポートする際の詳しい設定がのっているので
その設定にしたがってエクスポートします。

これをまちがうと、うまくスマイルゲームビルダーで使えないので注意です。



まずは「ファイル」の「エクスポート」から「FBX」を選びます。



画面の左下でエクスポートの設定ができます。
メイン・ジオメトリ・アーマチュア・アニメーション
すべての項目を、PDFに書かれている設定と同じにしましょう。

ここで書き出したFBXファイルと、
スマイルゲームビルダーからエクスポートしたモーションフォルダ
テクスチャファイル
を同じフォルダに入れて、スマイルゲームビルダーにインポートすればOKです。

さいごに

武器や防具なども同じように
スマイルゲームビルダーからエクスポートしたFBXにモデルを上書きすれば
ゲーム内で好きなモデルを使うことができます。

スマイルゲームビルダーの素材を作っている人ってあまり見たことないので
たくさんキャラを作って素材にすれば、みんな使ってくれるんじゃないかな？と思います。
ボクセルはドット絵に近いので、ドット絵師さん期待してます！

ボクセルで作ったおうちとかもいいなーと思っているので
また色々試してみようと思います。


参考サイト：
MagicaVoxelの3DモデルをBlenderに持っていく
MagicaVoxelで作ったデータの頂点数を減らす