作り方
点描写は繋ぐことができる点と点を制限しながら、繋いでいくゲームになります。 実現するためには、まず Web 上ですべての SVG 描画要素を path に変換します。 SVG の下に Canvas を配置し、タップ時だけ線を書けるようにします。 これは SVG 全体にタッチイベントをセットしておいて、Canvas へ転送すれば良いです。 他の実装方法もある気がしますが、ぷちぷち点を繋げるので、この方法が今のところはいい感じに思えています。 次に、隣接する path 内部の 2座標が線で結ばれた時に、SVG の線を復元します。 線の復元は元の path データのコマンドをすべて M/m (move) にしておいて、 結ばれた座標だけ元のコマンドに戻すことで実現できます。上記が作り方の基本ですが、実際はもう少し必要です。 たとえば点と点の隣接状態は Z/z/M/m コマンドを解析しながら行なう必要があり、 重複する座標に点があったときのイベント処理を考慮する必要があります。 この 2つがかなり面倒でした。
アイコンの調整
対象アイコンは アイコン点つなぎ や 漢字点つなぎ と同じものが使えます。 ただアイコンのほうはやや苦労しました。 具体的には アイコン点描写 は解答を先に表示しているので、プロットするときと差があると面白くありません。 このとき、透明な外枠を付けている Tabler Icon の違和感が大きい問題が起きました。透明な枠はプロットする必要ないですからね。 アイコンセットを変えることも検討して結構色々なアイコンセットを試したのですが、 透明な外枠を付けているアイコンが意外と多かったので、Tabler Icon は中身を少し弄ることで対処しました。 こういう細かな調整が必要な時もあるので、アイコンセットはライセンスが緩くないと難しいなと感じました。 今のところ MIT / Apache-2.0 / CC-BY / SIL-OFL-1.1 に限定しています。逆に対処不能で諦めたのは Solar Icon Set でした。 基本的にはいい感じなのですが、複雑なアイコン (ex: Astronomy/Rocket.svg) を描画する時に、不要なデータが多すぎて点を繋ぐことが困難でした。 まあ SVG はどう作っても良いものなので、最小のポイントデータで作成されている保証はないですからねえ。 画像から枠を抽出しながら SVG に自動変換したもののほうが最小化しやすかったりするかも知れません。 仕方ないので再びアイコン探しを頑張り、Streamline Core (line) が良さそうだったので利用してみました。 たいていのアイコンはやはり Star 数をベースに探していくと、最適化されていることが多いかな。 Material Icons とか Bootstrap Icons などはがっつり最適化されてます。
個人的には結構いい感じに完成したアプリなんじゃないかと思っています。 前作の アイコン点つなぎ では線を引く仕組みを作るのは困難でしたが、 これなら線を引く練習にも使えます。 ただしスマホでプレイするのは難しいので、タブレットか PC でプレイするほうが良さそう。 またほとんど同じ位置に点がある時は二回なぞらないといけないのは注意点でしょうか。 こういうのをどこまでチェックするかは割と難しい問題です。
0 件のコメント:
コメントを投稿