32×32のキャンバスで、最大4枚のレイヤーを使ってゲーム用スプライトを描けます。線画、ベースの色、かげ、ハイライトを別々に管理できます。左右対称描画で対称なキャラクターを半分の手間で描け、スプライトシートはフレームを横一列かグリッドに並べて書き出せます。
使い方
- サイズボタンをタップして8×8〜128×128ピクセルのキャンバスを選びます。見本の上にそのまま描いても構いません。
- ツールと色を選んで描きます。左右対称をオンにすると、描いた線が反対側にも描かれます。
- 線画と色はレイヤーで分け、動きはフレームで作ります。再生を押すとプレビューでアニメーションを確認できます。
- 書き出しから、1〜32倍のPNG、スプライトシート、アニメGIFをダウンロードできます。
- 絵はこのブラウザに自動保存され、端末の外に送られることはありません。コピーを残したり別の端末で続けたりするには、プロジェクトファイル（.json）を保存してください。
- 右クリックでサブカラーで描け、Alt+クリックで色を拾えます。ペンでShift+クリックすると直前の点から直線を引き、塗りつぶしでShift+クリックするとレイヤー上の同じ色をすべて置き換えます。
- フレームごとに全レイヤーのコピーを持ちます。オニオンスキンは前のフレームと、薄く次のフレームを表示するので、動きを合わせやすくなります。
- 書き出しはどの倍率でもドットの輪郭がくっきり保たれます。GIFは白い背景をオンにしない限り透明部分を保ちます。
- 画像の取り込みでは、ブロックごとに色を平均し、4〜64色または現在のパレットに減色します。「現在のレイヤー」を選ぶと下絵として使えます。
- タッチ画面では1本指で描き、2本指でピンチすると拡大縮小、ドラッグすると移動できます。
キャンバスサイズの選び方
16×16はアイコンやアイテム、小さなキャラクターの定番サイズです。32×32なら顔や細部を描く余裕があり、ゲームキャラクターによく使われます。64×64は顔のアップや大きめの場面向きです。小さいキャンバスほど形を単純化する必要があり、練習にはぴったりです。
ドット絵は小さく描いて大きく見せるものです。SNS用には8倍や16倍で書き出しましょう。32×32のスプライトを16倍にすると、各ピクセルがぼかしなしのブロックとして拡大され、くっきりした512×512のPNGになります。
レイヤー・フレーム・オニオンスキン
線画と色やかげを別のレイヤーに分けると、線を描き直さずに色を変えられます。アニメーションでは、フレームごとにすべてのレイヤーを持っています。オニオンスキンは前のフレームを薄く、次のフレームをさらに薄く表示するので、動きを合わせやすくなります。再生ではループを毎秒1〜30フレームで確認でき、歩きのアニメなら8〜12fpsがよく使われます。
ショートカットとコツ
右クリックでサブカラー、Alt+クリックでスポイト、ペンでShift+クリックすると直前の点から直線を引けます。塗りつぶしでShift+クリックすると、レイヤー上の同じ色のピクセルをすべて置き換えられるので、配色の入れ替えに便利です。.jsonのプロジェクトファイルを保存すれば、バックアップや別の端末での続きの作業に使えます。
よくある質問
ドット絵のサイズはどれがいい？
初めてなら16×16か32×32がよく選ばれます。16×16は形をシンプルに保て、32×32なら表情やかげを入れる余裕があります。細かい場面を描くなら64×64以上がおすすめです。
ドット絵をぼやけずに書き出すには？
8倍や16倍などの倍率でPNGを書き出してください。各ピクセルが四角いブロックのまま拡大されるので、どの大きさでも輪郭がくっきりします。
GIFアニメは作れますか？
作れます。フレームを追加してポーズを描き、再生でループを確認して速さを決めたら、GIFで書き出します。白背景をオンにしない限り透過は保たれます。
ゲーム用のスプライトシートを作るには？
アニメーションのフレームを描いたら、書き出しでスプライトシートを選び、横一列かグリッドに並べます。ゲームエンジン向けに正確なピクセルサイズで保存されます。
描いた絵は保存されますか？
このブラウザに自動で保存されます。バックアップや別の端末で続けたい場合は、プロジェクトを.jsonファイルでダウンロードして、そちらで開いてください。
写真をドット絵に変換できますか？
できます。取り込み機能が画像をブロックごとに平均し、4〜64色または今のパレットに減色します。そのあと手で修正できます。