blenderでカードゲーム用の3Dモデルを作成したい！（３日目）

「まる。」です。
突然ですが、皆さんにニガテなものはありますでしょうか？

私の場合、それはイラスト作成や3Dモデル作成といった、
いわゆる「美術系」の作業です。
（パクチーの次に苦手です。）

ですが、個人でゲームを制作するとなると、プログラムだけでなく
デザインやモデルといった様々な素材を自分で用意しなければならない場面が出てきます。

「苦手だから」と避けていては、作りたいものも作れないかもしれない・・・。

そんなわけで、一念発起。
ずっと苦手意識を持っていた「Blender」を使って、
ゲームに登場するカードのひな形（3Dモデル）作成に挑戦してみようと思います！

1.まず、作りたいものの構造を考えてみる

一般的なカードゲームのカードを構成する要素は何かを考えてみます。
超有名なあのカードゲームを見てみましょう。

ざっくり分けると、こんな感じでしょうか。

●これを元にどう作っていくか考えます。

1. カードのイラストについて
   まず、土台となるイラスト部分のオブジェクトを作ります。
   これがカード本体の「厚み」になります。

2. カードのフレームについて
   カードの表面にフレーム部分となる、
   カードイラストより少しだけ薄い（あるいは、くり抜かれた）オブジェクトを重ねて配置する方針で行きます。

3. カードの裏面について
   裏面は、カードイラストのオブジェクトの裏側の面に設定すれば良さそうです。

この構造なら、「①イラスト」「②フレーム」「③裏面」に
それぞれ異なるマテリアル（質感や色、テクスチャ画像）を割り当てることができそうですね。

よし、方針は決まりました。
（苦手だけど）さっそくBlenderを起動します・・・！

2.blender起動！

blenderを開きました。
久しぶりで操作方法を殆ど忘れてます。

苦手な物事を、苦手意識を持ったまま進めるとモチベーションが上がりませんよね。
苦手なものだからこそ、少しでも上手く何より楽しく作業できる「工夫」が必要です。

そこで、大好きなカードの画像を表示させその画像を目印にカードの実寸に合わせて体裁を整えていきます。

さて、最強のモチベーター兼ガイド（エリアたん）が3D空間に降臨しました。
ちなみに、これは後述作業でこのオブジェクトが裏面か表面か判断する
大事な道しるべになってくれます！

いよいよ、設計図（セクション1）で決めた
「①.カードのイラスト（土台となるオブジェクト）」を作る工程です。

3.カードを作っていく

操作方法をまるで思い出せないので、Geminiさんに聞きながら作業を進めていきます。

①.Blenderのシーン設定
このまま作業をしてしまうと、カードの実寸が巨大なものになってしまい
UE5にインポートした時に修正が必要なようです。
なのでそのオブジェクトのサイズの倍率を下げてみます。
（小さすぎたらあとで修正します。）

②.立方体オブジェクト（Card_Base）を作成する。
※とりあえず、ブレンダーを開いたときに最初に作成されている立方体オブジェクトを「Card_Base」という名前で定義してみました。

③.サイズを調整してみる。
画像と合わせて、立方体オブジェクトのサイズ感を調整してみます。
サイズを変更するには
・オブジェクトを選択してTABキー（編集モード）に変更する。
・「S」キーを押した後に「X」、「Y」、「Z」のキーを押して それぞれの座標軸を固定した状態で調整します。

④.角を丸くする。（この辺は好みの問題です。）
ベベルツールというものを使いました。
・参考にさせて頂いたサイトはこちら

具体的なやり方は以下です。

この「Card_Base」オブジェクトがカードのイラストと裏面の部分になります。

⑤.カードフレーム用オブジェクトを作成する。
カードフレーム用に「Card_Base」オブジェクトを複製して、「Card_Frame」オブジェクトを作成しします。
位置はカードイラストの上に来るように微調整します。

完成！！！
あとは、オブジェクト名を「Card_Frame」とします。

⑥.オブジェクトの親子関係を定義する。
仕上げに「Card_Base（土台）」を親にして、
「Card_Frame（枠）」を子に親子関係を定義します。
※これをしないと万が一誤操作でオブジェクトを動かしてしまった時に面倒です。

これで今度こそカード全体のオブジェクトが完成しました！

4.マテリアルを設定する

マテリアルを設定する カードの土台（オブジェクト）が出来たので、
次にそのオブジェクトの各面にどのマテリアルを割り当てるか「スロット」を設定し、
「割り当て」ていきます。
（※この時点では、マテリアルの中身（テクスチャ）はまだ設定しません。あくまでどこに、どんなマテリアルを設定するか「場所」を決める作業です。）

定義するマテリアルは以下の三つです。
・M_Card_Art（カードイラスト用）
・M_Card_Frame （フレーム用）
・M_Card_Back（裏面用）

①.「Card_Base（カードイラスト）」のマテリアルを定義する。
「Card_Base」オブジェクトを選択し、
マテリアルプロパティのマテリアルスロットを以下の様に設定します。

②.「Card_Frame（外側のフレーム部分）」のマテリアルを定義する。
「Card_Frame」オブジェクトを選択し、
マテリアルプロパティにマテリアルスロットを以下の様に設定します。

5.マテリアルを割り当てる

作成したマテリアルスロットにどの面を割り当てるか定義します。

②.「編集モード」の「面選択」モードに切り替えます。

③.「Card_Frame（外側のフレーム部分）」のマテリアルを割り当てる。
※その際に「１」キーを押してどちらが正面かを正しく確認します。
（現時点では、どちらが正面かは分かりづらいので）

④.カードイラスト（Card_Base）にマテリアルを割り当てる。
次に、Card_Baseオブジェクトの表面（イラスト部分）に[M_Card_Art]を同じように割り当てるのですが、
Card_Frameオブジェクトがイラスト部分より上に存在し、
隠れてしまって上手く選択できないので一旦非表示にします。

⑤.カードの裏面（M_Card_Back）にマテリアルを割り当てる。
裏面にカメラを合わせて、
裏面を全選択し「M_Card_Back」を割り当てます。

⑥.最終確認
念のため、それぞれのマテリアルスロットの選択をクリックして、
意図したようにマテリアルが定義されているか確認します。

6.それぞれのオブジェクトを統合させる。（11/16更新)

エクスポート後に気付きましたが、このままエクスポートしてしまうと
Card_BaseオブジェクトとCard_Frameオブジェクトが別々に出力されてしまいます。
なので、それぞれのオブジェクトを結合させます。

①.Card_BaseオブジェクトとCard_Frameオブジェクト選択する。

②.オブジェクトモードから[Ctrl]+[J]を押します。

7.UV展開をしていく（11/16修正）

次に、UV展開をしていきます。
私自身、UV展開をあまり聞きなじみがなかったので少し掘り下げて解説します。

①.Card_BaseのUV展開

念のため、UV編集の画面を確認してみましょう。

②.実際のカードフレームの表示内容と合わせてみる（11/16更新）
UV展開（メッシュの展開図を作ること）をしただけでは、
まだ「展開図のどの部分に、テクスチャのどの絵柄を貼り付けるか」という位置合わせが正しくできていません。

このままでは、テクスチャが意図せず引き伸ばされたり、ズレたりしてしまいます。 （前回はこの大事な「位置合わせ」の工程が抜けていました！すみません！）

そこで、BlenderのUVエディタ上で実際のテクスチャ（カードフレームの画像）を背景に表示させ、その絵柄にピッタリ合うようにUV（展開図）の位置や大きさを調整していきます。

ステップ1.UV編集を開く
まず、Blenderの画面上部にあるタブから「UV編集」をクリックします。
画面が2分割され、左側が「UVエディタ」（展開図をいじる場所）
右側が「3Dビュー」（いつものモデル作業場所）になります。

ステップ2：UVエディタに「お手本」のテクスチャを表示する
UV（展開図）を動かす前に、
お手本となるテクスチャを背景に表示させます。

1. 左側のUVエディタ画面の上部にある「開く」ボタンをクリックします。

2. ファイル選択画面が開くので、位置合わせに使いたいテクスチャ画像を選んで開きます。

3. UVエディタの背景に、その画像が表示されたはずです。

ステップ3：3Dビューで「位置合わせしたい面」を選択する
次に、3Dビュー（右側）で作業します。

1. 「編集モード」（Tabキー）に切り替えます。

2. 「面選択モード」に切り替えます（画面左上のアイコン、または 3キー）。

3. カードモデルの「表面」（M_Card_Art を割り当てた面）をクリックして、選択します。
   （※この時、特定のマテリアルが割り当てられている面だけを選択したい場合は、マテリアルプロパティタブで、そのマテリアル を選択し、「選択」ボタンを押すと便利です）

ステップ4：UV（展開図）を絵柄に合わせる
ここが一番重要です！
3Dビューで面を選択すると、UVエディタ（左側）に、その面に対応するUV（オレンジ色の頂点や辺）が表示されます。
UVエディタ（左側）の画面にマウスカーソルを移動させます。

以下のショートカットキーを使って、UV（展開図）を背景のテクスチャ（絵柄）にピッタリ合うように調整します。

ステップ5：他の面も同様に行う
もし、部分的にマテリアルの表示を変えたい場合は他のマテリアルも同じように調整します。

これで、ちゃんとマテリアルを反映させることが出来る・・・はず。

8.FBX形式でのエクスポート

さて、ここまできたらあとは、UE5用のファイル（.FBX)にエクスポートするだけです！

①. エクスポートするオブジェクトを選択する
まず、UE5に持っていきたいオブジェクトを全て選択します。

【最重要】UE5向けエクスポート設定:
エクスポートの詳細設定画面が画面内に出ていると思いますが、
ここで以下の設定を行うことで自分に必要な情報だけを出力させます。

9.まとめ

本当は、実際にUE5に取り込んでマテリアルを設定してカードを表示するところまで行きたかったですが、
今日はこの辺にします。

明日（というか今日）はUE5に取り込みこのカードモデルを使って、
３Dカードを表示するマテリアルを作成するところまでいけたらいいなと考えてます。

苦手なブレンダーということもあり、時間がかかってしまいましたが以上とします。
もし、後日間違ってる個所が見つかったらまた改めてご報告します。

長くなりましたが、ここまでお読みいただき、ありがとうございました！

#HorizonNotes #UE5 #blender #カードゲーム