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

▼
 目次
基本 色
加工 描画 ロゴ
スポーツ ゲーム / アニメ
動画GIF その他
Twitter Twitter UTILITY LABO (@utility_labo) フォローはこちらから

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

FCドラクエ3風 ドット絵マップエディター
ドラゴンクエストIII そして伝説へ… HD2D 発売記念
※ 最初にタイルの枚数を設定 (作成の途中で変更すると 描画中の内容は初期化)
1.
TILE : W × H 枚 (１辺は64枚以下推奨・最大128枚対応)
CANVAS SIZE : W × H px
▼　 ▼ 背景設定 [ 表示 ]
▼ 背景設定 [ 非表示 ]
1-2


▼　 背景の色
背景の透明度 (0～100)
 ▼　 ▼ タイル設定 [ 表示 ]
▼ タイル設定 [ 非表示 ]
1-3
タイル画像の入力 (追加・変更) … 初期設定のサイズは 32x32
タイル画像のサイズは 16x16 か 32x32 を推奨 (描画時は常に32x32で表示)
 INPUT FORM (タイル入力フォームの増減) ▼　
2-1
SELECT
 ◀ CORNER CUT
Target Layer 2
Select Layer 3
 ※ アドバイス： キーボードの Escキー を押すと 選択中のタイルを 消しゴムに変換したり 元のタイルに戻したりできるよ！　キーボードの 上・下 を押すと 選択中のタイルを変更できるよ！
2-2
NOW LOADING ...
※ Unsupported canvas
※ Unsupported canvas
※ Unsupported canvas
※ Unsupported canvas


※ Unsupported canvas
※ Unsupported canvas
 X: , Y: ▼　
SET
▼ 詳細設定 [ 表示 ]
▼ 詳細設定 [ 非表示 ]
 ダウンロード時のタイル１枚のサイズ (1辺:16～64px) ※ 描画時は32pxで固定
1辺 px
 描画キャンバスの設定




●　 ▼ 画像作成時に描画する基準座標 [ 表示 ]
▼ 画像作成時に描画する基準座標 [ 非表示 ]
 Layer 1 (横軸)
± px
Layer 1 (縦軸)
± px
 Layer 2 (横軸)
± px
Layer 2 (縦軸)
± px
 Layer 3 (横軸)
± px
Layer 3 (縦軸)
± px
 ●　 ▼ 指定範囲のマップデータをコピー＆ペースト [ 表示 ]
▼ 指定範囲のマップデータをコピー＆ペースト [ 非表示 ]
 コピー元のレイヤー
コピー元の始点 タイルのX座標
コピー元の始点 タイルのY座標
 コピー元の終点 タイルのX座標
コピー元の終点 タイルのY座標
 コピー元のタイル
ペースト先のレイヤー
ペースト先の始点 タイルのX座標
ペースト先の始点 タイルのY座標
 ●　 ▼ 指定範囲のマップデータをダウンロード [ 表示 ]
▼ 指定範囲のマップデータをダウンロード [ 非表示 ]
 ダウンロード元のレイヤー
ダウンロード元の始点 タイルのX座標
ダウンロード元の始点 タイルのY座標
 ダウンロード元の終点 タイルのX座標
ダウンロード元の終点 タイルのY座標
 ダウンロードした ファイル (PART DATA) は「指定範囲のマップデータを読み込む」で描画する
 ●　 ▼ 指定範囲のマップデータを読み込む [１] [ 表示 ]
▼ 指定範囲のマップデータを読み込む [１] [ 非表示 ]
 マップデータの一部 (PART DATA) を読み込む (入力)
PART DATA [１]
 ▼
描画するレイヤー
描画する始点 タイルのX座標
描画する始点 タイルのY座標
 アドバイス
「マップデータの一部 (PART DATA) [１] を読み込む」⇒「描画タイプ３：[１] を選択する」⇒「キャンバスをクリックする」の手順でも 指定位置に描画できる (始点の入力は不要)
 ●　 ▼ 指定範囲のマップデータを読み込む [２] [ 表示 ]
▼ 指定範囲のマップデータを読み込む [２] [ 非表示 ]
 マップデータの一部 (PART DATA) を読み込む (入力)
PART DATA [２]
 ▼
「マップデータの一部 (PART DATA) [２] を読み込む」⇒「描画タイプ３：[２] を選択する」⇒「キャンバスをクリックする」の手順で 指定位置に描画する
 ●　 ▼ 指定範囲のマップデータを読み込む [３] [ 表示 ]
▼ 指定範囲のマップデータを読み込む [３] [ 非表示 ]
 マップデータの一部 (PART DATA) を読み込む (入力)
PART DATA [３]
 ▼
「マップデータの一部 (PART DATA) [３] を読み込む」⇒「描画タイプ３：[３] を選択する」⇒「キャンバスをクリックする」の手順で 指定位置に描画する
 ●　 指定範囲のマップデータを読み込む (共通設定)

 マップデータの全体 (MAP DATA) を読み書きする場合は「データ管理」の「ダウンロード」を実行する
 ●　 ▼ 文字入れ [ 表示 ]
▼ 文字入れ [ 非表示 ]
 文字入力 [１]
位置 [１]
横軸 px， 縦軸 px
▼ 文字設定 [１] [ 表示 ]
▼ 文字設定 [１] [ 非表示 ]
 文字のサイズ
文字の色
文字の枠の色
文字の枠の太さ (※不要な場合は0に設定)
 文字の書体


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


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


▼ ウィンドウ設定 [３] [ 表示 ]
▼ ウィンドウ設定 [３] [ 非表示 ]
ウィンドウの位置 (横軸)
ウィンドウの位置 (縦軸)
 ウィンドウのサイズ (横軸)
ウィンドウのサイズ (縦軸)
 ウィンドウの枠の色
ウィンドウの枠の太さ (※不要な場合は0に設定)
 ウィンドウの背景の色
ウィンドウの背景の透明度 (0～100)
 ウィンドウの角丸 (※直角の場合は0に設定)
 ●　 ▼ データ管理 [ 表示 ]
▼ データ管理 [ 非表示 ]
 ▼ ローカルストレージ [ 表示 ]
▼ ローカルストレージ [ 非表示 ]
 マップデータを保存する [１]
 マップデータをキャンバスに描画する [１]
 ●　 マップデータを保存する [２]
 マップデータをキャンバスに描画する [２]
 ●　 マップデータを保存する [３]
 マップデータをキャンバスに描画する [３]
 ローカルストレージのデータは、ブラウザーの挙動によって削除される可能性があるので、一時的な保存場所と思って下さい。
 ●　 ▼ ダウンロード (ログデータ) [ 表示 ]
▼ ダウンロード (ログデータ) [ 非表示 ]
 マップデータ(全体)を保存する (出力)
 マップデータ(全体)をキャンバスに描画する (入力)
MAP DATA
 ▼
マップデータの一部 (PART DATA) だけを読み書きしたい場合は「詳細設定」の「指定範囲のマップデータをダウンロード／読み込む」を実行する
 ●　 タイルデータを保存する (出力)
 タイルデータを読み込む (入力)
TILE DATA
 ▼
●　 文字データを保存する (出力)
 文字データを読み込む (入力)
TEXT DATA
 ▼
▼　
3.
画像を作成・保存する
▼　
▼ OUTPUT FORM Image is displayed here
説明 ドット絵マップエディター について
ファミコンのドラゴンクエスト3みたいな感じのオリジナル地図やマップ風のロゴ画像などを作成できるウェブアプリです。
ゲームを制作するためのツールではなく、ただ画像を作成するためだけのツールなので ゲームはできませんが 楽しんでください。 手順 ドット絵マップエディター の使い方
１. タイルの枚数 (横幅×縦幅) を設定する
２. 描画するタイルをクリックして選択する
３. キャンバスを クリックまたはドラッグして タイルを描画する
補足 (レイヤーについて)
複数のレイヤー(層)を使うことで、タイルを重ね合わせたり、地面のレイヤー・建物のレイヤー・人や物のレイヤーを分けて描画することが出来ます。
透過タイルの場合は、レイヤー 2 か 3 に描画して下さい。
補足 (描画タイプについて)
描画タイプ１は、タイルを一枚づつ細かく描画する時に向いてます。
描画タイプ２は、ドラッグ＆ドロップで 指定した範囲内に まとめて描画することが出来ます。背景となる地面・床のタイルをベタ塗りする時に向いてます。
描画タイプ３は、複数種類のタイルを 指定した位置に まとめて描画することが出来ます。同じ処理を繰り返す時 (コピー＆ペーストする時) に向いてます。事前に「詳細設定」の「指定範囲のマップデータ (PART DATA) をダウンロード／読み込む」を実行する必要があります。
 データ管理
読み込んだタイルや描画したマップのデータを 保存したり 読み込んだりすることが出来ます。
 タイルのコーナーカットについて タイルの角を丸くする方法
🔽 コーナーカットするレイヤーの構成
ドット絵マップエディターの使い方 (コーナーカットするレイヤーの構成) ● レイヤー1： レイヤー2のタイルを カット(透過)した部分に 表示するタイルを設置
● レイヤー2： 角を丸くしたいタイルを設置
● レイヤー3： 角を丸くしたいタイルと同じ座標に コーナーカット (CUT) のタイルを設置 (CUT 1 は左上、CUT 2 は右上、CUT 3 は左下、CUT 4 は右下)
🔽 コーナーカットのタイルを選択する場所 (タイルセットの下の方にある)
ドット絵マップエディターの使い方 (コーナーカットするタイルの場所) ※ レイヤー3に変更してから コーナーカットのタイルを選択して下さい。
 注意事項 ドット絵マップエディター で作成した画像の取り扱い
業者による営利目的で ドット絵マップエディター (以下このツール) を使用することは禁止とさせて頂きます。 業者ではなく 個人が私的に使用する場合など 詳しくは トップページの下部にある 説明 (利用規約や注意事項など) を参照して下さい。
例：業者が攻略サイトを運営する目的で このツールを使用する行為は 禁止です。 個人が私的に 攻略サイトを運営する目的で このツールを使用する場合は 自己責任でお願いします。
 あとがき 今後の予定
今後のドット絵マップエディター・シリーズで対応する予定 (2024)
● マイクラ風 (3Dゲームのブロック)
● 桃鉄風 (ボードゲームのマップ)
● マリオ風 (横スクロールアクションのコース)
● ポケモン風 (RPGのマップ)
● ＦＦ風 (RPGのマップ)
● など (レトロゲーム風がメイン)
 対応フォント
PixelMplus10 ドラクエ Mario Mario Nintendo PlayStation SEGA 極太 KillGothic メイリオ コーポレートロゴ(ラウンド) ラノベPOP アンニャントロマン 外部リンク
ドラゴンクエストシリーズ - Wikipedia
ドラゴンクエストウォーク - Wikipedia
 関連リンク
画像関連ツール (目次)
ドラゴンクエスト関連ツール
 ▲ 上部に移動する
by UTILITY LABO
<< 目次 (画像ツール)
WSE 2024 (C) UTILITY LABO © UTILITY LABO お問い合わせ (メールフォーム) / ツイッター