homeクラ合衆国Season3

homeクラ Season２の地図絵をもとに、拠点マップの背景画像を毎月更新するための手順です。

1地図画像を準備

配信中の地図絵の画像をベースにする場合、できるだけ大きな解像度でスクリーンショットを取ってください。

※ 注意点：スクリーンショットが傾いていないか要注意。最初から綺麗に切り取るのではなく、余分な部分も含めて広めに撮っておくと、後の加工がしやすくなります。

2綺麗に切り取る

保存したスクリーンショットを、画像加工ソフトやWEBの画像トリミングツールなどで綺麗に切り取ります。

※ 注意点：地図部の地図絵は額縁を横に7枚、縦に6枚で、縮尺1：4の構成になっています。切り取る際も、できるだけでいいので横縦の比率を7：6に近づけることを意識してください。

3ファイル名を付けて保存

保存した地図画像を map フォルダに保存してください。ファイル名はドロップダウンメニューにそのまま表示されるので、分かりやすい名前を付けてください（例：0704world_map.png）。

※ ファイル名のルールは自由です（日付である必要はありません）。ただし後で見て分かりやすいよう、更新した日付を入れておくのがおすすめです。

4動作確認

minecraft_map.html をダブルクリックした時に、右上のプルダウンメニューで地図画像の切り替えができれば成功です。

改造したい場合

※ この地図表示HTMLは homeクラ Season２に特化しています。改造したい場合は js/map-config.js の以下の部分を編集してください。

// ==========================================================
// 🗺️ 背景地図画像コンポーネント
// window.MapApp.mapConfig として公開します。
//
// ★ 新しい月の地図ができたら、この mapImageList に追記してください！
// 毎月の地図画像は "map" フォルダの中に入れてください
// 一番上（配列の先頭）が「初期表示される最新の地図」になります。新しい月の画像は
// 配列の先頭に追加してください。
// ==========================================================
const mapImageList = [
    {
        fileName: 'map/0704world_map.png',
        // [X座標, Z座標] の順で、画像の対角の2点を指定します（順不同でOK）。
        // 例：Chunkbaseで切り抜いた範囲が「X: -1600〜1600、Z: -1600〜1600」の場合
        //     bounds: [[-1600, -1600], [1600, 1600]]
        bounds: [[-1600, -1600], [1984, 1472]],
        opacity: 0.75 // 画像の透明度 (0.0 〜 1.0)
    },
    // ↓ 新しい月の地図を追加する場合は、この下に同じ形でコピペしてください。
    // 末尾の { } のブロックにも必ずカンマ「,」を付けてください（付け忘れると全体が動かなくなります）。
    // {
    //     fileName: 'map/0801world_map.png',
    //     bounds: [[-1600, -1600], [1984, 1472]],
    //     opacity: 0.75
    // },
];

bounds: [[-1600, -1600], [1984, 1472]]（左上の座標～右下の座標）の数字をいじって画像の大きさと座標を合わせることで、様々な背景画像を利用できます。

ドロップダウンに表示される名前は fileName の拡張子を除いた部分がそのまま使われます（例：map/0704world_map.png → 0704world_map）。

背景地図画像の作成ガイド

1地図画像を準備

2綺麗に切り取る

3ファイル名を付けて保存

4動作確認

改造したい場合