※ 当ページには【広告/PR】を含む場合があります。
2021/11/28
2022/08/22
【Scratch入門〜中級編】十字キーのスプライトを使ってタッチパネルからゲームを操作する方法
Pスクール厳選・優良な教材プログラムの紹介コーナー③ 〜 ヘビゲーム編
【Scratch入門〜中級編】アドバンスなグラフィックエフェクトを使いこなす
Pスクール厳選・優良な教材プログラムの紹介コーナー③ 〜 ヘビゲーム編Scratchのプログラミング学習で参考になる『ヘビゲーム』の中身を簡単に紹介します。
【Pschool厳選】Scratchを学べるオンライン・駅前プログラミングスクール５選はじめに
Scratchプログラミングを始める前に、この記事では変数やクローンなどのテクニックを既に理解されていること前提で進めていきます。もし解説中のプログラミングの内容で、「このブログの使い方が分からない！」とか「リストってどう使うんだ！」等の疑問になったときは、以下のテクニックまとめ記事から分からなかったパートの説明記事をさがしてみてください。
【Scratch講座・保存版】Scratchの基礎〜中級記事リンクまとめこれまで紹介してきたScratchの基礎〜中級レベルの記事を取りまとめた内部リンク集です。
【Pschool厳選】Scratchをしっかり学ぶためのオススメ書籍まとめヘビを動かす・餌を置く〜基本機能を実装する
スネークゲームの紹介記事でも紹介させていただいた、こちらのプロジェクトを参考に、どのように作られているのかをじっくり見ていきましょう。なお以下が本家のスネークゲームになります。ヘビの動作〜まずは頭だけ動かす
いきなり完成プログラム全体を作っていくと頭が混乱してバグを生みやすいので、まずはヘビの頭の部分にあたるスプライトの動きを作成してみます。適当な名前でScratchプロジェクトを新規作成し、さらにスプライトも新規作成しましょう。新しく出来たスプライトに、以下のように大きさ32×32の枠線なしの正方形のコスチュームを作ります。これをヘビの頭部分と見なして動かしていきます。ひとまずコスチュームはこれだけ作成しておいて、ヘビのスプライトを選択して、ブロックコードをプログラミングしていきます。まずは以下の変数の準備します。プログラムがスタートしてからキーボードの矢印キーが押された際に、スプライトに上下左右に移動が切り替えられるように、以下のブロックのようにキーボード処理を設置します。プログラムのメインループを以下のように作成します。ずっとループに入る前に、スプライトの座標位置、大きさ、各変数の初期化を行います。このプログラムは上下左右の矢印キーに従って、正方形のスプライトが正しく動くことを確認しているだけです。このサンプルプロジェクトはこちらです。ここまでは特に難しくはないと思います。では、次なる機能の作成に進みましょう。エサの出現パターンを実装する
エサを出現させて、ヘビが食べるところまでを作成します。まずはエサとなるスプライト(今回はリンゴ)をライブラリからApple(リンゴ)を呼び出して使います。このエサのスプライトは直接は使わず、クローンしたものを利用します。プログラムがスタートした直後に大きさを適当なサイズに調整してから、非表示のままにしておくため隠すで画面から消しておきます。ヘビ(正方形)のスプライト側に戻って、以下のようにメイン処理のブロックを修正してみます。ここではエサ(りんご)のスプライトのクローンを作るタイミングが追加になっています。ずっとループの中の、もし<<Apple>に触れた>なら条件ブロックで、ヘビがエサを食べた直後に、新しいエサをクローンによって生成させています。ヘビがエサを食べたら、このループはえさをたべたイベントを送ってループの動作を一旦止めます。<〇〇(イベント)>を送って待つブロックは、そのイベントを受け取った他のスクリプトの処理が全て完了するまで処理が再開するのを待つ際に使います。ここでは何を待っているかというと、エサのクローンを削除するまで待機させるために使います。エサ側のスプライトに戻って、以下のようにブロックを仕込みましょう。エサのクローンを確実に消去した後で、再度<Apple>のクローンを作るブロックで次のエサのクローンを生成します。このエサのスプライトがクローンされた時の挙動を以下のように定義しましょう。これでヘビの頭(ここでは正方形のスプライト)がエサに当たるまで、画面のランダムな位置に現れるようになります。ここでの<<●色に触れた> ではない> まで繰り返すブロックで、クローンがヘビに当たるまではずっとその状態を持続しておくようにしておけます。逆にクローンされる際に、この条件ブロックがないと、クローンの終了条件がないので、クローンの数はその都度増殖し、さらにプログラム終了まで消えずにクローンがずっと居座り続けることになります。ひとまずこれで、正方形のスプライトが、ランダムに現れるエサをひたすら追いかけるだけのプログラムになりました。このサンプルプロジェクトはこちらです。さらに機能を追加するため、次に進みます。
【Pschool厳選】Scratchを学べるオンライン・駅前プログラミングスクール５選 付加的な機能を実装する〜スコアを付ける・壁に当たると終了する
先程までのプログラムだと、ヘビがいくら壁面に当たって死なないので、画面外側に色付きの枠線を設けて、その枠線の色に触れてもゲームが終了するように仕立て直します。まずは背景のコスチュームを新規作成し、ステージの外枠を囲うように適当な色で枠線を描きます。ヘビ(正方形)のスプライトのコード部分に戻り、メインのブロックコードを以下のように修正します。この修正の内容は簡単で、先程作成した枠線の色に当たるとプログラムが終了するだけです。またスネークゲームはエサを食べてどこまでヘビを長くできるかを競うゲームですので、スコア結果はヘビの長さそのものになります。スコアとして、終了時にながさを言ってプログラムを終了させます。ここまでで完成したプログラムは以下です。このサンプルプロジェクトはこちらです。ヘビの胴体を増やす＆繋げる
次にエサを食べると胴体が伸びる、という処理をここから作ります。まずは理解しやすいように、胴体の長さ１(=ヘビの長さは２)のプログラムで動くかどうかやってみましょう。まずはここで、頭を覗く胴体の座標を記憶しておくための空のリスト(配列)をヘビという名前で新規作成しておきます。ヘビが動く度に、その頭が通った座標を記録するために利用するリストです。今回、記録すべき座標(xとyセット)は、ヘビの頭を除く、胴体の数×２が必要です。このヘビゲームでは、リストをどう使うかを理解するのが重要になります。またここからはヘビの描画も、スプライトの表示/非表示を直接切り替えるやり方ではなく、拡張機能のペンを使うやり方に変えます。拡張機能は画面左下のアイコンをクリックし、ペンを選択することでブロックパレットで利用できるようになります。ではヘビ(正方形)のスプライトのメインブロックを以下のように変更してみましょう。上の図でコメント形式に説明を加えたもの以外を解説します。まず①の箇所ですが、リスト(ヘビ)の最後に現在のx座標、y座標の順番で追加します。これは現在のスプライトの位置(ヘビの頭)が動くたびにリストへ追加する形で記録され続けます。ずっと座標が記録され続けても困るので、必要な記録だけはリストに残し、要らない座標データは捨て去る、という処理をどこかで作る必要があります。その処理をしているのが②の箇所になります。今回、プログラムのテストということで、ヘビの長さを２で固定しています。つまりヘビの頭に付いてくる胴体は１個ということです。この胴体１つをどの位置に描画すると良いかは、一つ前にヘビの頭だった位置をリストに記録しておけば、そのリストをx座標とy座標を読み出してスタンプをすることで胴体が描けます。ということは、<<へびの長さ(配列の長さ)> / 2> + 1が現在のながさよりも長い場合のx座標とy座標の記録は不要ですので、しっぽをけすというイベントを作って、リストから不要な座標データを消してあげる処理を作ります。しっぽをけすという名前にしているのは、ヘビの長さよりも長くなったときに、ヘビが通過した後の背景を元の無地に戻す、という処理を示しています。ヘビが通過した背景を元に戻すため、背景の色に合わせてた正方形のコスチュームを新規追加しておきます。しっぽをけすイベントの実装は以下のようにします。これで、リストに記録しているxとyのデータセットの長さ(リスト２個分の長さに注意)が、ヘビの長さよりも大きくなった時に、不要(もっとも古い１番目にあるデータ)になったxとy座標を使って、ペンで背景の色に戻しています。メインの処理ブロックで最後残っていた③の箇所は、ながさがヘビの長さ以下の時にそのままヘビのコスチュームが描画される処理です。ということで、これらをプログラムに反映すると以下のように、長さ２のヘビが動き回ります。このサンプルプロジェクトはこちらです。
【Pschool厳選】Scratchをしっかり学ぶためのオススメ書籍まとめ ヘビゲームのプログラムを完成させる！
上記のパートまでで、大体のプログラムの実装ポイントを説明してきました。ここいらで残りの処理を完成させてヘビゲーム全体を仕上げます。まずは前のコードそのままでも良いのですが、進行方向を分かりやすくするためヘビの頭と胴体の色を少し変えてみます。既存のコスチュームを複製してから、少し薄いピンクにしておきます。これをヘビの胴体の色として使います。また、ヘビゲームでは、長くなった自分の胴体部分と当たってしまったときも、壁面にぶつかった時と同様、ゲームオーバーにする必要があります。そこで、この胴体の色と同じ色を壁面にも指定しておきます。ということで、ヘビのスプライトのメイン処理ブロックを以下のように修正します。図中にちょっとした解説を加えた通りですので、さほど難しいポイントはないと思います。①の箇所は、ヘビの頭(スプライトの本体)と胴体(クローンのコスチュームからペンで描画)の描き分けをしていますので、ブロックの順序が乱れるとヘビが上手く描画されません。最後にエサ(リンゴ)のスプライトの処理ブロックもヘビの色に合わせて条件を修正すれば終わりです。以下がこの記事の解説で出来たヘビゲームになります。このサンプルプロジェクトはこちらです。少しヘビの動き回る位置やリンゴが表示される位置が微妙に噛み合わないので、気に入らなければ初期表示位置を修正してもらったり、コスチュームのサイズを座標を計算して描いてみたりと、各自工夫してみてください。いろいろとプログラミング言語の練習題材としても使われるヘビゲームのScratch的実装方法でした。
【Pschool厳選】Scratchを学べるオンライン・駅前プログラミングスクール５選 まとめ
簡単にヘビゲームを作成する手順をじっくり順を追って説明していきました。今回のプログラミングで、特に難しいポイントとなるのは、クローンとリストの利用法を良く理解していることでしょうか。また、クローンと併用して使われる拡張機能のペンも、通常のスプライトと背景画像の違いを良く知っていないと、ペンをなんとく使うだけではScratchプログラミングも上達しないでしょう。疑問に思ったら、その都度ネット検索するか、このブログ記事無いのリンクを辿ってテクニックの裏の裏までその「なぜ」を調べて見てください。
