🗺️ マップチップ・うすしお味

ゲームの概要

『マップチップ・うすしお味』は、タイルマップエディタです。「マップチップ」と呼ばれる小さな正方形の画像を並べて、大きなマップ画面を作るためのソフトで、2Dゲームの背景づくりに古くから使われてきた手法をブラウザ上で実現しています。

使い方の流れはこうです。まず「🎨チップ追加」から画像を読み込みます。読み込んだ画像は指定したタイルサイズで自動的に分割され、左側のパレットに並びます。あとはパレットからタイルを選び、右側のマップに置いていくだけです。

描画のための道具がひととおりそろっています。ペン（P）で1マスずつ置く、消しゴム（E）で消す、塗りつぶし（🪣）で同じタイルの領域をまとめて置きかえる、範囲選択（M）で四角く選んでコピー（Ctrl+C）・貼り付け（Ctrl+V）する、といった操作ができます。取り消し（Ctrl+Z）にも対応しています。画面の移動はスペースキーを押しながらのドラッグ、拡大縮小はCtrl＋ホイールです。

レイヤー機能があるため、「地面の層」「建物の層」「木や装飾の層」のように重ねて管理できます。層ごとに追加・削除ができ、下の層を残したまま上だけを描き直せます。

ゲーム制作に役立つのがタグ設定です。タイルごとに「通行不可」のフラグや任意の共通タグを設定でき、さらにマップ上の特定のマスに個別のIDやパラメータを持たせることもできます。この情報はJSONデータとして保存できるため、自作のゲームプログラムから「このマスは壁だから通れない」といった判定に利用できます。見た目だけの画像として使いたい場合は、PNG（透過を保持）またはJPGで書き出せます。背景を透過・白・黒から選べるので、用途に応じて使い分けてください。

📖 遊び方

1. ツールを開き、「タイル:」の欄でマップチップ1枚あたりの大きさ（ピクセル数）を決めて「設定」を押します。
2. 「マップ:」の欄で作りたいマップの広さ（縦横のマス数）を決めて「新規」を押します。
3. 「🎨チップ追加」から、タイルとして使いたい画像を読み込みます。指定したサイズで自動的に分割され、左のパレットに並びます。
4. パレットからタイルを選び、マップ上をクリック（ドラッグ）して置いていきます。
5. 道具はショートカットでも切りかえられます。ペン＝P、消しゴム＝E、範囲選択＝M、詳細選択＝S。取り消しはCtrl+Zです。
6. 範囲選択（M）した部分はCtrl+Cでコピー、Ctrl+Vで貼り付けできます。同じ地形をくり返し配置するときに便利です。
7. 画面を動かすときはスペースキーを押しながらドラッグ、拡大縮小はCtrl＋マウスホイールです。
8. レイヤーの「➕」で層を追加できます。地面・建物・装飾のように分けて管理すると編集しやすくなります。
9. タイルに「通行不可」やタグを設定しておくと、書き出したJSONデータからゲームプログラム側で判定に使えます。
10. 完成したら「💾保存」でJSONデータを、「書出:」からPNGまたはJPG画像を保存します。PNGは透過を保持できます。

⚠️ 同梱しているサンプル素材について（出典）

本ツールには、起動時にすぐ試せるようサンプルのマップチップ素材を同梱しています。この素材は当サイトが制作したものではなく、フリー素材配布サイト「ピポヤ倉庫」で公開されている pipo-map001 系のマップチップ素材（pipo-map001.png、pipo-map001_at-mori.png、pipo-map001_at-umi.png ほか計9点）をお借りしています。著作権は制作者であるピポヤ倉庫様に帰属します。

したがって、同梱のサンプル素材を使って作ったマップを配布・公開する場合は、当サイトではなくピポヤ倉庫様の利用規約に従ってください。利用条件は配布元で必ずご確認ください（ピポヤ倉庫）。当サイトが同梱素材の再配布を許諾することはできません。

商用利用や教材配布など、権利関係をはっきりさせたい用途では、「🎨チップ追加」からご自身で用意した画像を読み込んでご利用ください。その場合、作られたマップの権利はすべてあなたのものです。ツール自体（このページから開くエディタ）の利用に費用はかからず、作成物の権利を当サイトが主張することもありません。

🌱 このゲームで身につく力

タイルマップという考え方そのものが、コンピュータで絵を扱う仕組みの理解につながります。広いマップを1枚の巨大な画像として持つのではなく、小さな部品の組み合わせとして表現する——この発想は、データ量を抑えるための基本的な工夫であり、同時に「部品を組み合わせて全体を作る」というプログラミングの考え方そのものです。

レイヤーの概念も、デジタル制作の基礎です。地面・建物・装飾を別々の層で管理し、上の層を描き直しても下の層は壊れない。この仕組みは画像編集ソフトや動画編集ソフトにも共通するもので、ここで慣れておくと他のツールにも応用が利きます。

そしてタグ設定は、見た目とデータの分離という重要な考え方に触れる機会になります。同じ「壁の絵」でも、プログラムから見れば「通れない場所」という情報を持つ必要があります。絵として見えているものと、コンピュータが判断に使うデータは別物である——ゲームを自作しようとする段階で必ずぶつかるこの区別を、実際に手を動かしながら理解できます。

👨‍👩‍👧 保護者・先生の方へ

本ツールは子ども向けのゲームではなく、制作用のツールです。プログラミングクラブでオリジナルゲームを作る場面や、先生が教材の挿絵・図解を作る場面を想定しています。マウス操作とキーボードショートカットを使うため、PCでのご利用を推奨します。

読み込んだ画像も、作成したマップも、すべてお使いのブラウザの中だけで処理されます。当サイトのサーバーへ送信されることはなく、アップロードも行われません。学校の端末でお使いいただく際も、児童生徒の作品が外部に出る心配はありません。

作品を保存するには、必ず「💾保存」でJSONデータを書き出して手元に残してください。ブラウザを閉じると編集中の内容は失われます。画像として提出・印刷したい場合は「書出:」からPNGまたはJPGを保存してください。

同梱のサンプル素材は第三者（ピポヤ倉庫様）の著作物です。作品を外部に公開・配布する予定がある場合は、上記の出典の項をご確認のうえ、必要に応じてご自身で用意した画像に差しかえてください。

❓ よくある質問

🔗 あわせて読みたい

• キャラチップ・のりしお味／キャラクターのスプライトを書き出すツールです。組み合わせて使えます。