画像ツール (ウェブアプリ)


目次
基本
加工
描画 ロゴ
スポーツ
ゲーム / アニメ
動画GIF
その他
Twitter Twitter UTILITY LABO (@utility_labo) 画像ツール用

FCドラクエ3風 ドット絵マップエディター (地図画像作成)

FCドラクエ3風 ドット絵マップエディター
ドラゴンクエストIII そして伝説へ… HD2D 発売記念
 Ver.1.0.3 システム最終更新 2024/12/05 (公開 2024/11/14)
※ 最初にタイルの枚数を設定 (作成の途中で変更すると 描画中の内容は初期化)
1.
TILE : W × H (1辺は128枚未満推奨)

▼  背景設定 [ 表示 ]
▼ 背景設定 [ 非表示 ]
1-2


▼ 
COLOR
背景の色
背景の透明度 (0~100)
背景の透明度の初期設定の数値は 0 なので透過される (背景に色を付ける場合は 100、半透過する場合は 1~99 を設定)
▼  タイル設定 [ 表示 ]
▼ タイル設定 [ 非表示 ]
INPUT
タイル画像の入力 (追加・変更)
「タイル設定」で入力した画像データを 保存する場合は「データ管理」の「ダウンロード」を実行
※ 透過画像対応 (透過画像の場合は レイヤー 2 か 3 に描画)
INPUT FORM (タイル入力フォームの増減) ● タイル画像のサイズは 16x16 ~ 48x48 を推奨
● 64x64より大きいサイズの場合は 自動で64x64に縮小
● 透過タイル (透過画像) の場合は レイヤー 2 か 3 に描画
● キャンバスに描画する時のサイズは タイル枚数によって変動
▼ 
2-1
SELECT
CORNER CUT
Target Layer 2
Select Layer 3
2-2
NOW LOADING ...
※ Unsupported canvas
※ Unsupported canvas
※ Unsupported canvas
※ Unsupported canvas


※ Unsupported canvas
※ Unsupported canvas
X: , Y: ※ アドバイス: キーボードの Escキー を押すと 選択中のタイルを 消しゴムに変更したり 元のタイルに戻したりできるよ! キーボードの Ctrlキー を押しながらキャンバスに描画されたタイルをクリックすると変更できるよ! キーボードの 上・下 を押すと 選択中のタイルを 番号順に変更できるよ!  ▼ 
SET
詳細設定 [ 表示 ]
▼ 詳細設定 [ 非表示 ]
描画キャンバスの設定




●  指定範囲のマップデータをコピー&ペースト [ 表示 ]
▼ 指定範囲のマップデータをコピー&ペースト [ 非表示 ]
コピー元のレイヤー
コピー元の始点 X タイルの座標
コピー元の始点 Y タイルの座標
コピー元の終点 X タイルの座標
コピー元の終点 Y タイルの座標
コピー元のタイル
ペースト先のレイヤー
ペースト先の始点 X タイルの座標
ペースト先の始点 Y タイルの座標
コピー元の終点が X: 999, Y: 999 の場合は、マップの最大値の座標を指定する
●  指定範囲のマップデータをダウンロード [ 表示 ]
▼ 指定範囲のマップデータをダウンロード [ 非表示 ]
ダウンロード元のレイヤー
ダウンロード元の始点 X タイルの座標
ダウンロード元の始点 Y タイルの座標
ダウンロード元の終点 X タイルの座標
ダウンロード元の終点 Y タイルの座標
ダウンロード元の終点が X: 999, Y: 999 の場合は、マップの最大値の座標を指定する

ダウンロードした ファイル (PARTS DATA) は「指定範囲のマップデータを読み込む」で描画する
●  指定範囲のマップデータを読み込む [1] [ 表示 ]
▼ 指定範囲のマップデータを読み込む [1] [ 非表示 ]
マップデータの一部 (PARTS DATA) を読み込む (入力)
PARTS DATA [1]

描画するレイヤー
描画する始点 X タイルの座標
描画する始点 Y タイルの座標
「PARTS DATA (マップデータの一部) [1] を読み込む」⇒「描画タイプD:[1] を選択する」⇒「キャンバスをクリックする」の手順でも 指定位置に描画できる (始点の入力は不要)
●  指定範囲のマップデータを読み込む [2] [ 表示 ]
▼ 指定範囲のマップデータを読み込む [2] [ 非表示 ]
PARTS DATA [2]

「PARTS DATA (マップデータの一部) [2] を読み込む」⇒「描画タイプD:[2] を選択する」⇒「キャンバスをクリックする」の手順で 指定位置に描画する
●  指定範囲のマップデータを読み込む [3] [ 表示 ]
▼ 指定範囲のマップデータを読み込む [3] [ 非表示 ]
PARTS DATA [3]

「PARTS DATA (マップデータの一部) [3] を読み込む」⇒「描画タイプD:[3] を選択する」⇒「キャンバスをクリックする」の手順で 指定位置に描画する
●  指定範囲のマップデータを読み込む (共通設定)

描画タイプD:[1] ~ [3] はどれを使っても同じです。 PARTS DATA を 同時に読み込んでおいて 切り替えながら描画できます。

マップデータの全体 (MAP DATA) を読み書きする場合は「データ管理」の「ダウンロード」を実行する
●  タイル全面描画 [ 表示 ]
▼ タイル全面描画 [ 非表示 ]
レイヤー
タイル番号 No.1~No.
既にタイルが描画されている座標
タイル番号を「 0 」(消しゴム) にして「上書き」を選択すると 指定レイヤー全面を消去する
●  タイル一括変換 [ 表示 ]
▼ タイル一括変換 [ 非表示 ]
レイヤー
変換前のタイル番号 No.1~No.
変換後のタイル番号 No.1~No.
●  画像作成時に描画する基準座標 [ 表示 ]
▼ 画像作成時に描画する基準座標 [ 非表示 ]
●  文字入れ [ 表示 ]
▼ 文字入れ [ 非表示 ]
文字入力 [1]
位置 [1]
横軸 px, 縦軸 px
文字設定 [1] [ 表示 ]
▼ 文字設定 [1] [ 非表示 ]
文字のサイズ
文字の色
文字の枠の色
文字の枠の太さ (※不要な場合は0に設定)
文字の書体


ウィンドウ設定 [1] [ 表示 ]
▼ ウィンドウ設定 [1] [ 非表示 ]

ウィンドウの位置 (横軸)
ウィンドウの位置 (縦軸)
ウィンドウのサイズ (横軸)
ウィンドウのサイズ (縦軸)
ウィンドウの枠の色
ウィンドウの枠の太さ (※不要な場合は0に設定)
ウィンドウの背景の色
ウィンドウの背景の透明度 (0~100)
ウィンドウの角丸 (※直角の場合は0に設定)
▼  文字入力 [2]
位置 [2]
横軸 px, 縦軸 px
文字設定 [2] [ 表示 ]
▼ 文字設定 [2] [ 非表示 ]
文字のサイズ
文字の色
文字の枠の色
文字の枠の太さ (※不要な場合は0に設定)
文字の書体


ウィンドウ設定 [2] [ 表示 ]
▼ ウィンドウ設定 [2] [ 非表示 ]

ウィンドウの位置 (横軸)
ウィンドウの位置 (縦軸)
ウィンドウのサイズ (横軸)
ウィンドウのサイズ (縦軸)
ウィンドウの枠の色
ウィンドウの枠の太さ (※不要な場合は0に設定)
ウィンドウの背景の色
ウィンドウの背景の透明度 (0~100)
ウィンドウの角丸 (※直角の場合は0に設定)
▼  文字入力 [3]
位置 [3]
横軸 px, 縦軸 px
文字設定 [3] [ 表示 ]
▼ 文字設定 [3] [ 非表示 ]
文字のサイズ
文字の色
文字の枠の色
文字の枠の太さ (※不要な場合は0に設定)
文字の書体


ウィンドウ設定 [3] [ 表示 ]
▼ ウィンドウ設定 [3] [ 非表示 ]

ウィンドウの位置 (横軸)
ウィンドウの位置 (縦軸)
ウィンドウのサイズ (横軸)
ウィンドウのサイズ (縦軸)
ウィンドウの枠の色
ウィンドウの枠の太さ (※不要な場合は0に設定)
ウィンドウの背景の色
ウィンドウの背景の透明度 (0~100)
ウィンドウの角丸 (※直角の場合は0に設定)
書き込んだ文字入れデータを 保存したい場合は「データ管理」の「ダウンロード」を実行する
●  データ管理 [ 表示 ]
▼ データ管理 [ 非表示 ]
ローカルストレージ [ 表示 ]
▼ ローカルストレージ [ 非表示 ]
マップデータを保存する [1]
マップデータをキャンバスに描画する [1]
●  マップデータを保存する [2]
マップデータをキャンバスに描画する [2]
●  マップデータを保存する [3]
マップデータをキャンバスに描画する [3]
マップデータのみ ローカルストレージに 保存されます。 読み込んだタイルデータや 書き込んだ文字入れデータを 保存したい場合は、ログデータを ダウンロードして下さい。

ローカルストレージのデータは、ブラウザーの予期せぬ挙動によって 削除される可能性があるので、一時的な保存場所と思って下さい。 恒久的な保存をしたい場合は、ログデータを ダウンロードして下さい。
●  ダウンロード (ログデータ) [ 表示 ]
▼ ダウンロード (ログデータ) [ 非表示 ]
マップデータ(全体)を保存する (出力)
マップデータ(全体)をキャンバスに描画する (入力)
MAP DATA

マップデータの一部 (PARTS DATA) だけを読み書きしたい場合は「詳細設定」の「指定範囲のマップデータをダウンロード/読み込む」を実行する
●  タイルデータを保存する (出力)
タイルデータを読み込む (入力)
TILE DATA

「タイル設定」で入力した画像データを 保存しておくことができる
●  文字入れデータを保存する (出力)
文字入れデータを読み込む (入力)
TEXT DATA

▼  画像を作成・更新する時のタイル1枚のサイズ (1辺:16~64px)
1辺 px
3.
画像を作成・保存する
▼ 
▼ OUTPUT FORM Image is displayed here

説明 ドット絵マップエディター について

ファミコンのドラゴンクエスト3みたいな感じのオリジナル地図やマップ風のロゴ画像などを作成できるウェブアプリです。
ゲームを制作するためのツールではなく、ただ画像を作成するためだけのツールなので ゲームはできませんが 楽しんでください。
目次 手順 (使い方) / 補足 (レイヤーについて) / 補足 (描画タイプについて) / タイル / データ管理 (ローカルストレージダウンロード) / タイルコーナーカットについて / 注意事項 / 動作環境推奨環境 / 開発更新履歴 / あとがき 手順 ドット絵マップエディター の使い方

. タイルの枚数 (横幅×縦幅) を設定する (必ず最初に設定、途中で変更するとキャンバスは初期化)
. 描画するタイルをクリックして選択する
. キャンバスを クリックまたはドラッグして タイルを描画する
. 完成したら「GENERATEボタン」を押して 画像を作成してから「DOWNLOADボタン」を押して 画像を保存する

補足 (レイヤーについて)
複数のレイヤー(層)を使うことで、タイルを重ね合わせたり、地面のレイヤー・建物のレイヤー・人や物のレイヤーを分けて描画することが出来ます。
透過タイル (透過画像) の場合は、レイヤー 2 か 3 に描画して下さい。レイヤー 1 には 透過していないタイルのみ描画して下さい。
タイルの一部に が見えるのが 透過タイルです。(消しゴムのタイル(DELETE)を除く)

補足 (描画タイプについて)
描画タイプ1 は、タイルを一枚づつ細かく描画する時に向いてます。
描画タイプ2 は、ドラッグ&ドロップで 指定した範囲内に まとめて描画することが出来ます。背景となる地面・床のタイルを ベタ塗りする時に向いてます。
描画タイプ3 は、連続で並んでいる同一のタイルを 一括で変換することが出来ます。
描画タイプD は、複数種類のタイルをまとめたパーツデータ (PARTS DATA) を 指定した位置に 描画することが出来ます。同じ処理を繰り返す時 (コピー&ペーストする時) に向いてます。
事前に「詳細設定」の「指定範囲のマップデータ (PARTS DATA) をダウンロード」のファイルで「指定範囲のマップデータ (PARTS DATA) を読み込む」を実行しておく必要があります。PARTS DATA を [2] に読み込んだ場合は、描画タイプD:[2] を選択してからキャンバスをクリックして下さい。
タイル

自分で作成したタイル画像や、配布されている素材 (タイルセット) を 分割した画像などは「タイル設定」で 追加・変更することができます。

複数のタイルが結合されている タイルセット (マップチップ) は、画像分割ツール 等で 16×16 や 32×32 など 任意のサイズに 分割できます。
データ管理

描画したマップのデータ や 自分で入力したタイルのデータ などを 保存したり 読み込んだりすることが出来ます。

ローカルストレージ は、マップデータを ブラウザーの保存領域に保存できます。

ダウンロード (ログデータ) は、マップデータ、タイルデータ、文字入れデータ を ダウンロードできます。ダウンロードしたファイル (ログデータ) は、読み込んで適用することができます。
タイルのコーナーカットについて タイルの角を丸くする方法

🔽 コーナーカットするレイヤーの構成
ドット絵マップエディターの使い方 (コーナーカットするレイヤーの構成) レイヤー1: レイヤー2のタイルを カット(透過)した部分に 表示するタイルを設置
レイヤー2角を丸くしたいタイルを設置
レイヤー3: 角を丸くしたいタイルと同じ座標に コーナーカット (CUT) のタイルを設置 (CUT 1 は左上、CUT 2 は右上、CUT 3 は左下、CUT 4 は右下)

🔽 コーナーカットのタイルを選択する場所 (タイルセットの下の方にある)
ドット絵マップエディターの使い方 (コーナーカットするタイルの場所) ※ レイヤー3に変更してから コーナーカットのタイルを選択して下さい。
注意事項 ドット絵マップエディター で作成した画像の取り扱い

業者による営利目的で ドット絵マップエディター (以下このツール) を使用することは禁止とさせて頂きます。 業者ではなく 個人が私的に使用する場合などは 特に問題ありませんが 詳しくは トップページの下部にある 説明 (利用規約や注意事項など) を参照して下さい。

例:業者が攻略サイトを運営する目的で このツールを使用する行為は 禁止です。 個人が私的に 攻略サイトを運営する目的で このツールを使用する場合は 自己責任でお願いします。
動作環境・推奨環境 ドット絵マップエディター

OS (PC・SmartPhone)
Windows 10/11 (推奨)
Mac (推奨)
Linux
Android
iPhone (iOS)
iPad (推奨)
ブラウザー
Chrome (Windows、Androidの場合は推奨)
Edge (Chromiumベース)
Firefox
Safari (Mac、iPhone、iPadの場合は推奨)
● 上記以外のブラウザーは非推奨 (但しChromiumベースであれば問題なく動作すると思います)

2020年以降発売のミドルスペック以上の端末、最新バージョンのOS・ブラウザーを推奨しています。
2015年頃発売の端末、古いバージョンのOS・ブラウザーでも動作はすると思いますが 対応は保証できません。
スマホでも動作はしますが、PCやタブレット端末 (9インチ以上) での操作を推奨しています。スマホで操作する場合は、なるべく大きなディスプレイ かつ ハイスペックな端末の方が 快適です。
低スペック端末で使用する場合は、タイル枚数が 32×32枚以上になると、動作は遅くなる可能性があります。 ハイスペック端末であれば 32×32枚以上でも 動作は速いと思います。

開発環境 Windows 10
動作確認 Windows Chrome、Android Chrome

実行環境のスペックによって 動作の速度・快適さはかなり違うと思います。なるべく低スぺ端末で動作確認をしているので、推奨環境では最低限以上の動作になるはずです。
Mac、Linux、iPhone、iPad および Windowsタブレット端末、Androidタブレット端末での動作は未確認です。

もし使っていて気になる点や不具合などがあれば教えて下さい。「(○○の実行環境では) 問題なく使えた」という報告だけでも助かります。端末の型番など込みで報告してもらえるとさらに助かります。
開発・更新履歴 ドット絵マップエディター のアップデート

2023 開発開始 (9割完成で開発中断)
2024.11.09 開発再開
2024.11.14 公開 Ver.1.0.0 (一応完成)
2024.11.1523 更新 (少しずつ改善)
2024.11.24 更新 Ver.1.0.1 (動作を高速化・軽量化、機能を追加、不具合を修正、など)
2024.11.2527 更新 (少しずつ改善)
2024.11.28 更新 (スマホのキャンバスにスクロールバーを設置)
2024.11.2930 更新 (少しずつ改善)
2024.12.01 更新 Ver.1.0.2 (マイナーバージョンアップ)
2024.12.0203 更新 (少しずつ改善)
2024.12.04 更新 Ver.1.0.3 (マイナーバージョンアップ)

2023
9割まで完成させて開発を中断した理由は、マップ作成ツール(仮)のマウス操作・タッチ操作の技術を使って 他のツールを作りたいと思ったからです。そしてそのまま放置したという流れに。
ちなみに その時に作った「文字入れツール」「画像合成ツール」「トリミングツール」「作戦ボード」などは完成させてすぐに公開しました。(後日談)

2024.11.09
開発を再開した理由は、ドラゴンクエスト3 HD2D版の発売日に合わせて、もしくはその前までに 完成させて公開したいと思ったからです。思ったよりも完成まで時間がかかり、発売当日ギリギリに公開できました。(後日談)

2024.11.14 (Ver.1.0.0)
ドラゴンクエスト3 HD2D版の発売日に合わせて FCドラクエ3風 ドット絵マップエディターを公開しました。
急造だったので 公開直後は 色々な問題を残したままでした。(後日談)

2024.11.24 (Ver.1.0.1)
公開時に比べて 動作はかなり軽量かつ高速になったと思います。

2024.11.28
スマホでの利便性を向上するために、キャンバスにスクロールバーを設置しました。(マルチタップでキャンバスをスクロールすると誤タップ(描画)するリスクがあったので)

2024.12.01 (Ver.1.0.2)
対応レイヤー数を3から6に増やす。入力タイル数の上限を256から300に増やす。今後また対応レイヤー数や入力タイル数上限を変更する場合は、簡単に修正できるようになりました。過去最大の改修をしたので潜在的な不具合が残ってる可能性もあり、しばらくはオープンベータとなります。一応デバッグはしていますが最初から完全に防ぐのは難しいので。
「描画タイプ3」の呼称を「描画タイプD」に変更。その理由は今後対応するかもしれない「塗りつぶし」を「描画タイプ3」にしたいと思ったからです。
ちなみに 現時点(2024.12.01)で、公開前までの開発時間よりも 公開後の開発時間(不具合修正などを含む)の方が長いです(たぶん)。終わりが見えません。

2024.12.04 (Ver.1.0.3)
描画タイプ3:塗りつぶしに対応。使ってみたら思っていたよりも利便性が高かったので対応させて良かった。

今後も随時サイレントアップデートを続けていく予定です。
あとがき 今後の予定

既に公開している FCドラクエ3風 ドット絵マップエディター で使えるような サンプル (タイル画像、タイルセット) や テンプレート (マップデータ、パーツデータ) を 用意したいと思います。

家ではPCで 外ではスマホで 作れるように、データを送受信できるようなシステムを作れたらいいなと思ってます。需要があれば…

今後のドット絵マップエディター・シリーズで開発する予定 (2024)
● マイクラ風 (3Dゲームのブロック)
● 桃鉄風 (ボードゲームのマップ)
● マリオ風 (横スクロールアクションのコース)
● ポケモン風 (RPGのマップ)
● FF風 (RPGのマップ)
● など (レトロゲーム風がメイン)

時期などは未定です。必ず予定通りに開発・公開できるという保証はありませんのであまり期待はしないで下さい。
雑記

作った画像(マップ)を SNSやブログなどで公開するのに 当サイトの許可は必要ありませんが、教えてくれると嬉しいです。どんな画像(マップ)を作ったのかぜひ見たいです。利用者の作った画像から改善に繋がることもあるので。
例えば 画像と一緒に「ドット絵マップエディター」「ドラクエ マップエディター」などのように書いて投稿してもらえれば、こちらから見つけることも出来るかもしれません。
対応フォント

PixelMplus10 ドラクエ Mario Mario Nintendo PlayStation SEGA アンニャントロマン メイリオ
外部リンク

ドラゴンクエストIII そして伝説へ… - Wikipedia
ドラゴンクエストシリーズ - Wikipedia
ドラゴンクエストウォーク - Wikipedia
関連リンク

画像関連ツール (目次)
ドラゴンクエスト関連ツール
上部に移動する
by UTILITY LABO
<< 目次 (画像ツール)


WSE 2024 (C) UTILITY LABO © UTILITY LABO お問い合わせ (メールフォーム) / ツイッター