この記事はFlare Engineというテンプレートアセットを使った記事になります。
3つのレイヤーで多重スクロールする背景を設定
2D横スクロールアクションゲームによくある背景演出として、近いものほど移動が早く遠いものほど移動が遅い事で奥行きを表現することがある。
それを設定していきたい。
スクロールに使う画像オブジェクトの準備
まずはHierarchyに空のオブジェクトを作り、その中に3つの空の子オブジェクトを作る
親オブジェクトを「ParallaxLayers」子オブジェクトをそれぞれ「Layer1」「Layer2」「Layer3」とでもしておこう。
今回のように単なる装飾としての背景に使用するオブジェクトのレイヤーは、Ignore Raycastにしておこう。(背景に対してなんらかの当たり判定を必要とする場合はこの限りではない)
レイキャストによるヒット判定を受けないため、プレイヤーの動作（移動、攻撃判定など）に影響を与ず不要な処理を回避した上、クリックやタップで誤って選択されるのを防げます。
子オブジェクトにも反映するかを確認されるので「Yes, change children」でOK
Layer1とかもIgnore Raycastになります。
スプライトの設定
それぞれのレイヤーに使用するスプライトを設定していきます。
InspectorのAdd ComponentでSprite Rendererを追加。
下記のように任意の画像を設定します。
Sorting LayerをBackgroundにして並び順を指定しましょう。
このようになりました。
私のLayer2の背景は横方向に無限ループする予定なのでので幅が足りなくても今はこれでOKｗ
Safire2DCameraコンポーネントの設定
多重スクロールする背景を実現するのはメインカメラ等に設定しているSafire2DCameraコンポーネントになります。
現時点の準備としてSafire2DCameraのFollowをTargetにしてPlayerオブジェクトを指定しておきましょう。
Safire2DCameraの追加はFlare Engineを使うときに最初にやることの一つです。
以前の記事を参考にしてください。
MODULEの追加
Safire2DCameraコンポーネントの「MODULE +」をクリックして「Parakkax」を追加してください。
Safire2DCameraに「Infinite Parallax」が追加されます。
Infinite Parallaxをアクティブ(項目左の灰色のヘッダをクリックすると初期MODULEの「Follow」みたく緑色になる)にします。
クリックすると「+」が表示されるので、背景に表示したいレイヤー分「＋」を押して追加する。
「None」となっている箇所にそれぞれレイヤーをドラッグアンドドロップして指定する。
横の数字を入力する欄はそれぞれXとYとなっているが、0～1f(小数点数)を入力する。
1に近いほどスクロールと共に移動するレイヤーとなり、逆に0に近いほどスクロールしても動かない。
XとYはそれぞれその方向にどれだけ動くかということ。
遠い背景を表現したい場合は0に近く、近い背景を表現したい場合は1に近い数字を入力すればよい。
「月」などの遠いものは動かなくてもいいくらいかもしれませんね。
再生してみましょう。
Sceneビューをみると、カメラの範囲外にも左右一つ分オブジェクトが描画されていることがわかります。
私の場合カメラの範囲に足りてなかったLayer2もカメラの範囲からさらに1つ分ずつレイヤーが余計に描画されましたね。
プレイヤーが移動しても、この背景を余計に描画することで無限ループを実現しています。
実際プレイヤーを動かすと多重スクロールが完成しています。
コメント