5
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

ベクトルタイルで「地図記号を探すゲーム」を作ってみた話

5
Posted at

はじめに

これは MapLibre Advent Calendar 2025 20日目の記事です。

ベクトルタイルの特徴は、「地物の属性を機械的に読める」という点です。ラスタタイルと異なり、目に見える部分と機械的に判読される部分を分離することができます。

せっかくなら、この特性を活かして遊んでみたいと思い、「地図記号を探すゲーム」を作成してみたので紹介します。

ベクトルタイルの機械判読という特性を生かして、「人には見えていない(発見できていない)」けれど、プログラム側は「存在することを知っている」という情報の非対称性を作れることが、宝探しのようなゲームを作るうえで都合が良いわけです。

  • ↓ゲームのイメージ:出題された地図記号を地図上で探していくゲームとなる

ゲームのサンプル.png

  • ゲームのプレイはこちら

  • レポジトリはこちら

コンセプト

理想としては、どんなところにそれぞれの地図記号が多いかを体感し、地理の学習や地域理解につながることを目指しています。地図記号は地域によって大きく分布が異なり、その違いから土地の特色が見えてきます。

(例)

  • 警察署や官公署は町の中心部に立地していることが多いです
  • 一方、畑や果樹園は、町の中心から離れないと探しにくいです
  • 三角点は小高いところ、水準点は国道沿いに多いです
  • 笹地は北日本、竹林は南日本でよく見られます
  • ガス井は限られた場所にしかありません

ゲームを通して、地図を読む面白さを感じてもらえると嬉しいです。ゲームの雰囲気としては GeoGuessr に似ているかもしれません。

実装について

ゲームの骨格となる仕組み自体はシンプルです。

  1. 出題:難易度に応じた出題内容からランダムに記号を提示
  2. 探索:プレイヤーは、ランダムな地点からスタートして地図上を探索
  3. 回答:該当する記号を見つけてクリック
  4. 判定:プログラムは、クリックされた地物が出題されたものかチェックして正誤を判定

出題時には、出題内容のリストから難易度に応じてランダムに記号を選んでいます。地図を動かし、ベクトルタイルがロードされていく中で、プレイヤーがまだ発見していない地物も、プログラム側では「存在する」ことが分かっているため、この情報差をそのまま宝探しの構造に利用できます。

ウェブ地図や空間演算については、MapLibre GL JS や Turf.js を使いました。

ゲームとしての工夫

ただ地図を眺めるだけでは面白さに欠けるので、いくつかゲーム性を加えています。

  • 初期位置:毎回知らない場所に飛ばされるので、疑似的な地図の旅が楽しめます
  • 採点:探索距離や間違えた回数をもとに点数化し、少ない移動で見逃しなく正解すると高得点になります
  • ズーム制限:縮小しすぎるとどこにいるのか簡単に分かってしまうため、表示できるズームレベルを大縮尺のみに制限しました

知らない場所をぜひ探検してほしいので、後ろ2つは、知っている場所へ移動しようとする動きを制約したり、ペナルティを加えたりすることを意図しています。

見逃しについては、地図を動かすたびに、map.queryRenderedFeatures() を用いて、表示されている地物を機械的に取得してチェックを行っています。複数レイヤから構成される地物であれば2重判定してしまう等、プレイヤーにとって厳しすぎる(開発者にとってはテキトーな?)判定もしてしまうのですが、それはご愛敬ということで……。

クリアした後は、点数のほか、探索の軌跡を表示しているのが工夫点です。

  • ↓クリアの様子:軌跡を見ると、西の方でうろうろしていた様子が分かる

クリアの様子.png

出題難易度

難易度を設定しており、出題数と出題範囲、スタート地点が異なります。

  • 難易度「入門」:見つけやすい地図記号に絞って出題します。初期地点は都道府県庁所在地等です
  • 難易度「標準」:主に点データの記号から出題します
  • 難易度「難しい」:ラインやポリゴンについても出題します
  • 難易度「かなり難しい」:注記の分類も出題します
  • 難易度「無理かも」:そもそも実在するか怪しい地物を出題します(ネタ枠)

「難しい」「かなり難しい」にも該当する地物が存在しない可能性があります。

今回のゲームで利用しているベクトルタイルは、国土地理院最適化ベクトルタイルです。

注記分類コード・地物種別コード一覧が公開されており、この表のコードが割り振られた地物を1つの記号として取り扱っています。(そのため、クリック時の正誤判定は、注記分類コード・地物種別コードが出題したものと合致しているかを判定しています。)

難易度が難しくなるほど、この一覧表全般から出題するようになります。「難しい」以上をこなせるようになると、国土地理院最適化ベクトルタイルのデータ構造や多様性が段々とわかってくるかもしれません。

なお、「無理かも」は、私が見て「こんな地物存在しないだろ!」と思ったものから出題しています(逆に他の難易度の出題範囲からは除いています)。データ上は定義されているものの、実在例を確認できていない(あるいは極めて稀な)地物を、あえてネタ枠として出題しているわけです。属性の機械的な組み合わせから生まれた「道路中心線/石段/橋・高架」「道路中心線/2条道路中心線 庭園路/雪覆い」等が該当します。探せたら教えてください……。

  • ↓「かなり難しい」の例:知らない場所に飛ばされるので、そこから地図記号がありそうな場所へ移動する必要がある。下の例だと、海岸線や灯台があるので川を下って海へ行きたい。水部凹地方向線を見つけるには、等深線記号のある湖に行かないといけない。採鉱地や万年雪は場所が限られるので、知識がないとあたりを付けるのは難しい。「はえ、岩礁等」は注記だが、これまで意識したことなんてないぞ?

「かなり難しい」のサンプル.png

おわりに

このゲーム自体は、特別な新技術を使っているわけではありませんが、ベクトルタイルの機械判読性を、ちょっと別の方向から使った例として紹介したいと思い、記事にしてみました。

ゲームっぽく採点機能なんてつけてみましたが、バランス調整がかなり大変で、ゲームを作る難しさ・奥深さを感じたのも良い経験でした(結局面白くなったのかは怪しい……)。

記事執筆にあたって、ChatGPT にお手伝いしてもらいました。生成したものそのままとはいかず、かなり手は加えています。

5
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?