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

ゲーム作りのテクニック

今回作るもの

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

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

ジョイスティックを作る

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

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

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

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

ジョイスティックのコードを書く

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

スプライトが押された時:ドラッグが開始さらた時
マウスポインターへ向ける:ドラッグされた方向に向ける
マウスが押されたではない:ドラッグしていた指が離される
スクラッチで簡単スマホ・タブレット用ジョイスティックの作り方

ネコのコードを書く

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

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

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

動かしてみよう

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

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

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

ジョイスティックを動かす

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

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

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

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

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

ガイドをつける

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

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

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

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

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

おまけ)上下左右にしかキャラクターを動かさない

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

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

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

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

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

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

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

今回のコード

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