この記事のポイント
スプライトがずっと動いているように見せるテクニック:背景ループを説明します。
はじめに 横スクロールのシューティングゲームを作ろう!
レトロゲームの王道と言えば、横スクロール型のシューティングゲームですよね。
有名なところで言うと「グラディウス」があります。
スクラッチのプログラミングでは、このような横スクロール型のシューティングゲームも比較的簡単に作ることができます。
このシリーズでは、横スクロール型シューティングゲームをイチから作っていく過程を紹介していきます。
参考記事
スクラッチをイチから始めたい方は以下の記事を参考にしてください。誰でも簡単にスクラッチを始めることができます。
完成作品
今回の完成作品は以下のようになります。緑色の旗ボタンをクリックするとプログラムが実行されます。背景が永遠に横にスクロールされて、ろぼてくがずっと前に進んでいるように見えます。
完成プログラム
完成プログラムは以下のようになります。
新規追加スプライト
<ろぼてく>
ろぼてくが歩いて前に進んでいるように見せるためのプログラムです。
<背景>
背景を永遠にループさせるためのプログラムです。今回は背景もスプライトとして作ることがポイントです。
スクラッチプロジェクト
スクラッチプロジェクトは以下です。プログラムや画像の素材は自由に使用してもらってOKです。
作るモノ・コト(仕様)を考える
スプライト(キャラクター)が横に進み続けるように見せる⇒背景ループを使う
横スクロール型シューティングゲームの特徴と言えば、キャラクターがずっと横に進んでいく点です。
これを実現するためには、キャラクターの場所を固定して、背景をずっと横に移動させるようにすれば、あたかもキャラクターの方がずっと横に進んでいくように見えます。
自身が電車に乗っているときを想像してください。窓を見ると風景がドンドン後ろに流れていくように見えますね。それと一緒の考え方です。
仕様
今回のプログラムの仕様はこのようになります。
- ろぼてくが歩いているよう見せる。
- 背景スプライトがずっと右から左に流れていく。
事前準備(スプライトを用意する)
事前準備としてスプライトを用意していきます。
無限にループするような背景画像
今回の一番のポイントは、無限にループするように見せる背景画像を作ることです。無限にループするように見せるためには、画像の左端と右端の絵が続くようにする必要があります。
スクラッチのステージは横480px×360pxなので、そのサイズで左右がつながる画像作ります。
今回仕様する画像は以下になります。
本絵は「SUPER DIAMOND SMASH」さんのサイトからダウンロードさせていただいたものを、スクラッチのステージサイズに加工しました。
土管の左右がちょうどつながるような配置になっています。
ろぼてくの画像を用意
ろぼてくが歩いているように見せるための画像を用意します。コスチュームとして腕を振っている画像を5枚用意します。
プログラミング
では、プログラミングをしていきます。
ろぼてくを歩かせる
ろぼてくを歩いて見せるようにするにはアニメーションの考え方を使います。アニメーションの考え方は以下の記事を参考にしてください。
先ほどの画像をスプライトのコスチュームに登録します。
そして、プログラムを以下のように組みます。
背景がずっと右から左流れていく⇨背景ループ
次は背景が右から左にずっと無限に流れていくプログラムを作ります。
細かい要素に分解して考えると、以下のようにすれば望みの動きが実現できそうです。
- 初期化:背景をx⁼0、y⁼0にする。
- 以下ずっと繰り返す。
- もし背景がステージ左端(x=-460)に到達したら、背景をx⁼0に戻す。
- もし背景がx⁼0になったら、クローンを作る。
- 背景のx座標を-2ずつ動かす。
クローン背景が生成されたとき
- 初期化:クローン背景をステージ右端(x⁼480)にする。
- 以下ずっと繰り返す。
- クローン背景のx座標を-2ずつ動かす。
動作確認(デバッグ)
ここで一旦動作を確認してみましょう。
背景が右から左にずっと流れていくようになって、あたかもろぼてくがずっと右に進んでいるように見えますね。
さいごに
今回からシューティングゲームを作ろうシリーズが始まりました。第一回は横スクロールでキャラクターがずっと前に進んでいるように見せる方法を紹介しました。
次回
次回はろぼてくを縦横無人に動かせるようにします。
コメント