Slide 1

Slide 1 text

Magica Voxel のススメ 発表者 wanwanwan & denim Game Jam Takahashi 2022

Slide 2

Slide 2 text

ワークフロー 始めに なぜMagicaVoxelなのか? PART1 MagicaVoxelでモデリング PART2 Blenderでリギング・スキニング PART3 Unityへエクスポート 1

Slide 3

Slide 3 text

2 Magica Voxel 操作画面

Slide 4

Slide 4 text

なぜMagicaVoxelなのか? 操作が簡単 頂点移動やポリゴン分割など細かい操作を要求しない。 モデリングとテクスチャ作成が同時に可能  →ドット絵の3D ver. ブロックの積み重ねで簡単に3Dモデルが作れる   非デザイナー、ツール初心者でもイメージを形にしやすい。 ブロックの色を決めれば形作りと着色を並行して進められる  →時間の限られるゲームジャムではとても効果的 3

Slide 5

Slide 5 text

シンプルだが、多彩な表現に対応 ボクセル(Volume+Pixel)特有の表現。  デフォルメ、愛嬌のあるモデル等 Unityと相性が良い インポート手順を把握しておけば、色々なシーンで組み込み可能  →様々な企画、仕様に合わせやすい。   画づくりのしやすさ。 4 →キャラだけでなく、マップや小物からUI、アイコンなど  様々な素材を作って気軽に配置が可能。

Slide 6

Slide 6 text

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でプレイ可能です。時間のある時にでも遊んでみてください。

Slide 7

Slide 7 text

PART1 MagicaVoxelでモデリング →先に基本的な形状を作ってから、ディテールへ入る方が進めやすくなります。 (例、簡単な人間の形を作成 → 服や顔などへ着手) 〇モデルづくりのポイント Tips モデル制作は大から小へと進めましょう 簡単な素体 例.) Webで配布 されている素体  → daishi blog 元にすることで 勉強にも 素体を予め 用意して いれば、 更に時短! 6

Slide 8

Slide 8 text

・初期パレットは使いづらい Tips カラーパレットを作り変えよう →色選択のしやすいパレットに作り変えることで    モデリングがよりスムーズになります。   また、初めての頃はパレットの色数を絞った方が    より作りやすくなります。 初期パレット 変更後(でにむ作) ➡  加えて、使用中のパレットは別モデルに変えたり、 別のパレットを選択してしまうと 無くなってしまいます。  お気に入りのパレットを作ったら、  “Save Palette” で保存し、いつでも使えるようにしておきましょう。 Save Palette パネル 7

Slide 9

Slide 9 text

・ミラーリング化(対称モデリング化) Tips ミラーリングを活用しよう →Brushパネルの下部に“Mirror”パネルがあります。   オンにすることで、Xで左右、Yで手前と奥で対称モデリング  ができます。   完成時は左右非対称なモデルでも、途中までミラーリングを  活用して進めることで、より短時間でモデルづくりが可能になります。 Mirror パネル Tips 完成モデルのパーツを切り離しておこう ・モデルが完成したら、パーツを切り離します。(頭、腕、脚、etc…) ➡ →予め切り離しておくことで、   このあとウエイトをつけた際の  調整が簡単、かつ、関節を曲げたときの  不自然な凹みを回避することが出来ます。 完成モデル ナイトちゃん 8

Slide 10

Slide 10 text

〇パーツを切り離しておくことの利点 →関節のねじれや、他の部位に引っ張られてしまうのを、  パーツ分けしたことで綺麗に補完することが出来ます。 離さずウエイトを つけた場合 離してウエイトを つけた場合 モデルをエクスポートしよう →obj形式でエクスポートします。  このままUnityにインポートし、ボーンを入れずにモデルをアニメーション させる方法もあります。  ここでは、ボーンを追加し、可動できるモデルづくりを目指すため、  リグ、スキニング操作も可能なBlenderを使っていきます。 Exportパネル 9

Slide 11

Slide 11 text

PART2 Blenderでリギング・スキニング →エクスポートしたobjファイルをBlenderでインポートします  MagicaVoxelで.objはテクスチャ(.png)とマテリアル(.mtl)を 同時にエクスポートしています。  一緒のフォルダに入れて、.objをインポートすれば Blenderではそのままテクスチャが表示されます。 〇ボーン~ウエイト設定まで .obj .png .mtl を同じフォルダに ・objのインポート (Blender 2.93.9使用) ・分割パーツの位置を揃え直す →インポートしたら、まずバラバラのパーツの位置を合わせ直しましょう。   ボーンを入れたときのことを考慮し、  腕の向きを変えておくのも有効です。 位置合わせ後 10

Slide 12

Slide 12 text

→複雑なアクション、可動を想定していなければ、  ボーンは簡易的に各パーツに一つのボーン  でも動作は出来、その後の操作もしやすくなります。 Tips ボーンを入れたら名称変更を忘れずしておきましょう。   正しく入れておくことで、後の選択操作がとてもしやすくなります   入力した名前はUnityにも反映されるので、  第三者が見ても分かる名前(Head、Shoulder_L、Arm_R ……)  にしておくと良いでしょう(※全て半角英数字のみ) シンプルなボーン構造 ・ボーンを追加する →ただ、ゲームの仕様や指定された動きによっては、  ヒジやヒザ、腰(くびれ)、手指などに  ボーンを組まなければ表現できない動きもあります。  周りと相談しながら、ゲームジャムの限られた時間で  対応可能なボーン構造にしていくと良いでしょう。 ボーン構造と名称 11

Slide 13

Slide 13 text

→モデルとボーンを連携させましょう。   モデルを選択>ボーンを追加選択    >Ctrl+P>“自動のウエイトで”   これで自動的にスキニング   (モデルとボーンを連携させる作業)が行われます。 →この時点で、ウエイト(ボーンの動きに対して  モデルがどれだけ追従するか)は自動で調整されています。   が、上手く自動調整されていないことが多々あります。   大半の場合は、手動でウエイト調整が必須作業になります。 ・ウエイトを設定する Tips 前述でパーツ分けをしていたため、  曲げる箇所(ウエイト値の分配が必要な箇所)がなくなり、  それぞれのボーンに対応した頂点にウエイト値を『1』のみに  全振りすることが可能です。時短化。 自動のウエイトで ウエイトに1を割振り →ウエイトを整えられたらモデル完成! 12

Slide 14

Slide 14 text

PART3 Unityへエクスポート →モデルをエクスポートしましょう。   エクスポート>.fbx形式を選択>保存パネルで   ・オブジェクトタイプ、”ランプ”と”カメラ”のチェックを外す   ・スケールを適用、”すべてFBX”、”-Zが前方”、”Yが上”   ・”リーフボーンを追加”のチェックを外す ・Blenderでエクスポートする →エクスポートした.fbxとテクスチャデータ  (MagicaVoxelの.png)を  一つのフォルダにまとめたら完了です。 13 エクスポート設定 →ここからUnityに移り、Assetsにモデルフォルダを追加して、   シーン内で正しく表示されるか確認してみましょう。

Slide 15

Slide 15 text

〇 MagicaVoxelモデルの影がおかしい場合 Tips メッシュレンダラーの設定を変更しよう 14 (Unity 2021. 3.9f1 使用) Voxelモデルインポート時の不自然な影 →VoxelモデルをUnityにインポートした場合、  メッシュの隙間から光が抜けてしまい、  影が乱れてしまうことがあります。  が、以下の簡単な操作で修正可能です。 →モデルを選択して、Mesh Renderer  (ボーンを含むモデルの場合はSkinned Mesh Renderer)内の、  >ライティング、投影(Cast Shadows)を両面(Two sidede)  にしましょう。 Mesh Renderer > Cast Shadows 変更後

Slide 16

Slide 16 text

Tips ライトのシャドウ設定を変更しよう 15 →さらに影の修正を望む場合は  Unity上のリアルタイムライト(ここではDirectional Light)  を選択し、ライト設定>リアルタイムシャドウ  >バイアス、法線バイアス  の値を調整してみましょう。  ※ただし、バイアスを小さくしすぎてしまうと、  モアレ(縞模様)が発生してしまうので注意してください。 Light > Realtime Shadows > Bias 影のモアレ化 正しい調整後 〇ここまでモデルが出来ればOKです。より自分なりの調整、制作方法を見つけてみてください。

Slide 17

Slide 17 text

 お疲れさまでした!  この発表が少しでも皆さんの  開発の参考になったなら幸いです  ご清聴ありがとうございました