タイルスプライトで作る流れる背景

同じ画像をタイルのように敷き詰めたい時に便利なタイルスプライトオブジェクトを利用して、流れる背景の作り方を紹介します。

こういうのです↓

超簡単にできるのに、これだけで背景に動きが出ておしゃれ(?)になるので、おすすめです😉

なお、似たようなオブジェクトで「タイルマップ (Tilemap)」オブジェクトというものもありますが、ここで使用するのは「タイルスプライト」オブジェクトなので、間違えないように注意してください。

手順その1 タイルスプライトを追加する

敷き詰めたい画像を使用して、タイルスプライトを用意しましょう。

例えば↑この画像を使って↓こんな感じです。

タイルスプライトが用意できたら、シーンへ追加して必要な大きさに引き伸ばしましょう。

手順その2 イベントでスクロールさせる

タイルスプライトの画像オフセットアクションで、画像の起点をズラすことができます。
それを利用して、画像をスクロールさせます。
※タイルスプライト自体は動きません。

フレームごとに「画像Xオフセット」アクションと「画像Yオフセット」アクションで、タイルスプライトの画像を少しずつズラします。

↑この画像では「画像Xオフセット」アクションで、1を足してズラしてます。
Y についても同様に +1 してズラしましょう。

完成したイベントがこちら↓

完成!

シーンをプレビューしてみましょう。

左上に向かって画像の星が動いていれば完成です!👏

数値を変えたり、足したり引いたりすると、動く方向や速度が変えられます。

お試しあれ😉


コメント

このブログの人気の投稿

GDevelop の「イベント」を正しく理解しよう

v5.0.0-beta104 がリリースされました。