Swift3でiPhoneの音ゲーアプリは作れるか?③

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
Swift

少しずつ形になってきた音ゲーアプリのようなもの。今回も少しずつ完成に向けて作っていこうと思う。

前回よくわからなかった座標の話から始め、実際にレーンをタッチした時の処理を実装していく。

前回よくわからなかった座標の話

UIViewとSKShapeNodeは原点が異なる

UILabelやUIButtonなど、UIViewクラスの部品を配置するときは、画面左上を原点として扱っていた。
しかし、SKShapeNodeを含むSKNodeクラスは画面左下を原点として扱うという違いがある。

そのため、両者を同じように扱うともれなくハマる。

とりあえず今の配置をおさらいしてみる

前回までで判定ラインの配置はしたので、座標がどうなっているのかを図にしてみた。
ちなみに判定ラインを作っているコードはこうだ。UIViewクラスの部品なので、座標の原点は画面左上だ。

サイズの指定で「height: 10」と指定しているが、これは「originから下方向に10px伸びる」という解釈になる。

判定ラインの座標

判定ラインの座標

判定ライン付近でだけタッチに反応するようにする

画面を直接タッチしてプレーする音ゲーの場合、レーンのどこを触っても反応するというケースは少ない。たいていの場合、判定ライン付近をタッチさせる仕様になっているはずだ。

本アプリもそれに倣い、判定ライン付近のタッチにのみ反応するようにする。

仮想のプレーエリアを作成する

タッチすると反応する、仮想のプレーエリアを以下のように作成する。

  • 判定ラインを中心として、上下50pxずつの広さにする
  • 横幅は、ノートが降ってくるエリアと同様にする(画面の幅から、左右10pxずつのマージンを取った幅)
  • タッチしたレーンを区別するため、仮想のプレーエリアを5レーンに分割して作成する。かつ、それぞれのレーンに一意な名前をつける

また、タッチに反応させる目的でSKShapeNodeを使ってエリアを作成する。そのため、UIViewクラスで作った判定ラインとは原点が異なるので注意だ。

かなりゴチャッとしてしまったが、座標を図にすると以下のような感じだ。

プレーエリアの座標の図

薄いオレンジ色のエリアがプレーエリア

タッチしたレーンを判別する

ここでようやくタッチイベントの登場である。touchesBeganメソッドをオーバーライドして、タッチした場所にあるノードを拾う→プレーエリアのノードの名前を取得してどのレーンがタッチされたかを判別する、という処理を実装する。

プレーエリア以外に名前を設定しているノードはないため、とりあえずこの方法でいける。

実行してみる

こんな感じになった。

とりあえずどのレーンをタッチしたかは取得できるようになった。先は遠いなあ!!

今回はここまでー。

 

このシリーズの記事

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。