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

2022/08/15

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

Scratchから始めるシューティングゲームの作り方⑥〜フィールドに敵を配置する・高度な当たり判定を設定する

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

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

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

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

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

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

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

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

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

Inkscapeでイラストを作るすぐに作れるずっと使える Inkscapeのすべてが身に付く本

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

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

実際にコスチュームのページで描いてみると分かりますが、Scratchの仕様で、大きな画像は描けてもせいぜい

717 x 534

程度の大きさの枠に収まるように、自動で調整されてしまいます。

また、めいいっぱい大きい画像を作っても、Scratchゲームとして画面に表示されるのは、中央の枠・

480 x 360

の範囲だけになります。

つまり、横に長いシーン(背景)画像をScratchのシューティングゲームで利用する場合、

480 x 360

のサイズ刻みで、細かく刻んで小分けにしたものを、個別のコスチュームとして登録して使うようにするしかありません。

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

開く/閉じる

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

というような流れで作業を進めていきます。

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

Inkscapeでイラストを作るすぐに作れるずっと使える Inkscapeのすべてが身に付く本

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

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

お自分の使い慣れたペイントツールやイラストレーターツールがあればそちらで

長さ~ x 高さ３６０

の横長の画像を作成できれば、この節の内容はスキップ頂いてOKです。

著者的には、無料なのに十分すぎるほど高機能なイラストレーターツール・

「Inkscape」

を好んで使っています。

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

【Html&CSSゲーム作成】CSSバックグラウンドスライド式のアニメーション用pngをInkscapeで作成する方法

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

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

Inkscapeで新規作成し、メニューバーから

[ファイル] > [ドキュメントのプロパティ]

をクリックし、

ドキュメントのプロパティ

のダイアログボックスを開きます。

そこで、

[ページ]

の項目から、

カスタマイズ

の欄にある箇所の設定を変更します。

まず、単位を

px

(ピクセル)に変更します。

次に幅をここでは

4800

(px)、高さを

360

(px)で入力してみます。

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

ページの外枠だけでは、少し分かりづらいかもしれないので、さらに

[グリット]

の項目から、

[グリッドの単位]

を

px

、

[X方向の間隔]

を480、

[Y方向の間隔]

を360、としたグリッド線を表示してみます。

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

もう一点、デフォルトでは、描画点がグリッドの交点に強制的にスナップするので、以下のように

[スナップ]

の設定を

距離が近いときのみスナップ

に変更します。

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

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

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

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

Inkscapeでイラストを作るすぐに作れるずっと使える Inkscapeのすべてが身に付く本

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

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

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

そこで紹介するのが、

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

横長のサイズの画像から、４８０x３６０固定の画像を自動で分割・生成してくれます。

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

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

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

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

複数の画像を一括でスプライトに送るには、

[コスチューム] > ネコのアイコン > [コスチュームのアップロード]

から

ファイルのアップロード

ダイアログを表示して、先程の分割画像をすべて選んだ状態から、

[開く]

ボタンを押します。

アップロードしたコスチュームは、簡単に呼び出せるように、

0, 1, 2, ...

というシンプルな数字に名前を変更しておきます。

もし、画像の枚数がかなり多いなどで、手動で名前を変えていくのが面倒であれば、アップロードさせるコスチュームの名前が画像ファイルの名前になるので、アップロードする前に、画像のファイルを

0.png, 1.png, ...

とリネームしておいたほうが効率的かもしれません。

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

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

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

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

背景

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

まず、コスチュームを名前で呼び出して使えるように、ローカル変数・

_背景の番号

を作成しておきます。

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

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

まずは、①の箇所ですが、ローカル変数・

_背景の番号

を0で初期化し、その数をコスチュームと連動させています。

注意が必要なのが、

[コスチュームを○○にする]

ブロックの使い方で、この○○の部分には、

コスチュームの名前(文字列)

を指定しないといけません。つまり、数値である

_背景の番号

を直接使うと、

「コスチュームの番号」

で呼び出されてしまいます。

そこでここでは、数値を文字列に変換するために、

[◯と●]

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

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

ここで注目すべきは、各背景が元の長い１枚の画像に戻るように最初のx座標の位置を

477 ✕ [_背景の番号]

へずらしています。

理屈の上で言えば、ここは

480 ✕ [_背景の番号]

ではないかと考えるところですが、素直にこれをやるとクローンのコスチューム画像の間に微妙な隙間が生じて、きれいに接合した感じになりません。

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

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

③の箇所は、クローンごとに、各自のローカル変数・

_背景の番号

でコスチュームを選択している部分です。

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

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

ちなみに、Scratchには、数値の比較として

≧(大なりイコール)

や

≦(小なりイコール)

の機能がありません。

代わりにこれにあたる条件として、大なりイコールでは

[X < Y]ではない

、小なりイコールでは

[X > Y]ではない

という組み合わせ条件ブロックを使います。

最後に⑤の箇所ですが、

_背景の番号 = 9

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

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

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

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

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

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

そこで、動く背景を導入したので、

「ゲーム全体の座標」

という新しいパラメータを導入して、その値で敵の出現ポイントを決めてみましょう。

まずはグローバル変数・

ゲームのx

を追加します。

ここでは、

背景

のスプライトに

ゲームのx

を操作するブロックコードを追加してみます。

これで、背景がスクロールするのと合わせて、

ゲームのx

が0〜4800(背景のサイズ幅)まで動くようになります。

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

グローバル変数である

ゲームのx

を参照して、ある一定以上の場所になると敵が出現するような

「敵の出現ポイント」

は、あらかじめリストとしてデータを作っておくことで可能になります。

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

ここでは

敵

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

出現ポイント

を追加しましょう。

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

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

以下のように、定義ブロック・

出現ポイントの初期化

を作成し、

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

ちなみに、最初にリストの要素をすべて消すために、

[出現ポイント]のすべてを削除する

のあとに、

0.5秒ほど

待っていますが、リストの要素をすべて削除するには少し時間かかります。

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

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

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

まず、

[出現ポイントの初期化]

ブロックで、リストを初期化し、メインループの処理のなかで、

[出現ポイントの長さ] > 0

の条件であれば、

[ゲームのx] > [出現ポイントの1番目]

となった時点で敵を画面に発生させることができます。

リストで敵の発生に使った要素は、

[出現ポイント]の1番目を削除する

ことで、次の要素が1番目として繰り上がり、さらに次の敵の出現位置になるまで待機するようになります。

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

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

まとめ

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

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

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

記事を書いた人

記事の担当:taconocat

ナンデモ系エンジニア

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

カテゴリー

記事のおしながき

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