お電話でのお問い合わせ
電話をかける
電話をかける メニューボタン
学習コンセプトカリキュラム・料金教室紹介無料体験授業

フタバゼミ
ゼミノート

【Unity C#】背景を縦スクロールでループ

2Dのシューティングゲームでよくある、背景画像の無限スクロールをつくってみましょう。

3枚の画像を順にループさせて、背景が動いているように表現しています。

背景画像の用意

背景用の画像を用意して、Unityにインポートしましょう。

右クリック> 新しいアセットをインポート。

画像を、ヒエラルキーにドラッグ&ドロップ。

画面サイズによって、カメラの視野範囲が変わらないように、アスペクトを設定しておきました。

ここでは、16:9に設定しています。

続いて、画像のサイズを調整しましょう。

カメラの視野範囲よりも大きめに、背景を配置します。

背景ということなので、レイヤーの順序を「-1」にしておきました。



3枚の画像を並べてみる

ここから、画像を複製して3枚つくり、画面上に並べていきます。

まずは、画像の名前を「CosmoWall1」に変更しました。

これを1番目の画像とします。

カメラの視界よりも下に、移動させます。

このときの、Y座標をメモしておきましょう。

この例では、Y座標が-11です。

続いて、画像を複製していきます。

「CosmoWall2」という名前にしました。

これが2番目の画像になります。

2番目の画像を移動させて、1番目の上にピッタリくっつけましょう。

同じ手順で、「CosmoWall3」もつくり、2番目の上にピッタリとくっつけます。

1番目の画像を移動

3枚の画像を並べ終われば、1番目の画像う動かしていきます。

1番目の画像を、3番目の画像の上にピッタリとくっつけます。

この時の、1番目の画像のY座標をメモしましょう。

かなり細かい数字なのですが、ここではY座標「21.33」となっています。

メモできれば、1番目の画像を、元のところに戻します。

最初にメモしたY座標「-11」のところなので、簡単に戻せます。



縦スクロールのスクリプト

TateScroll.csという名前でスクリプトを作成しました。

これを、CosmoWall1~3にそれぞれアタッチします。

プレイしてみましょう。

下まで動いていいた画像が、ふたたび最上部にジャンプ。

これをループして、背景のスクロールを表現しています。

スクロール速度を変えたいときは、インスペクターで変更することもできます。

ヒエラルキーの画像が多くなってしまったので、空のゲームオブジェクトをつくって、まとめましょう。

ヒエラルキー > 空のオブジェクト。

GameObjectの名前を、「BackWall」という名前に変えました。

CosmoWall1~3を、BackWallにドラッグ&ドロップ。

見た目もすっきりしました。

以上、背景の縦スクロールでした。