この記事のポイント
スクラッチゲームをスマホのタッチ操作で操作する方法を説明します。
はじめに スマホでもレースゲームを遊びたい!
せっかく作ったゲームをスマホでも遊べるようにしたいと考えている方は多いと思います。
パソコンにはキーボードがついているので、キーでスプライトを操作するプログラムは比較的簡単に作ることができます。
しかし、スマホでタッチ操作でスプライトを動かすためには、少し工夫が必要です。今回はその方法を説明します。
スマホ用のタッチ操作ボタンを追加していきます!
この方法は他のゲームプログラミングでも応用できますのでぜひマスターしてくださいね!
前回の記事
前回はゲームクリア条件を追加して、よりゲーム性を向上させました。前回の記事は以下リンクです。
レースゲームを作ろうシリーズの第一弾の記事は以下となります。最初から進めたい方は以下を参考にしてください。
スクラッチをイチから始めたい方は以下の記事を参考にしてください。誰でも簡単にスクラッチを始めることができます。
完成作品
今回の完成作品はこのようになります。スマホのタッチで操作できるので、ぜひスマホから試してみてください。
ルールは以下のとおりです。
- パソコン←キー or 画面内左タッチマーク:車を左に移動させます。
- パソコン→キー or 画面内右タッチマーク:車を右に移動させます。
- ガソリンマークに触れるとガソリンメータが回復します。
- 2秒に1スコア上昇します。他の車に衝突するとスコアが2減ります。
- ガソリンメータが0になったときにスコアが10以上であればゲームクリア、10未満であればゲームオーバーです。
完成プログラム
新規追加スプライト
今回は左タッチボタンと右タッチボタンを追加します。
<左タッチボタン>
<右タッチボタン>
修正スプライト
自分車に以下を追加します。タッチボタンが押されたときにキーを押された場合と同じ操作をするプログラムを追加します。
自分の車を左右に動かすプログラム部分は、キー操作の場合と同じですので流用できます。
プログラミングはラクすることが大切です。
作るモノ(仕様)を考える
今回作るものの動きをザクっと考えてみましょう。
- 左タッチボタンが押されたら車を左に動かす
- 右タッチボタンが押されたら車を右に動かす
事前準備(スプライトの準備)
左右タッチボタンを用意します。これもスクラッチのコスチューム作成機能で矢印マークと丸を重ねて簡単に作りましょう。
スプライトの中身は透明にしないこと
透明にしてしまうと、透明部分をタッチしてもプログラムが認識しなくなって、操作性が悪くなってしまうからです。
プログラミング
ではプログラミングをしていきます。
スプライトにタッチしたことを検知する
タッチボタンが押されたら、他のスプライトに何かさせるという動きを実現させるためには、まずはタッチボタンにタッチされたことを検知しなければいけません。
スプライトがタッチされたかどうかを判定するには、「マウスが押された」と「マウスのポインターに触れた」ブロックを使います。
以下のように左タッチボタンのプログラムを組みます。
ここでポイントなのは、以下の2点です。
- タッチの検知を「マウスのポインターに触れた」かつ「マウスが押された」にすること
- 「メッセージを送って待つ」 ブロックを使うこと
以下で一つずつ解説していきます。
タッチの検知を「マウスのポインターに触れた」かつ「マウスが押された」にする
ぱっと考えると「マウスが押された」ブロックだけでも動きそうですですが、動いてくれません。
なぜならば、「マウスが押された」ブロックはすべてのスプライトにある「マウスが押された」ブロックに影響を与えてしまうためです。左タッチボタンと右タッチボタンの両方にこの「マウスが押された」ブロックを入れるので、両方のタッチボタンが動作してしまいます。
それを防ぐために「マウスのポインターに触れた」ブロックも条件で追加します。こうすることで、実際にタッチされたボタンのみが動作するようになります。
「メッセージを送って待つ」ブロックを使う
今回は、他スプライトに動作指示を出すために、「メッセージを送って待つ」ブロックを使います。
前回使用した「メッセージを送る」と違って、今回使うブロックの「待つ」という動作は、メッセージを受け取った側のプログラムが完了するまで待ってくれる動作になります。
今回では以下のような流れになります。
- 左タッチボタンが押されると、左タッチボタンを送り、左タッチボタンプログラムは「待ち」状態になる。
- 自分車(メッセージを受け取ったスプライト)がプログラムを動かす。
- 自分車のプログラムが完了すると、左タッチボタンの待ちが解除されて、左タッチボタンのプログラムが動き始める。
メッセージを受け取って車を動かす
車を動かすプログラムは、前回キー操作で車を動かすでつくったプログラムを流用することができます。
流用の手順としては、以下となります。
- キー操作で車を動かす部分のプログラムの中で赤枠で囲った部分をコピーする
- 「左タッチを受け取ったら」の下に追加する
- 条件から「左向き矢印キーがおされたら」を削除する
これで今回のプログラミングは完了です。お疲れ様です。
動作確認
ではこれで動作確認をしてみましょう。
左ボタンをタッチ(クリック)すると、車が左に、
右ボタンをタッチ(クリック)すると、車が右に移動することがわかります。
さいごに
今回は車をキーボードではなく、スマホのタッチやマウスクリックで操作できるようにしました。
スマホ画面にボタンを配置して、そのボタンをタッチしてスプライトを操作することはよく使うので、ぜひ応用してみてください!
次回
工事中です。お楽しみに!
コメント