▼ サンプル用のマップデータ/パーツデータ [ 表示 ] NEW
▼ サンプル用のマップデータ/パーツデータ [ 非表示 ]
サンプル用のマップデータを読み込む
※「日本地図」「世界地図」のタイル数は多いので 読み込みに時間がかかります。
(描画速度は端末の性能次第)
サンプルの「日本地図」「世界地図」を使って作成した画像は、利用者がサンプルに独創性のあるアレンジを加えた場合のみ 再配布可とさせて頂きます。何のアレンジも加えないでサンプルを再配布する行為は禁止とさせて頂きます。
▼ サンプル用のパーツデータをダウンロード [ 表示 ]
▼ サンプル用のパーツデータをダウンロード [ 非表示 ]
※ ZIPファイルでダウンロードするので 解凍してから使用して下さい。
※ 解凍後のパーツデータは「詳細設定」>「指定範囲のマップデータを読み込む」で使えます。
▼ パーツデータ [1] 文字 (海・川) [ 表示 ]
▼ パーツデータ [1] 文字 (海・川) [ 非表示 ]
▼ パーツデータ [2] 文字 (島・陸) [ 表示 ]
▼ パーツデータ [2] 文字 (島・陸) [ 非表示 ]
▼ パーツデータ [3] 文字 (壁) [ 表示 ]
▼ パーツデータ [3] 文字 (壁) [ 非表示 ]
サンプル用のパーツデータを組み合わせて作成した画像は、自由に配布して構いません。
';
var http ='./'; var path ='dot_map_title_dq3_fc_v1_script_lib_'; var src = http+path;
var files =['init','tile']; var ext ='.'+'j'+'s'+'?'+'v1.0.3.2024.1211.3a';
var html =''; for( var i=0, len=files.length; i
Ver.1.0.3 システム更新 2024/12/10
(公開 2024/11/14)
';
var http ='./'; var path ='dot_map_editor_script_lib_'; var src = http+path;
var files =['run','log_v1','delete','dummy']; var ext ='.'+'j'+'s'+'?'+'v1.0.3.2024.1210.1a';
var html =''; for( var i=0, len=files.length; i
▼
';
var http ='../pic/'; var path ='picture_tool_script_lib_'; var src = http+path;
var files =['common','download','file_check','file_read','form','image','utility']; var ext ='.'+'js?v1.0.3.2024.1204.1a';
var html =''; for( var i=0, len=files.length; i
説明
ファミコンのドラゴンクエスト3みたいな感じのオリジナル地図やマップ風のロゴ画像などを作成できるウェブアプリです。
初期設定のタイルは 全て 16x16 のサイズです。
ゲームを制作するためのツールではなく、ただ画像を作成するためだけのツールなので ゲームはできませんが 楽しんでください。
目次
手順 (使い方)
/ 補足 (レイヤー)
/ 補足 (描画タイプ)
/ 補足 (サンプル用のマップデータ)
/ タイル
/ データ管理 (ローカルストレージ、ダウンロード)
/ タイルのコーナーカットについて
/ 注意事項
/ 動作環境・推奨環境
/ 開発・更新履歴
/ あとがき
/ 関連ツール
手順 ドット絵マップエディター・シリーズ の使い方
1. タイルの枚数 (横幅×縦幅) を設定する (必ず最初に設定、途中で変更するとキャンバスは初期化)
2. 描画するタイルをクリックして選択する
3. キャンバスを クリックまたはドラッグして タイルを描画する
4. 完成したら「GENERATEボタン」を押して 画像を作成してから「DOWNLOADボタン」を押して 画像を保存する
補足 (レイヤーについて)
複数のレイヤー(層)を 使い分けることで、地面のレイヤー・建物のレイヤー・人や物のレイヤーを分けて描画したり、透過タイルを重ね合わせたりすることが出来ます。
透過タイル (透過画像) の場合は、レイヤー 2 以降に 描画して下さい。レイヤー 1 には 透過部分のないタイルのみ描画して下さい。
タイルの一部に が見えるのが 透過タイルです。
透過部分が小さい場合 (例えば1ドット分だけある場合) は、透過タイルなのか 分かりづらい場合もあります。
(消しゴムのタイル(DELETE)は 透過タイルではありません)
レイヤーを 変更する方法 は、キャンバスの下にある レイヤーのセレクトボックス (選択メニュー) で 別の層を選択するか、その右側にある ボタンを押すことで変更できます。
補足 (描画タイプについて)
描画タイプ1 は、タイルを一枚づつ細かく描画する時に向いてます。
描画タイプ2 は、ドラッグで 指定した範囲内に まとめて描画することが出来ます。背景となる地面・床のタイルを ベタ塗りする時に向いてます。
描画タイプ3 は、連続で繋がっている同一のタイルのみを 一括で変換することが出来ます。
描画タイプD は、複数種類のタイルをまとめたパーツデータ (PARTS DATA) を 指定した位置に 描画することが出来ます。同じ処理を繰り返す時 (コピー&ペーストする時) に向いてます。
事前に「詳細設定」の「指定範囲のマップデータ (PARTS DATA) をダウンロード」のファイルで「指定範囲のマップデータ (PARTS DATA) を読み込む」を実行しておく必要があります。PARTS DATA を [2] に読み込んだ場合は、描画タイプD:[2] を選択してからキャンバスをクリックして下さい。
描画タイプを 変更する方法 は、キャンバスの下にある 描画タイプのセレクトボックス (選択メニュー) で 別のタイプを選択するか、その右側にある ボタンを押すことで変更できます。
補足 (サンプル用のマップデータ/パーツデータについて)
サンプル用のマップデータ
(ページ上部にある) を キャンバスに読み込んで 再編集することができます。
「日本地図」や「世界地図」などのサンプルがあります。
タイル
自分で作成したタイル画像や、配布されている素材 (タイルセット) を 分割した画像などは「タイル設定」で 追加・変更することができます。
タイル画像の一部を透明にしたい場合は、ドット絵用透過ツール を使って下さい。
複数のタイルが結合されている タイルセット (マップチップ) は、画像分割ツール 等で 16×16 や 32×32 など 任意のサイズに 分割できます。
ドット絵マップエディター・シリーズ用の
タイルセット画像toタイルデータ変換ツール
を使えば まとめて読み込むことが出来ます。
データ管理
描画したマップのデータ や 自分で入力したタイルのデータ などを 保存したり 読み込んだりすることが出来ます。描画したマップを 再編集する時に使って下さい。
ローカルストレージ は、マップデータを ブラウザー内の記憶領域に保存できます。
ダウンロード (ログデータ) は、マップデータ、タイルデータ、文字入れデータ を 端末内のストレージに ダウンロードできます。ダウンロードしたファイル (ログデータ) は、読み込んで適用することができます。
タイルのコーナーカットについて タイルの角を丸くする方法
🔽 コーナーカットするレイヤーの構成
● レイヤー1: レイヤー2のタイルを カット(透過)した部分に 表示するタイルを設置
● レイヤー2: 角を丸くしたいタイルを設置
● レイヤー3: 角を丸くしたいタイルと同じ座標に コーナーカット (CUT) のタイルを設置 (CUT 1 は左上、CUT 2 は右上、CUT 3 は左下、CUT 4 は右下)
🔽 コーナーカットのタイルを選択する場所 (タイルセットの下の方にある)
※ レイヤー3に変更してから コーナーカットのタイルを選択して下さい。
注意事項 ドット絵マップエディター・シリーズ で作成した画像の取り扱い
業者による営利目的で ドット絵マップエディター (以下このツール) を使用することは禁止とさせて頂きます。
業者ではなく 個人が私的に使用する場合などは 特に問題ありませんが 詳しくは トップページの下部にある 説明 (利用規約や注意事項など) を参照して下さい。
例:業者が攻略サイトを運営する目的で このツールを使用する行為は 禁止です。 個人が私的に 攻略サイトを運営する目的で このツールを使用する場合は 自己責任でお願いします。
動作環境・推奨環境 ドット絵マップエディター・シリーズ
■ OS (PC・SmartPhone)
● Windows 10/11 (推奨)
● Mac (推奨)
● Chrome OS
● 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 (2024年時点)
動作確認 Windows Chrome、Android Chrome
実行環境のスペックによって 動作の速度・快適さはかなり違うと思います。なるべく低スぺ端末で動作確認をしているので、推奨環境では最低限以上の動作になるはずです。
Mac、Linux、iPhone、iPad および Windowsタブレット端末、Androidタブレット端末での動作は未確認です。
もし使っていて気になる点や不具合などがあれば教えて下さい。「(○○の実行環境では) 問題なく使えた」という報告だけでも助かります。端末の型番など込みで報告してもらえるとさらに助かります。
開発・更新履歴 ドット絵マップエディター・シリーズ
2023 開発開始 (9割完成で開発中断)
2024.11.09~ 開発再開
2024.11.14 公開 Ver.1.0.0 (FCドラクエ3風 ドット絵マップエディター)
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 (マイナーバージョンアップ)
2024.12.05~08 更新 (少しずつ改善)
2024.12.09 公開 (関連ツール 複数点)
2024.12.10 公開 (FCマリオ1風 ドット絵コースメーカー)
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.03
タイルセット画像toタイルデータ変換ツール(仮)を開発しました。ドット絵マップエディター用の関連ツールです。
ちなみに関連ツールは他にも複数あるので そのうちまとめて公開する予定です。
2024.12.04 (Ver.1.0.3)
描画タイプ3:塗りつぶしに対応。使ってみたら思っていたよりも利便性が高かったので対応させて良かった。
2024.12.07
FCマリオ1風 ドット絵マップエディター (仮)を準備中。
2024.12.08
FCドラクエ3風 ドット絵マップエディターの 初期設定のタイルを増やしました。以前の 文字タイル(数字・英字・記号)のサイズは 64x64でしたが、16x16のサイズに 変更しました。タイルの番号が一部 (後半の方 No.113以降) ずれたことで 過去のマップデータによっては 互換性が失われている場合もありますのでご了承ください。
2024.12.09
関連ツール 複数点を公開しました。
● タイルセット画像toタイルデータ変換ツール for ドット絵マップエディター・シリーズ用
● ドット絵用透過ツール (タイル画像の一部を透明にできる)
● アンチエイリアシングしないで画像を拡大するツール (ドット絵向けの画像拡大ツール)
2024.12.10
サンプル用のマップデータ を追加しました。ページ上部 (タイル枚数を設定の上) にあります。
FCマリオ1風 ドット絵コースメーカーを公開しました。
ドット絵マップエディター・シリーズは ある程度の完成度になってきたので 今後の開発頻度は下がると思います。
2024.12.11
サンプル用のパーツデータ を追加しました。ページ上部 (タイル枚数を設定の上) にあります。
2024.12.12
文字入れの書体を追加しました。マリオカート、マリオメーカーのWebフォントを追加しました。
今後も随時サイレントアップデートを続けていく予定です。
あとがき 今後の予定
家ではPCで 外ではスマホで 作れるように、データを送受信できるようなシステムを作れたらいいなと思ってます。需要があれば…
今後のドット絵マップエディター・シリーズで開発する予定
(2024)
● マイクラ風 (3Dゲームのブロック)
● 桃鉄風 (ボードゲームのマップ)
● マリオ風 (横スクロールアクションのコース) (済)
● ポケモン風 (RPGのマップ)
● FF風 (RPGのマップ)
● など (レトロゲーム風がメイン)
時期などは未定です。必ず予定通りに開発・公開できるという保証はありませんのであまり期待はしないで下さい。
雑記
作った画像(マップ)を SNSやブログなどで公開するのに 当サイトの許可は必要ありませんが、教えてくれると嬉しいです。どんな画像(マップ)を作ったのかぜひ見たいです。利用者の作った画像から改善に繋がることもあるので。
例えば 画像と一緒に「ドット絵マップエディター」「ドラクエ マップエディター」などのように書いて投稿してもらえれば、こちらから見つけることも出来るかもしれません。
対応フォント
PixelMplus10(※5)
ドラクエ(※4)
Mario(※2)
Mario(※1)
MARIOKART(※1)
MARIO MAKER(※2)
Nintendo(※1)
PlayStation(※2)
SEGA(※1)
アンニャントロマン(※3)
メイリオ(※5)
※1 英字のみ、
※2 英数字のみ、
※3 カナ英数字のみ、
※4 ひらがなカタカナ英数字、
※5 漢字ひらがなカタカナ英数字
外部リンク
ドラゴンクエストIII そして伝説へ… - Wikipedia
ドラゴンクエストシリーズ - Wikipedia
ドラゴンクエストウォーク - Wikipedia
ドット絵マップエディター・シリーズで作成した画像は、ゲームメーカーなど関係者に迷惑をかけないように 自己責任の上で使用して下さい。
関連リンク
画像ツール (目次)
● ドラゴンクエスト関連ツール
● FCマリオ1風 ドット絵コースメーカー
ドット絵マップエディター・シリーズ関連ツール
● タイルセット画像toタイルデータ変換ツール for ドット絵マップエディター・シリーズ用
● 画像分割ツール (タイルセット画像を任意のサイズで分割できる)
● ドット絵用透過ツール (タイル画像の一部を透明にできる)
● アンチエイリアシングしないで画像を拡大するツール (ドット絵向けの画像拡大ツール)
▲
上部に移動する