前回アセットからSceneにドロップした地面のスプライトにBox Collider 2DをアタッチしてGrassGroundと命名し,Prefab化しました.これでプレイヤーキャラが上に乗ることができるようになったので今度はこれらを配置してゲームの一場面を作成しましょう.
その前にまず最初に背景の指定をします.
背景の配置
ProjectビューのTooCubeForestの中にbackgroundsというフォルダがあるのでクリックします. その中からBG_desert_noon2_1024を選んで画面の中央より左側に配置します:
右側が空いていて左側が画面を飛び出していますが,背景に使用した画像の"BG_desert_noon2_1024"は"BG_desert_noon2_1024"とセットで使用することが想定されておりますので,右側にこれを配置するために取っておいてあります.
ただし上の画面では分かりづらいですがそれでも背景が上下にわずかにはみ出しています. Unityの2Dでは,標準ではアスペクト比によらず画面の上下,つまりY軸は+5から-5まで表示します.このことはMain CameraのInspectorのSizeが5となっていることからわかります:
今回使用した背景画像は"BG_desert_noon2_1024"という名前からわかるように縦横1024pxです.Inspectorビューで確認すると次のようになっています:
この意味はMain Cameraの座標の1目盛り当たり100pxからなるという意味です. この画像の上下のピクセル数は1024ですから,100で割ると10.24になります. Y軸の表示領域は+5から-5の10目盛分ですからはみ出していたわけです. そこでこれを修正して1024ピクセルで10目盛動くようにするには単に1024を10で割った102.4をPixels Per Unitに指定すればよいわけです.
背景のスプライトでこの設定をしたのち,SceneのMain Cameraの表示領域に再度ドロップすると次のダイアログが表示されます:
このダイアログでApplyをクリックすると,リサイズされてちょうど10×10のサイズになりました!
ただし,目分量で配置してますので若干ずれているかもしれません.その際はPositionのXを-5,Yを0に指定しておきましょう.
同じように"BG_desert_noon_1024"のPixels Per Unitを102.4にしてX = 5, Y = 0の地点に配置します.
背景を一番奥に表示する
ここで背景は一番奥に表示したいわけですが,重なりの上下を調整するのはPhotoShopなどでおなじみのレイヤーで調節できますが,Unityの2Dには様々なレイヤー設定が存在しそれぞれ状況によって使い分けなければなりません.今回はPositionのZ値を+100(奥側)に設定しておくことにします. なお+100というのはずいぶん大きいと感じるかもしれませんが背景より奥には何も描かないといった程度の意味ですので,値自体には深い意味はありません.
背景を空のGameObject"BG_DesertNoon"の子にする
Sceneに貼り付けた2枚の背景画像それぞれのZの値を100にしたら一旦空のGameObjectの子にしましょう.これは大雑把に言ってフォルダに入れて整理するイメージです.
Hierarchyビューで[Create Empty]を選択すると空のGameObjectができますので,名前を "BG_DesertNoon"としてリネームし,先ほどの二つの背景画像をドロップします:
BG_DesertNoonのPrefab化
後はこのBG_DesertNoonをPrefab化します.HierarchyビューでBG_DesertNoonを選択してProjectビューのMyEnvironmentsフォルダのサブフォルダのMyAreasPrefabsにドロップします.これで地面が全くないエリアのPrefabが一場面できました.
前回の復習~タイルの配置~
次にここに地面のタイルを配置してゆきます. "TooCubeForest”のサブフォルダの”images"フォルダの中から"Forest_terrain_dirt_grass(spring)128px Import Setting"を選択します. Inspectorビューで確認するとあらかじめPixels Per Unitが128になっていますので,縦横128pxのタイルがちょうど1マス使用する設定になっていることが分かります. そこでこのとき矢印をクリックして展開してから"Forest_terrain_dirt_grass(spring)128px_0"を選択します:
選択したらそれをSceneビューのMain Cameraの表示領域の長方形の枠の内側にドロップします.SceneビューにSpriteが登録されました:
地面のタイルのリネーム
名前が日本人の僕には長すぎて分かりづらいのでこのGameObjectの名前をHierarchyビューからGrassGroundにリネームしておきます. このGrassGroundに各種設定を施してからPrefab化します.
地面のタイルにColliderをアタッチする
今回はInspectorビューのAdd Componentから[Pysics 2D]→[Box Collider 2D]を選択してアタッチします. 形状が四角いタイルだからBox Collider 2Dにしましたが,より一般的な形の場合はPolygon Collider 2Dなどを使用しますが,多用すると処理が重くなるので注意しましょう.
GrassGroundのPrefab化
ここで先ほど作成したGrassGroundをPrefab化して登録します. その前に念のためTransformをリセットしておきましょう. GrassGroundのInspectorビューのTransformコンポーネントの右側の縦に三つドットが並んでいるところをクリックして"Reset"を選びます:
この状態でHierarchyビューのGrassGroundをProjectビューのMyTilesPrefabsにドロップします.これでGrassGroundはPrefab化されました!
GrassGroundが敷き詰められたエリアを作成する
プレイヤーキャラが上に乗ることができるようになったので今度はこれらを配置してゲームの一場面を作成しましょう.Move Toolを選択して画面上のGrassGroundを選択し, 背景の一番左下に配置しましょう. 正確な座標は(X,Y) = (-9.5,-4.5)です. 中途半端に0.5が出てしまうのは,タイルの中心が(X,Y) = (0,0)になっているため, (-10,-5)に配置するとX,Y軸それぞれ0.5だけ背景の外側にはみ出してしまうためです.
そこでひとつめのGrassGroundを(X,Y) = (-9.5,-4.5)に配置します. そしてGrassGroundが選択された状態でCtrl +CでコピーしてCtrl + Vで貼り付けます.この操作をうとGrassGround (1)がHierarchyビューにできますのでさらにCtrl + Vで貼り付けます.
こうするとさらにGrassGround (2)ができます.
いま背景画像は縦横10マスのものを横に2つ並べていますから,合計20回Ctrl + Vを押してGrassGround (20)まで作ってください. それから番号のないGrassGroundは管理が面倒なので削除してしまいましょう.
後は一個ずつHierarchyビューでGrassGround (i)を選択しながら,InspectorビューのTransformのpositionのXに-10.5 + iの値を順番に入れていくだけです.GrassGroundを敷き詰めるとこんな感じです:
今回は見栄えを重視してきっちり数値で指定して配置しましたが,手作業で配置した方が若干ずれて味わい深いという場合もあるでしょう.目的に応じで手で配置するか数値を指定して配置するかなどを臨機応変に選んでください.
Area_GrassGroundedのPrefab化
これで地面にGrassGroundが敷き詰められたゲームのエリアができましたのでPrefab化しましょう. まず,背景を空のGameObjectに登録したときのように空のGameObjectを作りその下に全てのGrassGroundたちを移動します.今回は"Floor_GrassGrounded"とします.移動前に"Floor_GrassGrounded"のTransformをResetするのを忘れないでください. 次に空のGameObject"Area_GrassGrounded"を作り,そこに"BG_DesertNoon"と"Floor_GrassGrounded"を移動させます:
今度はこれをPrefab化します.保存先は"MyAreasPrefabs"にしましょう. これでこのエリアはMyAreasPrefabsからいつでも呼び出せるようになりました.
次回はプレイヤーキャラクターである少女のウィッチをこのシーンに登場させます.