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

ダークモード

第6回 流れる星空 ​

この回でつくるもの：パーティクルで星を作り、右から左へ流します。遠くの星はゆっくり、近くの星は速く流して、宇宙を飛んでいる感じを出します。岩も背景に流します。

この回で学ぶこと ​

  • Particle System（パーティクル）で、たくさんの小さな粒を出す
  • パーティクルのモジュール（Shape・Emission・Velocity over Lifetime・Renderer）の使い方
  • パーティクル用のマテリアルを作る
  • 多重スクロール（速さのちがう背景を重ねて奥行きを出す）
  • BackgroundScroller で、画面の左に出たものを右へもどす

前回までのふりかえり ​

前回は、弾のプレハブを作り、Z キーか Space キーで弾を連射できるようにしました。 PlayerShooter と Bullet の2つのスクリプトができています。 今のままだと背景がまっ暗で、自機が進んでいるように見えません。今回は背景を動かします。

1. 遠くの星 Stars_Far を作る ​

1-1. パーティクルとは ​

パーティクル（Particle） は「粒」という意味です。小さな絵をたくさん出して、星・煙・火花・爆発などを表現します。 Unity では Particle System というコンポーネントで作ります。

1-2. Particle System を置く ​

  1. Hierarchy の何もないところを右クリックします。
  2. Effects > Particle System を選びます。
  3. できた Particle System の名前を Stars_Far に変えます。
  4. Inspector の Transform で Position を (10, 0, 10) にします。
  5. Rotation を (0, 0, 0) にします（最初は X が -90 になっているので、0 に直します）。

Scene ビューで、白い粒がふわふわ出ているのが見えます。これをこれから星に変えていきます。

ヒント

このゲームでは「すべてのゲームオブジェクトは Z = 0 の上を動く」ルールでした。でも星は当たり判定のない 飾り なので、Z を 10 にして奥に置きます。カメラは Orthographic なので、奥に置いても大きさは変わりません。自機や敵より うしろ に表示されるようになります。

1-3. メインの設定（いちばん上のモジュール） ​

Particle System の Inspector は、いくつもの「モジュール（部品）」に分かれています。いちばん上の Particle System（名前のついた見出し）が、全体の設定です。

  1. Hierarchy で Stars_Far を選びます。
  2. Inspector の Particle System の見出しを開きます。
  3. 次の表のとおりに値を入れます。
項目値意味
Duration201回分の長さ（秒）
Loopingオンくり返し出し続ける
Prewarmオン始まったときに、もう星が画面いっぱいにある状態にする
Start Lifetime201つの星が消えるまでの秒数
Start Speed0生まれたときの速さ（あとで別のモジュールで動かす）
Start Size0.03 と 0.08（下の手順）星の大きさ
Start Color少し暗い白（灰色っぽい水色）星の色
Simulation SpaceWorld星を世界の座標で動かす
Max Particles300同時に出せる星の最大数

Start Size を「ランダム」にする手順

  1. Start Size の欄の右はしにある小さな ▼ をクリックします。
  2. Random Between Two Constants を選びます。
  3. 欄が2つになるので、左に 0.03、右に 0.08 を入れます。

こうすると、星の大きさが1つずつちがって、本物の星空らしくなります。

先生へ

Prewarm は「1回分（Duration）の時間を先に進めた状態」から始める設定です。Duration が Start Lifetime より短いと、始まったときに画面の右半分にしか星がない、ということが起きます。そのため Duration と Start Lifetime を同じ 20 にしています。

1-4. Emission（どれくらい出すか） ​

  1. Emission モジュールの見出しを開きます（チェックが入っていることを確かめます）。
  2. Rate over Time を 10 にします（1秒に10個の星が生まれます）。

1-5. Shape（どこから出すか） ​

今は円すいの形から粒が出ています。これを「画面の右はしの、縦に長い四角」から出るようにします。

  1. Shape モジュールの見出しを開きます。
  2. Shape を Box にします。
  3. Scale を (1, 11, 1) にします。

縦の長さ 11 は、画面の高さ（-5〜5 で 10）より少し大きくしてあります。これで画面の上から下まで、まんべんなく星が生まれます。

1-6. Velocity over Lifetime（左へ流す） ​

Start Speed を 0 にしたので、今の星は生まれた場所から動きません。左へ流しましょう。

  1. Velocity over Lifetime モジュールの左のチェックボックスをオンにします。
  2. 見出しをクリックして開きます。
  3. Linear の X を -1、Y と Z を 0 にします。
  4. Space を World にします。

X がマイナスなので、星は1秒に1ずつ 左 へ進みます。右はし（x = 10）から左はし（x = -10）まで、20秒かけて流れていきます。

▶ Play ボタンを押して、星がゆっくり左へ流れていればOKです。確かめたら ▶ を押して止めます。

ヒント

左へ流すやり方は、ほかに「Shape の Rotation で Box を回して、左向きに出す（Start Speed を使う）」方法もあります。どちらでも同じように流れます。この教材では、数字の意味がわかりやすい Velocity over Lifetime を使います。

ここで Ctrl+S（Macは Cmd+S）でシーンを保存しましょう。

2. 星のマテリアルを作る ​

2-1. マテリアルを作る ​

今の星は、もやっとした粒か、四角に見えているかもしれません。星らしく、丸くて明るい粒にします。

  1. Project ウィンドウで Assets/_Game/Materials フォルダを開きます。
  2. 右クリックして Create > Material を選びます。
  3. 名前を Mat_Star にします。
  4. Mat_Star を選び、Inspector の Shader の欄をクリックします。
  5. Universal Render Pipeline > Particles > Unlit を選びます。

2-2. マテリアルの設定 ​

  1. Mat_Star を選んだまま、Surface Type を Transparent（半透明）にします。
  2. Blending Mode を Additive（重なると明るくなる）にします。
  3. Base Map の左にある小さな丸のボタン（◎）をクリックします。
  4. 出てきた窓の検索欄に Default-Particle と入力し、出てきた丸い絵をダブルクリックします。
  5. Base Map の右の色が白になっていることを確かめます。

ヒント

Default-Particle が見つからなくても大丈夫です。Base Map が空のままだと、星が小さな四角になりますが、星はとても小さいので、ほとんど気になりません。

2-3. Renderer にマテリアルを入れる ​

  1. Hierarchy で Stars_Far を選びます。
  2. Inspector のいちばん下のほうにある Renderer モジュールを開きます。
  3. Project の Mat_Star を、Renderer の Material の欄へドラッグ＆ドロップします。
  4. Render Mode が Billboard（いつもカメラの方を向く）になっていることを確かめます。
  5. Ctrl+S（Macは Cmd+S）でシーンを保存します。

3. 近くの星 Stars_Near を作る（多重スクロール） ​

3-1. 多重スクロールとは ​

電車の窓から外を見ると、近くの電柱はビュンと流れ、遠くの山はゆっくり動きますね。 ゲームでも、遠くのものはゆっくり、近くのものは速く 動かすと、奥行きが出ます。これを 多重スクロール といいます。

3-2. Stars_Far をコピーする ​

  1. Hierarchy で Stars_Far を選びます。
  2. Ctrl+D（Macは Cmd+D）を押して複製します。
  3. できた Stars_Far (1) の名前を Stars_Near に変えます。
  4. Inspector の Transform の Position を (10, 0, 8) にします。

3-3. 速く・大きく・明るくする ​

Stars_Near を選んだまま、次のように変えます。

モジュール項目Stars_FarStars_Near
Particle SystemDuration206
Particle SystemStart Lifetime206
Particle SystemStart Size0.03〜0.080.1〜0.15
Particle SystemStart Color少し暗い白まっ白
Particle SystemMax Particles300100
EmissionRate over Time105
Velocity over LifetimeLinear X-1-4

近くの星は1秒に4進むので、20 の距離を約5秒で流れます。少し長めの 6 秒を寿命にしています。

3-4. 動作確認 ​

▶ Play ボタンを押して、次のようになればOKです。

  • 始まった瞬間から、画面全体に星がある
  • 小さくて暗い星はゆっくり、大きくて明るい星は速く、左へ流れる
  • 自機が星よりも手前に見える

確かめたら ▶ を押して止め、Ctrl+S（Macは Cmd+S）で保存します。

4. 岩を流す BackgroundScroller ​

4-1. 岩を置く ​

星だけでなく、宇宙に浮かぶ岩も流してみましょう。岩は当たり判定のない飾りです。

  1. Hierarchy の何もないところを右クリックして Create Empty を選びます。
  2. 名前を Rocks にし、Position を (0, 0, 0) にします（岩をまとめておく入れ物です）。
  3. Project ウィンドウで Assets/ThirdParty/KenneySpaceKit を開きます。
  4. rock_largeA を、Hierarchy の Rocks の上へドラッグ＆ドロップします（Rocks の子になります）。
  5. 子になった岩の名前を Rock1 に変えます。
  6. Rock1 の Position を (4, 4, 5)、Scale を (2, 2, 2) くらいにします。

ヒント

ファイル名がちがったら、Project ウィンドウのプレビューを見て、好きな岩を選んでOKです。

先生へ

Orthographic カメラでは、Z を奥にしても小さくはなりません。Z は「どちらが手前に見えるか」を決めるだけです。遠くにある感じを出したいときは、Scale を小さくして、ゆっくり流す ように伝えてください。岩は自機の動きのじゃまにならないよう、画面の上下のはしに置くのがおすすめです。

4-2. BackgroundScroller スクリプトを作る ​

  1. Project ウィンドウで Assets/_Game/Scripts フォルダを開きます。
  2. 右クリックして Create > Scripting > MonoBehaviour Script を選びます。
  3. 名前を BackgroundScroller にして Enter を押します。
  4. ダブルクリックしてエディタで開き、中身をすべて消して次のコードを書きます。
csharp
using UnityEngine;

// 背景の飾りを左へ流し、画面の左に出たら右へ戻す
public class BackgroundScroller : MonoBehaviour
{
    public float speed = 1f;        // 流れる速さ
    public float resetX = -14f;     // ここより左へ行ったら
    public float startX = 14f;      // ここへ戻す

    void Update()
    {
        transform.Translate(Vector3.left * speed * Time.deltaTime, Space.World);

        if (transform.position.x < resetX)
        {
            Vector3 pos = transform.position;
            pos.x = startX;
            transform.position = pos;
        }
    }
}

書けたら保存して Unity にもどります。

4-3. コードの解説 ​

行意味
Vector3.left左向き (-1, 0, 0) の矢印
Space.World自分の向きではなく、世界の向き を基準に動かす
if (transform.position.x < resetX)もし x が -14 より左になったら
pos.x = startX;x だけを 14（画面の右の外）に書きかえる
transform.position = pos;書きかえた位置をもどす
  • 岩のモデルは、見た目をよくするために回転させることがあります。Space.World を付けておくと、岩がどんな向きでも、まっすぐ左へ流れます。
  • pos に位置をコピーして、x だけ書きかえてもどすやり方は、第4回の Clamp と同じです。transform.position.x = 14; と直接書くことはできないので、この形をおぼえておきましょう。
  • 画面の左はしは約 -8.9 です。-14 はそれより外なので、岩が消える（ワープする）瞬間はプレイヤーには見えません。

4-4. 岩に付ける ​

  1. Hierarchy で Rock1 を選びます。
  2. Add Component をクリックして、BackgroundScroller を検索して付けます。
  3. Speed を 1.5 にします。

4-5. 岩を増やす ​

  1. Hierarchy で Rock1 を選び、Ctrl+D（Macは Cmd+D）で複製します。
  2. 名前を Rock2 にします。
  3. Position を (12, -4, 5)、Scale を (1, 1, 1) にします。
  4. Rotation を (0, 0, 30) など好きな角度にします（いろいろな向きにすると自然に見えます）。
  5. Background Scroller の Speed を 0.8 にします（小さい岩はゆっくり＝遠くにある感じ）。
  6. Ctrl+S（Macは Cmd+S）でシーンを保存します。

4-6. 動作確認 ​

▶ Play ボタンを押して、次のようになればOKです。

  • 岩が左へ流れていく
  • 岩が画面の左へ消えたあと、しばらくすると右からまた出てくる
  • 小さい岩はゆっくり、大きい岩は速く流れて、奥行きがある

よくあるまちがい

岩に BackgroundScroller を付けたのに動かないときは、Rocks（親）ではなく Rock1（子）に付いているか確かめましょう。親の Rocks にはスクリプトを付けません。

チャレンジ課題 ​

  • 3段目の星 Stars_Mid を作って、3重スクロールにしてみよう（速さは -2 くらい）
  • 星の Start Color を少し青や黄色にして、色のちがう星をまぜてみよう
  • 岩を3つ、4つと増やして、速さと大きさをばらばらにしてみよう
  • ヒント：Kenney Space Kit には、岩以外にも隕石やステーションなどのモデルがあります。好きなものを流してみよう

つまずきポイント ​

こんなときはここを確認
星が上へ飛んでいくStars_Far の Rotation を (0, 0, 0) にしたか。Start Speed が 0 か
星がまったく動かないVelocity over Lifetime のチェックボックスがオンか。Linear X がマイナスか
始まったとき、画面の右側にしか星がないPrewarm がオンか。Duration と Start Lifetime が同じ数か
星がピンク色になるMat_Star の Shader が Universal Render Pipeline > Particles > Unlit か
星が自機より手前に見えるStars_Far・Stars_Near の Position の Z が 10 や 8（奥）になっているか
岩が戻ってこないReset X が -14、Start X が 14 か。マイナスの付け忘れに注意

まとめ ​

  • Particle System は、モジュールを組み合わせて、たくさんの粒を思いどおりに出せる
  • 遠くはゆっくり、近くは速く動かすと、奥行きが出る（多重スクロール）
  • 画面の外へ出たら反対側へもどすと、少ない数で、ずっと続く背景が作れる
  • Space.World を付けると、向きに関係なく世界の左へ動かせる