ゲーム開発で役立つ!Unityで背景を設定する方法【初心者向け】

初心者向けにUnityで背景を設定する方法について解説しています。背景に空の画像を映し出すなど実際にゲーム開発をする上では必要な知識です。実際に背景を設定しながら解説しているので、初心者の方でもすぐ理解できるでしょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

ゲームで背景は非常に重要な役割を持っています。特に2Dゲームでは背景がゲーム画面の70%ほどを占めることもあります。

ゲームエンジンであるUnityには、背景を設定するための方法がいくつか存在しています。

今回はUnityで背景を設定する方法について解説していきたいと思います。

 

なお、本記事はTechAcademyのUnity入門オンライン講座の内容をもとにしています。

 

20163020-2

 

今回はゲーム画面の背景の指定方法を見ていくよ。

 

20160620

 

田島メンター!!背景変更には何の機能を使うんですか〜?

 

20163020-2

 

背景の設定には複数の方法があるので、場面に合ったものを使うといいかな。それぞれの特徴を見てみよう。

 

20160620

 

よろしくお願いします!

 

背景を設定する主な方法

1. MainCameraのClearFlagsを’使用する

背景画像を使用せずにUnityに用意されている画像を利用する方法です。Skyboxに設定すれば、空の画像が表示されます。

また、SolidColorに設定すれば、指定した色で単色の背景を作成することができます。下の画像はSolidColorに指定した画面です。

unity_13_01

 

2. OrderinLayerを変更する

3Dのゲームを作る際はz座標が存在するので、重なったとしても自然な重なりで表現できます。しかし2Dの場合奥行きが存在しないため背景の後ろにプレイヤーが入り込んでしまう、ということもありえます。それを防ぐための機能がOrderinLayerです。

OrderinLayerの数字が大きいほど前面に配置されます。

Playerなどの背景の後ろに回り込むと、ゲームが破綻してしまうようなオブジェクトには大きい数字を設定するようにしましょう。

 

3. Cavasを使用する

UIを表示するためのオブジェクトであるCanvasを使用します。

Canvasはデフォルトの設定だと他のゲームオブジェクトの前に来るように設定されています。

しかし、CanvasのRenderModeをWorldSpaceに変更することによって他のゲームオブジェクトと同じように重なり順を変更することができます。

 

20160620

 

単色ならMainCameraのSolidColorですぐできるんだ。色々な方法があるんですね。

 

20163020-2

 

練習ではシンプルな画像を使うけれど、実際に背景を指定するときはアセットストアなどにも便利な素材があるよ。

 

20160620

 

なるほど、あとで探してみます!

 

20163020-2

 

それでは実際に背景の設定を行ってみようか。OrderinLayerを使った指定の方法だよ。

 

実際に背景を設定する

それでは実際に背景を設定していってみましょう。今回は背景画像をOrderinLayerによって、背景として設定したいと思います。

今回は、以下の写真を利用しています。

back.png

unity_13_back

player.png

unity_13_player

Assetsに背景用の画像(back.png)とPlayer用の画像(player.png)を保存してください。

unity_13_02

二つの画像のTextureTypeをSprite2D and UIに変更してください。

unity_13_03

Hierarchyに画像をドラッグしてシーンに配置してください。そのままだとプレイヤーは背景に隠れて見えません。

unity_13_04

背景のOrderInLayerを-10に設定してください。

すると、背景画像が後ろに下がりプレイヤーが前に出たことがわかります。

unity_13_05

 

[PR] Unityを使ったゲーム開発で挫折しない学習方法を動画で公開中

まとめ

今回はUnityで背景を設定していきました。背景設定はゲーム作成において必須の知識となりますので、しっかり身につけるようにしましょう。

 

20163020-2

 

OrderinLayerは前後関係を指定する機能だよ。この値が大きいほど全面に配置されるんだ。

 

20160620

 

ここではマイナスに設定したので、逆に奥になったっていうことですか?

 

20163020-2

 

そうだね。背景の設定は2Dと3Dでも変わってくるので、場面に応じて色々な手法を練習してみよう。

 

20160620

 

他の方法も試してみます!ありがとうございました!

 

[お知らせ]TechAcademyではオリジナルゲームアプリが公開できるUnityオンラインブートキャンプを開催しています。現役Unityエンジニアのサポートで効率的に学びたい場合はご検討ください。