サイトのお品書き

【Scratch3基礎】十字キーのスプライトを使ってタッチパネルからゲームを操作する方法

2021/01/29
目次

スクラッチのゲームをキーボードの無いデバイス、たとえばスマートフォンやタブレットからでもスプライトを動かしてみたい時があります。

今回はゲームパッドの十字キーのような見た目のちょっとした十字キーを表示させて、スプライトの操作に使えるように仕上げてみます。

なお、今回の内容で仕上がったサンプルプログラムは以下のようになります。

プログラムコードの置き場所はこちらです。

👇プログラミング教室をお探しの人必見！

👇スクラッチの教科書をお探しの人必見！

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

基本的にスクラッチは、プログラミングを学ぶための教育的な側面の強い言語であるので、スクラッチで作ることのできるアプリはキーボードからキー操作入力を前提にしているような仕様になっています。

Scratch3からは通常のブラウザから起動ようになり、色々なデバイスでもアプリがより一層楽しめるような機会が増えたのですが、キーボード入力の困難な比較的画面の狭いスマートフォンなどからだとまだまだ満足に遊べるように対応しているスクラッチアプリが少ないのが現状です。

ゲームパッドのような操作がタッチパネルからでも出来るような機能があれば、どのようなデバイスからでもアプリを動かすことが出来るようになります。

今回は簡単なところで、十字キー風のスプライトを作ってみたい、というのがこの記事の内容になります。

とりわけ十字キーのスプライトの作成で重要なテクニックとなるのは、やはりクローンの使い方です。

以前からクローンの使い方で基礎から応用までを色々と掘り下げてきました。

まだあまりスクラッチのクローンの利用方法に慣れていない・理解していないのであれば、以下の関連記事から読まれてることをオススメします。

この記事では、既にクローンの使い方を十分理解している方を対象にしておりますので、ご了承ください。

それでは以降でプログラムの実装手順を具体的に説明していきます。

スクラッチで十字キーを作る・動かす

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

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

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

合同会社タコスキングダム｜タコキンのPスクール

まずは十字キーという名前のスプライトを新規作成しておきます。

そこから十字キーの画像をペイントで手書きしても良いのですが、十字キーのコスチュームはクリックするときのイベントをあとあと仕込むため、各部分ごとにバラバラにする必要があります。

ということで、最初から一つの十字キー画像(上の図での①)を予めSVGの編集できるソフトで切れ目をいれてバラバラにしておき(上の画像の②: なお分かりやすくするために位置をずらしましたが、各画像どうしが切れていればOKです)、その画像をまるごとコスチュームとしてアップロードして使います。

あとは②の状態でアップロードして、図の③の箇所のようにまんなかからみぎのコスチュームまでの5種類になるように余計な画像部分を削除しながら配置すると十字キーのスプライトができました。

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

次にマウスやタッチパネルから各コスチュームを押したときにイベント処理が起こるように、まず十字キースプライトに、ブロックコードを作成していきます。

まずは必要になる変数を準備しておきます。

合同会社タコスキングダム｜タコキンのPスクール

ここではクローンしたスプライトを識別するためのばんごう_というローカル変数と、ねこの動きを操作するためのほうこうというグローバル(共有)変数を作ります。

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

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

以下が今回の十字キースプライトのブロックプログラムです。

合同会社タコスキングダム｜タコキンのPスクール

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

各クローンにはそれぞれ番号がばんごう_の変数から与えられて、この場合、1:うえ、2:した、3:ひだり、4:みぎ、の各コスチュームが(コピー元の位置から見て)指定された場所に移動して配置されるようになります。

なお、クローン化はコピー元の情報を元に生成される仕組みですので、クローンの初期化処理が全て済んだあとにオリジナル自身の初期化することになります。なので、コピー元の識別番号はここでは5になるようにして、最後にコスチュームをまんなかへと戻してあげる必要があります。

合同会社タコスキングダム｜タコキンのPスクール

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

このことを理解しておくと、操作されるねこのスプライトの進行方向を選択するほうこうの変数を、クローンのどれかがクリックされるたびにばんごう_に変えることで、十字キーから動作を切り替えることができます。

ということで、実装はとても簡単で以下のようになります。

合同会社タコスキングダム｜タコキンのPスクール

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

十字キーで操作される側のスプライト、ここではスクラッチ標準のねこのスプライトを使って操作してみます。

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

合同会社タコスキングダム｜タコキンのPスクール

先程作成しておいたグローバル変数のほうこうの値を利用してねこの進行方向を切り替えるプログラムになっていることが分かります。

ほうこうが1なら上に、2なら下に、3なら左に、4なら右に、その他の数値ならそのまま大人しく止まっているようにしています。

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

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

十字キーの機能としては既に上の内容までで最低限完成していますが、このままだと十字キーを押した状態を情報として保持しないので、十字キーを一回押すと一回移動するだけの動作しかしません。

このゲームをプレイしている方の意見からすると、できれば十字キーを押しっぱなしのときには、ねこのスプライトが動き続けるようにしたいはずです。

上では解説してませんでしたが、実はもう既にこのプログラムには、十字キーをマウスを押しっぱなしにすると移動し続け、マウスボタンを放すと止まる仕組みを付けていました。

合同会社タコスキングダム｜タコキンのPスクール

この③の部分のもし マウスが押された ではない ならの条件ブロックがポイントで、マウスが押されていないなら ＝ マウスが放されたなら、とスプライトの動きを止める(ほうこうは0)という処理を行っています。

👇スクラッチの教科書をお探しの人必見！

まとめ

今回は十字キー風に使えるスプライトのシンプルな実装を考えてみました。

まだ斜めに動けるようにするなどの改良点が必要になりますが、キーボードが無いデバイスからのゲームを行うときの操作などに利用できると思います。
記事を書いた人

記事の担当:taconocat

ナンデモ系エンジニア

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

カテゴリー