【Scratch入門〜中級編】十字キーのスプライトを使ってタッチパネルからゲームを操作する方法
※ 当ページには【広告/PR】を含む場合があります。
2021/01/29
2022/08/22
【Scratch入門〜中級編】他のスプライトからクローンをして使う方法
【Scratch入門〜中級編】Scratchで簡単なスネークゲームを作ろう！
![合同会社タコスキングダム｜蛸壺の技術ブログ]()
【Pschool厳選】Scratchを学べるオンライン・駅前プログラミングスクール５選 十字キーをスプライトにする利点
基本的にScratchは、プログラミングを学ぶための教育的な側面の強い言語であるので、Scratchで作ることのできるアプリはキーボードからキー操作入力を前提にしているような仕様になっています。Scratch3からは通常のブラウザから起動ようになり、色々なデバイスでもアプリがより一層楽しめるような機会が増えたのですが、キーボード入力の困難な比較的画面の狭いスマートフォンなどからだとまだまだ満足に遊べるように対応しているScratchアプリが少ないのが現状です。ゲームパッドのような操作がタッチパネルからでも出来るような機能があれば、どのようなデバイスからでもアプリを動かすことが出来るようになります。今回は簡単なところで、十字キー風のスプライトを作ってみたい、というのがこの記事の内容になります。とりわけ十字キーのスプライトの作成で重要なテクニックとなるのは、やはりクローンの使い方です。以前からクローンの使い方で基礎から応用までを色々と掘り下げてきました。まだあまりScratchのクローンの利用方法に慣れていない・理解していないのであれば、以下の関連記事から読まれてることをオススメします。![合同会社タコスキングダム｜蛸壺の技術ブログ]()
【Scratch入門〜中級編】少しだけ難しいスプライトのクローンの高度な利用法Scratchの中級者向けのテクニックとして、クローンの特殊な使い方を解説します。
![合同会社タコスキングダム｜蛸壺の技術ブログ]()
【Pschool厳選】Scratchをしっかり学ぶためのオススメ書籍まとめ Scratchで十字キーを作る・動かす
この節では十字キーのスプライトを作成していきます。十字キー用のsvg画像を準備する
まずは十字キーの素材になる画像を準備していきます。まずは十字キーという名前のスプライトを新規作成しておきます。そこから十字キーの画像をペイントで手書きしても良いのですが、十字キーのコスチュームはクリックするときのイベントをあとあと仕込むため、各部分ごとにバラバラにする必要があります。ということで、最初から一つの十字キー画像(上の図での①)を予めSVGの編集できるソフトで切れ目をいれてバラバラにしておき(上の画像の②: なお分かりやすくするために位置をずらしましたが、各画像どうしが切れていればOKです)、その画像をまるごとコスチュームとしてアップロードして使います。あとは②の状態でアップロードして、図の③の箇所のようにまんなかからみぎのコスチュームまでの5種類になるように余計な画像部分を削除しながら配置すると十字キーのスプライトができました。配置したコスチュームへマウスクリックのイベントを登録
次にマウスやタッチパネルから各コスチュームを押したときにイベント処理が起こるように、まず十字キースプライトに、ブロックコードを作成していきます。まずは必要になる変数を準備しておきます。ここではクローンしたスプライトを識別するためのばんごう_というローカル変数と、ねこの動きを操作するためのほうこうというグローバル(共有)変数を作ります。なお、繰り返しになりますが、今回のプログラムもクローンをうまく利用する以前の記事に書いたテクニックを使っています。![合同会社タコスキングダム｜蛸壺の技術ブログ]()
【Scratch入門〜中級編】少しだけ難しいスプライトのクローンの高度な利用法Scratchの中級者向けのテクニックとして、クローンの特殊な使い方を解説します。
十字キースプライトのブロックプログラムです。まず図中の①の箇所がオリジナル(クローンでないコピー元)のスプライトを初期化している部分で、その中で4回クローンされたスプライトの初期化処理は②のブロックが受け持つことになります。各クローンにはそれぞれ番号がばんごう_の変数から与えられて、この場合、1:うえ、2:した、3:ひだり、4:みぎ、の各コスチュームが(コピー元の位置から見て)指定された場所に移動して配置されるようになります。なお、クローン化はコピー元の情報を元に生成される仕組みですので、クローンの初期化処理が全て済んだあとにオリジナル自身の初期化することになります。なので、コピー元の識別番号はここでは5になるようにして、最後にコスチュームをまんなかへと戻してあげる必要があります。各クローンはコピーされたときの情報をそのまま保持しているため、そのスプライトがクリックされた際に、そのクローンが保持している変数を取り出すことが可能です。このことを理解しておくと、操作されるねこのスプライトの進行方向を選択するほうこうの変数を、クローンのどれかがクリックされるたびにばんごう_に変えることで、十字キーから動作を切り替えることができます。ということで、実装はとても簡単で以下のようになります。操作されるスプライト側の実装
十字キーで操作される側のスプライト、ここではScratch標準のねこのスプライトを使って操作してみます。実際のブロックコードは以下のようになります。先程作成しておいたグローバル変数のほうこうの値を利用してねこの進行方向を切り替えるプログラムになっていることが分かります。ほうこうが1なら上に、2なら下に、3なら左に、4なら右に、その他の数値ならそのまま大人しく止まっているようにしています。なお、ねこが動いている途中に十字キーの手前に表示されないように、スプライトの描画を1層奥に下げてみたり、ねこの動きが少し早いので0.05秒間隔で処理を止めてみたり、細かい修正は各自にお任せします。クリックを押しっぱなしにさせる方法
十字キーの機能としては既に上の内容までで最低限完成していますが、このままだと十字キーを押した状態を情報として保持しないので、十字キーを一回押すと一回移動するだけの動作しかしません。このゲームをプレイしている方の意見からすると、できれば十字キーを押しっぱなしのときには、ねこのスプライトが動き続けるようにしたいはずです。上では解説してませんでしたが、実はもう既にこのプログラムには、十字キーをマウスを押しっぱなしにすると移動し続け、マウスボタンを放すと止まる仕組みを付けていました。この③の部分のもし マウスが押された ではない ならの条件ブロックがポイントで、マウスが押されていないなら ＝ マウスが放されたなら、とスプライトの動きを止める(ほうこうは0)という処理を行っています。
![合同会社タコスキングダム｜蛸壺の技術ブログ]()
【Pschool厳選】Scratchを学べるオンライン・駅前プログラミングスクール５選 まとめ
今回は十字キー風に使えるスプライトのシンプルな実装を考えてみました。まだ斜めに動けるようにするなどの改良点が必要になりますが、キーボードが無いデバイスからのゲームを行うときの操作などに利用できると思います。
