';
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.1204.1a';
var html =''; for( var i=0, len=files.length; i
Ver.1.0.3 システム最終更新 2024/12/05
(公開 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.1204.1a';
var html =''; for( var i=0, len=files.length; i
▼
※ Unsupported canvas
';
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みたいな感じのオリジナル地図やマップ風のロゴ画像などを作成できるウェブアプリです。
ゲームを制作するためのツールではなく、ただ画像を作成するためだけのツールなので ゲームはできませんが 楽しんでください。
目次
手順 (使い方)
/ 補足 (レイヤーについて)
/ 補足 (描画タイプについて)
/ タイル
/ データ管理 (ローカルストレージ 、ダウンロード)
/ タイルの コーナーカットについて
/ 注意事項
/ 動作環境 ・推奨環境
/ 開発 ・更新履歴
/ あとがき
手順 ドット絵マップエディター の使い方
1 . タイルの枚数 (横幅×縦幅) を設定する (必ず最初に設定、途中で変更するとキャンバスは初期化)
2 . 描画するタイルをクリックして選択する
3 . キャンバスを クリックまたはドラッグして タイルを描画する
4 . 完成したら「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.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に増やす。今後また対応レイヤー数や入力タイル数上限を変更する場合は、簡単に修正できるようになりました。過去最大の改修をしたので潜在的な不具合が残ってる可能性もあり、しばらくはオープンベータとなります。一応デバッグはしていますが最初から完全に防ぐのは難しいので。
「描画タイプ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
関連リンク
画像関連ツール (目次)
ドラゴンクエスト関連ツール
▲
上部に移動する