皆さんこんにちは、Namazuです。
これはtraPAdventCalendar2017の15日目くらい、11/6(Mon)の記事です。
イントロダクション
かつて幅を利かせていたアンチUnity過激派勢力の活動も部員の増加に伴って鎮静化され、徐々にUnityを使ってゲームを作る部員も増えてきました。
私の考えるUnityの最も優れている点は、AndroidやiOS向けのゲームが手軽に制作できることです。
しかしスマホ向けとなるとPC向けのゲームを作るのとは色々と勝手が違います。特に入力の違いは顕著で、PCはキーボードやマウスで入力を受け取るのに対してスマホではタッチで入力を受け取ります。
そこでこの記事では、Unityでのタッチの扱い方に重点を置いて簡単なゲームを制作する過程を紹介したいと思います。作成するゲームはパターンをひたすら描き続けるだけのシンプルなものです。
ここでパターンとは、端末起動時やスリープ解除時のセキュリティロックに用いられるパターンロックのようなものを指します。
なお、この記事は初心者～中級者向けです。
上級者の皆さんはお手元に鉞をご用意の上読み進めて頂ければ幸いです。
準備
まずはプロジェクトを作成してください。
Unityの基本的な操作についてはtyoxu君が書いてくれたのでそちらをご覧ください。
ただし、ここでは3Dではなく2Dで作成します。
タッチを受け取る
タッチの取得に関しては、GodTouchという便利なAssetがあったのでそちらを利用することとします。
DLしたらGodTouchをインポートします。
ProjectビューのAssetフォルダを右クリックして、[Import Package]-[Custom Package]から先ほどDLしたフォルダ内にあるGodTouch.unitypackageを選択します。その後表示されるウィンドウですべてのアイテムを選択して[Import]で完了です。
あとは、コード内でusing GodTouchesと記述すればインポートしたAssetの内容を利用することが出来ます。
タッチを処理する
さて、タッチを受け取ったので今度はそれをパターンの入力として反映させましょう。
ボタンのように予め用意されたAssetがあれば楽なのですが、無さそうなので自作します。
タッチされた座標とパターン一つ一つの座標を見て当たり判定をすればいいですね。
パターンを受け取るにはタッチされた順番を保存しておく必要があります。
簡単のため今回は同じ点は二回以上通らない仕様にしましたので、一度通ったら当たり判定を通さないことで対応しました。
後は、LineRendererを用いて線を引いたり通った点は色を変えたりすることでユーザーに自然なフィードバックを与えることができます。
タッチのフレーム抜けを防ぐ
画面をタッチして線を引くことと紙に鉛筆で線を引くことは同じように思えますが実はそこには大きな違いがあります。それはタッチの入力が連続的でないということです。
つまり画面をタッチして線を引く（ドラッグする）時、プログラムが受け取ることができるのは軌道に沿って打たれた点の情報です。
そこで、タッチされた点とパターンの円の当たり判定をするのではなく、現在の点と一つ前の点の線分と円の当たり判定をしましょう。ベクトルの内積を使うとスッキリと書けます。
お題のパターンを生成する
先述までの段階でタッチを取得してパターン入力に反映させることが出来ましたが、これだけでは流石に面白くないのでお題を与え、それと同じパターンを入力されたら新しいお題を与え…という仕様にしましょう。
以下の手順でお題を作成します。
- 通る点の数を決める
- 最初の点を適当に決める
- 既に通過した点や最後の点から線を結んだ時その線分上に別の点を含んでしまう点を除いた点の中からランダムに一点選び、次の点とする
- 最初に定めた点の数に達するまで手順3を繰り返す
手順3の太文字部についてですが、例えば最後に左上の点を通った場合次に右上の点を選んでしまうと、見た目は左上の点から中央上の点を経由して右上の点に行くのと区別がつきません。それを防ぐためにつけた条件です。
入力が正しいかを判定する
お題で与えたパターンに対してユーザーから受け取ったパターンが正しいかを判定します。
生成したパターンに対してどちらからなぞるかで二通りの正解があることに注意すれば特に難しくありません。
正解していた場合は新しいお題を生成して与えましょう。
結果
更に制限時間やスコアなどをつけるとゲーム性が増してきますね。
最後に
実は今日の記事ではActions on Googleのアプリを作ってみる様子をご紹介する予定でしたが、諸事情により内容を変更してお届けして参りました。
お詫びにといっては何ですが、Google Home三兄弟でEVERYBODYを流してみた様子を撮影しましたので掲載いたします。
https://twitter.com/blonde_namazu/status/924595414489219072
