今回はUnityで多重スクロールする背景を作ることができる無料アセットを紹介します。
👇完成形はこんな感じ👇
概要
無限スクロールに対応した視差効果のある背景を作成できちゃいます。しかもアセットの導入のみでコードを書く必要もないので、１０分程度で作ることができます。ぜひ最後までご覧ください！
視差効果とは？
視差効果とは、複数の背景レイヤーを異なる速度でスクロールさせることで、奥行き感や立体感を演出する技術です。前景のレイヤーは速く動き、背景のレイヤーはゆっくり動くことで、視覚的に距離感が生まれます。
この手法は、2Dゲームやアニメーションでよく使用され、シーンに深みを加えることができます。
作り方
それでは実際に作り方を解説します。まずはAssetStoreで「Easy Parallax」を入手。
（Parallaxは日本語で「視差」です）
導入方法
導入方法を解説します。（わかる方は飛ばしてください）
Unityのプロジェクトを立ち上げます。今回はライティング調整のために2DURPプロジェクトを使用します。プロジェクトが開いたら、[WIndow] > [Package Manager]からパッケージマネージャーを開きます。（Add to My AssetしたときにOpen In Unityを選択しても同じようにインポートできます）
PackagesをMyAssetsに設定したのを確認してから、「Easy Parallax」と検索。
Downloadボタンを押してからImportボタンをクリック。（筆者は既にダウンロード済み）
全てのチェックボックスにチェックが入っているのを確認して、再びImportボタンをクリックします。
デモシーンの実行
インポートが完了したら[Assets] > [Scripts] > [EasyParallax] > [Demo]の中にある「ParallaxTest」という名前のシーンをを開きます。
実行してみましょう。
視差効果のある多重スクロールができています。なので言ってしまえばあとは素材を差し替えるだけです。
背景素材の導入
今回は下の無料アセットを使用してみます。
ここから下の内容は素材によっても異なりますので個人で調整してください。
こちらも先ほどと同じ手順でPackageManagerから、もしくはOpenInUnityからインポートします。
背景を追加したいシーンを開いてインポートした背景素材をヒエラルキータブにドラッグ＆ドロップしていきます。（おそらくこの方法が一番速い）👇動画参照
全ての背景素材をシーン内に追加出来たらレイヤーの設定を行います。Layerの管理方法は各個人によっても異なると思いますので、参考までにしてください。
[BackGround]という名前のレイヤーを追加し、Order In Layerを調整します。
続いて背景のサイズ調整を行います。
筆者と同じ背景素材を使用する場合は下の数値を参考に設定してください。
【画面サイズ】1280 × 720
【背景素材のPixel Per Unit】52
【背景素材のY座標】2.55
【Global Light 2DのIntensity】2.5
上の値で設定するとこのようになります👇
以上で素材の最低限の設定は完了です。
それでは本題の背景スクロールに移ります。
多重スクロールの実装
まずはすべての背景素材それぞれに[SpriteMovement]コンポーネントと[SpriteDuplicator]コンポーネントを追加してください。
まずは[SpriteMovement]コンポーネントから設定を行います。
SpriteMovementコンポーネントには２つのパラメーターがあります。
MovementSpeedTypeにはMoveSpeedType型のScriptableObjectを設定することができます。
[Assets] > [Scripts] > [EasyParallax] > [Demo] > MovementSpeeds の中にすでに４つのMoveSpeedTypeがあります。せっかくなのでこれらを利用して作りましょう。
どれでもいいのでMoveSpeedTypeをクリックして中身を見てみましょう。
設定できるプロパティは「Speed」のみです。Speedはスクロール速度を管理する変数です。つまり同じMovementSpeedTypeを複数のレイヤーに持たせておけばすべてSpeedが同じになるので管理がしやすいわけですね。
この素材はちょうど４種類のグループに分けられます。同じ速度で動いてほしいレイヤーをグループ分けして見やすくしました👇
あとはそれぞれのグループの名前の通りにMovementSpeedTypeをアタッチしましょう💪
全てのレイヤーにアタッチできたら実行してみましょう。
補足
完成しましたが、まだSpriteDuplicatorについて解説していません。
今回はの場合は初期設定のままうまくいきましたが、そうでない人もいると思いますので解説します。
SpriteDuplicatorについて
SpriteDuplicatorは無限スクロールに対応させるためのスクリプトです。
このコンポーネントのプロパティの内容をまとめました。
- Pool Size : 複製する背景の枚数。指定した枚数が繰り返しスクロールされる。
- Sprite Reposition Index : 画面外に出た背景を右に再配置させるときの基準となる数値。１なら背景が１枚出た瞬間に右に再配置される。
- Sprite Reposition Correction : 分からなかったため、ChatGPTの回答を貼り付けておきます。申し訳ございません。
初期値の背景の動きをSceneビューで見るとこのようになっています👀
左にスクロールしていった背景が背景画像２つ分画面外にでると右に再配置されます。背景は5つ分あり、それが繰り返しスクロールしている構造です。
SpriteMovementについて
SpriteMovementコンポーネントについても補足しておきます。
さっきは無視していたSpeedという変数がありますが、この変数は無視してOKです👌
コードの中身を見たところMovementSpeedType内のSpeedが優先的にスクロール速度に代入されるため、MovementSpeedTypeを設定している場合は数値を変更しても何も変化はありません。
逆に言うとMovementSpeedTypeを設定していない場合はこの数値がScrollSpeedに適用されるので注意してください。
ただ個人的にはまとめて管理できる点からMovementSpeedTypeで管理することを推奨します。
また、背景以外のスクロールもこのコンポーネントで制御できます。例えば👇のゴブリンように（この場合SpriteDuplicatorは必要ありません）
解説については以上です。
まとめ
今回はEasyParallaxという無料アセットで視差効果のある多重スクロールを実装する方法について解説しました。
ノーコードでこんなにきれいなスクロールが実装できるなんてすばらしいですよね。
参考になった方はぜひ読者登録＆ブックマーク登録お願いします👍
この記事に対する感想やご意見などのコメント💬もお待ちしております！
最後まで読んでいただき、ありがとうございました！
