ゲーム制作記#030「進捗：スワイプでパネル変更_前編」

■ はじめに

• この記事は「こんな問題、こんな感じで解決したで～」という流れを紹介したものです。技術解説サイトのように丁寧な手順解説やコード掲載はしていませんのであしからず。

• 今回は、「すでにある技術をどうにかこうにか自己流で再現しただけ」の車輪の再開発的な記事です。長いので前後編に分けてます。後編はこちら↓

---

■ 今回したこと

スワイプ処理を作って、左右にスワイプするごとにNPCと商品を切り替えるようにした！

＊＊＊＊＊＊＊＊
完成版の動画あるのですが、
よかったら記事を読み進めて途中経過の動画を見てから最後のお楽しみにしてもらえると嬉しい。
「長い記事は読まんから動画だけ見せ！」って感じでしたら、後半記事の目次下側の『■ そしてこれが完成形！』へ飛んだってください。
＊＊＊＊＊＊＊＊

今回は実装するのにだいぶ苦労しました…。
いつも『わからない処理はググって解決！』だったのが、今回はどうしても理想の処理が見つけられず…。
「まぁスワイプなんて慣れ親しんだ操作だし、頑張れば自分でどうにかなるやろ！」と思ったのがドツボの入り口…。

■ 最初にしたこと

コレやりたいぜ！ってことを書き出す。

• （『今回したこと』にも書いたように、）スワイプに合わせてパネル（NPCと商品）を切り替えたい

• NPCの人数を変更してもゲームオブジェクト数を変更しなくて済むようにコードで制御したい（無駄にオブジェクトを増やさず、コードの処理速度に頼る方向で！）

• スワイプ中、移動先のパネルもチラ見させるようにしたい（ここポイント！）

最後の項目にこだわったせいで、コードを自作することになった…。

■ 「スワイプ」自体は意外と最初に片付いた

やりたいことがまとまったので、次はどうやって解決していくかを考えていく。

まず、兎にも角にも「スワイプ処理」が必要！
これさえ出来れば後は楽勝！って感じで、指がカサカサになるまでひたすらスマホの画面をスワイプして「スワイプってどんな動き？」ってのを調査しました。

結果。
スワイプ自体は、”タッチした場所の座標”と”移動先の座標”を取得して、その差分の数値を使えばどうにかなるってことに早めに気づけた。

なんやメッチャシンプル！これで後はコード書くだけやん！
…と思ったのも束の間。

真の敵は「スワイプを使ってパネルを切り替える」という動きだった！
ほとんどのアプリで実装されているこのあたり前の処理が、現在の自分レベルで挑む相手じゃなかった。

■ 「切り替え」判定の奥深さ

ページ切り替え操作なんて、今までまったく意識してなかったが、
何度も何度も何度も何度もスワイプして分かったのが
「スワイプでのページ切り替えって意外と繊細！」ということ。
ページの切り替え判定ラインがどこなのか理解するのにだいぶ手こずったけれど、その過程は省いて 以下が検証の結果。

ページ切り替えには「押下～離すまでの時間」と「押下しながら横移動した距離」の、片方もしくは両方の数値が必要になる。

▼ 距離だけ必要なパターン
・時間に関係なく、画面横幅の約3/4の距離をスワイプ
▼距離と時間が両方必要なパターン
・短い時間＆画面横幅約1/4以上の距離をスワイプ

以上の条件をクリアした場合のみページが切り替わる様子（それ以外は元の状態に戻される)。
※自分が検証したのは縦画面で、横スワイプすると左右のページに切り替わるというものです。アプリによって多少の差異はあるかも

この結論に辿り着くのだけで30分以上かかった！

で、距離と時間が絡むという事は、つまりをページ切り替え処理には速度が必要になってくるということ！
速度の計算なんて学校の勉強以外で使ったことないわ…。

■ 必要な数値を検証するために別途アプリを作った

速度がフラグになるということは、判定用の速度数値を設定しないといけない。

速度を出すためには押下中の時間を測る必要がある。
さすがにこれを手動ストップウォッチでやるのは無理！

じゃあ、時間を測って速度を出すためのコードを作って、それで必要な数値を検証して～…と考えたところで、

「これテスト用のプロジェクトを別で作らないとあかん…」と気づいた。

てなわけで、速度調査のためだけのプロジェクトを新しく作ることになった。
（ヤバい。ドツボに穴が開いてて、さらに下にツボが置いてあった…。いつ出られるのか わからんくなってきた…。。。）

結果できたのがこれ↓

速度調査用アプリ

• 速度、スワイプ時間、X軸移動距離、Y軸移動距離が測れる

• 数値クリアボタンはめんどうだったので作ってない。

• 画面押下で数値リセット＆測定開始。

• 動画だと"押下"と"離した"タイミングがわかりにくい…；；

これを実装するにあたって、今までしたことが無かった「UpDataの使い方」とか「タイマー処理」とか「ポジションの取得」とか「速度計算の公式」(算数やで！)とか「androidの実機テスト方法」とかググりまくってサイト飛び回ったのは脱線甚だしいので割愛！

---

ちょうど半分くらいになったので、続きは後編で！