タブレットでも遊べるゲームをScratchで作るため、ゲームに使えるタッチ操作を作っています。今回は、ディスプレイを指ではらう「フリック」と「スワイプ」を実現します。

スマホやタブレットで、Scratchで作ったゲームができるようになれば、まわりの友達にも遊んでもらえますよね！
プログラムは、前回作ったパチンコ操作とよく似ています。

フリック操作を考える

まずは、フリックを作ってみましょう。

フリックは、ディスプレイを指で”すばやくはらう”動作ですね。文字を入力するときに、フリック入力なんて操作を使います。

この操作は、3つの段階に分けることができます。

  • ready：何もさわらない
  • flick：画面にタッチ。そのまま、指で位置を変える
  • go：指をはなすと、はっしゃ！

この3つの状態は、特定のアクションで変化します。図にすると、こんな感じです。

マルが状態、矢印がアクション。「go」から「ready」には、強制的に進みます。この図だけ見ると、実は前回のストリングアクションとほとんど同じです。「flick」から「ready」へ、キャンセルで戻れるところが違っています。

プログラミング – フリック

この3つの状態に合わせて、プログラムを作っていきましょう。ここでは、状態ごとにブロックのかたまりを用意します。また、状態をあらわす「state」変数を用意します。

1. 指の動きに合わせる

まずは、指の動きに合わせて動くだけのプログラムです。

「ready」で、タッチされるのを待ちます。スプライトが押されたら「flick」に移行します。「マウスが押された」でなくなるまで、指の位置に合わせて移動して。指を離したら「ready」に戻ります。

指を離した時「0.1秒待つ」が入っているのは、「ready」と「flick」が重なるのを防ぐため。発射しないので、まだ「go」はありません。

01 Flick Test on Scratch
https://scratch.mit.edu/projects/303388358/

2. 指をはなすと飛んでいく

パチンコ操作と違って、指を動かした方向に発射します。

そのため、飛んでいく方向を検出できるよう「start」スプライトを追加しました。マウスが押されなくなったら、向きを「start」に向けてから「180度回す」しています。これで、「start」とは反対方向を向きます。そして、「goを受け取ったとき」ブロックに移動して移動を始めます。「speed」は、「startまでの距離」を元に計算しています。

でも、これだと、パチンコ操作と方向以外は同じで、ゆっくり指を動かしても操作できてしまいます。

02 Flick Test on Scratch
https://scratch.mit.edu/projects/303622035/

3. すばやく動かす

そこで、タイマー追加して。指を動かせる時間と距離の上限を設定しています。一定の時間以内(0.6)なら発射して、そうでなければキャンセルして「ready」に戻ります。

「speed」は、マウスを離したポイントまでの距離と、マウスを離した時間から計算しています。マウスを離したポイントが一定の距離を超えたら、その上限の値に抑えています。

これで、フリック操作の完成です。

03 Flick Test on Scratch
https://scratch.mit.edu/projects/303736128/

ゲームっぽくする

そこで、簡単なゲームっぽくしてみました。フリックでボールを発射します。ボールは、放物線で落下します。

ただ、あんまり面白くないなぁ。ボールの発射なら、ストリングアクションのほうが、ちゃんと狙いを付けられていいかも。

Flick Shoot on Scratch
https://scratch.mit.edu/projects/304067514/

スワイプを作る

次は、スワイプを作ります。今回は、イラストを入れ替えるプログラムを作ってみましょう。これも、ストリング・アクションやフリックとよく似ています。

スワイプ操作を考える

操作は、4つの段階に分けることができます。

  • ready：何もさわらない
  • swipe：画面にタッチ。そのまま指で位置を変える
  • slide_out：指をはなすと、絵が外に移動
  • slide_in：反対側から、次の絵が中に移動

図にすると、こんな感じです。

フリックで「go」だったところが、「slide_out」と「slide_in」に変わりました。スワイプでイラストを外に移動させて、反対側から次のイラストを中に移動させています。「slide_out」から「slide_in」、「slide_in」から「ready」には強制的に移行します。

プログラミング – スワイプ

スワイププログラムは、こんなふうに、フリックの「2. 指をはなすと飛んでいく」の続きになっています。「swipe」状態で、指をはなすか一定の距離を超えたら、「slide_out」に移行します。

10 Swipe Test on Scratch
https://scratch.mit.edu/projects/305944329/

イラストを入れ替える１

単純なイラストを入れ替えるプログラムを作ってみました。

11 Swipe Viewer on Scratch
https://scratch.mit.edu/projects/305956157/

イラストを入れ替える２

こちらは、顔とからだ・あしを合わせるパズル？ゲームです。

Swipe Me – へんしんどうぶつ on Scratch
https://scratch.mit.edu/projects/305964587/

やってみよう

という訳で、フリックとスワイプ操作を作りました。開発過程は、こちらのスタジオにまとめてあります。

Scratchスタジオ – へんしんどうぶつ の開発
https://scratch.mit.edu/studios/8049927

ぜひ、タブレットらしいゲームを作ってみてください。