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


※ 当ページには【広告/PR】を含む場合があります。
2022/08/15
Scratchから始めるシューティングゲームの作り方④〜スクロールしながら動く背景を作成する
Scratchから始めるシューティングゲームの作り方⑥〜ステージに敵を配置する・高度な当たり判定を設定する
合同会社タコスキングダム|TacosKingdom,LLC.

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

前の記事で、背景を動かすことに関するScratchプログラミングでの基本テクニックを詳しく取り上げてみました。

合同会社タコスキングダム|タコキンのPスクール
Scratchから始めるシューティングゲームの作り方④〜スクロールしながら動く背景を作成する

Scratchのシューティングゲーム中で一定の速度で流れるように動く背景の作ります。

今回は、前回追加したシューティングゲーム用の動く背景をさらに発展させ、より長い画像をどのように動かせばよいかを検討します。

また、背景と連動して、敵の出現ポイントなどの設定することにもチャレンジしてみます。

なお、この記事は、前回のプロジェクトを改造しながら解説しますので、ご自身でも以下のScratchプロジェクトをリミックスした上で、学習として取り組んでいただけます。

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


合同会社タコスキングダム|タコキンのPスクール【Pschool厳選】Scratchを学べるオンライン・駅前プログラミングスクール5選

横に長い背景画像を作成する

まずはScratchで長い画像を使う前に、スプライト画像として扱える画像サイズについて復習してみましょう。

合同会社タコスキングダム|タコキンのPスクール

実際にコスチュームのページで描いてみると分かりますが、Scratchの仕様で、大きな画像は描けてもせいぜい
717 x 534程度の大きさの枠に収まるように、自動で調整されてしまいます。

また、めいいっぱい大きい画像を作っても、Scratchゲームとして画面に表示されるのは、中央の枠・
480 x 360の範囲だけになります。

つまり、横に長いシーン(背景)画像をScratchのシューティングゲームで利用する場合、
480 x 360のサイズ刻みで、細かく刻んで小分けにしたものを、個別のコスチュームとして登録して使うようにするしかありません。

合同会社タコスキングダム|タコキンのPスクール

ということで、Scratchで横スクロールのシューティングゲーム用に長めの背景画像を使うには、

            
            1. 縦の長さ480で、横に長い画像を描く
2. 1で描いた画像を360の長さ刻みで切り出して、
    その画像を個別に保存する
3. 背景のスプライトのコスチュームへ順番に登録する
        
というような流れで作業を進めていきます。


合同会社タコスキングダム|タコキンのPスクール【Pschool厳選】Scratchをしっかり学ぶためのオススメ書籍まとめ

Inkscapeによる横に長いベクター画像の編集

まずは、「お絵描き」をしないと始まりません。

お自分の使い慣れたペイントツールやイラストレーターツールがあればそちらで
長さ~ x 高さ360の横長の画像を作成できれば、この節の内容はスキップ頂いてOKです。

著者的には、無料なのに十分すぎるほど高機能なイラストレーターツール・
「Inkscape」を好んで使っています。

以前の記事で、Inkscapeの基本を取り上げていましたので、基礎的な内容を知りたければ、そちらも参考ください。

合同会社タコスキングダム|タコキンのPスクール
【HTML&CSSではじめるミニゲーム作成の基本】CSSバックグラウンドスライド式のアニメーション用png画像をInkscapeで作成する

Html&CSSで単純なミニゲームやScratchゲームを作る上で欠かせない、CSSで使えるアニメーション用png画像をInkscapeで作成する方法を検討してみます。

まずは絵を描きはじめる前に、出力する画像サイズに当たりをつけるためのガイドとグリッドを設定します。

Inkscapeで新規作成し、メニューバーから
[ファイル] > [ドキュメントのプロパティ]をクリックし、ドキュメントのプロパティのダイアログボックスを開きます。

合同会社タコスキングダム|タコキンのPスクール

そこで、
[ページ]の項目から、カスタマイズの欄にある箇所の設定を変更します。

まず、単位を
px(ピクセル)に変更します。

次に幅をここでは
4800(px)、高さを360(px)で入力してみます。

値を入力したら、ページサイズが指定した画像サイズで固定されます。

合同会社タコスキングダム|タコキンのPスクール

ページの外枠だけでは、少し分かりづらいかもしれないので、さらに
[グリット]の項目から、[グリッドの単位]px[X方向の間隔]を480、[Y方向の間隔]を360、としたグリッド線を表示してみます。

合同会社タコスキングダム|タコキンのPスクール

これで、大まかな画像の分割の境界が分かると思います。

もう一点、デフォルトでは、描画点がグリッドの交点に強制的にスナップするので、以下のように
[スナップ]の設定を距離が近いときのみスナップに変更します。

合同会社タコスキングダム|タコキンのPスクール

スナップ感度は10px程度にしていますが、絵を描くときに気に入らない場合には、状況に応じて増減させて調整してください。

これで大体の当たり設定が終わったので、この枠内を目安に画像を描いてみましょう。

とりあえずは何でも良いので、今回の「長い画像の背景を動かす」という最低の目的が分かる程度の横長い風景画像を作成します。

合同会社タコスキングダム|タコキンのPスクール


合同会社タコスキングダム|タコキンのPスクール【Pschool厳選】Scratchを学べるオンライン・駅前プログラミングスクール5選

ImageMagickの画像クロップ(分割)機能を使う

次に、先程作成した、横長の画像を、480x360の固定サイズで左から順に分割・保存する工程です。

もちろん、元の画像を画像編集ソフトで、サイズを測りながらぶつ切りにして1つ1つ保存していけばよいのですが、長い画像ほど大切な作業になってしまいます。

そこで紹介するのが、
ImageMagickはコマンド入力で使える定番の画像編集のツールプログラムです。

ImageMagick一つでも、画像をコマンド一発で様々な編集・効果を行うことができます。

Linuxコマンドからは、パッケージインストールできるので、ほぼ悩まずに直ぐにImageMagickを使うことができます。WindowsへのImageMagickのインストール方法は、
こちらの記事が詳しいようです。(※Windows版のコマンドは、Magickというコマンド名になっているようです。)

ImageMagickに何ができるのかは、ここでは書ききれないくらい多彩な機能のあるツールですが、この記事で使うのは唯一つ、
「画像を決まったサイズに分割」してくれる、「convert -crop」を使うだけです。

            
            $ convert scene.png -crop 480x360 out.png
$ ls
out-0.png  out-2.png  out-4.png  out-6.png  out-8.png  scene.png
out-1.png  out-3.png  out-5.png  out-7.png  out-9.png
        
横長のサイズの画像から、480x360固定の画像を自動で分割・生成してくれます。

合同会社タコスキングダム|タコキンのPスクール

まさに、今回の用途ではおあつらえ向きの機能ですので、使わない手はありません。


合同会社タコスキングダム|タコキンのPスクール【Pschool厳選】Scratchをしっかり学ぶためのオススメ書籍まとめ

スプライトのコスチュームへ背景画像を使う

背景のスプライトへ、先程分割して生成した背景を順番にインポートします。

複数の画像を一括でスプライトに送るには、
[コスチューム] > ネコのアイコン > [コスチュームのアップロード]からファイルのアップロードダイアログを表示して、先程の分割画像をすべて選んだ状態から、[開く]ボタンを押します。

合同会社タコスキングダム|タコキンのPスクール

アップロードしたコスチュームは、簡単に呼び出せるように、
0, 1, 2, ...というシンプルな数字に名前を変更しておきます。

もし、画像の枚数がかなり多いなどで、手動で名前を変えていくのが面倒であれば、アップロードさせるコスチュームの名前が画像ファイルの名前になるので、アップロードする前に、画像のファイルを
0.png, 1.png, ...とリネームしておいたほうが効率的かもしれません。

これで、ようやく動く背景のスタンバイは完了です。


合同会社タコスキングダム|タコキンのPスクール【Pschool厳選】Scratchを学べるオンライン・駅前プログラミングスクール5選

クローンを使って複数の背景を正しく切り替えて表示させる

では、動く背景のプログラムを修正していきましょう。

背景のスプライトを選択して、ブロックコードを編集していきます。

まず、コスチュームを名前で呼び出して使えるように、ローカル変数・
_背景の番号を作成しておきます。

合同会社タコスキングダム|タコキンのPスクール

今回のブロックコードの実装例は以下のようになります。

合同会社タコスキングダム|タコキンのPスクール

ポイントごとに赤枠と番号を付けていますので、順に見ていきましょう。

まずは、①の箇所ですが、ローカル変数・
_背景の番号を0で初期化し、その数をコスチュームと連動させています。

注意が必要なのが、
[コスチュームを○○にする]ブロックの使い方で、この○○の部分には、コスチュームの名前(文字列)を指定しないといけません。つまり、数値である_背景の番号を直接使うと、「コスチュームの番号」で呼び出されてしまいます。

そこでここでは、数値を文字列に変換するために、
[◯と●]ブロックを使っています。◯の部分に空文字(何も入力しない)、●には数値を入れることで、文字としてScratchプログラムが扱ってくれるようになります。

②の箇所では、計10枚の分割した画像ごとに対応するクローンを一気に生成する部分になります。

ここで注目すべきは、各背景が元の長い1枚の画像に戻るように最初のx座標の位置を
477 ✕ [_背景の番号]へずらしています。

理屈の上で言えば、ここは
480 ✕ [_背景の番号]ではないかと考えるところですが、素直にこれをやるとクローンのコスチューム画像の間に微妙な隙間が生じて、きれいに接合した感じになりません。

合同会社タコスキングダム|タコキンのPスクール

これは、Scratchの内部プログラムで起こっているレンダラーのバグのようなもので、スプライトの画像として表示されている実際の領域は、ここでの480よりわずかに短めになります。

どのくらい短くなっているのかは、480より小さくしていって、隙間が見えなくなるくらいに補正する必要があります(ここでは477が良さそう)。もしかしたら、ブラウザによっても見え方が違うかもしれないので、完全にこの問題に対応するのは難しいかもしれません。

③の箇所は、クローンごとに、各自のローカル変数・
_背景の番号でコスチュームを選択している部分です。

先程も言ったように、数値と文字列で、コスチュームの選ばれ方が異なるので、より注意が必要な部分です。

④は、クローンがゲーム画面に出ると表示するようにしています。

ちなみに、Scratchには、数値の比較として
≧(大なりイコール)≦(小なりイコール)の機能がありません。

代わりにこれにあたる条件として、大なりイコールでは
[X < Y]ではない、小なりイコールでは[X > Y]ではないという組み合わせ条件ブロックを使います。

最後に⑤の箇所ですが、
_背景の番号 = 9のコスチュームが最後の背景になりますので、それより前の画像は画面左端に進んたらクローンを消去し、最後の画像は、画面に入ったらそのまま位置で停止した時点で、背景を動かすプログラムも止めています。

以上でようやく、分割した画像が1枚の背景として右から左にスムーズに流れるようになりました。


合同会社タコスキングダム|タコキンのPスクール【Pschool厳選】Scratchをしっかり学ぶためのオススメ書籍まとめ

敵の出現ポイントを作成する

これまでのプログラムでは、とりあえず敵を3秒間隔で出現させる、ということで簡単に済ませてきました。

合同会社タコスキングダム|タコキンのPスクール

このロジックのままだと、ゲームが単調で、敵も自由に切り替えることができないので、ゲームとしてはつまらないと思います。

そこで、動く背景を導入したので、
「ゲーム全体の座標」という新しいパラメータを導入して、その値で敵の出現ポイントを決めてみましょう。

まずはグローバル変数・
ゲームのxを追加します。

合同会社タコスキングダム|タコキンのPスクール

ここでは、
背景のスプライトにゲームのxを操作するブロックコードを追加してみます。

合同会社タコスキングダム|タコキンのPスクール

これで、背景がスクロールするのと合わせて、
ゲームのxが0〜4800(背景のサイズ幅)まで動くようになります。

敵の出現ポイントをリストとして定義

グローバル変数である
ゲームのxを参照して、ある一定以上の場所になると敵が出現するような「敵の出現ポイント」は、あらかじめリストとしてデータを作っておくことで可能になります。

リストにも、グローバルリストとローカルリストがあり、変数と同じように利用できます。

ここでは
のスプライトに、ローカルリスト・出現ポイントを追加しましょう。

合同会社タコスキングダム|タコキンのPスクール

このリストの中身としては、今回は以下のような値を入力しています。

合同会社タコスキングダム|タコキンのPスクール

リストの中身(数値)はゲーム途中で常に消費されていくので、リストの値はゲーム開始前にプログラム的に初期化する必要があります。

以下のように、定義ブロック・
出現ポイントの初期化を作成し、

合同会社タコスキングダム|タコキンのPスクール

とすれば、常に同じ出現ポイントのリストでゲームが開始されます。

ちなみに、最初にリストの要素をすべて消すために、
[出現ポイント]のすべてを削除するのあとに、0.5秒ほど待っていますが、リストの要素をすべて削除するには少し時間かかります。

完全に消しきらないままだと、いくつかの要素がリストに残ってしまう可能性があり、プログラムのバグになります。

ここではリストの要素がすべて無くなるまで、十分待つ必要があります。

最終な実装は以下のように修正します。

合同会社タコスキングダム|タコキンのPスクール

まず、
[出現ポイントの初期化]ブロックで、リストを初期化し、メインループの処理のなかで、[出現ポイントの長さ] > 0の条件であれば、[ゲームのx] > [出現ポイントの1番目]となった時点で敵を画面に発生させることができます。

リストで敵の発生に使った要素は、
[出現ポイント]の1番目を削除することで、次の要素が1番目として繰り上がり、さらに次の敵の出現位置になるまで待機するようになります。

リストが空になった時点で、敵はすべていなくなります。


合同会社タコスキングダム|タコキンのPスクール【Pschool厳選】Scratchを学べるオンライン・駅前プログラミングスクール5選

まとめ

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

今回で、ステージシーンの背景がスクロールし、敵の出現ポイントも作成したので、いよいよ本格的なシューティングゲームらしい作品になってきました。

ここでも、クローンやリストのテクニックがたくさん出てきましたので、難しく感じられたかもしれませんが、一つ一つじっくりと消化しながら理解を深めていってください。