音無サノトの空想録

ゆるい漫画を描いています

【ゲーム制作】Blenderを使ってラビットハウスっぽいやつをモデリングする⑤

どうも音無サノトです(^^)

週末のゲーム制作記事!! 

そろそろモデリングの方をいったん切り上げたいと思います。

 

otonasisanoto.hatenablog.com

 

今日はテクスチャを貼ってみます。

 

 

進捗報告

  • 法線の出し方を学んだ
  • マテリアルを適用して色を変えた
  • テクスチャを適用して色をつけた
  • BlenderからUnityへのエクスポートを行った 

 

作業内容

ドアの修正

まずドアの部分が色がちょっと違うので、面が裏になっている可能性があります。

この状態でテクスチャをはっても裏面に貼られるため意味がありません。

f:id:otonasisanoto:20190818080651p:plain

 

そこで、まず面がどちらを向いているのか法線を表示して確認します。

 

オブジェクトモードでドアを選択後、編集モードにします。

「N」キーを押してウィンドウを開き、法線(Normals)を表示する部分の面のアイコンを押します。

f:id:otonasisanoto:20190818081106p:plain

 

するとドアの面に青い線が表示されて面がどちら側を向いているか確認することができます。

f:id:otonasisanoto:20190818081135p:plain

 

・・・あれ? ちゃんと全部、表面を向いていますね。

勘違いだったかorz 

まあ、でもやり方の確認はできたのでよしとします。

 

テクスチャ

それではテクスチャを付けていこうと思います。

今回は地面、ドア、屋根、窓、建物とオブジェクトが分かれているので、その順番でテクスチャを付けていきます。簡単にできそうな順です。

 

地面

まずPlaneを伸ばしただけの地面に色を付けます。

f:id:otonasisanoto:20190818081632p:plain

ここはテクスチャではなくマテリアルを追加して、1色にするだけにしようと思います。

 

オブジェクトを選択し、右側のウィンドウで水晶みたいなアイコンをクリックします。

その後に「New」を選択し、マテリアルを追加します。

f:id:otonasisanoto:20190818081914p:plain

 

すると下の様な画面になるのでそれぞれを変更します。

設定できるものは以下のものです。

Diffuse:色

Specular:ハイライト

Shading:光

f:id:otonasisanoto:20190818082244p:plain

 

赤矢印のところで色とIntensit(明るさ)を変更します。

 

すると床の部分を茶色っぽく変更できました。

f:id:otonasisanoto:20190818082633p:plain

 

ドア

次に簡単そうなドアにテクスチャを貼ります。

f:id:otonasisanoto:20190818083020p:plain

 

まずはUV展開を行います。

UV展開とは立体の図形を平面に起こすような作業です(ざっくり説明)。

 

オブジェクトモードでドアを選択して、編集モードでドアの窓側になる部分の辺を選択します。

f:id:otonasisanoto:20190818083448p:plain

 

Ctrl + E キーを押して、Mark Seamを選択します。

f:id:otonasisanoto:20190818083612p:plain

 

すると辺を選択した部分が赤くになります。

f:id:otonasisanoto:20190818083633p:plain

 

こうすることでUV展開をしたときに、切れ目を入れた部分がいい感じになるはずです。

 

作業がしやすいように画面を分割します。

右上の三本線マークのところをドラッグ&ドロップします。

f:id:otonasisanoto:20190818084304p:plain

 

こんな風に分割できました。

右側をUV展開のビューに変更したいと思います。

f:id:otonasisanoto:20190818084507p:plain

 

左下にあるViewの隣のアイコンを押して、UV/Image Editorを選択します。

f:id:otonasisanoto:20190818084726p:plain

 

モデルを表示している方で作業をします。

「A」キーで全面を選択して、「U」キーを押してUnwrapを押します。

これでUV展開がされたはずです。

f:id:otonasisanoto:20190818083905p:plain

 

UV/Image Editorの方で見るとこんな感じに展開されています。

f:id:otonasisanoto:20190818084932p:plain

 

下の「UVs」を選択し、Export UV Layoutでテクスチャをエクスポートします。

f:id:otonasisanoto:20190818085203p:plain

 

PNG形式でエクスポートできるのでお好みのペイントソフトでテクスチャを作成していきます。

自分は使い慣れているMediBang Paintを使いました。

 

下の様にテクスチャを作成しました。

窓の部分を水色、他を茶色にしたシンプルなものです。

f:id:otonasisanoto:20190818094342p:plain

 

元になるガイド線も描いてしまうと、その線も描画されてしまうので注意が必要です。

 

UV/Image Editorの下にある「Open」を選択。

 

f:id:otonasisanoto:20190818094617p:plain

 

先ほど、作った画像を選択します。

 

下にあるアイコンで「Texture」を選択するとドアにテクスチャが貼られていることを確認できます。

f:id:otonasisanoto:20190818093413p:plain

 

ライトの位置をずらさないと見づらい場合があります。

これでひとまずテクスチャの貼りかたはOKですかね。

 

同じ要領で屋根もテクスチャを貼ります。

 

建物

次に、建物にマテリアルを適用していきたいと思います。

まず、建物と前面上層の窓部分を結合してしまったので、テクスチャを貼るのが面倒です。

そこで、建物と窓を分割します。

 

編集モードで窓部分を選択。

f:id:otonasisanoto:20190831111757p:plain

 

「P」キー → Selection を選択します。

f:id:otonasisanoto:20190831111854p:plain

 

すると選択した部分のオブジェクトを分割することができます。

f:id:otonasisanoto:20190831111916p:plain

 

では、建物部分にマテリアルを追加します。

地面にマテリアルを設定したのと同じ要領でオブジェクトにマテリアルを追加。

色部分をスポイトで屋根と同じ色を取ります。

f:id:otonasisanoto:20190831112559p:plain

 

すると建物にも色を付けることができました。

f:id:otonasisanoto:20190831112636p:plain

 

 

次に窓部分にテクスチャを貼っていきます。

とりあえず、先ほどと同じ要領で前面の窓を個別に分割。

f:id:otonasisanoto:20190831113211p:plain

 

片方の窓部分にテクスチャを貼ります。

窓部分だけを面選択して、Ctrl + 「E」キー → Make Seam を選択。

f:id:otonasisanoto:20190831113539p:plain

 

窓を「A」キーで全選択して、「U」キー → Unwrap でUV展開します。

f:id:otonasisanoto:20190831113844p:plain

こんな感じ

 

UV/Image EditorのUVs → Export UV LayoutでUV展開したマップを出力し、ペイントソフトで色を塗ります。

f:id:otonasisanoto:20190831114511p:plain

 

このテクスチャをUV/Image EditorのOpenから選択するとテクスチャが適用されます。

f:id:otonasisanoto:20190831114626p:plain

 

このテクスチャを貼ったオブジェクトを複製する方がラクでしたね。

失敗しました。

 

ということで、このテクスチャ付きオブジェクトを、複製して上の窓の部分を完成させます。

 

右側と

f:id:otonasisanoto:20190831115758p:plain

 

左側。

f:id:otonasisanoto:20190831120049p:plain

 

いい感じですね。

 

同じ要領で下の窓もテクスチャを貼って完成です。

f:id:otonasisanoto:20190831121420p:plain

完成!!

 

まあ素人が作ったんだから、こんなものでしょう。

時間があれば、もっと細部までやりたいところですが、今回はここまでとします。

 

Unityへ導入

では作ったオブジェクトを書きだしてUnityに入れてみたいと思います。

前回までに作成したプロジェクトに入れてみます。

otonasisanoto.hatenablog.com

 

カメラと光源は邪魔なので消しました。

オブジェクトを全選択して、ExportでFBX形式を選択します。

f:id:otonasisanoto:20190831121639p:plain

 

左下にあるエクスポートの詳細設定で以下のように変更します。

Selected Objects にチェック

Scale : 1.00

!EXPERIMENTAL! Apply Transform にチェック

Forward : Z Forward

Up : Y Up

f:id:otonasisanoto:20190831123455p:plain

 

このFBX形式のフォルダをドラッグ&ドロップでUnityのAssetsフォルダに入れて、シーンに持っていけば、できると思ったのですが。。。

f:id:otonasisanoto:20190831124017p:plain


なぜかテクスチャが反映されていないです。。。あれ?

 

調べたところ、別の方法の方がうまくできそうです。

 

まず、.blend形式のファイルとテクスチャのファイルをUnityのAsseteフォルダ内にドラッグ&ドロップします。

わかりやすいように自分は「RabbitHouse」というフォルダを用意しました。

f:id:otonasisanoto:20190831124934p:plain

 

そして、シーン内にオブジェクトを持っていきます。

このときはまだテクスチャが反映されていません。

 

それぞれのテクスチャをシーンに追加したモデルにドラッグ&ドロップしていきます。

f:id:otonasisanoto:20190831125219p:plain

 

この作業を全パーツに行うことでテクスチャを反映させることができました。

f:id:otonasisanoto:20190831125345p:plain

こんな感じです!

屋根と建物の色が微妙に違うことから、マテリアルの色とテクスチャの色では差異がでるみたいです。

次にやるときは、そこを留意してやらなければなと思います。

 

とりあえず、以上でラビットハウスっぽいやつのモデリング終了です。

 

次回予告

次回はBGM制作をしていこうと思います。

 

本日は以上となります。最後まで読んでいただきありがとうございました!