（開発報告）マップ接続UIつくっているよ！なはなし

いつもの進捗報告

恒例のみんなでつくるダンジョンの進捗報告をばをば。 いまは「マップ同士の接続をするためのユーザーインタフェース」をつくっています。 （以前にも軽く紹介したかもですが、ただいまちゃんと使えるように作りこんでいる段階です）

マップ同士をつなくパーツを「コネクタ」と呼んでいますが、こんな感じに「どのコネクタと接続するか？」を画面上で選んでいきます。

コネクタをみつける

まずは読み込むマップを選択し、表示されるマップからコネクタを選択します。マップが広いと画面に収まりきらないので、コネクタの存在場所を示す矢印が現れます。 矢印のほうに向かってスクロールするとコネクタが現れるので、そいつを選択してやれば接続完了といった具合です。

とりあえずこんなかんじに作っておいて、あとは様子をみながら改良するとかしないとかをしていけたらなーと思っています。

矢印の向き計算と画面とコネクタのあたり判定

ちょっとだけ実装の話をば。矢印の向きはCSSの transform: rotate で指定してあげています。コネクタの中心座標と矢印画像の中心座標を結ぶ直線のなす角が回転角度になるので、 距離 (x, y) を計算してJavaScriptのatan2 関数を使い、 回転角度 = Math.atan2(y, x) * 180 / Math.PI としてあげれば簡単に矢印回転角度を求められます。 あとは transform: rotate(回転角度deg) を矢印画像のスタイルとしてあててあげれば、コネクタの位置を向くように矢印の角度を決定することができます。 （CSSの画像変形は実装が楽でよいですね。）

ここで、ディスプレイ座標系はY軸が下を向くので、CSSで指定する回転角は時計回りが正の方向になるのですが、それをすっかり忘れていて1時間くらいつぶしてしまったのでした。また、 右向き矢印の画像を用意しておくと、計算した角度をそのまま回転角度と出来て楽でよいです。

コネクタが画面内に表示されているときは矢印を出したくないので、画面とコネクタのあたり判定もします。 Ps1(x) > Pc2(x) Ps1(y) > Pc2(y) Ps2(x) > Pc1(x) Ps2(y) > Pc1(y) の条件をすべて満たせばコネクタ矩形が画面内に入っているということになるので、このときは 矢印画像を表示しません。

これらの処理をマップをスクロールするごとに行えば、矢印がいい感じに動いたり表示されたりされなかったりするようになります。

雑記

昼間はおしごとでプログラミングをし、夜はこつこつと趣味開発を続けていますが、たまにパソコンから離れないと電池切れになってしまい、PC作業系についてはなにもしたくなくなってしまうことがあります。 ということで、それを防止するために今週末はまんが大会と称して積みマンガを消化していたりしました。気が付いたころに電池切れになって開発がエターなってしまう、みたいなことにならないように気を付けたいなと思ったのでした。

ではでは。