FCマリオ1風ドット絵コースメーカー (ドット絵マップエディター)

▼ サンプル用のマップデータ／パーツデータ [ 表示 ] NEW
　Ver.1.0.3 システム更新 2024/12/10 (公開 2024/12/10)

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

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

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

SELECT
◀ CORNER CUT
Target Layer 2
Select Layer 3

NOW LOADING ...

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

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

画像を作成・保存する

▼　説明

ファミコンのスーパーマリオブラザーズみたいな感じのオリジナルコース画像やコース風のロゴなどを作成できるウェブアプリです。
初期設定のタイルは全て 16x16 のサイズです。

ゲームを制作するためのツールではなく、ただ画像を作成するためだけのツールなのでゲームはできませんが楽しんでください。目次 手順 (使い方) / 補足 (レイヤー) / 補足 (描画タイプ) / 補足 (サンプル用のマップデータ) / タイル / データ管理 (ローカルストレージ、ダウンロード) / タイルのコーナーカットについて / 注意事項 / 動作環境・推奨環境 / 開発・更新履歴 / あとがき / 関連ツール 手順ドット絵マップエディター・シリーズの使い方

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

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

が見えるのが透過タイルです。透過部分が小さい場合 (例えば１ドット分だけある場合) は、透過タイルなのか分かりづらい場合もあります。 (消しゴムのタイル(DELETE)は透過タイルではありません)
レイヤーを変更する方法 は、キャンバスの下にあるレイヤーのセレクトボックス (選択メニュー) で別の層を選択するか、その右側にあるボタンを押すことで変更できます。

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

補足 (サンプル用のマップデータ／パーツデータについて)
サンプル用のマップデータ (ページ上部にある) をキャンバスに読み込んで再編集することができます。
タイル

自分で作成したタイル画像や、配布されている素材 (タイルセット) を分割した画像などは「タイル設定」で追加・変更することができます。
タイル画像の一部を透明にしたい場合は、ドット絵用透過ツールを使って下さい。

複数のタイルが結合されているタイルセット (マップチップ) は、画像分割ツール等で 16×16 や 32×32 など任意のサイズに分割できます。
ドット絵マップエディター・シリーズ用のタイルセット画像toタイルデータ変換ツールを使えばまとめて読み込むことが出来ます。
データ管理

描画したマップのデータや自分で入力したタイルのデータなどを保存したり読み込んだりすることが出来ます。描画したマップを再編集する時に使って下さい。

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

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

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

● レイヤー１：レイヤー２のタイルをカット(透過)した部分に表示するタイルを設置
● レイヤー２：角を丸くしたいタイルを設置
● レイヤー３：角を丸くしたいタイルと同じ座標にコーナーカット (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 (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に増やす。今後また対応レイヤー数や入力タイル数上限を変更する場合は、簡単に修正できるようになりました。過去最大の改修をしたので潜在的な不具合が残ってる可能性もあり、しばらくはオープンベータとなります。一応デバッグはしていますが最初から完全に防ぐのは難しいので。
「描画タイプ３」の呼称を「描画タイプＤ」に変更。その理由は今後対応するかもしれない「塗りつぶし」を「描画タイプ３」にしたいと思ったからです。
ちなみに現時点(2024.12.01)で、公開前までの開発時間よりも公開後の開発時間(不具合修正などを含む)の方が長いです(たぶん)。終わりが見えません。

2024.12.03
タイルセット画像toタイルデータ変換ツール(仮)を開発しました。ドット絵マップエディター用の関連ツールです。
ちなみに関連ツールは他にも複数あるのでそのうちまとめて公開する予定です。

2024.12.04 (Ver.1.0.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)
● マイクラ風 (3Dゲームのブロック)
● 桃鉄風 (ボードゲームのマップ)
● マリオ風 (横スクロールアクションのコース) (済)
● ポケモン風 (RPGのマップ)
● ＦＦ風 (RPGのマップ)
● など (レトロゲーム風がメイン)

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

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

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

スーパーマリオブラザーズ - Wikipedia
スーパーマリオメーカー - Wikipedia
関連リンク

画像ツール (目次)
● スーパーマリオ関連ロゴ作成シリーズ
● スーパーマリオ関連プロフィールアイコン作成シリーズ
● FCドラクエ3風ドット絵マップエディター

ドット絵マップエディター・シリーズ関連ツール
● タイルセット画像toタイルデータ変換ツール for ドット絵マップエディター・シリーズ用
● 画像分割ツール (タイルセット画像を任意のサイズで分割できる)
● ドット絵用透過ツール (タイル画像の一部を透明にできる)
● アンチエイリアシングしないで画像を拡大するツール (ドット絵向けの画像拡大ツール)
▲ 上部に移動する

FCマリオ1風 ドット絵コースメーカー (ドット絵マップエディター)

FCマリオ1風ドット絵コースメーカー (ドット絵マップエディター)