ドット絵変換メーカー

📖 ドット絵変換ツールの使い方

1. 画像を選ぶ

「クリックして画像を選ぶ」から写真やイラストを選びます。パソコンならファイルをドロップ、スクリーンショットなら Ctrl+V（Mac は Cmd+V）で貼り付けても読み込めます。まず雰囲気を見たいときは「サンプル画像で試す」を押してください。

2. ドット数と色数を決める

ドット数は長い辺のドットの数です。16ドットはアイコン、32ドットはスタンプや小さなキャラクター向きです。色数は「自動（画像から抽出）」のときに使われ、画像の中からよく使われている色をその数だけ選びます。

3. パレットを選ぶ

「ゲームボーイ風 4色」は緑がかった4階調、「モノクロ 2色」は白黒だけです。固定パレットを選ぶと色数の欄は使われません。変換結果の下には使われた色の一覧（パレット）が出ます。

4. 保存する

「表示倍率」で1ドットを何ピクセルで描くかを決め、「PNGで保存」を押します。32×24ドットを×8で保存すると 256×192px の画像になります。ドットはにじまず、くっきりした正方形のまま拡大されます。「透明部分を残す」にチェックがあれば、PNG の透明はそのまま透明で保存されます。

🔬 どうやってドット絵にしているのか

やっていることは3段階です。①縮める：出力の1ドットに対応する元画像の範囲（箱）の色を平均します。②色を選ぶ：全ドットの色を「いちばん幅の広い成分で半分に割る」を繰り返して箱に分け、箱ごとの平均色をパレットにします（メディアンカット法）。③置き換える：各ドットをパレットの中でいちばん近い色に替えます。距離は単純な RGB の差ではなく、人の目が緑に敏感で青に鈍いことを織り込んだ重みつきの式で測っています。

拡大して表示するときは imageSmoothingEnabled = false（最近傍補間）で描くので、ドットの境目がぼやけません。処理時間は結果の上に実測で表示しています。