#programming #html #css #Javascript # ゲーム外でマップを見るツール

本内容を利用した場合の一切の責任を私は負いません。

機能

ゲームのマップは大きいこともあって、ゲームの独自のUIによって見ることができるようになっている。
このため、ゲームを起動せずに、ゲームを使わずにマップを見ることができない。
当然、ゲームが使えなくなっても見ることができない。
マップのスナップをタイル状に取得し、それをブラウザ上に並べてマップのように見るためのツールです。
(スナップはゲーム上で予め取得しておく必要があります。
通常の任意ウィンドウスナップ(Windowsキー+Altキー+PrintScreenキー)で構いません。)
ゲームにレイヤーがある場合、レイヤー切り替えにも対応しています。
(当然、その場合はレイヤー分のスナップも予め取得しておく必要があります。)
欠けないことを意識するくらいで、ドット単位の正確なタイルである必要はありません。
(もちろん、その分、見やすさは下がります。)

ブラウザ

Google Chrome
バージョン: 96.0.4664.110（Official Build） （64 ビット）

スナップファイル名のルール

下記のルールに合っている必要があります。
<横位置>,<縦位置>[,<レイヤー>][.拡張子]
位置は、マップ左上を横0、縦0で、右に行くと横が増加、下に行くと縦が増加した値です。
例えば、左上の右は1,0になります。
レイヤーが無い場合はカンマを含めてファイル名に含めないようにして下さい。
レイヤーの基点も0です。
拡張子は必ずしも必要ではありません。
というのは、ブラウザがファイル内容を自動判別する場合があるためです。
(ChromeはPNGファイルの拡張子を削ってもPNGとして認識する。)

バージョン

• ブラウザ Google Chrome バージョン: 96.0.4664.110（Official Build） （64 ビット）

準備

1. 下記のリポジトリをダウンロード
   https://github.com/github895439/MapViewer
2. ダウンロードしたものを展開

リポジトリの内容

• ONI_Mission5フォルダ
  サンプルデータです。

使い方

1. ブラウザでMapViewer.htmlをオープン
2. フォームに入力するか、「設定ロード」ボタン押下
3. 「ビューオープン」ボタン押下
4. ビューウィンドウをキーで操作
   "k: キー割り当てを表示",
   "i: 現位置を表示",
   "h: ホームへ移動",
   "w: 上へ移動(半スナップ分)",
   "a: 左へ移動(半スナップ分)",
   "s: 下へ移動(半スナップ分)",
   "d: 右へ移動(半スナップ分)",
   "1～0: ショートカットへ移動",
   "zxcvb: レイヤー0～5を表示",

補足

ファイル名以外の位置情報は、半スナップ単位です。
例えば、ホーム2,10という位置は、ファイル名1,5になります。
iキーの情報も半スナップ単位の値です。
当然、サンプルデータのスナップを変えて、ファイル名をスナップファイル名のルールに従った名前にすれば他のマップも見れます。
ブラウザ上での動作で設定をファイルに保存することができないため、texareaタグ内にJSONで保持しています。
これをファイルに保存し、保存したものをtexareaタグに貼って「設定ロード」ボタンを押せば、同一動作を行えます。

主な履歴

無し。