背景をオートスクロールさせる2つの方法

スクロール用アイキャッチ画像

今回は背景のオートスクロールを作ってみましょう。シューティングには欠かせない要素の一つですね。ぜひマスターしていろいろ応用をしてみてください。

Construct 3 に触るのがはじめて!というひとはまずは以下の記事を読んで基本を学んでいただけたらと思います。

メンタルハックWEB
Construct 3 の基本操作を学ぶ(1)~画面の見方と背景の設置 | メンタルハックWEB この記事では、Construct 3 のビギナーズガイドを参照しながら、ゴーストシューターという簡単なゲームを一緒に作っていきます。 https://www.construct.net/en/tutorials/...
Menu

スクロール実装の事前準備

新しいプロジェクトを開き、ビューポートとレイアウトを同じ大きさにしておきます。素材の大きさに合わせると楽でしょう。今回は 600×900 の縦長レイアウトです。

移動方向へ2倍に大きくした背景画像( 600 × 1800 )を用意し、bg と名前を付けておきます。粗雑なものでよければ、以下をお使いください。

背景画像を Tiled Background で配置します。そしてビューポート内に上が余るように配置しておきましょう。今回は、下の方向に進んでいくスクロールを作りたいのでそうなります。

くり返しになりますが、今回は 600 × 900 のビューポートに対して、縦に2倍大きい 600 × 1800 の画像を上に余るようにおいています。bg の現在の座標は 0, -900 ということになります。

バレットビヘイビアを使う方法

背景に置いた画像に Bullet ビヘイビアをつけて移動させ、途切れそうになったら元の位置に戻してあげる、というのがこの方法です。

bg に bullet をつけてスピードを 200 に、Set angle のチェックを外します。これでレイアウト側の準備は完了。

まずは以下のイベントで、Bullet の向きを下方向に変えてあげます。

条件:System → Every tick

アクション:bg → Set angle of Motion → 90

ここで一度プレビュー ( F5 ) してみてください。背景が流れていきますが、端までいくと真っ白画面になってしまいますね。

ということで、以下のイベントで、bg をスタート地点に戻します。

条件:bg → Compare Y → ≧ Greater or equal, 0

アクション:bg → Set Y → – 900

bg のY座標が0を通過したとき、bg の Y 座標を – 900 にセットするということです。

-900 はスタート時のY座標でしたね。下に動かしてもとに戻す、という単純なことの繰り返しで背景スクロールをさせています。とりあえず問題なく動作すると思います。

グローバル変数を利用する方法

この方法はちょっとトリッキーです。

まずはグローバル変数を作っておきます。名前は bgSpeed としておきましょう。

※今回は bg に Bullet を付けません。先ほどの方法を試した方は Bullet ビヘイビアを削除しておいてください。

bg を動かすために以下のイベントを作ってください。

条件:System → Every tick

アクション:bg → Set Y → bg.Y + bgSpeed*dt

とりあえずこれでスクロールされていると思います。

動く仕組みなんですが日本語で言うと「毎秒、 bg の現在のY座標に bgSpeed を足す」ということです。これでもわかりにくいかもしれませんね。

最後の *dt は毎秒ということを表しています。なので bgSpeed*dt は秒速〇ピクセルというニュアンスとも取れるのです。

ループさせるには先ほどと同じイベント(bg を出発地点に戻すイベント)を追記すればOKです。

グローバル変数を使ったこの方法の方が、今後ステージの開始や終了時にスクロールスピードを調整するときに扱いやすいかもしれません。ちょっと複雑に見えますが、パッケージとして覚えてしまいましょう。

Menu