Scratchから始めるシューティングゲームの作り方④〜スクロールしながら動く背景を作成する

2022/08/13

Scratchから始めるシューティングゲームの作り方③〜敵の弾・敵の動きを改良する

Scratchから始めるシューティングゲームの作り方⑤〜長い背景の作り方と敵の出現パターンを設定する

Scratchでシューティングゲームを作成してみる特集の４回目です。

今回は、シューティングゲームで良く見る「動く」背景を追加して、より動いている感じにゲームを改良してみます。

なお、この記事は前回までのプロジェクトをそのまま利用します。

改造前プロジェクト｜シューティングゲーム③

いきなりこちらの内容に取り組んでいただくと、少々チンプンカンプンかもしれませんので、前回の記事を良く理解しておきましょう。

Scratchから始めるシューティングゲームの作り方③〜敵の弾・敵の動きを改良する

Scratchのシューティングゲームで敵の動きをより深く作り込んでいきます。

【Pスクール厳選】Scratchを学べるオンライン＆駅前プログラミングスクール５選

背景をスプライトとして使う方法

横に自動でスクロールする背景で、基本となるパターンは、簡単な一枚の写真の端と端をつないで連続している背景にするテクニックです。

まずは、シューティングゲームを作成するなら、まずこのテクニックを習得しておきたいところです。

最初の練習は一番シンプルな背景を使って、背景を動かすということをやってみましょう。

サンプルから、『Blue Sky』の画像を選択してみます。

ここで、Scratchの背景を動かすという場合、この「背景」には大きな問題があります。

開く/閉じる

            
            1. Scratchの仕様で、基本として背景の位置は固定
2. 背景とは、どのスプライトよりも奥側に描かれる画像(絵)

この背景のままだと、シューティングゲーム用のスクロールする背景は作れないので、

背景のスプライト化

を行うことで、動かすことができるようになります。

[描く]からスプライトを新規作成

し、

[ステージ] > [背景]

に移り、先程の背景画像を選択したら、そのままマウスでドラックアンドドロップして、スプライトへ背景を移します。

背景の画像は邪魔なので、削除しておきましょう。

とりあえず背景のスプライトに問題がないか、下のブロックを背景のスプライトに追加して、ゲームを起動してみます。

...すると、背景のスプライトの画像を一番後ろの層へ移動したにも関わらず、ハートのライフスコアが隠れてしまいました。

ハートのライフスコアを作成した以下の記事でも解説していましたが、このハートのライフスコアは、

「スタンプ機能」

で作成していたことを思いだしてください。

Scratchから始めるシューティングゲームの作り方①〜最初のプロジェクトを作成

シューティングゲーム作成を通じてScratchでプログラミングを学習していきましょう。

スタンプは一見、便利な機能ですが、その機能は

背景の画像に上書きして表示している

ことに過ぎません。

つまり、背景と一緒で、スプライトの画像より前の層に表示されること無いため、「背景のスプライト化」をしてしまうと、基本的にスタンプは利用することができません。

そこで重要となるのが、

『スプライトのレイヤー(層)の設計』

という考え方です。

スプライトのレイヤーの設計

Scratchプログラミングで、背景を除いたすべてのスプライトが表示されるときに、どの順序で表示が優先されるかは、裏側で動くシステムのプログラムによって、自動で番号が割り振られています。

背景はもともと、もっとも奥のレイヤーに配置されて、その上がスプライトのレイヤー０、さらにその上がレイヤー１、...というように、スプライト１つにレイヤー１つが対応するように並べられることで、プログラムの表示の優先順位が決定されているわけです。

このレイヤー番号を、システム任せにするのではなく、

“できるだけ”

自分の決めたレイヤーで描画することを、ここでは

「スプライトのレイヤー設計」

と呼ぶことにします。

“できるだけ”

と表現したのは、スプライトからクローンしたスプライトも、当然のことながら、レイヤー番号が個別に割り振られてしまうので、クローンの数まで考慮したレイヤー設計は不可能に近い、という意味を込めています。

そこで基本方針として、ブロックコードにクローンを使っているものは、できるだけ優先順位を下げて、番号の高いレイヤーにもっていきます。

これまでの記事で、このScratchシューティングゲームのプロジェクトには合計９つのスプライトを作り込んできました。

一旦、ここで、各スプライトの名前を以下のように整理してみます。

この各スプライトには、以下のように優先順位(レイヤー番号)を割り振ってみます。

開く/閉じる

            
            レイヤー0: 背景
レイヤー1: プレーヤー
レイヤー2: ライフ
レイヤー3: 弾1
レイヤー4: 弾2
レイヤー5: 弾3
レイヤー6: ビーム
レイヤー7: 敵
レイヤー8: 敵の弾

現在のプログラムでは、背景のスプライトの表示順序が必ずどのスプライトよりも奥側に来る、という１点だけが重要になってきます。

なので、

レイヤー0:背景

以外の順序は、まだこの段階ではさほど重要ではないので、適当に決めてもらってもOKです。

背景

のスプライトのブロックコードを以下のようにします。

※この場合、

[最背面へ移動する]

ブロックで、レイヤー０へ移動するため、

[0層手前に出す]

は無くても良いです。

これで、プログラム実行時に、

背景

がレイヤー０になるように指定できます。

同様の考え方で、

プレーヤー

にレイヤー１を指定します。

以降、各スプライトの初期化ブロックコード部分に、同じようなやり方で、レイヤーの番号を割り振ってみてください。(※

背景

と

プレーヤー

以外のスプライトは省略します。)

とにかく各スプライトのレイヤーの設計を決めたので、次は「スタンプ」を使っていたスプライトを、「クローン」で作り直す必要があります。

ここでは、スタンプを使っていた

ライフ

のスプライトだけですので、このブロックコードを大幅に修正して、クローンを使ったブロックコードに置き換える必要がありそうです。

なお、クローンを使ったプログラミングは、スタンプほど簡単ではありません。

毎回のごとく、出てきますが、クローンとローカル変数を使った、クローンに識別番号を与えるやり方を良く理解しておいてください。

【Scratch入門〜中級編】少しだけ難しいスプライトのクローンの高度な利用法

Scratchの中級者向けのテクニックとして、クローンの特殊な使い方を解説します。

このテクニックに従って、

ライフ

のスプライトに、ローカル変数・

_残り

を追加します。

このローカル変数・

_残り

がハートのクローンの識別番号となります。

あとは、グローバル変数・

残り

が減っていくときに、

_残り

の番号にマッチしたクローンが削除されるようにすれば良い、と考えて、以下のようなブロックコードに組み直します。

ここで少し注意が必要なのが、

[敵にヒット]を受け取ったとき

イベントが、クローンされたハートのスプライトにも反映されてしまうことです。

変更前には「プレーヤーへのダメージを１回受けたら、ハートのスプライトも１減る」というロジックだったので、ハートのスプライトのコードに

[残りを-1ずつ変える]

ブロックを入れていました。

ここから「クローン」を使うやり方に変えると、イベントもオリジナルのスプライトや各クローン別々で受け取るようになってしまうので、「プレーヤーへのダメージを１回受けたら、ハートのスプライト＋各クローンの数だけ減る」ことになってしまいます。

そこで、ハートの

[敵にヒット]を受け取ったとき

イベントから、

残り

を減らすブロックを削除します。

変わりに、少し面倒ですが、ハートのクローンの影響を受けない

敵

と

敵の弾

のクローンのコードへ、このブロックを移します。

こうすることで、ライフスコアの表示が、背景に隠れないような表示にすることができました。

【Pスクール厳選】Scratchをしっかり学ぶためのオススメ書籍まとめ

背景を一定の速度でスクロールさせる

では、背景をスプライト化しましたので、この背景を右から左に流れるような効果を付けてみましょう。

まず、

背景

のスプライトにx座標を記録できるように、ローカル変数・

_背景のx

を作成します。

このローカル変数を上手く使って、背景が右から左に流れる動くを繰り返すことができるようにしましょう。

まずは簡単なところで、背景を左(xが減る方向)にスクロールさせて、背景が画面枠から見切れる手前くらい(

x < -460

程度)で、再びこのスプライトを右側へめいいっぱい戻すことを繰り返す処理をさせてみましょう。

当然、これを実行すると、以下のように動くことになります。

背景が動くようにできたのは良しとして、背景が動くと、その動きの繰り返しの間に、ちょうど画像１枚分の空白部分ができてしまうことになります。

ということで、この問題を手っ取り早く解決するには、

クローンでもう一枚同じ画像をコピーして、１枚分の右にずらす

と上手く行きそうです。

先程のブロックコードをさらに以下のように改良してみます。

今回は、

背景のオリジナルのスプライト

と

背景のクローン

の２つを交互に同じ動きをさせるので、

[背景を繰り返す]

定義ブロックで、ひとまとめにしています。

ローカル変数・

_背景のx

は、同じ名前の変数でも、

背景のオリジナル

と

背景のクローン

でそれぞれ独立した変数として利用することができます。

クローンを生成する直前に

[_背景のxを460にする]

で初期化し、初期位置を右側の画面枠より外にずらしています。

クローンを作成後、オリジナルのスプライトには

[_背景のxを0にする]

で、ローカル変数をもとに戻しておきます。

これで、背景を移動したときの空白部分ができないようにできるため、背景がずっと右から左に流れていくように見えるでしょう。

【Pスクール厳選】Scratchを学べるオンライン＆駅前プログラミングスクール５選

横に長い画像を使った背景を使う

こちらは予告編ですが、Scratchシューティングゲームでも、本格的な攻略ステージを作成する場合、先程の一定の風景の繰り返しは使わず、専用の横に長い背景画像を使ったスクロールを使うことになると思います。

この長い画像を使ったスクロール背景をどのようにScratchゲームに仕込んでいくかは、次回の記事で詳しく取り上げていきます。

【Pスクール厳選】Scratchをしっかり学ぶためのオススメ書籍まとめ

まとめ

以上、今回のScratchシューティングゲームの改造内容をひとまとめにしたものは以下のようになります。

背景が動いていると、相対的にプレーヤーが動いているような臨場感のある作品になります。

また、背景は攻略ステージを演出する上で、なくてはならない表現のゲーム要素になるので、シューティングゲームでも非常に大切なゲームパーツになります。

ここでもクローンのテクニックを少々多めに利用しましたので、少し難しく感じられたかもしれませんが、一つ一つじっくりと消化しながら理解を深めていってください。

記事を書いた人

記事の担当:taconocat

ナンデモ系エンジニア

これからの"地方格差"なきプログラミング教育とは何かを考えながら、地方密着型プログラミング学習関連テーマの記事を不定期で独自にブログ発信しています。

カテゴリー

記事のおしながき

【Pスクール厳選】Scratchを学べるオンライン＆駅前プログラミングスクール５選