※ 当ページには【広告/PR】を含む場合があります。
2022/08/15
Scratchから始めるシューティングゲームの作り方④〜スクロールしながら動く背景を作成する
Scratchから始めるシューティングゲームの作り方⑥〜ステージに敵を配置する・高度な当たり判定を設定する
Scratchから始めるシューティングゲームの作り方④〜スクロールしながら動く背景を作成するScratchのシューティングゲーム中で一定の速度で流れるように動く背景の作ります。
【Pschool厳選】Scratchをしっかり学ぶためのオススメ書籍まとめ横に長い背景画像を作成する
まずはScratchで長い画像を使う前に、スプライト画像として扱える画像サイズについて復習してみましょう。実際にコスチュームのページで描いてみると分かりますが、Scratchの仕様で、大きな画像は描けてもせいぜい717 x 534程度の大きさの枠に収まるように、自動で調整されてしまいます。また、めいいっぱい大きい画像を作っても、Scratchゲームとして画面に表示されるのは、中央の枠・480 x 360の範囲だけになります。つまり、横に長いシーン(背景)画像をScratchのシューティングゲームで利用する場合、480 x 360のサイズ刻みで、細かく刻んで小分けにしたものを、個別のコスチュームとして登録して使うようにするしかありません。ということで、Scratchで横スクロールのシューティングゲーム用に長めの背景画像を使うには、というような流れで作業を進めていきます。
【Pschool厳選】Scratchをしっかり学ぶためのオススメ書籍まとめ Inkscapeによる横に長いベクター画像の編集
まずは、「お絵描き」をしないと始まりません。お自分の使い慣れたペイントツールやイラストレーターツールがあればそちらで長さ~ x 高さ３６０の横長の画像を作成できれば、この節の内容はスキップ頂いてOKです。著者的には、無料なのに十分すぎるほど高機能なイラストレーターツール・「Inkscape」を好んで使っています。以前の記事で、Inkscapeの基本を取り上げていましたので、基礎的な内容を知りたければ、そちらも参考ください。
【HTML&CSSではじめるミニゲーム作成の基本】CSSバックグラウンドスライド式のアニメーション用png画像をInkscapeで作成するHtml＆CSSで単純なミニゲームやScratchゲームを作る上で欠かせない、CSSで使えるアニメーション用png画像をInkscapeで作成する方法を検討してみます。
[ファイル] > [ドキュメントのプロパティ]をクリックし、ドキュメントのプロパティのダイアログボックスを開きます。そこで、[ページ]の項目から、カスタマイズの欄にある箇所の設定を変更します。まず、単位をpx(ピクセル)に変更します。次に幅をここでは4800(px)、高さを360(px)で入力してみます。値を入力したら、ページサイズが指定した画像サイズで固定されます。ページの外枠だけでは、少し分かりづらいかもしれないので、さらに[グリット]の項目から、[グリッドの単位]をpx、[X方向の間隔]を480、[Y方向の間隔]を360、としたグリッド線を表示してみます。これで、大まかな画像の分割の境界が分かると思います。もう一点、デフォルトでは、描画点がグリッドの交点に強制的にスナップするので、以下のように[スナップ]の設定を距離が近いときのみスナップに変更します。スナップ感度は10px程度にしていますが、絵を描くときに気に入らない場合には、状況に応じて増減させて調整してください。これで大体の当たり設定が終わったので、この枠内を目安に画像を描いてみましょう。とりあえずは何でも良いので、今回の「長い画像の背景を動かす」という最低の目的が分かる程度の横長い風景画像を作成します。
【Pschool厳選】Scratchをしっかり学ぶためのオススメ書籍まとめ ImageMagickの画像クロップ(分割)機能を使う
次に、先程作成した、横長の画像を、４８０x３６０の固定サイズで左から順に分割・保存する工程です。もちろん、元の画像を画像編集ソフトで、サイズを測りながらぶつ切りにして１つ１つ保存していけばよいのですが、長い画像ほど大切な作業になってしまいます。そこで紹介するのが、ImageMagickはコマンド入力で使える定番の画像編集のツールプログラムです。ImageMagick一つでも、画像をコマンド一発で様々な編集・効果を行うことができます。Linuxコマンドからは、パッケージインストールできるので、ほぼ悩まずに直ぐにImageMagickを使うことができます。WindowsへのImageMagickのインストール方法は、こちらの記事が詳しいようです。(※Windows版のコマンドは、Magickというコマンド名になっているようです。)ImageMagickに何ができるのかは、ここでは書ききれないくらい多彩な機能のあるツールですが、この記事で使うのは唯一つ、「画像を決まったサイズに分割」してくれる、「convert -crop」を使うだけです。横長のサイズの画像から、４８０x３６０固定の画像を自動で分割・生成してくれます。まさに、今回の用途ではおあつらえ向きの機能ですので、使わない手はありません。
【Pschool厳選】Scratchをしっかり学ぶためのオススメ書籍まとめ スプライトのコスチュームへ背景画像を使う
背景のスプライトへ、先程分割して生成した背景を順番にインポートします。複数の画像を一括でスプライトに送るには、[コスチューム] > ネコのアイコン > [コスチュームのアップロード]からファイルのアップロードダイアログを表示して、先程の分割画像をすべて選んだ状態から、[開く]ボタンを押します。アップロードしたコスチュームは、簡単に呼び出せるように、0, 1, 2, ...というシンプルな数字に名前を変更しておきます。もし、画像の枚数がかなり多いなどで、手動で名前を変えていくのが面倒であれば、アップロードさせるコスチュームの名前が画像ファイルの名前になるので、アップロードする前に、画像のファイルを0.png, 1.png, ...とリネームしておいたほうが効率的かもしれません。これで、ようやく動く背景のスタンバイは完了です。
【Pschool厳選】Scratchをしっかり学ぶためのオススメ書籍まとめ クローンを使って複数の背景を正しく切り替えて表示させる
では、動く背景のプログラムを修正していきましょう。背景のスプライトを選択して、ブロックコードを編集していきます。まず、コスチュームを名前で呼び出して使えるように、ローカル変数・_背景の番号を作成しておきます。今回のブロックコードの実装例は以下のようになります。ポイントごとに赤枠と番号を付けていますので、順に見ていきましょう。まずは、①の箇所ですが、ローカル変数・_背景の番号を0で初期化し、その数をコスチュームと連動させています。注意が必要なのが、[コスチュームを○○にする]ブロックの使い方で、この○○の部分には、コスチュームの名前(文字列)を指定しないといけません。つまり、数値である_背景の番号を直接使うと、「コスチュームの番号」で呼び出されてしまいます。そこでここでは、数値を文字列に変換するために、[◯と●]ブロックを使っています。◯の部分に空文字(何も入力しない)、●には数値を入れることで、文字としてScratchプログラムが扱ってくれるようになります。②の箇所では、計１０枚の分割した画像ごとに対応するクローンを一気に生成する部分になります。ここで注目すべきは、各背景が元の長い１枚の画像に戻るように最初のx座標の位置を477 ✕ [_背景の番号]へずらしています。理屈の上で言えば、ここは480 ✕ [_背景の番号]ではないかと考えるところですが、素直にこれをやるとクローンのコスチューム画像の間に微妙な隙間が生じて、きれいに接合した感じになりません。これは、Scratchの内部プログラムで起こっているレンダラーのバグのようなもので、スプライトの画像として表示されている実際の領域は、ここでの480よりわずかに短めになります。どのくらい短くなっているのかは、480より小さくしていって、隙間が見えなくなるくらいに補正する必要があります(ここでは477が良さそう)。もしかしたら、ブラウザによっても見え方が違うかもしれないので、完全にこの問題に対応するのは難しいかもしれません。③の箇所は、クローンごとに、各自のローカル変数・_背景の番号でコスチュームを選択している部分です。先程も言ったように、数値と文字列で、コスチュームの選ばれ方が異なるので、より注意が必要な部分です。④は、クローンがゲーム画面に出ると表示するようにしています。ちなみに、Scratchには、数値の比較として≧(大なりイコール)や≦(小なりイコール)の機能がありません。代わりにこれにあたる条件として、大なりイコールでは[X < Y]ではない、小なりイコールでは[X > Y]ではないという組み合わせ条件ブロックを使います。最後に⑤の箇所ですが、_背景の番号 = 9のコスチュームが最後の背景になりますので、それより前の画像は画面左端に進んたらクローンを消去し、最後の画像は、画面に入ったらそのまま位置で停止した時点で、背景を動かすプログラムも止めています。以上でようやく、分割した画像が１枚の背景として右から左にスムーズに流れるようになりました。
【Pschool厳選】Scratchをしっかり学ぶためのオススメ書籍まとめ 敵の出現ポイントを作成する
これまでのプログラムでは、とりあえず敵を３秒間隔で出現させる、ということで簡単に済ませてきました。このロジックのままだと、ゲームが単調で、敵も自由に切り替えることができないので、ゲームとしてはつまらないと思います。そこで、動く背景を導入したので、「ゲーム全体の座標」という新しいパラメータを導入して、その値で敵の出現ポイントを決めてみましょう。まずはグローバル変数・ゲームのxを追加します。ここでは、背景のスプライトにゲームのxを操作するブロックコードを追加してみます。これで、背景がスクロールするのと合わせて、ゲームのxが0〜4800(背景のサイズ幅)まで動くようになります。敵の出現ポイントをリストとして定義
グローバル変数であるゲームのxを参照して、ある一定以上の場所になると敵が出現するような「敵の出現ポイント」は、あらかじめリストとしてデータを作っておくことで可能になります。リストにも、グローバルリストとローカルリストがあり、変数と同じように利用できます。ここでは敵のスプライトに、ローカルリスト・出現ポイントを追加しましょう。このリストの中身としては、今回は以下のような値を入力しています。リストの中身(数値)はゲーム途中で常に消費されていくので、リストの値はゲーム開始前にプログラム的に初期化する必要があります。以下のように、定義ブロック・出現ポイントの初期化を作成し、とすれば、常に同じ出現ポイントのリストでゲームが開始されます。ちなみに、最初にリストの要素をすべて消すために、[出現ポイント]のすべてを削除するのあとに、0.5秒ほど待っていますが、リストの要素をすべて削除するには少し時間かかります。完全に消しきらないままだと、いくつかの要素がリストに残ってしまう可能性があり、プログラムのバグになります。ここではリストの要素がすべて無くなるまで、十分待つ必要があります。最終な実装は以下のように修正します。まず、[出現ポイントの初期化]ブロックで、リストを初期化し、メインループの処理のなかで、[出現ポイントの長さ] > 0の条件であれば、[ゲームのx] > [出現ポイントの1番目]となった時点で敵を画面に発生させることができます。リストで敵の発生に使った要素は、[出現ポイント]の1番目を削除することで、次の要素が1番目として繰り上がり、さらに次の敵の出現位置になるまで待機するようになります。リストが空になった時点で、敵はすべていなくなります。
【Pschool厳選】Scratchをしっかり学ぶためのオススメ書籍まとめ まとめ
以上、今回のScratchシューティングゲームの改造内容をひとまとめにしたものは以下のようになります。今回で、ステージシーンの背景がスクロールし、敵の出現ポイントも作成したので、いよいよ本格的なシューティングゲームらしい作品になってきました。ここでも、クローンやリストのテクニックがたくさん出てきましたので、難しく感じられたかもしれませんが、一つ一つじっくりと消化しながら理解を深めていってください。
