FCドラクエ3風ドット絵マップエディター (地図画像作成) - 画像ツール (ウェブアプリ)

▼
目次

基本

色

加工

描画

ロゴ

スポーツ

ゲーム / アニメ

動画GIF

その他

Twitter UTILITY LABO (@utility_labo) 画像ツール用

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

FCドラクエ3風ドット絵マップエディター

ドラゴンクエストIII そして伝説へ… HD2D 発売記念

　Ver.1.0.3 システム最終更新 2024/12/05 (公開 2024/11/14)

※ 最初にタイルの枚数を設定 (作成の途中で変更すると描画中の内容は初期化)

TILE : W × H 枚 (１辺は128枚未満推奨)

▼　 ▼ 背景設定 [ 表示 ]
▼　 ▼ タイル設定 [ 表示 ]
▼　

2-1

SELECT
◀ CORNER CUT
Target Layer 2
Select Layer 3

2-2

NOW LOADING ...

X: , Y: ※ アドバイス：キーボードの Escキーを押すと選択中のタイルを消しゴムに変更したり元のタイルに戻したりできるよ！　キーボードの Ctrlキーを押しながらキャンバスに描画されたタイルをクリックすると変更できるよ！　キーボードの上・下を押すと選択中のタイルを番号順に変更できるよ！　 ▼　

▼ 詳細設定 [ 表示 ]
●　 ▼ 文字入れ [ 表示 ]
●　 ▼ データ管理 [ 表示 ]
▼　画像を作成・更新する時のタイル１枚のサイズ (1辺:16～64px)
1辺 px

画像を作成・保存する

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

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

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

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

が見えるのが透過タイルです。(消しゴムのタイル(DELETE)を除く)

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

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

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

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

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

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

🔽 コーナーカットするレイヤーの構成
ドット絵マップエディターの使い方 (コーナーカットするレイヤーの構成)

ドット絵マップエディターの使い方 (コーナーカットするレイヤーの構成)

● レイヤー１：レイヤー２のタイルをカット(透過)した部分に表示するタイルを設置
● レイヤー２：角を丸くしたいタイルを設置
● レイヤー３：角を丸くしたいタイルと同じ座標にコーナーカット (CUT) のタイルを設置 (CUT 1 は左上、CUT 2 は右上、CUT 3 は左下、CUT 4 は右下)

🔽 コーナーカットのタイルを選択する場所 (タイルセットの下の方にある)
ドット絵マップエディターの使い方 (コーナーカットするタイルの場所)

ドット絵マップエディターの使い方 (コーナーカットするタイルの場所)

※ レイヤー３に変更してからコーナーカットのタイルを選択して下さい。
注意事項 ドット絵マップエディターで作成した画像の取り扱い

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

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

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

2020年以降発売のミドルスペック以上の端末、最新バージョンのＯＳ・ブラウザーを推奨しています。
2015年頃発売の端末、古いバージョンのＯＳ・ブラウザーでも動作はすると思いますが対応は保証できません。
スマホでも動作はしますが、ＰＣやタブレット端末 (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.15～23 更新 (少しずつ改善)
2024.11.24 更新 Ver.1.0.1 (動作を高速化・軽量化、機能を追加、不具合を修正、など)
2024.11.25～27 更新 (少しずつ改善)
2024.11.28 更新 (スマホのキャンバスにスクロールバーを設置)
2024.11.29～30 更新 (少しずつ改善)
2024.12.01 更新 Ver.1.0.2 (マイナーバージョンアップ)
2024.12.02～03 更新 (少しずつ改善)
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に増やす。今後また対応レイヤー数や入力タイル数上限を変更する場合は、簡単に修正できるようになりました。過去最大の改修をしたので潜在的な不具合が残ってる可能性もあり、しばらくはオープンベータとなります。一応デバッグはしていますが最初から完全に防ぐのは難しいので。
「描画タイプ３」の呼称を「描画タイプＤ」に変更。その理由は今後対応するかもしれない「塗りつぶし」を「描画タイプ３」にしたいと思ったからです。
ちなみに現時点(2024.12.01)で、公開前までの開発時間よりも公開後の開発時間(不具合修正などを含む)の方が長いです(たぶん)。終わりが見えません。

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

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

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

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

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

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

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

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

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

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

by UTILITY LABO

<< 目次 (画像ツール)

編集

色

加工

描画

枠・フレーム

SNS投稿画像

(分割・連結)

Twitterヘッダー

ロゴジェネレーター

円形プロフィールアイコン

スポーツ

ゲーム・アニメ

ドラゴンクエスト風

ゲーム・アニメ

鬼滅の刃風

ゲーム・アニメ

その他

動画GIF

特製

PC環境推奨ツール

その他

説明

利用規約や注意事項など (トップページの下部)

お問い合わせ

メールフォーム

ＳＮＳ

ツイッター (@utility_labo) フォローはこちらから

WSE

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