ドット絵メーカー

ドット絵メーカーとは?

ドット絵メーカーは、固定グリッドを土台にした描画ツールです。自由な筆致ではなく、1マスずつピクセルを置いていきます。この制約こそがドット絵(ピクセルアート)の魅力: ゲームのスプライト、レトロなアイコン、アバター、8ビット風イラストは、すべてのピクセルを意図して選ぶことで生まれます。

このエディタには、スプライトエディタの定番ツール一式が揃っています。8x8〜64x64 のグリッドで使える鉛筆・消しゴム・塗りつぶし・スポイト、そしてライブプレビュー付きのコマ送りアニメーション。結果は任意サイズのくっきりした PNG、アニメーション GIF、ゲームエンジンで使えるスプライトシートとして書き出せます。

そして Coddy なので、描いた絵はそのままコードにもなります。ワンクリックでグリッドが Python の2次元配列、JavaScript の canvas スニペット、CSS の box-shadow アート、SVG、表計算で開ける CSV に変換されます。画像が色の配列にすぎないことを体感できる楽しい方法です。

ドット絵づくりで学べること

• 画像は2次元配列: 各ピクセルは色の値を持つ1要素です。コード書き出しは、あなたの絵をまさに行と列の hex コードとして表示します。
• 小さいパレットほど美しい。クラシックなスプライトは4〜32色。制限があるからこそ形が整い、シルエットが読み取りやすくなります。
• アニメーションはただのフレームの連なり。まばたきや歩行サイクルは、わずかに違うグリッドを順に見せているだけです。

ドット絵の作り方

1. 1

   グリッドサイズを選ぶ

   まずは小さく 16x16 か 32x32 から。小さなグリッドはシンプルで読み取りやすい形を強制します。クラシックなゲームスプライトの多くは 16x16 か 32x32 です。サイズは後から変えても絵は失われません。

2. 2

   シルエットを置く

   輪郭は鉛筆、広い面は塗りつぶしで。まず1色で全体の形を描き、それから細部を足します。右クリック(または消しゴム)でピクセルを消せます。

3. 3

   少ない色で陰影をつける

   素材ごとに2〜3トーン: ベース・ハイライト・シャドウ。内蔵パレットはこの色の階段を探しやすい順に並んでいて、スポイトはキャンバス上の色を拾えます。

4. 4

   アニメ化する(任意)

   フレームを複製して数ピクセル動かし、再生を押すだけ。まばたきや炎の揺らぎなら2〜3フレームで十分です。

5. 5

   書き出す

   最大32倍スケールの PNG、アニメーション GIF、全フレームを並べたスプライトシートをダウンロード。あるいはコードパネルを開いて、Python・JavaScript・CSS・SVG・CSV としてコピーしましょう。

ドット絵クイックリファレンス

よく使うキャンバスサイズと書き出し形式、その使いどころ。

試してみたい例

PIXELS = [    [None, "#e43b44", "#e43b44", None],    ["#e43b44", "#a22633", "#a22633", "#e43b44"],    [None, "#e43b44", "#a22633", None],    [None, None, "#e43b44", None],]
for row in PIXELS:    print("".join("█" if c else " " for c in row))

.pixel-art {    --px: 12px;    width: var(--px);    height: var(--px);    box-shadow:        calc(1 * var(--px)) 0 0 0 #e43b44,        calc(2 * var(--px)) 0 0 0 #e43b44,        calc(1 * var(--px)) calc(1 * var(--px)) 0 0 #a22633;}

ドット絵でよくある失敗

• いきなり 64x64 で始める。大きいキャンバスは弱い形をごまかします。1ピクセルごとが決断になる 16x16 で学びましょう。
• 色を使いすぎる。40色のスプライトにスタイルはありません。素材ごとに小さな色の階段を決めて守ること。
• 書き出しを滑らか補間で拡大する。ドット絵はニアレストネイバーで拡大しないと(このツールは自動でやります)ぼやけます。

ドット絵メーカー FAQ