blenderでカードゲーム用の3Dモデルを作成したい！（３日目）
「まる。」です。
突然ですが、皆さんにニガテなものはありますでしょうか？
私の場合、それはイラスト作成や3Dモデル作成といった、
いわゆる「美術系」の作業です。
（パクチーの次に苦手です。）
ですが、個人でゲームを制作するとなると、プログラムだけでなく
デザインやモデルといった様々な素材を自分で用意しなければならない場面が出てきます。
「苦手だから」と避けていては、作りたいものも作れないかもしれない・・・。
そんなわけで、一念発起。
ずっと苦手意識を持っていた「Blender」を使って、
ゲームに登場するカードのひな形（3Dモデル）作成に挑戦してみようと思います！
1.まず、作りたいものの構造を考えてみる
一般的なカードゲームのカードを構成する要素は何かを考えてみます。
超有名なあのカードゲームを見てみましょう。
ざっくり分けると、こんな感じでしょうか。
①.カードのイラスト（カッコいいモンスターや美しい背景が描かれる部分）
②.カードのフレーム（それが何の種類のカードか分類するための外枠）
③.カードの裏面（おそらく全カード共通のデザイン）
●これを元にどう作っていくか考えます。
カードのイラストについて
まず、土台となるイラスト部分のオブジェクトを作ります。
これがカード本体の「厚み」になります。カードのフレームについて
カードの表面にフレーム部分となる、
カードイラストより少しだけ薄い（あるいは、くり抜かれた）オブジェクトを重ねて配置する方針で行きます。カードの裏面について
裏面は、カードイラストのオブジェクトの裏側の面に設定すれば良さそうです。
この構造なら、「①イラスト」「②フレーム」「③裏面」に
それぞれ異なるマテリアル（質感や色、テクスチャ画像）を割り当てることができそうですね。
よし、方針は決まりました。
（苦手だけど）さっそくBlenderを起動します・・・！
2.blender起動！
blenderを開きました。
久しぶりで操作方法を殆ど忘れてます。
苦手な物事を、苦手意識を持ったまま進めるとモチベーションが上がりませんよね。
苦手なものだからこそ、少しでも上手く何より楽しく作業できる「工夫」が必要です。
そこで、大好きなカードの画像を表示させその画像を目印にカードの実寸に合わせて体裁を整えていきます。
さて、最強のモチベーター兼ガイド（エリアたん）が3D空間に降臨しました。
ちなみに、これは後述作業でこのオブジェクトが裏面か表面か判断する
大事な道しるべになってくれます！
いよいよ、設計図（セクション1）で決めた
「①.カードのイラスト（土台となるオブジェクト）」を作る工程です。
3.カードを作っていく
操作方法をまるで思い出せないので、Geminiさんに聞きながら作業を進めていきます。
①.Blenderのシーン設定
このまま作業をしてしまうと、カードの実寸が巨大なものになってしまい
UE5にインポートした時に修正が必要なようです。
なのでそのオブジェクトのサイズの倍率を下げてみます。
（小さすぎたらあとで修正します。）
②.立方体オブジェクト（Card_Base）を作成する。
※とりあえず、ブレンダーを開いたときに最初に作成されている立方体オブジェクトを「Card_Base」という名前で定義してみました。
③.サイズを調整してみる。
画像と合わせて、立方体オブジェクトのサイズ感を調整してみます。
サイズを変更するには
・オブジェクトを選択してTABキー（編集モード）に変更する。
・「S」キーを押した後に「X」、「Y」、「Z」のキーを押して それぞれの座標軸を固定した状態で調整します。
④.角を丸くする。（この辺は好みの問題です。）
ベベルツールというものを使いました。
・参考にさせて頂いたサイトはこちら
具体的なやり方は以下です。
1.オブジェクトを選択する
2.「Tabキー」を押して「エディットモード」に切り替える
3.丸めたいエッジや頂点を選択
4.「Ctrl+B」を押す
5.マウスでカーソルを動かして調整
この「Card_Base」オブジェクトがカードのイラストと裏面の部分になります。
⑤.カードフレーム用オブジェクトを作成する。
カードフレーム用に「Card_Base」オブジェクトを複製して、「Card_Frame」オブジェクトを作成しします。
位置はカードイラストの上に来るように微調整します。
[Shift]+[D]キーで複製！
そのあと、すぐに[Esc]キーを押して逃げます。
※マウスはコピー後のオブジェクトを掴んだままなので
Y軸を移動させてイラスト用のオブジェクトの上に来るように位置を調整し・・・
完成！！！
あとは、オブジェクト名を「Card_Frame」とします。
補足:
さて、これでカードの外側のフレーム（Card_Frame）ができました。
でも、これではカードのフレームが邪魔になり、
その下のイラストが見えません。
普通はここでフレームの形に『くり抜く』作業を想像しますが、
今回は『テクスチャ側』ですでにカードイラストの画像部分を透過しているのでそのままにします。
中央の白い部分が透過されており、カードのイラストがそこに収まるようになってます。
（Rとか右上のアイコンは別で作成します。）
⑥.オブジェクトの親子関係を定義する。
仕上げに「Card_Base（土台）」を親にして、
「Card_Frame（枠）」を子に親子関係を定義します。
※これをしないと万が一誤操作でオブジェクトを動かしてしまった時に面倒です。
[Shift]キーを押したまま「子（Card_Frame）」をクリックして・・・
これで今度こそカード全体のオブジェクトが完成しました！
これで、仮に間違ってオブジェクトを動かしても子のオブジェクトが追従するようになりました。
4.マテリアルを設定する
マテリアルを設定する カードの土台（オブジェクト）が出来たので、
次にそのオブジェクトの各面にどのマテリアルを割り当てるか「スロット」を設定し、
「割り当て」ていきます。
（※この時点では、マテリアルの中身（テクスチャ）はまだ設定しません。あくまでどこに、どんなマテリアルを設定するか「場所」を決める作業です。）
定義するマテリアルは以下の三つです。
・M_Card_Art（カードイラスト用）
・M_Card_Frame （フレーム用）
・M_Card_Back（裏面用）
そもそも「マテリアル」って何？
BlenderやUE5を触っていると、「マテリアル」という言葉が何度も出てきます。 これ、一体何なのでしょうか？
すごく簡単に言うと、マテリアルとは「そのモノが、何でできているか？」を決める「質感や材質の設定データ」のことです。
①.「Card_Base（カードイラスト）」のマテリアルを定義する。
「Card_Base」オブジェクトを選択し、
マテリアルプロパティのマテリアルスロットを以下の様に設定します。
②.「Card_Frame（外側のフレーム部分）」のマテリアルを定義する。
「Card_Frame」オブジェクトを選択し、
マテリアルプロパティにマテリアルスロットを以下の様に設定します。
5.マテリアルを割り当てる
作成したマテリアルスロットにどの面を割り当てるか定義します。
②.「編集モード」の「面選択」モードに切り替えます。
[3]キー：「面（フェイス）」選択に切り替え可能
③.「Card_Frame（外側のフレーム部分）」のマテリアルを割り当てる。
※その際に「１」キーを押してどちらが正面かを正しく確認します。
（現時点では、どちらが正面かは分かりづらいので）
マテリアルの設定から「M_Card_Frame」をクリックして割り当てボタンを押す。
（これで、Card_Frameオブジェクトの表面は「M_Card_Frame」でマテリアルを定義できるはず。）
④.カードイラスト（Card_Base）にマテリアルを割り当てる。
次に、Card_Baseオブジェクトの表面（イラスト部分）に[M_Card_Art]を同じように割り当てるのですが、
Card_Frameオブジェクトがイラスト部分より上に存在し、
隠れてしまって上手く選択できないので一旦非表示にします。
⑤.カードの裏面（M_Card_Back）にマテリアルを割り当てる。
裏面にカメラを合わせて、
裏面を全選択し「M_Card_Back」を割り当てます。
ちなみに、オブジェクトの正面にいるはずのエリアたんが居ないので、
この面はオブジェクトの裏面であることが分かります。
すごいぞ！エリアたん！
⑥.最終確認
念のため、それぞれのマテリアルスロットの選択をクリックして、
意図したようにマテリアルが定義されているか確認します。
「選択」ボタンを押す。
カードが全面選択されていればOK！
※「Card_Frame」オブジェクトの非表示は解除してね
Card_Base選択し、「M_Card_Art」をクリックしてから
「選択」ボタンを押す。
カードが全面選択されてるのでOK！
「選択」ボタンを押す。
カードが全面選択されてるのでOK！
6.それぞれのオブジェクトを統合させる。（11/16更新)
エクスポート後に気付きましたが、このままエクスポートしてしまうと
Card_BaseオブジェクトとCard_Frameオブジェクトが別々に出力されてしまいます。
なので、それぞれのオブジェクトを結合させます。
①.Card_BaseオブジェクトとCard_Frameオブジェクト選択する。
②.オブジェクトモードから[Ctrl]+[J]を押します。
7.UV展開をしていく（11/16修正）
次に、UV展開をしていきます。
私自身、UV展開をあまり聞きなじみがなかったので少し掘り下げて解説します。
「UV展開」って何？
超ざっくり言うと2Dの画像（平面のテクスチャ）を
「どうやって貼り付けるか？」を決める「設計図（展開図）」を作る作業です。
例えば、６面ダイスがありますよね？
あれは、正方形の中にそれぞれの数を表す数字が書かれていたりします。
ただ、正方形の中のどの面を１にしてどの面を６にするのか
それを誰かが決めてあげないと、サイコロって成り立たないですよね？
UV展開では、そういった３Dのサイコロを一度
「ハサミで切り開いて平らな面にする」。
それを再度組み立てれば立派な３Dのサイコロを作れる。そんな仕組みです。
（間違ってたらすみません。）
それを組み立てることで３Dの６面ダイスが出来上がります。
①.Card_BaseのUV展開
編集モードにした上で全部の面（Aキー）を選択して・・・[1]キーで正面を向く。※超重要！！
念のため、UV編集の画面を確認してみましょう。
（ただ、今回はあんま変わらんから変化が分からないよね・・・）
②.実際のカードフレームの表示内容と合わせてみる（11/16更新）
UV展開（メッシュの展開図を作ること）をしただけでは、
まだ「展開図のどの部分に、テクスチャのどの絵柄を貼り付けるか」という位置合わせが正しくできていません。
このままでは、テクスチャが意図せず引き伸ばされたり、ズレたりしてしまいます。 （前回はこの大事な「位置合わせ」の工程が抜けていました！すみません！）
そこで、BlenderのUVエディタ上で実際のテクスチャ（カードフレームの画像）を背景に表示させ、その絵柄にピッタリ合うようにUV（展開図）の位置や大きさを調整していきます。
ステップ1.UV編集を開く
まず、Blenderの画面上部にあるタブから「UV編集」をクリックします。
画面が2分割され、左側が「UVエディタ」（展開図をいじる場所）
右側が「3Dビュー」（いつものモデル作業場所）になります。
ステップ2：UVエディタに「お手本」のテクスチャを表示する
UV（展開図）を動かす前に、
お手本となるテクスチャを背景に表示させます。
左側のUVエディタ画面の上部にある「開く」ボタンをクリックします。
ファイル選択画面が開くので、位置合わせに使いたいテクスチャ画像を選んで開きます。
UVエディタの背景に、その画像が表示されたはずです。
ステップ3：3Dビューで「位置合わせしたい面」を選択する
次に、3Dビュー（右側）で作業します。
「編集モード」（Tabキー）に切り替えます。
「面選択モード」に切り替えます（画面左上のアイコン、または 3キー）。
カードモデルの「表面」（M_Card_Art を割り当てた面）をクリックして、選択します。
（※この時、特定のマテリアルが割り当てられている面だけを選択したい場合は、マテリアルプロパティタブで、そのマテリアル を選択し、「選択」ボタンを押すと便利です）
ステップ4：UV（展開図）を絵柄に合わせる
ここが一番重要です！
3Dビューで面を選択すると、UVエディタ（左側）に、その面に対応するUV（オレンジ色の頂点や辺）が表示されます。
UVエディタ（左側）の画面にマウスカーソルを移動させます。
以下のショートカットキーを使って、UV（展開図）を背景のテクスチャ（絵柄）にピッタリ合うように調整します。
G キー：移動 (UVをドラッグして動かす)
S キー：拡大・縮小 (UVを大きくしたり小さくしたりする)
R キー：回転 (UVを回す)
上手く表示されない場合はマテリアルを設定する際に微調整します。
ステップ5：他の面も同様に行う
もし、部分的にマテリアルの表示を変えたい場合は他のマテリアルも同じように調整します。
これで、ちゃんとマテリアルを反映させることが出来る・・・はず。
8.FBX形式でのエクスポート
さて、ここまできたらあとは、UE5用のファイル（.FBX)にエクスポートするだけです！
①. エクスポートするオブジェクトを選択する
まず、UE5に持っていきたいオブジェクトを全て選択します。
【最重要】UE5向けエクスポート設定:
エクスポートの詳細設定画面が画面内に出ていると思いますが、
ここで以下の設定を行うことで自分に必要な情報だけを出力させます。
●設定内容
・アクティブなコレクション ⇒チェックを外す（元々チェックついてない可能性あり）
・選択したオブジェクト⇒チェック入れる
※標準で供えられているライトなどの余計なオブジェクトをエクスポートさせないためです。
⇩トランスフォーム
・スケール:単位の倍率を設定していなければ任意の値を入れてください。※3.①参照
・適用:「トランスフォームを適用」にチェック。※Geminiさん的には入れて欲しいみたいなので今回入れてみます。
⇩ジオメトリ
・「スムージング」の項目を 「法線のみ」 から「面」に変更。
カードのようなカクカクしたモデル（ハードサーフェス）の見た目を正しく保つため・・・だそうです。
うろ覚えですが、依然これを変更しなくて謎の警告が出ていた気がしたので変更してみます。
9.まとめ
本当は、実際にUE5に取り込んでマテリアルを設定してカードを表示するところまで行きたかったですが、
今日はこの辺にします。
明日（というか今日）はUE5に取り込みこのカードモデルを使って、
３Dカードを表示するマテリアルを作成するところまでいけたらいいなと考えてます。
苦手なブレンダーということもあり、時間がかかってしまいましたが以上とします。
もし、後日間違ってる個所が見つかったらまた改めてご報告します。
長くなりましたが、ここまでお読みいただき、ありがとうございました！
いいなと思ったら応援しよう！
よろしければ応援お願いします！
いただいたチップはクリエイターとしてのゲーム開発に使わせていただきます！