【Scratch入門〜中級編】十字キーのスプライトを使ってタッチパネルからゲームを操作する方法

Scratchのゲームをキーボードの無いデバイス、たとえばスマートフォンやタブレットからでもスプライトを動かしてみたい時があります。
今回はゲームパッドの十字キーのような見た目のちょっとした十字キーを表示させて、スプライトの操作に使えるように仕上げてみます。
なお、今回の内容で仕上がったサンプルプログラムは以下のようになります。

プログラムコードの置き場所は

こちら

です。

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

十字キーをスプライトにする利点

基本的にScratchは、プログラミングを学ぶための教育的な側面の強い言語であるので、Scratchで作ることのできるアプリはキーボードからキー操作入力を前提にしているような仕様になっています。
Scratch3からは通常のブラウザから起動ようになり、色々なデバイスでもアプリがより一層楽しめるような機会が増えたのですが、キーボード入力の困難な比較的画面の狭いスマートフォンなどからだとまだまだ満足に遊べるように対応しているScratchアプリが少ないのが現状です。
ゲームパッドのような操作がタッチパネルからでも出来るような機能があれば、どのようなデバイスからでもアプリを動かすことが出来るようになります。
今回は簡単なところで、十字キー風のスプライトを作ってみたい、というのがこの記事の内容になります。
とりわけ十字キーのスプライトの作成で重要なテクニックとなるのは、やはりクローンの使い方です。
以前からクローンの使い方で基礎から応用までを色々と掘り下げてきました。
まだあまりScratchのクローンの利用方法に慣れていない・理解していないのであれば、以下の関連記事から読まれてることをオススメします。

【Scratch入門〜中級編】少しだけ難しいスプライトのクローンの高度な利用法

Scratchの中級者向けのテクニックとして、クローンの特殊な使い方を解説します。

この記事では、既にクローンの使い方を十分理解している方を対象にしておりますので、ご了承ください。
それでは以降でプログラムの実装手順を具体的に説明していきます。

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

Scratchで十字キーを作る・動かす

この節では十字キーのスプライトを作成していきます。

十字キー用のsvg画像を準備する

まずは十字キーの素材になる画像を準備していきます。

まずは

十字キー

という名前のスプライトを新規作成しておきます。
そこから十字キーの画像をペイントで手書きしても良いのですが、十字キーのコスチュームはクリックするときのイベントをあとあと仕込むため、各部分ごとにバラバラにする必要があります。
ということで、最初から一つの十字キー画像(上の図での①)を予めSVGの編集できるソフトで切れ目をいれてバラバラにしておき(上の画像の②: なお分かりやすくするために位置をずらしましたが、各画像どうしが切れていればOKです)、その画像をまるごとコスチュームとしてアップロードして使います。
あとは②の状態でアップロードして、図の③の箇所のように

まんなか

から

みぎ

のコスチュームまでの5種類になるように余計な画像部分を削除しながら配置すると

十字キー

のスプライトができました。

配置したコスチュームへマウスクリックのイベントを登録

次にマウスやタッチパネルから各コスチュームを押したときにイベント処理が起こるように、まず

十字キー

スプライトに、ブロックコードを作成していきます。
まずは必要になる変数を準備しておきます。

ここではクローンしたスプライトを識別するための

ばんごう_

というローカル変数と、ねこの動きを操作するための

ほうこう

というグローバル(共有)変数を作ります。
なお、繰り返しになりますが、今回のプログラムもクローンをうまく利用する以前の記事に書いたテクニックを使っています。

【Scratch入門〜中級編】少しだけ難しいスプライトのクローンの高度な利用法

Scratchの中級者向けのテクニックとして、クローンの特殊な使い方を解説します。

ここではクローンの使い方のポイントは詳しく解説しませんので、Scratchのクローンの使いこなしに慣れていない場合にはそちらの記事を参照してみてください。
以下が今回の

十字キー

スプライトのブロックプログラムです。

まず図中の①の箇所がオリジナル(クローンでないコピー元)のスプライトを初期化している部分で、その中で4回クローンされたスプライトの初期化処理は②のブロックが受け持つことになります。
各クローンにはそれぞれ番号が

ばんごう_

の変数から与えられて、この場合、

1:うえ

、

2:した

、

3:ひだり

、

4:みぎ

、の各コスチュームが(コピー元の位置から見て)指定された場所に移動して配置されるようになります。
なお、クローン化はコピー元の情報を元に生成される仕組みですので、クローンの初期化処理が全て済んだあとにオリジナル自身の初期化することになります。なので、コピー元の識別番号はここでは

5

になるようにして、最後にコスチュームを

まんなか

へと戻してあげる必要があります。

各クローンはコピーされたときの情報をそのまま保持しているため、そのスプライトがクリックされた際に、そのクローンが保持している変数を取り出すことが可能です。
このことを理解しておくと、操作される

ねこ

のスプライトの進行方向を選択する

ほうこう

の変数を、クローンのどれかがクリックされるたびに

ばんごう_

に変えることで、十字キーから動作を切り替えることができます。
ということで、実装はとても簡単で以下のようになります。

操作されるスプライト側の実装

十字キーで操作される側のスプライト、ここではScratch標準の

ねこ

のスプライトを使って操作してみます。
実際のブロックコードは以下のようになります。

先程作成しておいたグローバル変数の

ほうこう

の値を利用してねこの進行方向を切り替えるプログラムになっていることが分かります。

ほうこう

が1なら上に、2なら下に、3なら左に、4なら右に、その他の数値ならそのまま大人しく止まっているようにしています。
なお、ねこが動いている途中に十字キーの手前に表示されないように、スプライトの描画を1層奥に下げてみたり、ねこの動きが少し早いので0.05秒間隔で処理を止めてみたり、細かい修正は各自にお任せします。

クリックを押しっぱなしにさせる方法

十字キーの機能としては既に上の内容までで最低限完成していますが、このままだと十字キーを押した状態を情報として保持しないので、十字キーを一回押すと一回移動するだけの動作しかしません。
このゲームをプレイしている方の意見からすると、できれば十字キーを押しっぱなしのときには、ねこのスプライトが動き続けるようにしたいはずです。
上では解説してませんでしたが、実はもう既にこのプログラムには、十字キーをマウスを押しっぱなしにすると移動し続け、マウスボタンを放すと止まる仕組みを付けていました。

この③の部分の

もしマウスが押されたではないなら

の条件ブロックがポイントで、マウスが押されていないなら＝マウスが放されたなら、とスプライトの動きを止める(

ほうこう

は0)という処理を行っています。

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

まとめ

今回は十字キー風に使えるスプライトのシンプルな実装を考えてみました。
まだ斜めに動けるようにするなどの改良点が必要になりますが、キーボードが無いデバイスからのゲームを行うときの操作などに利用できると思います。