🐁豆大福ピクセルエディタ Indexed Pixel Editor 公式版: tokyo-sairo.neocities.org/tools/doteditor/
ブラシ
選択なし
X: — Y: — 32 × 32 使用色 1 / 256
一本指: 描画　二本指: 移動・拡大　長押し: スポイト

新規ドキュメント

キャンバスサイズ変更

基準位置

画像書き出し

豆大福ピクセルエディタ 基本操作

制作開始から保存までの最短手順

まずはこの4手順

  1. 新規幅・高さ、カラーモード、初期背景を決める。
  2. 色を選ぶ「パレット」で色を選び、「色」でHEX値を調整する。
  3. 描く鉛筆・消去・ベタ塗りを選び、キャンバス上を操作する。
  4. 保存する再編集用は「保存」、完成画像やアニメ素材は「書出」を使う。

描画ツール

鉛筆 P

選択中の色で描画。ブラシサイズ1〜64pxに対応し、ドラッグ中は途切れないよう補間される。

消しゴム E

現在のレイヤーだけを透明化する。下のレイヤーは消さない。

ベタ塗り F

タップしたセルと同色で、上下左右につながる領域を一括で塗る。選択範囲がある場合は、その内側だけを探索する。

線

鉛筆を長押しして選択。開始点から終了点まで、現在のブラシサイズで直線を描く。

2色ディザ D

主色と追加選択色を市松状に配置する。追加色はパレット長押しで選ぶ。

矩形・円形

ドラッグした外接範囲へ、現在のブラシサイズを輪郭の太さとして描く。ボタン長押しで種類を切り替える。

選択範囲 S

矩形・円形で編集領域を制限。コピー、切り取り、貼り付け、クリアに対応する。

レイヤー移動 M

選択中レイヤーの内容全体をドラッグで移動する。キャンバス外へ出た部分は切り落とされる。

スポイト

全レイヤーの合成結果から色を取得する。長押し、右クリック、または Alt＋クリック。

ブラシサイズは上部の「ブラシ」で1〜64pxに変更できる。鉛筆・消しゴム・ディザ・線・矩形・円形へ適用され、ベタ塗りと選択範囲には影響しない。

キャンバス操作

スマートフォン・タブレット

一本指
描画
二本指
表示移動・ピンチ拡大縮小
長押し
スポイト

マウス・ペン

左操作
描画
ホイール
ポインター位置を中心に拡大縮小
Space＋ドラッグ
表示移動
中ボタンドラッグ
表示移動

「全体」はキャンバス全体を画面内へ収め、「原寸」は100％表示へ戻す。グリッドと8×8・16×16補助線は画像には含まれない。

色とカラーモード

  • 256色・可変16色・可変4色：パレット色をHEXまたはカラーピッカーで編集できる。
  • ゲームボーイ固定4色：固定4階調。色編集と透明色は使用しない。
  • ファミコン準拠可変4色：NESマスターパレットから4色を選ぶ。
  • 色数の少ないモードへ変更すると近似色へ変換される。変換はUndoできるが、重要な作品は先にプロジェクト保存しておく。

レイヤー

  • 一覧の上にあるレイヤーほど前面に表示される。
  • 目のボタンで表示切替、錠前で編集ロック。行を選ぶと編集対象になる。
  • 「下へ結合」は、選択中レイヤーを直下のレイヤーへ統合する。
  • PNG書出では可視レイヤーのみを統合する。レイヤー構造はプロジェクト保存にだけ保持される。

選択範囲とコピペ

  • 選択範囲がある間は、鉛筆・線・図形・消去・ディザ・ベタ塗りが範囲外へ作用しない。
  • コピーと切り取りは選択中レイヤーから取得する。貼り付け先は現在の選択範囲の左上。選択がない場合はコピー元位置。
  • 円形選択では外側のセルをコピー・消去・貼り付けの対象にしない。
  • Ctrl/Cmd＋C／X／V、Deleteにも対応する。データはアプリ内だけで保持される。

アニメーション

  • 「アニメ」タブでは、縦のレイヤーと横のフレームが交差するセルをON/OFFして、各フレームで表示するレイヤーの組み合わせを作る。
  • フレームは独立したピクセル画像を持たず、レイヤー本体と表示ON/OFF、表示時間、ポーズキーを参照する。目開き・目閉じなど別絵が必要な場合は、内容ごとにレイヤーを分ける。
  • 「追加」は新規フレーム、「複製」は現在フレームの表示設定・表示時間・保存済みポーズキーをコピーする。フレームごとに20〜60000msを指定でき、左右ボタンで並べ替えられる。
  • 通常のレイヤー目ボタンがOFFの場合、そのレイヤーはすべてのフレームで非表示になる。フレームセルのON/OFFは、通常のレイヤー表示がONの時だけ有効。
  • 再生・停止・前後移動・先頭移動・ループに対応する。再生中は誤編集を防ぐため描画できない。「再生中リグ」は確認用の線表示で、画像書出には含まれない。
  • フレーム番号やセルの◆は保存済みポーズキーを示す。◆表示対象は「現在レイヤー」または「全リグ付きレイヤー」へ切り替えられる。◇は元ポーズ系の表示目印。
  • 「前◆」「次◆」で、現在レイヤーの前後ポーズキーへ直接移動できる。先頭・末尾にキーがない場合は移動しない。
  • オニオンスキンは前後フレームの表示結果を薄く重ねる。対象は「現在レイヤー」または「表示レイヤー全部」、濃度は薄い・標準・濃いから選べる。再生中は非表示。
  • 「ポーズキー中割」は同じリグ付きレイヤーの◆同士を補間する。生成結果は未保存ドラフトではなく、保存済み◆として確定する。手動で動かした未保存ポーズが残っている時は先に保存または破棄する。
  • 中割カーブは直線、弱/強イーズ、前半保持、後半保持、4段階に対応する。短いスプライトでは差が小さいため、4段階や保持系はコマ打ち感を出したい時に使う。
  • .pxprojにはフレーム順、表示時間、レイヤーON/OFF、選択フレーム、ループ設定、ポーズキー、オニオン設定が保存される。

リグ / ボーン / ポーズ編集

  • 1レイヤーにつき1リグ。腕、脚、尻尾、武器などを別々に動かしたい場合は、パーツごとにレイヤーを分ける。
  • リグ本体はレイヤーが持ち、ポーズキーはフレームが持つ。基準姿勢・割当・ウェイトはレイヤー側、フレームごとの姿勢差分はアニメ側に保存される。
  • 「リグ作成」は、基点を置いてから子点を追加していく。分岐リグに対応しており、人型に限らず、タップした点と親子関係を基準にする。人型テンプレートは下書き補助で、必須ではない。
  • 「リグを確定」すると、自動範囲と近傍幅に従って不透明ピクセルを各区間へ割り当てる。元画像を描き直した部分は未割当になりうるため、必要なら「自動バインド」や「割当編集」で直す。
  • 「割当編集」は、どのピクセルをどの区間が持つかを塗り直す。全区間表示、選択区間表示、未割当表示を切り替えられる。割当作業とウェイト作業は基準姿勢で行う。
  • 「ウェイト調整」は関節周辺をなめらかに曲げるための混合率を塗る。確認曲げは仮表示で、ポーズキーにも元ピクセルにも保存されない。
  • 「ポーズキー編集」で点をドラッグすると未保存ポーズになる。保存済み◆にするには「現在◆追加/更新」を押す。キーがないフレームでは新規追加、キーがあるフレームでは上書きになる。
  • 未保存ポーズ中は、フレーム移動、前◆/次◆移動、レイヤー切替、再生、フレーム追加・複製・削除・並べ替えを止める。先に「現在◆追加/更新」「未保存破棄」「元ポーズへ戻す」のどれかで整理する。
  • 「現在◆削除」は現在フレーム・現在レイヤーの保存済みポーズキーだけを消す。別レイヤーのリグや別フレームの◆は消さない。
  • ポーズキーはコピー、貼付、反転貼付、全フレーム貼付に対応する。前◆/次◆移動、前後◆リグ薄表示、前後フレーム薄表示で動きの流れを確認できる。
  • 変形は非破壊。元レイヤーのピクセルを基準に毎回表示を作るので、ポーズを何度動かしても累積劣化しない。「現在姿勢を通常ピクセル化」は例外で、表示中の姿勢を通常ピクセルへ焼き込む。
  • 変形品質は「軽い・標準・きれい」、重なり順は「末端を前・根元を前」、関節補正や接続補正も調整できる。重い作品では標準または軽い設定で確認してから、必要に応じてきれい設定を使う。

保存と書き出し

保存（.pxproj）

レイヤー、パレット、透明色、ブラシサイズ、リグ、割当、ウェイト、フレーム構成、再生設定、ポーズキーを保持する再編集用データ。

画像書出

静止PNG、APNG、GIF、スプライトシートPNG＋JSONに対応。APNGはRGBA、GIFは共通インデックスパレットで出力する。

読込

.pxproj、PNG、JPEG、WebP、GIF、APNGを読み込める。アニメGIF/APNG/WebPは対応ブラウザではフレーム＋レイヤーへ展開する。

自動保存

端末内に作業状態を保存する。ただしバックアップ代わりにはせず、重要な作品は「保存」も行う。

.pxprojには公式版識別メタデータも入る。作品データの編集には影響しない。

アニメーション書き出し

  • APNG：RGBA形式。完全透過を保持し、各フレームの表示時間とループ設定を保存する。リグ付きレイヤーは各フレームのポーズを反映して出力される。
  • GIF：GIF89a形式。現在の共通パレットと1色透過を使用し、表示時間は10ms単位へ丸める。幅広い投稿先で使いやすい。
  • スプライトシート＋JSON：全フレームを横一列・縦一列・自動グリッドで並べ、座標・表示時間・ループ情報をJSONへ記録してZIPで保存する。

CRTモード

  • 画像出力タブの「CRT効果」で、ドット絵を古いブラウン管風に表示・書き出しできる。
  • なし：通常表示。プレビューのみ：編集画面だけにCRT効果を重ねる。書出しにも反映：対応形式の出力画像にもCRT効果を焼き込む。
  • プリセット1〜4とカスタムに対応する。内部倍率、元ドットサイズ、蛍光体、にじみ、走査線、黒レベル、色混線を調整できる。
  • CRTプレビューは表示効果で、元ピクセル、パレット、レイヤー、リグ、ポーズキーは変更しない。
  • 書出し反映は RGBA PNG / APNG / スプライトシートPNG で有効。Indexed PNG と GIF は現段階では通常書き出しになる。
  • 大きなキャンバスではプレビュー負荷を抑えるため、内部解像度や表示負荷が自動調整されることがある。最終確認は書き出し画像で見る。

キーボードショートカット

Ctrl/Cmd＋Z元に戻す Ctrl/Cmd＋Shift＋Zやり直す Ctrl/Cmd＋Sプロジェクト保存 Ctrl/Cmd＋C/X/V選択範囲のコピー / 切取 / 貼付 Delete / Esc選択範囲クリア / 選択解除 P/D/R/S/M/B鉛筆 / ディザ / 矩形 / 選択 / レイヤー移動 / ボーン [ / ]ブラシを細く / 太く Gグリッド切替 0 / 1全体表示 / 原寸表示 + / −拡大 / 縮小 ? / F1このヘルプを開く