初心者向けアセット制作チュートリアル②UV展開編

さて、前回のチュートリアルでは看板のモデリングを行いました。 ここからは、UV展開とよばれる操作とテクスチャペイントによって、モデルにテクスチャを適用する作業を行います。

ところで、Blenderの作業状態は.blenderファイルとして保存されます。 Blender上部の「ファイル」より「名前を付けて保存」でシーンを保存し、以降CTRL+Sで保存する習慣をつけておきましょう。

UV展開とは、モデル内の頂点座標とテクスチャの座標を紐づけることで、モデルにテクスチャを紐づけることです。

例えば正方形において、「右上頂点は画像内の右上と紐づく」と定義し、「右下頂点は画像内の右下と紐づく」と定義…を4回繰り返すと、正方形のモデルに対し正方形のテクスチャが適用されるわけです。

上記の画像はとあるアセットのUV展開図です。これも上記の延長線で、「左上の頂点は画像の左上と紐づく」「右上の頂点は画像の上中ほどと紐づく」などを定義することで看板を作っています。

このような定義作業を1つ1つ手で行うのは大変なので、3Dソフトでは様々な手法でUVを定義すること(UV展開)を簡単にしています。

UV展開を行うため、Blenderの画面をUV展開モードにしましょう。画面上部「Default」の左のボタンをクリックし、「UV Editing」に変更しましょう。

画面が二分割されたら、各面をすべて選択します。面を選択するには、右側ウィンドウを一度クリックしてアクティブにした後、SHIFTを押しながら6面を選択するか、「すべて選択」のAキー(ALLのA)を押します。

この状態で、下部メニュー「メッシュ」「UV展開」「スマートUV投影」を選択しましょう。

下のような画面が出た場合、上から順に「66」「0」「0」が入力されていることを確認し、「OK」を押します。

これでUV展開ができました。ただしこれは機械的なUV展開であるため、後で修正が必要です。

このUVの状態に沿って画像を制作しますが、この画像だけを見てどれがどの頂点に対応しているのかを見極めるのは困難です。 そこで、理解を助けるためのカラーグリッドを制作します。

画面下部「画像」をクリックし、「新規画像」をクリックしましょう。

ダイアログが出るので、画像サイズは「512×512」にしておきます。1024×1024でももちろんかまいませんが、看板くらいの大きさであれば512×512ないしそれ未満が好ましいでしょう。画像サイズは縦横は2の乗数、つまり2,4,6,8,16,32,64,128,256,512,1024のどれかから選択します。(2048,4096も使えますが、Cities:Skylinesに読み込んだ際に重すぎて禿げるので基本は使ってはいけません

「生成された種類」は「カラーグリッド」にします。

よければ「OK」を押してください。

こんな感じでサイケデリックな模様が出来上がったと思います。

実際に3Dビューで割り当てを確認するには、右側のウィンドウ右上の「+」を押してパネルを開き、

パネルをスクロールして「シェーディング」の「テクスチャソリッド」にチェックを入れます。

これで、現在全ての頂点にどのようにテクスチャが割り振られてるかを確認できます。回転させたり移動させたりして確認してみてください。

UVを編集する

ここからUVを編集します。UV編集の基本原則は、「一番細かく見せたい領域を大きくし、どうでもいい部分は小さくする。同じパーツは重ねる」です。UV展開に使える領域は今回512×512しかないため、例えば看板の前面部の領域が足りていないと、128×128程度の解像度で看板を表示するために画像が荒くなってしまいます。

看板の前面部は領域を大きめ、かつ側面部や背面は小さめにする方向で作っていきましょう。

上下さかさまのUVを直す

まずは上下が逆になっているところから直していきます。

右のウィンドウをクリックしてアクティブにし、Aキーを押してすべての面を選択します。すると左ウィンドウに線が表示されます。 左ウィンドウ下部の面選択モードを一度クリックします。

この状態でそれぞれの面を選択していくと、右ウィンドウで面がハイライトされると思います。

3Dビューでは見ての通り「C1」「B1」「A1」付近が前面に表示されているので、対応する面は左下にあることがわかります。

まずはこの状態でUVを回転させます。左ウィンドウ左上の「+」を押してパネルを出しましょう。

そして「ツール」タブの「回転」を押してみます。

ぐるぐる回転しますが、この場合は180度回転したいので、例によって「180」と入力(左下のステータスバーが変わります)し、回転角をセットします。

前面が正しい上下方向になりました。

この操作は、面を選択した状態で「R」(Rotate)キー」を押しても実行できます。面選択→「R」押下→「180」入力です。

UVを拡大縮小する

このUV配置ですが、実はD1~D4のほとんどがUVがかかっておらず死蔵している状態です。画像内にはなるだけUVでいっぱいになったほうが無駄が少ないため、前面部分のUVはもう少し大きくしましょう。

面を選択して、左パネルから「拡大縮小」を選ぶか、「S(Scale)」キーを押します。

この状態でマウスを動かすと面に割り当てられたUV領域が拡大縮小します。面が大きくなる=面が使う画像の領域が増えて解像度が上がり、面が小さくなる=面が使う画像の領域が減って解像度が下がるということを覚えておきましょう。

今編集している前面は解像度が大きいほうが都合が良いので、少し大きくします。

UV展開に都合の良い設定をしておく

この拡大縮小作業ですが、当然のごとく本来の画像(512×512)の領域を飛び越えて設定できてしまうものの、 そのままCities:Skylinesに読み込むとUVが変になってしまいます。 また、自由にUVを設定すると1ピクセル以内に線が複数重なってしまってテクスチャの端がボケることにもつながるため、ここではオプションを変更し、1ピクセル単位でUVを編集でき、かつUVが画像からはみ出さないようにします。

左パネル「オプション」タブの「ピクセルに吸着」と「画像の範囲に収束」にチェックを入れておきましょう。

UVを移動する

上記設定を行った後にもう一度拡大縮小をする(Sキー)と、ぴたりと画像内にUVが収まります。

このまま拡大縮小をしようにも、UVの拡大縮小は中点を基準に行うため、1ピクセルでも大きくしようとすると左辺と下辺が画像のフチに引っかかって拡大できません。そこで、この面を中央付近に移動させます。

移動は左パネル「移動」を押すか、「G」キーで行います。

中央付近に移動させた面に対して再度拡大縮小(Sキー)を行うと大きくできるはずです。大きくしすぎると上下の辺が境界にぶつかってしまい、そのまま確定すると縦横比がおかしくなったUVができてしまい、後々苦労することになるため、アスペクト比が変わらない程度の大きさにしておきましょう。

大きさが決まったら、この面を左下に移動(Gキー)させておきます。

これにより前面部は、先ほどよりも多くの画像の領域を確保できました。

UVを重ねる

さて、次に背面の前に側面部を処理します。側面部はすべて同じ色で良いので、UVは重ねてしまいましょう。 「UVを重ねる」というのは、複数の面が画像の同じ場所を参照してテクスチャリングするということです。 これにより、例えばボールの様な多面体を作るときに、面1つ1つの領域をペイントソフトで描くことなく、所定の領域(例えば右下64px四方の領域)にUVを集中させることで、UVの節約・労力の節約につながります。

不要な場所のUVはなるべく重ねることで、目立たせたい場所の解像度を上げることができるほか、UV領域(今回は512×512)を無駄に広げる必要がなくなります。

今回、側面部のUVは「C4」の半ばから右側に集中しているため、これを右下に集めて重ねます。

試しにこの面を移動させてみたところ、左側のUVも歪んでしまいました。

これは、左側の面(3Dにおける背面)と頂点を共有しているがために起きる現象です。いったんCTRL+Zで元に戻し、頂点の共有をオフにしましょう。

操作したい面を選択した状態で「Y」キーを押します。その後移動(Gキー)させると、くっついてきた隣の面はそのままになっているはずです。 右下に移動させてしまいましょう。

同様に他の側面部分のUVも右下に集約します。これにより、側面部分は全部紫色のグラデーションになっているはずです。

側面部分の解像度はもう少し小さくても良いので、まとめて縮小しましょう。

左ウィンドウにおいて「B」キーを押下すると、範囲選択モードになります。 この状態で、各面の中心になる「・」マークを含むように範囲選択してみましょう。

この状態で拡大縮小(Sキー)を行うと、4つの面が同時に縮小できるはずです。 ついでに90度回転(Rキー)させ、調整を行いながら前面と被らない右上のこの位置に集約しておきます。

背面部分についても同様に拡大縮小と移動を行い、最終的に以下の図のようになればUV展開は完了です。

この状態のUV配置をエクスポートします。左ウィンドウ下の「UV」から「UV配置をエクスポート」をクリックし、PNGファイルとして保存します。

ついでに、このサイケデリックなカラーグリッドも保存しておきます。 「画像」「画像を別名保存」で、PNG画像として保存します。

以上でUV展開は完了です。

先ページで紹介した「CLIP STUDIO」はインストールできていますでしょうか? ここではインストールが完了した状態で話を進めていきます。

CLIP STUDIO(以下「クリスタ」)を起動し、ファイル→開くから、先ほど保存したUV配置画像を開きます。

続いてサイケデリックなUV画像も開きます。

サイケデリックなUVグリッドを全体選択(CTRL+A)し、そのままコピー(CTRL+C)し、タブを切り替えてUV配置画像のキャンパスにペースト(CTRL+V)します。

右下のレイヤーウィンドウで、サイケデリックなUVグリッドが下に来るようにすれば、Blenderの画面とほぼ似たような状態になるはずですね。

あとは新規レイヤーの上に、塗り絵の要領で看板画像を作っていきます。 この時、UV配置としてエクスポートされた線より外側に塗り足しを作っておきましょう。線の上だとギリギリUV配置が届かず、面の端が白くなったり変な色になってしまいがちです。 レイヤーの入れ替えも行いながら作っていきましょう。

こんな感じで「広告募集中」の看板にしてみました。

フォントは、フリーフォントの「M+」を利用しています。日本語のほとんどの文字が利用可能なほか、それなりにカッコいい感じで表示してくれるのでおすすめです。 ぜひダウンロードしておきましょう。

M+フォント配布サイト

背面部分の壁は素材サイトの画像を利用しました。テクスチャに有用な素材はあちこちで素材されていますが、中でも textures.comの素材は高品質のものが多いため、まだ登録していない方はぜひアカウントを登録し(フリーで1日何素材かDL可能)、ダウンロードしておきましょう。

画像の明るさを調整する【重要】

Cities:Skylinesでは、画像の明るさがR,G,B=170,170,170を超えるものはすべて真っ白に白飛びして表示されます。 違和感なく見える「白色」ですら、RGBで130,130,130となっているため、この基準を超えている画像をテクスチャにするとかなり明るくなってしまいます。

幸いにもCLIP STUDIOには画像の明るさの調整機能があるので、上部メニュー「レイヤー」→「新規調整レイヤー」→「明るさ・コントラスト」を選ぶなどして、明るさを調整しておきましょう。

これで各所をALT+右クリックでスポイトしながら色を確認します。クリスタの左下にはカラーの数字が表示されるため、これを見ながらRGBが130,130,130を超えていないか確認します(HSV表示されている場合には「H」などの文字をクリックするとRGBカラー系に切り替えられます)。

問題がなければ、このファイルを「ファイル」→「画像を統合して書き出し」→PNG形式にし、「 kanban_test_d.png」としてPNG形式で保存しましょう。

※サイケデリックなUVグリッドとUV配置レイヤーは見えないようにするか削除してから書き出すのをお忘れなく!

こんな画像です。

では、Blenderに戻って、保存した画像をBlenderで開いてみましょう。

左ウィンドウ下部「画像」から「画像を置き換える」をクリックし、先ほどの画像を読み込みます。

モデルを確認し、端が切れていたり、意図しない画像が混ざっていたりしないかを確認します。

問題がなければ、Blender側のモデルデータも保存しましょう。

保存が完了したらエクスポートの作業に入りますが、その前にもう一つBlender上でやっておくことがあります。 オブジェクトモードで作成したモデルを選択(Aキー)します。次にモデルを選択した状態でCtrlキー+Aキーを同時に押し、「適用」メニューを呼び出し、メニューのなかにある「回転と拡幅」を選択します。そうするとオブジェクトのトランスフォームを適用という画面が出ます。その中に「位置」「回転」「拡大縮小」という項目があるので、すべてにチェックを入れましょう。こうすることで、アセットを読み込む際に、エラーが出ることを防ぎます。

「ファイル」→「エクスポート」→「FBX」を選びます。

ファイル名は「kanban_test.fbx」とし、左下のオプションについては以下のように設定します。

  • バージョン:FBX7.4バイナリ
  • メイン
  • ■選択したオブジェクト にチェック
  • 拡大縮小:1.00
  • スケールを:全ローカル
  • 前方:-Zが前方
  • 上:Yが上
  • 「メッシュ」だけをチェックし、ほかはすべて外す
  • ■実験的機能 トランスフォーム適用 にチェック

これで「保存」を押します。

こうして仕上がった kanban_test.fbxkanban_test_d.png のファイルを、Cities:Skylinesのインポートフォルダに配置します。

インポートフォルダは通常 C:\Users\%username%\AppData\Local\Colossal Order\Cities_Skylines\Addons\Import (コピペしてアドレスバーにペースト可)にあります。ここに2つのファイルを配置しておいてください。

次回はいよいよCities:Skylinesのアセットエディタに読み込みます。

Cities:Skylinesへの読み込み編へ

  • mod・アセット制作/初心者向けアセット制作チュートリアル_②uv展開編.txt
  • 最終更新: 2020/05/07 22:11
  • by 114.171.185.204