第32章.「タッチ操作の基本と応用」
タッチ操作の基本を学ぶ前に、タッチ操作をするための下準備から始めましょう！
何も無い画面をタッチするのでは分かりづらいから、画面に直線を引いて枠を作りましょう。
サンプルプログラムを用意したので、まずは緑色のコメント以外を次の画像と同じように入力してください！
サンプルプログラムを実行(RUN)すると、この画像のように表示されます。
線の数や幅は数値を変えることで変更できますが、分かりやすくするために3×3にしています。
プログラムを終了するには、何かボタンを押してください！
もし、このまま続けて学ぶ時間が無いという場合は、このサンプルプログラムを保存しておくと、続きが再開しやすくなります。
このまま続けられる場合は、保存しなくても大丈夫ですが、まだしばらく続きます。
先ほどのサンプルプログラムに少しだけプログラムを追加します。
各枠の中央辺りに数字を表示するために、GPUTCHR で数字を描きましょう。
次の画像と同じようにプログラムを追加してください！
追加したサンプルプログラムを実行(RUN)すると、この画像のように表示されます。
よく見たことのあるような並びの枠ができましたね。
これならタッチする場所が分かりやすいですね。
プログラムを終了するには、何かボタンを押してください！
それでは、いよいよタッチ操作ができるように命令を追加するのですが、タッチ操作には複数の命令が必要となります。
まず、TOUCH のヘルプをよく読んでください！
この情報がタッチ操作の重要なヒントになっています。
TOUCH のヘルプを読んだら、次の画像と同じように命令を追加してください！
前のサンプルプログラムを保存していれば、TOUCH 関連の部分を追加するだけで済みます。
ただし、少し変更する部分があり、ボタン入力待ちループが不要になるため、それは削除します。(※注意)
TOUCH 関連の命令を追加したプログラムを実行(RUN)すると、この画像のように表示されます。
見た目的には前と変わりないように見えますが、実際にタッチしてみると違いが分かります。(※この講座の画面をタッチしても意味はありません！)
それぞれの数字をタッチすると、TALK で音声が出ます。
プログラムを終了するには、何かボタンを押してください！
このようにタッチ範囲を設定することで、タッチによる操作が可能になります♪
これを参考にアレンジしてみてください！
このサンプルプログラムでは、GLINE で枠線を引いて、タッチ範囲が分かるようにしましたが、スプライトを使ってタッチ操作をするという方法もあります。
今回は、初心者がタッチ操作を学ぶのに最適な方法を選んだため、なるべく簡単な命令と仕組みにしましたが、別の命令や仕組みを使うこともできます。
いろいろと研究してみてください！
応用編その1.「ピアノみたいな鍵盤をタッチして演奏できるプログラム」
基本編のサンプルを保存してあれば、少しの変更だけで「ピアノみたいな鍵盤をタッチ操作」することもできます♪
鍵盤の白を表示するために、GFILL という命令を追加します！
これは四角形に塗りつぶす命令です。
また、各鍵盤を分けるために、黒で直線を引きます。
GCOLOR で色の変更ができます。
基本編のサンプルとは線の数と幅が異なるので、各数値を変更します！
基本編のサンプルをアレンジして作ったプログラムなので、各数値などを変更して、次の画像のように入力すれば、比較的簡単にできるでしょう。
元のプログラムを残したいと思ったら、別名で保存すればどちらも残せます。
GPUTCHR の形式が基本編のサンプルと異なっていますが、最後の数字を 1 から 0 に変えてから実行してみると、その理由が一目で分かります。
また、GCOLOR で文字色を黒以外に変えることもできますが、試しに実行してみると黒を選んだ理由が分かると思います。
とりあえず、最初は画像の通りに入力してみてください！
アレンジしたプログラムを実行(RUN)すると、この画像のように表示されます。
各鍵盤をタッチすると音が出て、ピアノのような演奏ができます♪
プログラムを終了するには、何かボタンを押してください！
このサンプルは簡易版なので、半音を出すことはできませんが、分かりやすさを重視しているため、シンプルな鍵盤にしています。
これを更にアレンジして、半音を出せる鍵盤に変えてみるのも良いと思います。
興味がある人は、是非挑戦してみてください！
応用編その2.「タッチした位置にスプライトを移動させるプログラム」（瞬間移動）
タッチ操作でスプライトを操れるようになると、いろいろな作品が作りやすくなります♪
ここまでの内容が理解できていれば、そんなに難しくはありません！
簡単な例として、上向き指のスプライトをタッチで操作するサンプルプログラムを用意しました。
このスプライトの番号はスマイルツールで確認できます。(画像を参照)
この画像と同じように入力すると、タッチした位置にスプライトが移動するようになります。
この例では、TT>0 としていますが、試しに TT==1 に変えてみると、動きの違いがハッキリ分かります。
TT>0 の場合は、タッチしたままスライドしても移動ができます。
どのように動くのが良いかによって、使い分けると良いでしょう。
とりあえず、最初は TT>0 と入力してみてください！
入力したプログラムを実行(RUN)すると、この画像のように表示されます。
画面のどこをタッチしても、指のスプライトがすぐに移動します。
タッチしたままスライドしても移動することを確認してください！
プログラムを終了するには、何かボタンを押してください！
指のスプライトを操作できるようになれば、後は別のスプライトに変えるだけですし、もう充分と言えますが、オマケにリバーシ駒(黒)を操作するサンプルも用意しました！
リバーシ駒(黒)の番号もスマイルツールで確認できます。(画像を参照)
リバーシ風の盤面を表示するために、こちらのほうがプログラムが多くなりますけど、ピアノの鍵盤を入力した時と同じような仕組みですので、難しくはないでしょう。(ただ、数値が異なることに注意してください！)
また、スプライトを最初に表示する位置も、画面の中央ではなく、盤面の中央になるので、数値が異なります！
入力したプログラムを実行(RUN)すると、この画像のように表示されます。
タッチした位置にリバーシの駒が移動します。
プログラムを終了するには、何かボタンを押してください！
このサンプルでは、タッチしてスプライトを移動させるのが目的なので、それ以外のことはできません…。m(_ _)m
これをリバーシとして遊べるようにするには、まだまだ多くのことを学ばなければなりません！
とりあえず、タッチ操作の方法を理解できれば、目的達成と考えてください。
その先は、また別の機会に…。
応用編その3.「タッチした位置に向かってスプライトが移動するプログラム」（遅延移動）
その2.ではタッチした瞬間にスプライトが移動していましたが、タッチした位置に向かってスプライトが移動するという表現が必要になる作品もあるでしょう。
そういう動きをするサンプルとして思い付いたのがボウリングの球でした。
デフォルト素材にボウリングのピンもあるので、ちょうど良いと思いました。
スマイルツールで定義番号を確認できます。(画像を参照)
初心者講座を番号順に進めてきた人なら、SPANIM の使い方をすでに知っていると思いますが、SPANIM のヘルプをよく読んでください！
今回はボウリングの球の移動と変更に、2つのアニメーションを使います。
そうすることで、ボウリングの球が回転しながら移動するという表現が可能になります♪
ボウリングのレーンやガターの溝を表現したり、球やピンを初期位置に並べたり、これまでに学んだことを応用して入力していくと、この画像のようなプログラムになります。
今回特徴的なのは、スプライトの初期位置と移動先を別々の変数にしていることです！
そうすることで、タッチして移動した後に、球を元の位置に戻すのが簡単になります。
入力したプログラムを実行(RUN)すると、この画像のように表示されます。
画面のどこかをタッチすると、そこに向かって球が転がって行きます。
プログラムを終了するには、何かボタンを押してください！
このサンプルでは、ガターの判定や各ピンの当たり判定を設定していないため、素通りしてしまいます。
これをゲームとして完成させるには、たくさんの処理を追加したり、プログラムの変更が必要です！
当たり判定については、次の章で学ぶことになりますが、それ以外については、この講座で扱う予定はありません。m(_ _)m
興味がある人は、自分自身で改良してみてください！