【第24回】ボールやコースにTextureを貼るUnityチュートリアル

【第24回】ボールやコースにTextureを貼るUnityチュートリアル

前回のチュートリアルでは、角度を操作するためのUIを作成して、スクリプトからその動きを実装しました。

EventTriggerでボタン押しっぱなしを検知して、押された分だけ矢印を回転させたりと、結構ゲームっぽくなってきました。

今回はボールやコースのオブジェクトにTextureを貼り、よりゲームらしい見た目にしていきたいと思います。

前回のチュートリアルはこちらから。

 

今回の目的

ボールやコースのオブジェクトにTextureを貼ります。

Texture用の画像をインポートするところから、オブジェクトに設定するところまでをやっていきます。

プロジェクトの準備

前回のチュートリアルで作成したプロジェクトをそのまま使います。

このページに先にたどり着いた方は、チュートリアルの初回から追っていただけるといいかもしれません。

Textureのインポート

現在の状態ではボールや地面が真っ白けになっていて、いかにもポリゴンです、と言わんばかりの状態です。

今の状態
今の状態

 

なので今回はゲームっぽさを出すために、ボールや地面にTextureを貼り付けていきます。

オブジェクトにTextureを貼り付けるには、以前ちょっと扱ったMaterialを使います。インポートしたTexture用の画像をMaterialに設定し、そのMaterialをオブジェクトに設定するのです。

まずは、Textureを格納するためのフォルダを作成します。『Project』ウィンドウのAssetフォルダで、右クリックまたは二本指タップからコンテキストメニューを開きます。メニューの[Create] -> [Folder]を選択。

Texturesフォルダの作成
フォルダを作成するのだポッター

 

名前は[Textures]にします。そのまんま。

Texturesフォルダ
Texturesフォルダ

 

作成した『Textures』フォルダを開き、画像ファイルをインポートします。

今回インポートするのは以下の6つの画像。zipでまとめたのがこちらです(tutorial_24_resources.zip)

リソースのサムネイル
リソースのサムネたち

 

それぞれの用途は以下の通り。

  • ball_texture.png …… ボールのテクスチャ
  • grass.png …… 地面の表面のテクスチャ
  • ground.png …… 地面の側面のテクスチャ
  • tree_background_left.png …… 背景左端のテクスチャ
  • tree_background_right.png …… 背景右端のテクスチャ
  • tree_background.png …… 背景のテクスチャ

ボールとコースに貼るためのテクスチャを用意しています。

それぞれに関してMaterialを作成し、オブジェクトに設定することで画面に表示されます。

しれっと背景だなんて言いましたが、今回はQuadと呼ばれるオブジェクトを使って背景を表示する点も扱います。

んじゃインポートしましょ。エクスプローラ(Win)またはFinder(Mac)からドラッグ&ドロップして『Textures』フォルダにインポートします。

ドラッグ&ドロップでインポート
ドラッグ&ドロップでインポート

 

インポートした後はこんな感じ。png画像の透過部分が白くなっています。

インポート直後
インポート直後

 

『tree_background』を選択すると、『Inspector』ウィンドウにインポート設定(Import Settings)が表示されます。デフォルトではAlpha Is Transparencyがfalseになっているので、 trueにします。チェックを入れたら[Apply]をクリック。

Alpha Is Transparencyにチェックを入れると、アルファ(透明)の部分と画像の境目が綺麗になります。

透過を使います
透過を使います

 

『tree_background_left』と『tree_background_right』についても同様にAlpha Is Transparencyにチェックを入れて[Apply]をクリックします。すると『Project』ウィンドウではこんな感じに。

ウィンドウでも透過に
ウィンドウでも透過に

 

画像アセットの準備ができたので、次はMaterial作成です。

 

Materialの作成

以前作ったガイド用のMaterialと同じように作成していきます。ガイドの時は画像指定はありませんでしたが、今回はインポートした画像をTextureとして指定します。

ボール用Material

『Project』ウィンドウで、『Materials』フォルダを開き、コンテキストメニューを開きます。[Create] -> [Material]を選択して新規マテリアルを作成します。

マテリアルの作成
マテリアルの作成

 

名前は分かりやすく[Sphere]にしました。

Sphere用マテリアル
Sphere用マテリアル

 

『Sphere』マテリアルを選択すると、Main Mapsの中にAlbedoという項目があります。その左側の丸ボタンをクリックするとTexture選択ウィンドウが表示されるので[ball_texture]を選択。

テクスチャの選択
テクスチャの選択

 

『Project』ウィンドウの方でも画像が適用されました。

どうみてもスイカです
どうみてもスイカです

 

質感などは光のある環境で確かめましょ。『Hierarchy』ウィンドウの『Sphere』オブジェクトを選択します。『Inspector』ウィンドウ内、Mesh RendererコンポーネントでMaterialsに『Sphere』マテリアルをセット。

『Sphere』オブジェクトのMesh Renderer
『Sphere』オブジェクトのMesh Renderer

 

画面ではこんな感じに表示されます。『Scene』ウィンドウ、または『Game』ウィンドウで確認しながらマテリアルの設定で質感を変えていくのがいいですね。

画面で確認
画面で確認

 

若干メタリック感を出した感じにしたかったので、Metallicを[0.3]にしました。Smoothnessはそのまま[0.5]にしています。

マテリアルの設定
マテリアルの設定

 

地面の表面用Material

同様に他のマテリアルも設定していきます。

『Materials』フォルダにてメニューから[Create] -> [Material]を選択します。マテリアルの名前は[GroundSurface]で、地面の表面用に使います。

GroundSurface
GroundSurface

 

『Sphere』マテリアルの時と同様に、Albedoの左側にある丸ボタンから[grass]を選択します。ラフな感じにしたいので、MetallicもSmoothnessも[0]にしています。

Materialの設定
Materialの設定

 

今まで地面用に『Plane』オブジェクトを使っていましたが、その大きさを一度元に戻します。Texture用画像は正方形なので、元々の『Plane』オブジェクトの大きさだと横に引き延ばされちゃうんですよね。

せっかくなので、名前も[GroundSurface]に変えました。

GroundSurfaceのTransform
GroundSurfaceにリネーム

 

この新生『GroundSurface』オブジェクトのMesh Rendererコンポーネントを開き、Materialsに[GroundSurface]マテリアルをセットします。

マテリアルをセット
マテリアルをセット

 

こんな感じで表示されていればOKです。

スイカonしばふ
スイカonしばふ

 

地面の側面用Material

表面というからには側面も。『Materials』フォルダにてメニューから[Create] -> [Material]を選択。マテリアルの名前は[Ground]で、地面の側面用に使います。

Ground
Ground

 

Albedoの左側にある丸ボタンから[ground]を選択します。こちらもラフな感じにしたいので、MetallicもSmoothnessも[0]にしています。

Materialの設定
Materialの設定

 

MaterialはこれでOKで、側面のオブジェクトは今回初めて作成しますね。

地面が1枚の『Plane』だけだと横から見たときに寂しいので、『Cube』オブジェクトを作成して『Plane』の下に置きます。

ひとつのオブジェクトで複数のテクスチャを使うとなるとちょっとめんどくさいので、単純に2つのオブジェクトを作ってそれぞれにテクスチャを貼る方針にしました。楽するの大事。

なのでまずはオブジェクトを作成しましょ。『Hierarchy』ウィンドウでコンテキストメニューを開き、[3D Object] -> [Cube]を選択します。

Cubeの作成
Cubeを作成するのだポッター

 

作成した『Cube』オブジェクトを選択し、[Ground]にリネーム。Transformコンポーネントでは、PositionのYを[-5.02]にセット。ScaleはX, Y, Z全て[10]にします。

GroundのTransform
GroundのTransform

 

Positionを中途半端にしているのには理由があります。

それは、PositionのYが[5]だと『Ground』オブジェクトの上面が『GroundSurface』オブジェクトの面と重なってしまうため。

面が重なると、画像のようにチラツキが発生します。これを避けたいので『Ground』オブジェクトの方をちょっとだけ下げています。

オブジェクトの面の重なり
面が重なるとファミコンみたいなチラツキが

 

Box Colliderコンポーネントでは物理特性マテリアルの設定項目であるMaterialに[Bound]をセット。表面は『GroundSurface』オブジェクトが反射してくれますが、側面からぶつかった場合にも反射させて欲しいのでセットしています。

物理特性マテリアルの設定
物理特性マテリアルの設定

 

続いてMesh RendererコンポーネントのMaterialsで、今回作った『Ground』マテリアルをセットします。

Groundマテリアルのセット
Groundマテリアルのセット

 

『GroundSurface』オブジェクトと『Ground』オブジェクトの設定が終わると、こんな感じに表示されます。数値の上ではこれらのオブジェクトの間に隙間がありますが、ゲーム画面で見ても分からないくらいなので問題ありません。いいね?

地面はこんな感じ
地面はこんな感じ

 

背景用マテリアル

続いて背景用のマテリアルを作ります。『Materials』フォルダにてメニューから[Create] -> [Material]を選択。マテリアルの名前は[Background]で、背景用に使います。

Background
Background

 

Albedoの左側にある丸ボタンから[tree_background]を選択します。これまでのMaterialと違い、Rendering Modeを[Cutout]に変更します。

Cutoutは透明な部分と不透明な部分をはっきりと分けてくれるモードなので、今回はこれを選びました。背景画像には透明ピクセルが存在するため、その部分をきっちりと透過してもらいます。その他のRendering ModeについてはUnityのマニュアルをご覧ください。

Alpha Cutoffは[1]、Metallicは[0]、Smoothnessは[0.5]に設定しました。

BackgroundのMaterial設定
BackgroundのMaterial設定

 

設定が終わったら、背景の左端用マテリアルと右端用マテリアルを作ります。

『Materials』フォルダにて『Background』マテリアルを選択して[Ctrl]キー+[D]キー、または[cmd]キー+[D]キーで複製します。新しく出来上がった『Background 1』を[BackgroundLeft]にリネームします。

複製したことで『Background』マテリアルの設定が引き継がれるので、Albedoだけ[tree_background_left]に変更します。

BackgroundLeftのMaterial設定
BackgroundLeftのMaterial設定

 

右端用マテリアルについても同様に、『Background』マテリアルを選択して[Ctrl]キー+[D]キー、または[cmd]キー+[D]キーで複製します。新しく出来上がった『Background 1』を[BackgroundRight]にリネームします。

こちらもAlbedoだけ[tree_background_right]に変更します。

BackgroundRightのMaterial設定
BackgroundRightのMaterial設定

 

Materialを作成するとこんな感じになります。

作成したMaterial
作成したMaterial

 

背景用オブジェクトとして、新たにQuadを作成します。『Hierarchy』ウィンドウでコンテキストメニューを開き、[3D Object] -> [Quad]を選択します。

Quadの作成
Quadの作成

 

名前を[Background]に変更し、TransformコンポーネントでPositionのYを[5]に、Zも[5]に設定します。ScaleについてはX, Y, Z全部[10]にセット。

BackgroundのTransform
BackgroundのTransform

 

Mesh Colliderコンポーネントでは、物理特性マテリアルに[Bound]をセット。いつもの。

BackgroundのCollider
BackgroundのCollider

 

Mesh RendererではMaterialsに『Background』マテリアルを設定します。また、ガイドの影を描画しないように、Cast Shadowsをfalseにします。これで準備OK。

マテリアルをセット
マテリアルをセット

 

『Scene』ウィンドウではこんな感じに表示されます。

背景画像が表示された
背景画像が表示された

 

左右のオブジェクトについても確認してみましょ。

『Hierarchy』ウィンドウで『Background』オブジェクトを選択してからコンテキストメニューを開き、[Duplicate]を選択します。

オブジェクトの複製
オブジェクトの複製

 

作成したオブジェクトは[BackgroundLeft]にリネームします。TransformコンポーネントのPositionはXが[-10]、Yが[5]、Zが[5]と設定。上で設定した『Background』オブジェクトの左側に来るようにします。

BackgroundLeftのTransform
BackgroundLeftのTransform

 

Mesh Rendererコンポーネントでは、Materialsに『BackgroundLeft』マテリアルをセットします。

Mesh Rendererの設定
Mesh Rendererの設定

 

『Background』オブジェクトをもう一度[Duplicate]して、[BackgroundRight]にリネームします。こちらはTransformコンポーネントのPositionのXを[10]に変更します。他は変更なしでOK。

BackgroundRightのTransform
BackgroundRightのTransform

 

Mesh RendererコンポーネントでMaterialsに『BackgroundRight』マテリアルをセット。

Mesh Rendererの設定
Mesh Rendererの設定

 

これでテクスチャの準備が終わりました。後は、各オブジェクトをPrefab化してコースとして配置すれば良さそう。

『Background』に関しては、真ん中のオブジェクトを並べていき、端っこだけ『BackgroundLeft』と『BackgroundRight』にすればOKです。

テクスチャの準備完了
テクスチャの準備完了

 

次回はコース作成のチュートリアルです。

まとめ

今回はTextureのインポートからMaterialへの設定、オブジェクトへの設定を行いました。

ゲームを作るときにはTextureはほぼ必須だと思うので、設定の仕方は慣れておきたいところ。

次回はコース作成に入りましょう。

アプリ公開までの攻略チャートを作りました!

CTA-IMAGE

「スマホ向けのアプリを作ってみたいけど、何から手を付けていいか分からない!」


そんなお悩みをお持ちの方向けに、todoがアプリをリリースした経験から手順や考慮すべき点をまとめたe-bookを作成しました。ゲーム作りはそれ自体がゲームのように楽しいプロセスなので、「攻略チャート」と名付けています。


アプリをリリースする観点から書いているので各アプリストア向けの作業が入っていますが、企画、設計、開発、テスト部分については他のプラットフォームでも使える知識が満載です。


無料で入手できるのでぜひお早めにゲットして、開発をブーストさせてください!