ミニマップ

画面に映らない周りの道

見下ろしの迷路や建物の中を進むゲームでは、画面に映るのはキャラクターの周りの一部だけである。分かれ道に来ても、それぞれの道の先が画面の外にあれば、どちらがゴールへ続くかは判断できない。そこで、周りの地図を縮めて画面の隅に出し、進みながら画面に映っていない道も確かめられるようにする。この地図をミニマップと呼ぶ¹。遊んでいる画面に重ねて出す表示なので、「HUD」の一つにあたる。

デモの画面に映るのはキャラクターから左右に 6 マス、上下に 3 マスほどで、迷路（横 29 マス、縦 15 マス）の約 2 割である。ゴールはスタートから東へ 26 マス離れた所にある。

デモの自動再生で歩いているもの

同じ入力を 2 つの段に流すと、ミニマップがあってもなくてもキャラクターは同じ道を歩く。これでは、ミニマップで何がわかるようになったかが歩き方に表れない。そこで、デモの自動再生ではプレイヤーのふるまいのモデルに段ごとに歩かせている。規則はどちらの段も同じで、違うのはそれぞれの段でわかることだけである。

• ゴールの位置がわかるとき：わかっている道のうちゴールに最も近づく向きへ進む。まだわからない所は通れるものとして考える。近さが同じなら、まっすぐの道を選ぶ。
• ゴールの位置がわからないとき：分かれ道では、まだ画面に映っていない所へ通じる道を右、まっすぐ、左の順に選ぶ。画面に映って行き止まりとわかった道には入らない。

上の段は画面に映った所だけがわかり、ゴールの位置は画面に映るまでわからない。下の段はミニマップの印でゴールの位置が最初からわかり、ミニマップに映った道もわかる。どちらのモデルも一度わかった道を忘れない。歩数の差はこのモデルで比べた差であり、実際のプレイヤーの迷い方を測ったものではない。

スタートから 10 歩進んだ分かれ道で、2 つの段の歩き方が分かれる。デモはここで 2 秒止めて「分かれ道。ゴールはどっち？」と出す。上の段の画面には東へ延びる道と南へ下りる道が映っているが、どちらの先も画面の外にある。下の段のミニマップには、東の縁にゴールの向きを指す三角が出ている。

上の段は進む向き（南）から見て右が壁なので、次に試すまっすぐの道（南）へ進む。南の道の先の行き止まりを回り、58 歩後に同じ分かれ道へ戻ってくる。ゴールまでに 96 歩かかり、そのうち 29 歩は一度通った所をまた通っている。下の段は東の道を選び、最短の 38 歩で着く。

ミニマップに載せるもの

ミニマップに載せるものは次の四つを基本にする。

• 今いる位置と向き：矢印で示す。向きがないと、ミニマップで見つけた道がキャラクターから見て右にあるのか左にあるのかがわからない。
• 目的地：印で示す。目的地が映す範囲の外にあるときは、ミニマップの縁に寄せて目的地の方向を指す形に変える。
• 通った所：色を変えて残す。同じ道を何度も通っていることにプレイヤーが気づける。
• 近くの敵：点で示す。画面の外から近づく敵に気づける。

デモの下の段ではミニマップの矢印が今いる位置と向き、星と縁の大きな三角がゴール、塗った道が通った所、丸い点が敵である。

この中で、分かれ道でどちらへ進むかを決める手がかりになるのは、目的地の印である。デモの「ゴールの印を出す」を切ると、下の段もゴールが画面に映るまで位置がわからず、86 歩かかる。ミニマップに道の形が映っている分だけ行き止まりを避けられ、上の段より 10 歩少ない。ただし、分かれ道でどちらを選べばよいかの手がかりにはならない。

載せるものを増やすほど、ミニマップの中で目当ての印を探す時間が延びる。印ごとに形と色を変えて見分けられるようにし、どの印を目立たせるかは「情報の優先度」で決める。いま進む向きを決めるのに使わないもの（拾える物の位置など）は、ボタンで開く全体の地図に回す。

映す範囲と縮尺

ミニマップの大きさが同じなら、映す範囲を広げるほど縮尺は小さくなり、1 マスが小さく描かれる。映す範囲を決めるときは、道の先が見えることと道が見分けられることの両方を確かめる。

デモの「映す範囲」の近くはキャラクターから上下左右に 6 マス（横は画面と同じ幅）、広くは 9 マスを映す。近くにすると、下の段も 48 歩かかる。分かれ道から南へ入った道は東へ 8 マス進んだ所で行き止まりになるが、近くの範囲にはこの行き止まりが映らない。モデルには南の道も東の道もゴールまで同じ 24 歩に見えるので、下の段はまっすぐの南へ入る。東へ 3 マス進んだ所で行き止まりが映り、引き返す。広くなら分かれ道に立った時点で行き止まりの奥の壁まで映る。南の道は東の道より 2 歩遠いと見込めるので、東を選べる。映す範囲は分かれ道に立ったときに、その先が行き止まりかどうかまで映る広さを目安にする。

「全体」で迷路の全体を映すと、下の段の歩数は広くと同じ 38 歩のままで、1 マスは画面の上の 1 マスの約 10 分の 1 に縮む。このページを幅 360px の画面で開くと、ミニマップの 1 マスは近くで 5px ほど、広くで 4px 足らず、全体では 2.5px に満たない。広い範囲を見渡すのは全体の地図に任せる。ミニマップは遊ぶ環境のうち画面がいちばん小さく映るもので、近くの道が見分けられる縮尺にとどめる。

北を上にするか、進む向きを上にするか

ミニマップの向きには北を常に上にする作りと、キャラクターの進む向きを常に上にする作りがある。前者をノースアップ、後者をヘディングアップと呼ぶ。ヘディングアップでは、キャラクターが向きを変えるたびにミニマップが回る。

どちらにするかは画面の上がどの向きかに合わせて決める。デモの画面はカメラが回らない見下ろしで、画面の上が常に北になっている。「上にする向き」を「進む向き」にすると、東へ進んでいるあいだは、画面で右にある東の道がミニマップでは上に描かれる。画面とミニマップで上の向きが違うと、ミニマップで見つけた道が画面のどちらにあるかを頭の中で回して考えることになる。カメラが回らない見下ろしや横から映すゲームでは、ノースアップにする。カメラがキャラクターの後ろから進む向きを映し、向きを変えるとカメラも回るゲームでは画面の奥が進む向きになるので、ヘディングアップにする。

ヘディングアップでは北の向きをミニマップの縁に印で示す（デモでは縁の小さな三角）。向きが変わったときは一度に回さず、少しずつ回してどちらへ回ったかを見せる。デモでは 90 度を 8 フレーム（約 0.13 秒）かけて回している。

まだ見ていない所の扱い

まだ行っていない所の道までミニマップに最初から描くかどうかも決める。デモの「まだ見ていない所を隠す」を入れると、ミニマップには画面に映ったことのある所だけを描く。下の段は映す範囲を広くにしていても分かれ道の先の道がわからず、近くのときと同じ 48 歩かかる。

隠すと、目的地へ着くまでの手間は増える。その代わり、歩いて確かめるまで道がわからないので、迷路を探る遊びが残る。地図が埋まっていくことがどこまで探したかの目安になる。探索そのものを遊ばせるゲームでは隠し、目的地へ向かう途中の移動を短くしたいゲームでは隠さない。一度入った部屋はその全体を描く、地図を拾うとその階の全体を描く、のように途中から描き足す作り方もある。

「ゴールの印を出す」も切ると、下の段は上の段と同じ道を同じ 96 歩で歩く。下の段のモデルがミニマップから得ていたのは、ゴールの位置と画面の外の道の形の二つだけだからである。

画面を覆う面積

ミニマップは画面の隅の一部を覆い続ける。デモの「大きさ」の小、中、大は画面の面積のそれぞれ 5%、10%、20% を覆う。中ではミニマップの下の辺がキャラクターのいる行にかかる。東へ進むとき、3 マスほど先からの道の上半分が隠れる。大では 2 マスほど先から道がすっかり隠れ、小ならキャラクターのいる行にはかからない。

ミニマップの大きさは遊ぶ環境のうち画面がいちばん小さく映るもので、矢印、目的地の印、道が見分けられる最小の大きさにする。置く場所は HUD のほかの表示と同じく、画面の端から少し内側の角にする（デモでは幅と高さのそれぞれ 5% 内側）。ミニマップがキャラクターのいる高さまで下りてくると、進む先の道や敵を隠す。道が見分けにくいときは、ミニマップを大きくする前に映す範囲と載せるものを見直す。大きさは設定で変えられるようにする。

ミニマップばかり見てしまうとき

ミニマップに道の形と目的地と敵がすべて載っていると、プレイヤーはミニマップだけを見ても進める。ミニマップを見ているあいだは目が画面の隅にあり、画面の中ほどの景色や敵からは離れている。

景色を覚えて進んでほしいゲームや世界の作り込みを見てほしいゲームでは、ミニマップに載せるものを減らす。目的地の印を出さず、行き先は光や道の形で示す「導線」や、遠くから見える目印の「ランドマーク」で世界の中に示す。ミニマップを出すのはボタンを押しているあいだだけにする作り方もある。地図をキャラクターが手に持って広げる物として世界の中に置き、広げているあいだは足を止めさせる作り方（「ダイジェティック UI」）もある。

全体の地図との使い分け

ボタンで開く全体の地図は、遊びを止めて広い範囲を見渡すのに使う。ミニマップは、遊びを止めずに近くを確かめるのに使う。遠くの目的地までの道順を決めるのは全体の地図である。決めた道順のうち、次の分かれ道でどちらへ曲がるかを確かめるのはミニマップである。両方を置くときは、目的地や敵の印の形と色をそろえる。全体の地図で見た印をミニマップでも同じ印として見つけられるようにする。

作り方

ミニマップに描く物は、ゲームの世界の位置をミニマップの上の位置に直して描く。映す範囲の外にある目的地は、ミニマップの中心から目的地への向きを保ったまま縁まで引き寄せて描く。

// ゲームの世界の位置 (wx, wy) を、ミニマップの上の位置に直す（y は下向き）
// center はミニマップの中心に置く位置（多くはキャラクター）、scale は世界の 1 単位あたりのピクセル数
// angle は回転。ノースアップなら 0
// ヘディングアップなら -Math.PI / 2 - facing（facing は、東を 0 として時計回りに測った向き）
function toMinimap(wx, wy) {
  const dx = (wx - center.x) * scale;
  const dy = (wy - center.y) * scale;
  return {
    x: mapCenterX + dx * Math.cos(angle) - dy * Math.sin(angle),
    y: mapCenterY + dx * Math.sin(angle) + dy * Math.cos(angle),
  };
}

// 目的地の印。映す範囲の外なら、縁に寄せて、目的地の方向を指す矢印にする
const g = toMinimap(goal.x, goal.y);
const dx = g.x - mapCenterX;
const dy = g.y - mapCenterY;
const limit = mapSize / 2 - edgeMargin;
const f = Math.min(1, limit / Math.max(Math.abs(dx), Math.abs(dy)));
if (f < 1) drawArrow(mapCenterX + dx * f, mapCenterY + dy * f, Math.atan2(dy, dx));
else drawGoalMark(g.x, g.y);

脚注

1. 道を描かず、周りの敵や目標の位置だけを点で示す表示はレーダーと呼ぶことがある。 ↩