フォーカス移動

方向キーで選ぶ画面

マウスで遊ぶ画面なら、プレイヤーは押したい項目を直接指せる。コントローラーやキーボードの方向キーで遊ぶ画面では、選んでいる項目を一つ決めておき、方向の入力でそれを隣の項目へ動かして選ぶ。選んでいる項目をフォーカスと呼び、フォーカスを方向の入力で動かす仕組みをフォーカス移動と呼ぶ。フォーカスの位置を示す印はカーソルとも呼ばれる。フォーカス移動を作るときは、押した向きに対してどの項目へ移すかと、フォーカスがどこにあるかをどう見せるかを決める。

作った順に移す作り

手早く作れるのは、画面の項目を作った順に並べておき、下か右を押したら次の項目へ、上か左を押したら前の項目へ移す作りである。項目が縦一列に並び、上から順に作った画面なら、作った順と画面の上下が一致する。そのため、この作りでも押した向きに動く。デモの 2 つめの目的（一覧の最後の「体」から、最初の「武器」へ）で下の段の回り込みを切ると、どちらの段も上を 3 回押して着く。

項目が縦と横に並ぶ画面では、作った順と画面での並びが食い違う。デモの上の段は上の帯の 4 項目、左の一覧の 4 行、右の 2 つのボタンの順に作った画面で、フォーカスをこの順に移す。「武器」で右を押すと、右の「おまかせ」ではなく、一覧で次に作った「盾」へ下に動く。「武器」で上を押すと、一つ前に作った右上の「閉じる」へ飛ぶ。プレイヤーには作った順が見えないので、押すたびにフォーカスがどこへ移ったかを探し直すことになる。

デモでは下の段で最短になる向きを両方の段に押し、上の段が着かなければ、作った順を知っている人の最短の押し方で続けている。上の段に有利な続け方だが、既定の設定では 3 つの目的に上の段は 4 回、5 回、4 回かかる。下の段は 1 回、1 回、2 回で着く。上の段では押した向きと違う所へ動いた操作（動いた向きが押した向きから 45 度より大きくずれた操作）がそれぞれ 2 回、2 回、3 回ある。

押した向きにある近い項目の選び方

そこで、押した向きにある項目の中から画面での位置が近いものを選んで移す。候補にするのは、いまの項目の端よりも押した向きの先に、手前の端がある項目である。候補ごとに押した向きの距離（いまの項目の端から候補の手前の端まで）と、横のずれ（押した向きと直角な向きの、中心どうしの差）を測る。横のずれに重みを掛けて距離に足し、その値がいちばん小さい候補へ移す。

// 押した向きにある項目のうち、「押した向きの距離 + 重み × 横のずれ」がいちばん小さい項目
function nearest(current, items, dir, weight) {
  let best = null;
  let bestScore = Infinity;
  for (const item of items) {
    if (item === current) continue;
    const along = gapAlong(current, item, dir); // current の端から item の手前の端まで
    if (along < 0) continue; // 押した向きの先にない
    const side = offsetAcross(current, item, dir); // 押した向きと直角な向きの、中心どうしの差
    const score = along + weight * side;
    if (score < bestScore) {
      bestScore = score;
      best = item;
    }
  }
  return best; // null なら、押した向きに項目がない（動かさないか、回り込む）
}

デモの下の段は重みを 2 にしている。「武器」で右を押したとき、「おまかせ」は距離 16、横のずれ 57 で 16 + 2 × 57 = 130 になる。「閉じる」は距離 114、横のずれ 26 で 114 + 2 × 26 = 166 になるので、「おまかせ」へ移る。

重みを大きくするほど押した向きのまっすぐ先にある項目が選ばれやすくなり、小さくするほど斜めでも近い項目が選ばれやすくなる。デモの「横のずれの重み」を 3.5 以上にすると、「武器」で右を押したとき斜め下の近い「おまかせ」ではなく、ほぼ真横の遠い「閉じる」へ移る。このとき自動再生の下の段は、下を押して「盾」へ移ってから右を押し、2 回で「おまかせ」に着く。1 以下にすると、「おまかせ」で上を押したとき上の帯の「設定」ではなく、左上の近い「盾」へ移る。斜めの項目へ飛びやすいと感じたら重みを大きくし、斜めにある近い項目へ移れないと感じたら小さくする。

押した向きを逆にしても、元の項目に戻るとは限らない。デモの下の段で「武器」から右を押して「おまかせ」へ移った後に左を押すと、横のずれがいちばん小さい「体」へ移る。移る前の項目を覚えておき、反対の向きを押したときはその項目へ戻すと、来た道を押した向きのとおりに戻れる。

フォーカスを見失わない見せ方

フォーカスがどこにあるかわからなければ、プレイヤーは次に押す向きを決められない。デモの上の段は選択中の項目の背景を少し明るくするだけで、ほかの項目との差が小さい。下の段は選択中の項目に太い枠を付けて背景の色を変え、文字を太くして 8% 大きくしている。操作パネルの「下の段の選択中の見せ方」で、見せ方ごとの目立ち方を比べられる。

色の差だけで示すと、色を見分けにくい人や色の出方が違う画面で遊ぶ人には、どれが選択中かわからないことがある。枠の太さや大きさのような形の違いも一緒に付ける。

フォーカスが移るときは、枠を前の項目から新しい項目へ滑らせて移す。目が枠の動きを追うので、押した後に画面の中からフォーカスを探し直さずに済む。デモの「大きさと動きも」は枠を 0.1 秒かけて滑らせる。滑らせているあいだも、次の入力は受け付ける。動き終わるまで入力を捨てる作りにすると、続けて素早く押した操作が抜け落ちる（「先行入力」を参照）。

タブのように開いている項目とフォーカスのある項目が別々にある画面では、二つを違う見せ方にする。デモでは開いているタブ（装備）に下線を引き、フォーカスは背景や枠で示している。二つが同じ見せ方だと、どちらが選択中なのかを見分けられない。

回り込み

一覧の端でさらに押したとき、反対の端へ移す作りを回り込みと呼ぶ。長い一覧でも、端から端へ 1 回で移れる。デモの 2 つめの目的では、下の段は「体」で下を押し、回り込んで「武器」へ 1 回で着く。回り込みを切ると 3 回かかる。

回り込みには落とし穴が二つある。一つは長押しで一覧を送っているとき、端を越えて反対の端へ行き過ぎることである。長押しで続けて移るあいだは端で止め、押し直したときだけ回り込ませる。デモの下の段はこの作りにしている。

もう一つは項目が縦と横に並ぶ画面で、画面全体の端から反対の端へ回り込ませると、並びのつながらない項目へ飛ぶことである。回り込むのは一覧や横に並んだボタンのようなまとまりの中で、まとまりの並ぶ向きに押したときだけにする。デモの下の段では、一覧の「体」で下を押すと一覧の「武器」へ回り込むが、横に並んだボタンの「おまかせ」で下を押しても動かない。

長押しで続けて移る

方向を押し続けたら少し待ってから、一定の間隔で次の項目へ移り続ける作りにする。長い一覧を 1 項目ずつ押し直して送らずに済む。デモでは押し始めてから 0.4 秒後に次の項目へ移り、その後は 0.1 秒ごとに移る。最初に移るまで待たせるのは、1 回押したつもりで 2 項目進むのを防ぐためである。間隔が短すぎると目的の項目を通り過ぎ、長すぎると長い一覧を送るのに時間がかかる。

スティックでは倒した量が決めた値を超えたら押したものとし、その値より戻したら離したものとして、方向キーと同じように扱う。

最初のフォーカスと戻ったときの位置

画面を開いたときのフォーカスは、その画面でいちばん使う項目に置く。一時停止のメニューなら「続ける」に置き、押すと遊んでいた続きが失われる「タイトルへ戻る」のような項目には置かない。開いてすぐに決定を押したとき、取り返しのつかない操作が行われてしまうからである。こうした項目を押したときの確認の挟み方は「確認と取り消し」で扱う。

奥の画面から戻ったときは、奥の画面を開く前にフォーカスがあった項目へ戻す。メニューを閉じて開き直したときも、閉じたときの位置から始める。毎回最初の項目に戻す作りでは、同じ項目を選ぶたびに同じ回数だけ押し直すことになる。開き直したときにその項目が画面からなくなっていたら、最初の項目に置く。

マウスや画面に触る操作との行き来

マウスや画面に触る操作にも対応する画面では、方向キーとの行き来でフォーカスがずれないようにする。マウスで項目を指したら、フォーカスもその項目へ移す。その後に方向キーを押したら、指していた項目から動かす。マウスで指した項目と方向キーのフォーカスを別々に持つと、画面に印が二つ出て、決定を押したときにどちらが選ばれるのかわからなくなる。マウスで操作しているあいだはフォーカスの枠を隠し、方向キーが押されたら、その位置に枠を出し直してもよい。