ゲーム作り

マテリアルとテクスチャ

お疲れ様です。 せいさくしゃです。

前回は、新しく作ったシーン内にオブジェクトを置いて、そのオブジェクトの動かし方を解説しました。
しかし、全てが真っ白なオブジェクトだと、流石に見辛いですし殺風景です。
そこで、今回は配置したオブジェクトに色を付けたり絵を張り付けて、もう少し見栄えを良くしたいと思います。

今回の成果

地面の着色とキャラクターの配置

リュウキ

今回は、何を作ったんだ?

今回実装した内容はこちらです。

  • 地面オブジェクトにマテリアルの設定
  • キャラクターオブジェクトの配置
  • キャラクターオブジェクトにテクスチャの設定

以上が今回の実装内容です。

ケンタ

所々に見慣れない言葉があるんだけど。

言葉の意味等については後述します。
端的にいえば、地面に色を付けてキャラクターに絵を設定しました。

今回の解説

マテリアル(材料)の付け方

リュウキ

白いオブジェクトしか作れないのって嫌なんだけど、オブジェクトに色を付ける方法ってないのか?

配置したばかりのオブジェクトは全て真っ白で、色が付いていません。
オブジェクトに色を付けるためには、「マテリアル」が必要になってきます。

マテリアルとは、直訳すると「材料」等の意味があります。
Unity内では、オブジェクトに質感を与えるものと考えてもらえばいいと思います。

このマテリアルに色を設定し、その作ったマテリアルをオブジェクトに設定する事で、オブジェクトに色を付けることができます。

では、実際の手順を説明します。
※説明用の画像は、実際の開発画面とは異なっています

  1. まず、デフォルトでは画面の下の方にある「Project」(プロジェクト)を探します。
  2. そのProjectウィンドウの中の適当な場所を右クリックします。
  3. 出てきたメニューの中から「Create」(クリエイト)→「Material」(マテリアル)を選択します。

これで、取り敢えずデフォルト設定のマテリアルが作れます。
続いて、作成したマテリアルに色を付けていきます

  1. まず、先程作ったマテリアルを左クリックで選択します。
  2. Inspectorウィンドウに表示されたマテリアル情報の中から「Albedo」(アルベド)の右にある四角を左クリックします。
  3. 新しく出てきたColorウィンドウからマテリアルの色を指定します。

これで、マテリアルに色を付けることができます。

ちなみに、Colorウィンドウでの主な色の指定方法は次の通りです。

  1. 色を表すグラフ(?)から好きな色の部分をクリックして選びます。
  2. 色の数値を直接設定します。

1つ目の方法は、直感的な操作で簡単に色を選ぶことができます。
2つ目の方法は、厳密な指定で色の違いを細かく調整しやすいです。
私は数値を直接設定することが多いですが、皆さんはどちらでも好きなやり方でやってみてください。
あるいは、始めにグラフクリックで選んでから、後で数値を調整するというやり方もお勧めです。

ソウバ

色を指定する際の要素のまとまりの種類には、主にRGBHSVの2種類があります。

RGBは、R(Red、)、G(Green、)、B(Blue、)、の3つからなる光の3原色で表す要素群。
HSVは、H(Hue、色相)、S(Saturation、彩度)、V(Value、Brightness、明度)、の3つからなる要素群。

プログラマ出身のせいさくしゃは、RGBで指定することが多いです。
もしかしたら、デザイナ等の美術系出身の方はHSVの方が馴染み深い方もいるかもしれません。
これも、基本的にはどちらか好きな方を選んでもらって構いません。

しかし、プログラムの世界ではRGBで色を扱う事が多いので、RGBに慣れておくと後で便利かもしれません。

ソウバ

そして、お気付きの方も居ると思いますが、色の要素はRGB、HSV等の3つ以外にもう1つあります。
それはA(Alpha、透過度)です。
透過度はその名の通り、どれだけ透明であるかを表す要素です。
透過度は他の3つの要素と違った、少し特殊な働きをします。

今回は単純に色を付けたいだけなので、この透過度には触れません。
いずれ必要になるときが来たら、その時に紹介しようと思います。

なお、デフォルトのマテリアル設定では、透過度は反映されません

それでは、最後に色を付けたマテリアルを、オブジェクトに設定していきます。

  1. Hierarchyウィンドウから、マテリアルを設定したいオブジェクトを左クリックで選択します。
  2. Projectウィンドウにある先程作ったマテリアルを、選んだオブジェクトのInspectorウィンドウ内にドラッグ&ドロップします。

ここまでやって、オブジェクトに色を付けることができます。

ちなみに、ここで作ったマテリアルは、複数のオブジェクトに設定できます。
なので、別のオブジェクトに同じ色を設定するときは、同じマテリアルを設定することが可能です。
この様に1つの物を使いまわすことで、早く楽に制作が進むので、使いまわせるものは積極的に使いまわしましょう。

ケンタ

  1. マテリアルを作る。
  2. 作ったマテリアルに色を付ける。
  3. 色を付けたマテリアルをオブジェクトに設定する。

この順番でオブジェクトに色を付けることが出来るんだな。

ソウバ

今回は、オブジェクトに色を付けることで見栄えを良くしました。
しかし、ゲームを完成させる際には、オブジェクトにテクスチャ(絵)を張り付けて表示する方が好ましいです。

今はまだ作り始めたばかりなので、必要な絵が手元に無い事がほとんどだと思います。
この方法は、取り敢えずゲームを動かすという段階で行う方法だと割り切ってください。
そして、実際にゲームを完成させるまでには、テクスチャを張り付けるか、別の3Dモデルを用意して置き換える等で完全に見栄えを整えることを強く推奨します。

テクスチャ(絵)の付け方

リュウキ

オブジェクトに色を付けるのもいいんだけど、自分の持ってる絵を張り付けたりできないのか?

マテリアルには、色を付けるだけでなく「テクスチャ」を張り付けることもできます。
テクスチャには様々な種類がありますが、今回はオブジェクトに張り付けて表示する画像(絵)の事を指します。

では、実際にマテリアルにテクスチャを張り付けてみます。


  1. マテリアルを作成し、そのマテリアルを左クリックで選択しておきます。
  2. Projectウィンドウの左側の画面で、画像のある場所を探してクリックします。
  3. Projectウィンドウの真ん中の画面内にあるテクスチャを、選択したマテリアルのInspectorウィンドウ内のAlbedoの左にある枠の中にドラッグ&ドロップします。

少し見辛いですが、これでマテリアルにテクスチャが設定できました。
実際にオブジェクトに設定するには、前の項目で話した通りにマテリアルを設定すればいいです。

ソウバ

実は、オブジェクトにテクスチャを直接ドラッグ&ドロップで設定することもできます。
その場合、必要なマテリアルが自動的に作られて設定されることになります。
この時、テクスチャのあるフォルダの中に新しいフォルダが作られ、その中にマテリアルが入ります。

この方法でもいいのですが、そうするとマテリアルの場所とテクスチャの場所が混じってしまいます
さらに、元々マテリアル用のフォルダを作っていた場合は、マテリアルのフォルダが複数存在することになります。
個人的には、マテリアルとテクスチャの場所は明確に分けて置いた方が分かりやすいと思います。
この方法でもいいと言うなら構いませんが、私はあまりお勧めできないです。

リュウキ

よし、これでオブジェクトに絵を張り付けることができたぞ!

…あれ? 絵では透明に設定した部分が真っ黒になってる。
この黒い部分って透明にすることは出来ないのか?

テクスチャによっては、透明な部分があってゲームで表示させる際もその部分は透明にしたい事があります。
マテリアルのデフォルト設定では、この透明な部分が表現できないので、設定を少し変える必要があります。

テクスチャの透明部分をマテリアル側に反映させる方法は、次の通りです。

  1. Projectウィンドウから透明部分を反映したいマテリアルを選択します。
  2. Inspectorウィンドウから「Rendering Mode」(レンダリングモード)を探して、その設定を「Cutout」(カットアウト)に指定します。

こうすることで、テクスチャの透明部分がマテリアルでも表現する事ができます。

ケンタ

  1. マテリアルのAlbedoにテクスチャ(絵)を設定する。
  2. テクスチャに透明部分があるなら、マテリアルのRendering ModeをCutoutに設定する。
  3. 作ったマテリアルをいつも通りオブジェクトに設定する。

これで、オブジェクトに絵を付けることができるんだな。

今回のまとめ

今回は、ゲームの見栄えを良くするためのやり方を説明しました。
端的にまとめると、以下の通りです。

今回のまとめ
  • マテリアルを作り、色を付けて、オブジェクトに設定する事で色を付けることが出来る。
  • マテリアルには色だけでなく、テクスチャ(絵)も張り付けることが出来る。

こうする事で、殺風景だった画面を少し華やかにすることが出来ます。
しかし、これらはあくまでも開発途中の段階でやることです。
完成させる際は、きちんと3Dモデルを用意する等して、見た目を仕上げましょう。

それでは、今回はここまでにしたいと思います。
お疲れ様でした。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA