Unityでつくる 横スクロールシューティング

ダークモード

第1回 宇宙の舞台を作る ​

この回でつくるもの：カメラを横スクロールシューティング用に設定し、真っ暗な宇宙の画面を作ります。目印の Cube を置いて、ゲームの世界の「座標」を体験します。

この回で学ぶこと ​

  • シーンの名前を変えて、決めたフォルダに整理する方法
  • カメラの Projection（映し方）を Orthographic にする意味
  • Game 画面の縦横の比率（16:9）を決める方法
  • ライトの向きの変え方
  • 座標（x と y）の考え方と「Z = 0 のルール」

前回までのふりかえり ​

第0回では、Unity 6 をインストールして、Universal 3D テンプレートでプロジェクト SpaceShooter を作りました。 _Game と ThirdParty のフォルダを作り、3Dモデル・効果音・BGM を入れてあります。

1. シーンの名前を Game にする ​

1-1. シーンとは ​

シーン（Scene）は、ゲームの「1つの場面」です。 タイトル画面、ゲーム本編、などを別々のシーンとして作ります。 テンプレートには、最初から SampleScene というシーンが入っています。これをゲーム本編のシーンにします。

1-2. SampleScene の名前を変える ​

  1. Unity Hub から SpaceShooter を開きます。
  2. Project ウィンドウの左側で Assets/Scenes フォルダを選びます。
  3. 右側にある SampleScene を右クリックし、Rename（名前を変える）を選びます。
  4. 名前を Game にして Enter キーを押します。
  5. Hierarchy のいちばん上のシーン名が Game に変わったことを確認します。

1-3. _Game/Scenes フォルダに移す ​

  1. Project ウィンドウで、さっき名前を変えた Game シーンを選びます。
  2. Game を、左側のフォルダ一覧の Assets/_Game/Scenes の上までドラッグして離します。
  3. Assets/_Game/Scenes を開いて、Game が入っていることを確認します。

ヒント

シーンのアイコンは、Unity のマークの形をしています。ダブルクリックするとそのシーンが開きます。

注意

「保存しますか？」「シーンが変更されています」という画面が出たら Save を押してください。

2. カメラを横スクロール用にする ​

2-1. Perspective と Orthographic ​

カメラの映し方には2種類あります。

映し方特ちょう
Perspective（パースペクティブ・遠近法）遠くの物ほど小さく見える。ふつうの3Dゲーム
Orthographic（オーソグラフィック・平行投影）遠くても近くても同じ大きさに見える。2Dゲーム向き

今回は3Dモデルを使いますが、遊び方は2Dの横スクロールです。 だから Orthographic にします。こうすると、画面の端の位置がいつも同じになって、ゲームが作りやすくなります。

2-2. カメラの位置と回転 ​

  1. Hierarchy で Main Camera をクリックして選びます。
  2. Inspector の Transform を見ます。
  3. Position を X 0、Y 0、Z -10 にします。
  4. Rotation を X 0、Y 0、Z 0 にします。
  5. Scale は X 1、Y 1、Z 1 のままにします。

ヒント

数字の入力欄をクリックして数字を打ち、Enter キーで決定します。Tab キーでとなりの欄に移れます。

カメラは Z = -10 の場所から、Z がプラスの方向（画面の奥）を向いています。 ゲームの物は Z = 0 の平面に置くので、カメラはそれを手前から見ていることになります。

2-3. Orthographic にする ​

  1. Main Camera を選んだまま、Inspector の Camera コンポーネントを見ます。
  2. Projection の中にある Projection を、Perspective から Orthographic に変えます。
  3. すぐ下に出てくる Size を 5 にします。

Size は「画面の上半分の高さ」です。Size 5 なら、画面の上の端は y = 5、下の端は y = -5 になります。

2-4. 背景を宇宙の色にする ​

最初は空（Skybox）が映っています。宇宙らしく、暗い色1色にしましょう。

  1. Main Camera を選んだまま、Camera コンポーネントの Environment を開きます。（▶ を押すと開きます）
  2. Background Type を Skybox から Solid Color に変えます。
  3. すぐ下に出てくる Background の色の四角をクリックします。
  4. 色を選ぶウィンドウが出たら、黒っぽい紺色を選びます。（例: Hexadecimal の欄に 0A0A1E と入れる）
  5. 色のウィンドウを閉じます。
  6. Game タブを押して、背景が紺色になったことを確認します。

ヒント

真っ黒（000000）でもかまいませんが、ほんの少し青を入れると、宇宙っぽくなって3Dモデルとの見分けもつきやすくなります。

2-5. 保存する ​

  1. Ctrl+S（Macは Cmd+S）を押して、シーンを保存します。

3. Game 画面を 16:9 にする ​

3-1. なぜ比率を決めるの？ ​

Game 画面の横と縦の比率がちがうと、横に見える広さが変わってしまいます。 この教材では、テレビやパソコンの画面と同じ 16:9（横16：縦9）に決めます。

3-2. 比率を設定する ​

  1. Game タブを押して、Game ビューを表示します。
  2. Game ビューの上のバーにある Free Aspect（自由な比率）と書かれたボタンを押します。
  3. 一覧から Full HD (1920x1080) を選びます。（ない場合は 16:9 Aspect を選びます）
  4. Game ビューの中の画面が、横長の 16:9 になったことを確認します。

先生へ

Size 5 で 16:9 のとき、見える範囲は x がおよそ -8.9〜8.9、y が -5〜5 です（5 × 16 ÷ 9 ≒ 8.9）。第4回の「画面からはみ出さない」でこの数字を使います。

4. ライトの向きを調整する ​

4-1. Directional Light とは ​

Directional Light（ディレクショナル・ライト）は、太陽のように「ある方向から全体を照らす光」です。 置いた場所は関係なく、向き（Rotation）だけ が大事です。

4-2. 向きを変える ​

カメラは奥（Z のプラス方向）を向いています。 光も「手前の上のほうから奥へ」向かうようにすると、カメラから見える面が明るくなります。

  1. Hierarchy で Directional Light をクリックして選びます。
  2. Inspector の Transform の Rotation を、X 40、Y -30、Z 0 にします。
  3. Scene ビューで、黄色い線（光の向き）が奥のほうに向いていることを確認します。

ヒント

ライトの向きは、あとで自機（第2回）を置いてから、見え方を見ながら調整しなおしてもOKです。X を大きくすると上から、Y を変えると左右から照らします。

4-3. 保存する ​

  1. Ctrl+S（Macは Cmd+S）で保存します。

5. Cube を置いて座標を体験する ​

5-1. 座標とは ​

ゲームの世界の場所は、座標（ざひょう）という数字で表します。 数学の グラフ と同じです。

軸向きこの教材での意味
X右がプラス、左がマイナス横の位置
Y上がプラス、下がマイナス縦の位置
Z奥がプラス、手前がマイナス使わない（いつも 0）

注意

この教材の大事なルール：ゲームの物はすべて Z = 0 の平面の上で動かします。 Z がずれると、弾が敵に当たらなくなるなどの原因になります。

5-2. Cube を置く ​

  1. メニューの GameObject > 3D Object > Cube を選びます。
  2. Hierarchy に Cube ができて、選ばれた状態になっていることを確認します。
  3. Inspector の Transform の Position を X 0、Y 0、Z 0 にします。
  4. Game タブを押して、画面の真ん中に Cube が映っていることを確認します。

Cube は真正面から見ているので、ただの四角に見えます。これが Orthographic の見え方です。

5-3. Cube を動かしてみる ​

Cube を選んだまま、Inspector で Position を変えて、Game ビューでどこに動くか見てみましょう。

  1. Position の X を 5 にします。→ 右に動きます。
  2. X を -5 にします。→ 左に動きます。
  3. X を 0 に戻し、Y を 3 にします。→ 上に動きます。
  4. Y を -3 にします。→ 下に動きます。

5-4. 画面の端をさがす ​

  1. Position を X 0、Y 0 に戻します。
  2. X を 8 にします。Cube は右の端の近くに見えます。
  3. X を 8.9 にします。Cube の真ん中が、ちょうど右の端にきます。
  4. X を 10 にします。Cube が画面の外に出て、見えなくなります。
  5. X を 0 に戻し、Y を 5 にします。Cube の真ん中が、ちょうど上の端にきます。
  6. Y を 0 に戻します。

見える範囲は、だいたい次のとおりです。

  • 左右：x = -8.9 〜 8.9
  • 上下：y = -5 〜 5

この数字は、これから何度も出てきます。覚えておきましょう。

5-5. Z を変えてみる ​

  1. Cube を選んだまま、Position の Z を 5 にします。
  2. Game ビューを見ます。Orthographic なので、Cube の大きさは 変わりません。
  3. Z を 0 に戻します。

ヒント

Perspective なら奥に行くと小さくなりますが、Orthographic では大きさが変わりません。だから見た目では Z がずれていることに気づきにくいのです。Z は 0、と覚えておきましょう。

5-6. Cube を消す ​

座標がわかったので、目印の Cube は消します。

  1. Hierarchy で Cube をクリックして選びます。
  2. Delete キー（Macは Cmd+Backspace）を押します。
  3. Hierarchy から Cube がなくなったことを確認します。

5-7. 保存する ​

  1. Ctrl+S（Macは Cmd+S）で保存します。
  2. Hierarchy のシーン名 Game の横に * がないことを確認します。

5-8. 動作確認 ​

▶ ボタン（画面の上の真ん中）を押して、Game ビューが紺色1色の画面になればOK。 もう一度 ▶ ボタンを押して、プレイを止めます。

よくあるまちがい

▶ を押している間（プレイ中）に変えた設定は、止めると 元に戻ってしまいます。設定を変えるときは、▶ が止まっていることを確認してからにしましょう。

チャレンジ課題 ​

  • 背景の色を、紫っぽい宇宙や、赤っぽい宇宙など、好きな色に変えてみましょう。（ゲームが見やすい暗い色がおすすめ）
  • カメラの Size を 3 や 8 にすると、画面に映る広さがどう変わるか試してみましょう。試したら 5 に戻します。
  • GameObject > 3D Object > Sphere で球を置き、Directional Light の Rotation を変えると、影のでき方がどう変わるか観察してみましょう。最後に球は消しておきます。

つまずきポイント ​

こんなときはここを確認
Size の欄がないProjection が Orthographic になっているか
背景が空の色のままEnvironment の Background Type が Solid Color か
Cube が Game ビューに映らないMain Camera の Position が (0, 0, -10)、Rotation が (0, 0, 0) か
画面の端の位置が 8.9 にならないGame ビューが Full HD (1920x1080) か 16:9 Aspect になっているか
設定がいつのまにか元に戻った▶（プレイ中）のまま変更していないか
シーン名の横に * があるCtrl+S（Macは Cmd+S）で保存する

まとめ ​

  • シーンを Game に名前を変えて、_Game/Scenes に入れました。
  • カメラは Position (0, 0, -10)、Orthographic、Size 5、背景は暗い色の Solid Color です。
  • Game 画面は 16:9。見える範囲は x がおよそ -8.9〜8.9、y が -5〜5 です。
  • ゲームの物はすべて Z = 0 の上で動かします。