GameJamTakahashi 2022 事前勉強会 Magica Voxelのススメ

ゲームジャム高梁 2022
https://gjtakahashi.okayamaunity.com/
事前勉強会 資料
Magica Voxelのススメ

スライド内URL
陰陽子 (GGJ2022)
https://unityroom.com/games/ggj2022_onmyousi

Blade or Bread ～剣かパンか～ (GGJ2022)
https://unityroom.com/games/blade_or_bread_ggj22

Transcript

1. Magica Voxel のススメ 発表者 wanwanwan & denim Game Jam Takahashi 2022
2. ワークフロー 始めに なぜMagicaVoxelなのか？ PART１　MagicaVoxelでモデリング PART２　Blenderでリギング・スキニング PART３　Unityへエクスポート 1
3. 2 Magica Voxel 操作画面
4. なぜMagicaVoxelなのか？ 操作が簡単 頂点移動やポリゴン分割など細かい操作を要求しない。 モデリングとテクスチャ作成が同時に可能 　→ドット絵の3D ver. ブロックの積み重ねで簡単に3Dモデルが作れる 　　非デザイナー、ツール初心者でもイメージを形にしやすい。 ブロックの色を決めれば形作りと着色を並行して進められる 　→時間の限られるゲームジャムではとても効果的 3
5. シンプルだが、多彩な表現に対応 ボクセル(Volume+Pixel)特有の表現。 　デフォルメ、愛嬌のあるモデル等 Unityと相性が良い インポート手順を把握しておけば、色々なシーンで組み込み可能 　→様々な企画、仕様に合わせやすい。 　　画づくりのしやすさ。 4 →キャラだけでなく、マップや小物からUI、アイコンなど 　様々な素材を作って気軽に配置が可能。
6. 5 MagicaVoxel × Unity制作ゲーム →ゲームジャムに合わせた比較的短時間で出来る、Unityへの 　モデルインポートまでの流れをTipsを交えながら解説します。 陰陽子 (GGJ2022) https://unityroom.com/games/ggj2022_onmyousi Blade or Bread ～剣かパンか～ (GGJ2022) https://unityroom.com/games/blade_or_bread_ggj22 どちらもUnityroomでプレイ可能です。時間のある時にでも遊んでみてください。
7. PART１ MagicaVoxelでモデリング →先に基本的な形状を作ってから、ディテールへ入る方が進めやすくなります。 （例、簡単な人間の形を作成　→　服や顔などへ着手） 〇モデルづくりのポイント Tips モデル制作は大から小へと進めましょう 簡単な素体 例.) Webで配布 されている素体 　→ daishi blog 元にすることで 勉強にも 素体を予め 用意して いれば、 更に時短！ 6
8. ・初期パレットは使いづらい Tips カラーパレットを作り変えよう →色選択のしやすいパレットに作り変えることで 　　　モデリングがよりスムーズになります。 　　また、初めての頃はパレットの色数を絞った方が 　　　より作りやすくなります。 初期パレット 変更後（でにむ作） ➡ 　加えて、使用中のパレットは別モデルに変えたり、 別のパレットを選択してしまうと 無くなってしまいます。 　お気に入りのパレットを作ったら、 　“Save Palette” で保存し、いつでも使えるようにしておきましょう。 Save Palette パネル 7
9. ・ミラーリング化（対称モデリング化） Tips ミラーリングを活用しよう →Brushパネルの下部に“Mirror”パネルがあります。 　　オンにすることで、Xで左右、Yで手前と奥で対称モデリング 　ができます。 　　完成時は左右非対称なモデルでも、途中までミラーリングを 　活用して進めることで、より短時間でモデルづくりが可能になります。 Mirror パネル Tips 完成モデルのパーツを切り離しておこう ・モデルが完成したら、パーツを切り離します。(頭、腕、脚、etc…) ➡ →予め切り離しておくことで、 　　このあとウエイトをつけた際の 　調整が簡単、かつ、関節を曲げたときの 　不自然な凹みを回避することが出来ます。 完成モデル ナイトちゃん 8
10. 〇パーツを切り離しておくことの利点 →関節のねじれや、他の部位に引っ張られてしまうのを、 　パーツ分けしたことで綺麗に補完することが出来ます。 離さずウエイトを つけた場合 離してウエイトを つけた場合 モデルをエクスポートしよう →obj形式でエクスポートします。 　このままUnityにインポートし、ボーンを入れずにモデルをアニメーション させる方法もあります。 　ここでは、ボーンを追加し、可動できるモデルづくりを目指すため、 　リグ、スキニング操作も可能なBlenderを使っていきます。 Exportパネル 9
11. PART２ Blenderでリギング・スキニング →エクスポートしたobjファイルをBlenderでインポートします 　MagicaVoxelで.objはテクスチャ(.png)とマテリアル(.mtl)を 同時にエクスポートしています。 　一緒のフォルダに入れて、.objをインポートすれば Blenderではそのままテクスチャが表示されます。 〇ボーン～ウエイト設定まで .obj .png .mtl を同じフォルダに ・objのインポート （Blender 2.93.9使用） ・分割パーツの位置を揃え直す →インポートしたら、まずバラバラのパーツの位置を合わせ直しましょう。 　　ボーンを入れたときのことを考慮し、 　腕の向きを変えておくのも有効です。 位置合わせ後 10
12. →複雑なアクション、可動を想定していなければ、 　ボーンは簡易的に各パーツに一つのボーン 　でも動作は出来、その後の操作もしやすくなります。 Tips　ボーンを入れたら名称変更を忘れずしておきましょう。 　　正しく入れておくことで、後の選択操作がとてもしやすくなります 　　入力した名前はUnityにも反映されるので、 　第三者が見ても分かる名前(Head、Shoulder_L、Arm_R ……) 　にしておくと良いでしょう(※全て半角英数字のみ) シンプルなボーン構造 ・ボーンを追加する →ただ、ゲームの仕様や指定された動きによっては、 　ヒジやヒザ、腰（くびれ）、手指などに 　ボーンを組まなければ表現できない動きもあります。 　周りと相談しながら、ゲームジャムの限られた時間で 　対応可能なボーン構造にしていくと良いでしょう。 ボーン構造と名称 11
13. →モデルとボーンを連携させましょう。 　　モデルを選択＞ボーンを追加選択 　　　＞Ctrl+P＞“自動のウエイトで” 　　これで自動的にスキニング 　　(モデルとボーンを連携させる作業)が行われます。 →この時点で、ウエイト(ボーンの動きに対して 　モデルがどれだけ追従するか)は自動で調整されています。 　　が、上手く自動調整されていないことが多々あります。 　　大半の場合は、手動でウエイト調整が必須作業になります。 ・ウエイトを設定する Tips　前述でパーツ分けをしていたため、 　曲げる箇所（ウエイト値の分配が必要な箇所）がなくなり、 　それぞれのボーンに対応した頂点にウエイト値を『1』のみに 　全振りすることが可能です。時短化。 自動のウエイトで ウエイトに1を割振り →ウエイトを整えられたらモデル完成！ 12
14. PART３ Unityへエクスポート →モデルをエクスポートしましょう。 　　エクスポート＞.fbx形式を選択＞保存パネルで 　　・オブジェクトタイプ、”ランプ”と”カメラ”のチェックを外す 　　・スケールを適用、”すべてFBX”、”-Zが前方”、”Yが上” 　　・”リーフボーンを追加”のチェックを外す ・Blenderでエクスポートする →エクスポートした.fbxとテクスチャデータ 　（MagicaVoxelの.png）を 　一つのフォルダにまとめたら完了です。 13 エクスポート設定 →ここからUnityに移り、Assetsにモデルフォルダを追加して、 　 シーン内で正しく表示されるか確認してみましょう。
15. 〇 MagicaVoxelモデルの影がおかしい場合 Tips メッシュレンダラーの設定を変更しよう 14 （Unity 2021. 3.9f1 使用） Voxelモデルインポート時の不自然な影 →VoxelモデルをUnityにインポートした場合、 　メッシュの隙間から光が抜けてしまい、 　影が乱れてしまうことがあります。 　が、以下の簡単な操作で修正可能です。 →モデルを選択して、Mesh Renderer 　(ボーンを含むモデルの場合はSkinned Mesh Renderer)内の、 　＞ライティング、投影(Cast Shadows)を両面(Two sidede)　 にしましょう。 Mesh Renderer > Cast Shadows 変更後
16. Tips ライトのシャドウ設定を変更しよう 15 →さらに影の修正を望む場合は 　Unity上のリアルタイムライト(ここではDirectional Light)　 を選択し、ライト設定＞リアルタイムシャドウ 　＞バイアス、法線バイアス 　の値を調整してみましょう。 　※ただし、バイアスを小さくしすぎてしまうと、 　モアレ(縞模様)が発生してしまうので注意してください。 Light > Realtime Shadows > Bias 影のモアレ化 正しい調整後 〇ここまでモデルが出来ればOKです。より自分なりの調整、制作方法を見つけてみてください。
17. 　お疲れさまでした！ 　この発表が少しでも皆さんの 　開発の参考になったなら幸いです 　ご清聴ありがとうございました