スクラッチで簡単スマホ・タブレット用ジョイスティックの作り方

今回作るもの

スクラッチでゲームを作ったときに、パソコンではなく、スマホやタブレットでも操作できたら・・と思うことも多いのではないでしょうか。今回はスマホやタブレットでキャラクターを自由自在に動かせるジョイスティックを作ります。とても簡単に作れますので是非チャレンジして、自作ゲームに実装してみてください。

まずは作成物をイメージしてもらうために、以下のジョイスティックでネコを動かしてみてください。
PCで試してみる場合は、全画面にしてからお願いします。

まずはジョイスティックを作っていきます。ネコのスプライトはそもままにしておいて、スプライトを追加します。

ジョイスティックはただの丸でいいですが、少しグラデーションをいれておくと、それっぽくなります。

次にジョイスティックのコードを書いていきます。まず、緑の旗が押された時に左下（-165,-120）にジョイスティックを設置します。
そして、スプライトが押された時に”マウスが押されたではないまで”方向をマウスポインターに向けます。これはつまりスマホ・タブレットにおきかえると以下の通りです

スプライトが押された時：ドラッグが開始さらた時
マウスポインターへ向ける：ドラッグされた方向に向ける
マウスが押されたではない：ドラッグしていた指が離される

次にジョイスティックどおりの方向に動かすために、ネコのコードを書いていきます。
緑の旗が押された時に回転方向を左右のみにして、最初に中央（0,0）に配置します。

そしてずっと”マウスが押されたではない”まで、スティックの方向にキャラクターを向けて３歩動かします。この３歩の部分を変化させることでネコのスピートが変わります。

では実際に動かしてみましょう。右上のプレビューのままスティックを動かすと、パソコンの場合、スプライトが移動してしまうので全画面表示にしてから動かします。

下の動画のように、ジョイスティックを上下左右にドラッグしながら動かすと、ネコが動きます。

ここまででも、一応ジョイスティックは完成ですが、ドラッグした向きに少し動かすようにしましょう。sinとcosを使ってドラッグした方向に移動させます。

考え方は以下の通りです。矢印の向きにスティックがドラッグされた時にx軸・y軸をそれぞれ下図の通り動かします。

これをコードに書いていくと以下の通りです。そして、ドラッグが終わると中心に戻るようにしましょう。

最後にガイドをつけます。こちらも、それっぽくするために作っているだけなので、なくても機能的には問題ありません。

下のようにスプライトを一つ追加し、スティックのまわりに矢印が入るようにコスチュームを作ります。スティックは左下（-165,-120）にある状態だと思いますので、ガイドも左下（-165,-120）に表示した時に絵に合うように調整します。

そして、ガイドのコードは以下のように旗が押されたら左下にくるように設定しておきましょう。

すごろくゲームやボンバーマンのようなゲームの場合、キャラクターを必ず上下左右のいずれかに動かしたいというケースがあります。ここではジョイスティックを使って、上下左右のみに動きを制限する方法を最後に説明します。

以下の図のようにおおよそ右方向にスティックが動くと右向きに動くというように定義します。

正確に定義すると以下の通りとなります。

右向き：45〜135
左向き：-135〜-45
上向き：-45〜45
下向き：135〜、〜-135

一つ一つ条件にしても良いですが、ここではこれを一気に数式で解決してしまいます。
下のようにスティックの向きに45を足して、90で割った商に90をかけるとネコの向きが決まります。

今回作成したコードは全て以下より確認可能です。