ドット絵エディターの使い方
- キャンバスサイズを選ぶか（最初は 16×16 や 32×32 がおすすめ）、PNG、GIF、.piskel ファイルを開きます。
- PICO-8 や Endesga 32 などのパレットを選び、鉛筆（B）で描きます。右クリックはサブカラーで描画し、サブカラーは初期状態で透明です。
- 線画、色塗り、陰影用にレイヤーを追加します。アニメーション用にフレームを追加し、オニオンスキン（K）をオンにすると前後のフレームが見えます。
- Enter でアニメーションを再生し、FPS を調整して、1×、2×、タイル表示の小さなプレビューで確認します。
- 書き出しを開き、PNG、JSON 付きスプライトシート、アニメ GIF、SVG、フレームの ZIP、.piskel ファイルをダウンロードします。
得られるもの
- 現在のフレームの PNG（1×〜16×）
- JSON のフレームリスト付きスプライトシート PNG（列数は自由）
- ドキュメントの FPS を使ったアニメ GIF（透過を保持）
- 連番フレーム PNG の ZIP
- 1色につき1パスの SVG
- ここや Piskel で開き直せる .piskel ファイル
ゲーム制作で使って得たコツ
- 1px のアウトラインを描くときはピクセルパーフェクト（P）をオンのままに。フリーハンドで残る角の二重ピクセルを取り除きます。
- 鉛筆で Shift+クリックすると、直前の点から直線を引けます。直線のドラッグ中に Shift を押すと 45° 刻みに、矩形・楕円は正方形・正円にスナップします。
- 陰影ツール（U）はピクセルをパレット内の1段明るい色または暗い色に置き換えるので、パレットから外れずに陰影を付けられます。右クリックで暗くなります。
- 描く前に範囲を選択すると（S、同じ色なら W）、ストロークがその中に収まります。移動の前に選択すれば、そのピクセルだけを動かせます。
- キャラや正面向きのスプライトにはミラー X をオンにし、最後に手で対称を崩すと、ハンコで押したような見た目になりません。
- 線画の下に不透明度を下げた非表示の「下書き」レイヤーを置き、書き出し前に削除しましょう。
- 作業内容はこのブラウザに自動保存されます。どこにも同期されないので、バックアップが欲しいときは .piskel ファイルを書き出してください。
- Ctrl+V で画像を貼り付けると新しいレイヤーとして入るので、資料のトレースに便利です。
活用例
- 何もインストールせずに、ゲームジャムでキャラ、アイテム、タイルを描く
- AI 生成のスプライトを、エンジンに入れる前に1ピクセルずつ手直しする
- 待機、歩き、攻撃のループをアニメーションさせ、Godot・Unity・GameMaker 用のシートを書き出す
- 小さなアニメ GIF やエモートを作る
- Piskel が入っていないパソコンで Piskel のプロジェクトを編集する
よくある質問
このドット絵エディターは無料ですか？
はい。描画、アニメーション、読み込み、書き出しの機能はすべて無料で、透かしも入りません。エディターは完全にブラウザ内で動作します。
描いたものはどこに保存されますか？
ブラウザのローカルストレージに、この端末だけに保存されます。ページを再読み込みしても残りますが、サイトデータを消去したりブラウザを変えたりすると消えます。コピーを残すには .piskel か PNG を書き出してください。
Piskel のファイルは開けますか？
はい。.piskel ファイルを開くと、レイヤー、フレーム、FPS が読み込まれます。.piskel への書き出しもできます。
キャンバスの最大サイズは？
512×512 ピクセルです。ドット絵はたいてい一辺 16〜128 ピクセルなので、上限をここにしておくことで、スマホや古いノートパソコンでも描画が軽快に保たれます。
ゲームエンジン用のスプライトシートはどう作りますか？
タイムラインでアニメーションの各フレームを描き、書き出し → スプライトシートを選びます。列数と倍率を設定すると、PNG と、各フレームの位置と表示時間を記録した JSON ファイルが得られます。
スマホやタブレットでも使えますか？
はい。指1本で描き、ピンチや2本指でズームとパンができます。ただ、細かい作業ではショートカットがあるぶんマウスとキーボードのほうが速いです。
GIF やスプライトシートを読み込めますか？
はい。GIF は GIF のフレームごとに1フレームとして開きます。シートらしき PNG を開くと、検出したグリッドでフレームに分割するか尋ねます。