読者です 読者をやめる 読者になる 読者になる

NinaLabo

個人ゲーム開発者の技術メモ

MagicaVoxel の 3Dドット絵を Unity に取り込むまで

Unity デザイン

今開発中のローグライクゲームを、最終的には Crossy Road のような3Dドットにしようという野望がありまして。

クロッシーロード

クロッシーロード

  • HIPSTER WHALE
  • ゲーム
  • 無料

 作り方をいろいろ調べてみたんですが、エンジニアでも簡単に扱えそうな MagicaVoxel というツールを使ってみました。その結果...

慣れない作業に四苦八苦...!!

数時間かけて作った自分の3Dドットを見て、本当に絶望しました... もはや、ツールの問題ではなく、絵心の問題ですね。何回も作り直して、ようやくそこそこ見れるものになった(?)ので、作業の手順をまとめておこうと思います。作業環境は、Mac (OS X Yosemite) です。

1. MagicaVoxel のインストール 

MagicaVoxel のページ(https://voxel.codeplex.com)から、ツールをダウンロード。

f:id:ninagreen:20160123173117p:plain

あとは、ダウンロードしたフォルダ(MagicaVoxel)内の MagicaVoxel_mac.app をクリックするだけで起動できます。(ダウンロードしたフォルダは アプリケーションフォルダなど、任意の場所に移動しておいてください)

ちなみに私の場合、以下のような「開発元が未確認のため開けません。」といったセキュリティ警告が出たので、以下のサイトを参考にさせていただき、右クリックの「開く」から実行することで、起動できました。

Macで「開発元が未確認の為開けません」と言われて開けないアプリを開く方法

nori510.com

2. サンプルモデルを改変して、3Dドットモデルをつくる

起動すると、以下のような画面が立ち上がります。本当はいろんな操作ができると思うのですが、いっぺんにいろんなことを覚えられないので、最低限の操作だけ調べることにします。

f:id:ninagreen:20160123175415p:plain

サンプルモデルを開く

いきなりゼロからモデルを作るのは大変なので、サンプルモデルを改変してオリジナルのモデルを作成することにします。右側のModelを選択するとサンプルモデルが表示されます。今回は、chr_old を選択し、おじいちゃんをベースにモデルを作成することにしました。

f:id:ninagreen:20160123180340p:plain

保存(別ファイルとして保存)

このまま保存(Command+S)してしまうと、サンプルモデルを上書きしてしまうので、別ファイルで保存することにします。メニューの「File」- 「Save As」から、保存するフォルダとファイル名を入力して保存できます。または右上の「Save」の隣にある「As」ボタンからも実行できます。保存を実行すると、拡張子が「.vox」のファイルが作成されます。

開く

MagicaVoxel で編集していたモデルを閉じてしまった場合などに、再度ファイルを開き直すには、メニューの「File」-「Open」で、開きたい voxファイルを指定します。または右下の「Open」ボタンからも遷移できます。(保存したvoxファイルのダブルクリックでは開けませんでした...)

視点移動

マウスホイールでモデル表示の拡大/縮小ができます。また、右クリックを押しながら、ドラッグで視点を移動できるので、モデルをいろんな角度から見ることができます。

モデル変更

ひとまず、以下の7つの操作を利用して、試行錯誤しながらモデルを変更してみました...

f:id:ninagreen:20160123183541p:plain

①サイズ変更:デフォルトのサイズが大きかったので、16 x 16 x 16に変更

②ドット編集:ドット単位で編集するので、「V」を選択

③ドット追加:「Attach」で、モデルの選択した位置にドットを追加できる

④ドット削除:「Erase」で、モデルの選択した位置のドットを削除できる

⑤色変更:  「Paint」で、モデルの選択した位置のドットの色を変更できる

⑥モデル移動:「Move」を選択して、モデルをドラッグするとモデル全体を移動できる

⑦スポイト: 「<」を選択後、モデルの任意のドットを選択すると、選択したドットの色を吸い取り、左のカラーパレット上に反映する。

 

詳しい操作方法は以下の記事が参考になりそうです。 

megumisoft.hatenablog.com

3Dドットのモデルを簡単に作れる高機能エディタ「MagicaVoxel」

getgamenews.net

3. 作成したモデルをエクスポート

最終的には、こんな感じになりました。。

これをUnityに取り込める形式にエクスポートします。右下の「Export」を選択します。

f:id:ninagreen:20160123185458p:plain

Exportからobjを選択して、ファイル名を入力して保存。

f:id:ninagreen:20160123190158p:plain

保存すると、「.mtl」「.obj」「.png」の3ファイルが作成されます。

4. エクスポートしたファイルをUnityに取り込む

f:id:ninagreen:20160123192718p:plain

エクスポートしたファイルのうち、「.obj」ファイルと「.png」ファイルを、UnityのProjectにドラッグ&ドロップします。Unity に取り込まれると Materials フォルダが自動的に作成されます。

f:id:ninagreen:20160123193241p:plain

このうち、hinata.obj を Hierarchy にドラッグ&ドロップして配置します。

このままだとテキスチャが設定されてなくて色がないので、Project のdefaultMat を選択して、テキスチャを設定します。Shader は Mobile -> Bumped Diffuse を選択。さらに、Base(RGB)の右側のTexture欄に、さきほどProjectに取り込んだ hinaga.png をドラッグ&ドロップします。

f:id:ninagreen:20160123193519p:plain

暗いようであれば、Direction Lightを追加して完成です!カメラの設定にもよりますが、私の場合はオブジェクトが少し大きかったので、Scale を0.1に設定しました。

f:id:ninagreen:20160123193744p:plain

Magica Voxel のオブジェクトを Unity に取り込む方法はこの記事が詳しいです。

karaagedigital.hatenablog.jp

あとがき

はじめての MagicaVoxel で苦戦しましたが、それでも1日あればモデルを作成してUnityに取り込むところまで出来るなんて便利ですね。余談ですが、最初 MagicalVoxel(マジカルボクセル)だと思いましたが、よく見たら MagicaVoxel(マジカボクセル)なんですね。いずれにしても、無料でここまでできるのは素晴らしいと思います。次は、モデルにアニメーションをつけてみようと思います。