retro-pixel

name	retro-pixel
description	レトロなドット絵(画素を 1 つずつ意味を持って置く絵)の基礎。色の予算(1 タイルに使える色数・画面全体の色数・画面の大きさ)を 1 つ選び、色とタイルの決まり・形と置き方・タイル地形・小物・ピクセル感の道具箱・繰り返し出る癖の禁止を出す。sprite.json やタイル地形・キャラ・背景をドット絵(ピクセルアート)で描くとき、legend やパレット・ディザを決めるとき、「昔のゲームみたいなドット絵にして」と言われたとき、描き出した絵を自己批評するときに使う。キャラ・生き物の造形(頭身・顔・ポーズ・コマ)は /px-character、画風そのもの(題材・色 3 つ・やらないこと)を決めるのは /visual-dict の仕事で、ここはドット絵で行くと決まった後の手つき。
sync	2026-08-18T00:00:00.000Z

レトロドット絵の核 — 場面も題材も選ばない基礎

画素を 1 つずつ意味を持って置く絵の決まり。ワールドマップ・町・ダンジョン・横視点・ 戦闘画面のどれにも使う。場面ごとの具体(山の形・森の置き方など)はここに書かない — 工程 1 の構造分析で毎回自分で書く。

いつ引くか・いつ引かないか

引く: ドット絵を描く・直すとき。タイル地形、キャラ、*.sprite.json、 「昔のゲームみたいな絵」の指定が出たとき。描き出した絵を自己批評するとき。

引かない:

• 画風がまだ決まっていない → 先に /style-interview で人の注文を聞き、/visual-dict で 題材・色 3 つ・やらないこと 1 つを決める。ここは「ドット絵で行く」と決まった後の手つき
• 部品選び(グロー・粒・残像・シェーダー) → /visual-dict の技法 → 部品の翻訳表。 ここは部品の辞書ではない
• 画素の格子に乗せない絵（高解像度・なめらかな輪郭・シェーダーで作る面） → /smooth-render。 画素の予算が桁で違うので、ここの色数・ディザ・タイルの決まりを持ち込むと逆に品質が落ちる
• UI の配置・文字の折り返し → ui.json の作法。ウィンドウと文字の節はドット絵の見た目だけを言う

衝突したら: 人の注文 > /visual-dict の画風 > この skill。この skill は画風を画素へ 落とす手つきであって、画風そのものではない。絵の下限 5 性質(engine リポの docs/drawing-floor.md)はどちらにも先立つ — 予算が乏しくても 5 性質は下げない。

機械検査: この skill が数えてよいのは宣言したパレットとの一致・色数だけ (bin/fge sprite が色数と近すぎる色を見る)。矩形だけの絵は bin/fge view、 意味色キーの実体は bin/fge palette が別に見る。検査を自作しない。

色の予算を 1 つ選ぶ(いちばん最初に)

ドット絵の作法は使える色の少なさから来る。どれだけ乏しいかで、同じ規則でも 打ち方が変わる。1 つ選び、AGENTS.local.md の画風の節へ 1 行で書き足す (例: 色の予算: 極小 — 256×240 / 1 素材 3 色 / 画面 13 色 / 階調はディザ)。 別ファイルを新設しない — 画風はそこに書いてあるので、予算も同じ場所に置く。 以後の判断はその 1 行を根拠にする。 途中で予算を増やさない — 増やした瞬間にドット絵ではなく低解像度の絵になる。

画風の節に予算の行がまだ無いなら、描く前にまず書く。 予算が決まらないと 下の「ディザ必須」を判定できず、結局ベタ塗りの絵が出る。

予算	画面	1 タイルの色	画面全体	何で物を分けるか	階調の作り方
階調だけ	160×144 前後	4 階調	4	色相が無い。明暗の差と形だけで分ける	ディザ必須
極小	256×240 前後	共通 1+3 色	13 前後	色数の乏しさを形と配置で補う。硬い 3 段階	ディザ必須
小	320×224 前後	16 色	60 前後	影と強調の 2 段階。輪郭のはっきりした色	ディザ必須
中	320×240 前後	16 色	100 前後	中間色が使える。多層・広いグラデ	中間色。ディザは補助

表に無い予算にしてもよい。その場合は画面・1 タイルの色・画面全体の色・ 何で物を分けるか・階調の作り方の 5 つを自分で書いてから描く。

「ディザ必須」は飾りの話ではない。 3 段階しか色が無い予算では、暗と中の間に置ける色が 存在しない — そこを繋ぐ手はディザしかない。当て方と、当ててよい場所・いけない場所は 下の「広い面にディザで階調を作る」に全部ある（必須なのは動かない広い面に対してだけ）。

画風(題材・色 3 つ・やらないこと)はこの表からは引かない。 予算はコンテナの大きさで あって絵の中身ではない。中身は /visual-dict で毎回決め直す。

工程(順番どおりに)

1. 構造分析(ANATOMY.md)を先に書く — これから描く場面に出る要素を列挙し、 要素ごとに「同じ色の予算で作られた古い作品は何色を何役で使い、どんな形をどう配置して 解いたか」を記憶から言語化する。画素単位の複製はしない。描くのは考え方を借りた 自分の解釈。この文書がその場面専用の「要素の作り」表になる — 形・縁の処理・ 密度の地域差まで、描く前に文章で決め切る。skill の決まりとその場面の画面文法が 衝突したら(例: 闇が主役の画面と純黒禁止)、判断を ANATOMY に記録した上で 画面文法を優先してよい
2. パレットを宣言する(*.palette.json か ANATOMY.md の表) — 選んだ色の予算と下の 「色の決まり」に従って共通 1+サブパレット数本×3 段階を hex で先に決め、以後は 選び直さない(再著作禁止)。予算の 1 行は AGENTS.local.md の画風の節(上の節)、 色の実体はここ。宣言の改稿は、理由を書き残して描画のやり直し前に 1 回まで
3. ラフを描き出して往復する(本描きの前に必ず 1 回) — 中身を描き込む前に、 面を 1 色で塗った構図だけのラフを実寸で描き出す。見るのは 4 点だけ: ①主役がどこにいて画面のどこを見るか ②層が何枚あるか(下の「層とコマ」) ③無地のまま残る面が広すぎないか ④ウィンドウと文字の場所。 描き出したら自分の ANATOMY と突き合わせて 3 点だけ直す(方向転換はしない)。 人やレビュー役がいるなら、この時点で見せて 1 往復する — 描き込んだ後の直しより 何倍も安い。ラフは捨てずに *_rough.png として残す
4. 絵はコードで生成する — seed 固定(座標ハッシュ)で乱数なし。質感は関数、 モチーフ(どこに何を置くか)は意思を持って書く配置表。出力画素を手で直さない。 光源は左上で全要素統一
5. 要の要素は多産→選別 — 画面の大半を占める要素と主役(キャラ・魔物など)は 作りの違う変種を 2〜3 個作り、敷き詰めた比較 PNG を描き出して目で選ぶ。 選定・落選理由を PICKS.md に記録
6. 描き出して自分で批評してから提出 — 描き出すのはゲームの make render SHOT=<場面名> (全部いるときだけ make render-all。生成先は gallery/)。 目視の前に bin/fge digest <png> で色数・密度・層の数値を下見すると、 目で見る回数が 1 回で済む。実寸と 4 倍の両方を目視し、「禁止」と自分の ANATOMY に 照らして自己批評 → 最低 1 回直してから提出。キャラ・生き物は拡大クロップでも確認し、 シルエットだけで何の生き物か読めるかを問う。大きいキャラは腕・脚の縁が定規の直線に なっていないか、小物はシルエットだけで何の道具か読めるかも同じ場で問う

色の決まり(ハード制約から来る作法)

• 共通 1 色+サブパレット数本×3 段階(暗・中・明)。本数と全体の色数は選んだ予算から 引く。1 タイルは 1 サブパレット+共通色のみ(タイル属性の見立て)。 これは背景の規則 — キャラや重なる物(スプライトの見立て)は別勘定でよい
• 共通色は**青みの黒(墨)**にする。純黒 #000000 と sRGB 原色(#ff0000 等)は禁止。 彩度は低め・柔らかい配色。白は泡・ハイライト・目印などの取っておきに残す (階調だけの予算では色相が無いので、墨=いちばん暗い階調と読み替える)
• 黒を 1 種類で済ませない。 昔の作品は 1 枚の絵の中で濁った紫 / 暗い茶 / 濁った青と 場所ごとに違う黒を使う。材質ごとに墨をずらす(木の影は茶寄り・水の影は青寄り)だけで、 色数を増やさずに面が生きる
• サブパレットは材質で引く(水/草木/土・砂/石 が基本形)。 物の区別を色相の発明でやらない — 山は土・石で塗る(草木の緑で塗ると森に読める)、 木は草木、壁と屋根は石。同じ材質の物は同じサブパレットに乗る
• 3 段階の使い分け: 中=面の底、明=受光、暗=影。輪郭と接地影は共通の墨
• 面積と彩度は逆比。彩度の高い色は小面積にだけ置き、広い面ほど彩度を落とす。 逆にすると画面が騒がしくなって主役が沈む
• いちばん明るい色といちばん彩度の高い色は、画面で 1 か所(主役)にしか置かない。 取っておきの白と同じ扱いを、白以外の色にも広げる — 視線の行き先はこれで決まる
• 隣り合う材質を同じ明るさの段に置かない。色相が違っても明度が同じ面は、 白黒にすると溶ける。bin/fge digest の「明度 3 段」が 1 段へ偏っていたら疑う (閾値ではなく前回からの動きとして読む)

層とコマ

• 層は最低 3 枚(奥・主役・手前)。奥は暗く低彩度・粗く、手前は締める。 層が 1 枚しかない絵は、要素をいくら足しても書き割りに見える
• コマ = 時間。1 枚絵でも「次のコマ」が想像できる形にする — 炎・煙・水面・光の明滅・旗など、動く物を 1 つは置く
• 層をまたいで同じ密度で模様を打たない。密度の差が奥行きを作る
• 遠いほど空の色へ寄せる（大気遠近） — 奥の層ほど Color.mix(材質の色, 空の色, 距離) で 空の色へ寄せ、淡くし、その層の中の明暗の差を詰める（暗・中・明の 3 段を狭い幅に寄せる）。 手前の層だけが 3 段を目いっぱい使う。色数の乏しい予算では色を足さずに、 奥の層の段数を減らす（3 段 → 2 段）ことで同じ効果を出す。 これをやらないと、遠くの山と手前の茂みが同じ強さで目に入り、層を分けた意味が消える

形と置き方の決まり(場面を問わない)

• 大原則: 領域を材質で塗りつぶさない。 地(草・海・床=画面の底になる面)と 物(山・木・建物=その上に立つもの)を層で分け、物は背景透過で地に重ねる。 物と物の間から地面の色を見せる。建物の足元も地の面を残す(足元だけ別材質の 切り抜きにしない)
• 物はタイル内で完結させる。領域の縁には完結した単体変種だけを置き、 タイル境界や領域の端で物が千切れる絵を作らない
• 質感はその逆で、タイル境界をまたがせる。上は物の規則。斑・ざら・ディザのような 質感は塊を縁の向こうへ回り込ませる — 敷き詰めたときの継ぎ目が消える
• 立体は2 面塗り(受光の面+影の面)+墨の縁で読ませる。単色シルエットの羅列にしない
• 面(地)はほぼ無地。模様は 1 タイル 0〜3 個を群れにまとめてまばらに、密度は場所で変える (座標で決める・乱数にしない)。境目の飾り(泡・縁取り)は一部の辺だけ・間欠で
• 小さくても影の面を 1 つ持たせて物として読ませる。1 点だけ物語の目印 (旗・門・煙突など)を足してよい
• 同じ物を 3 個以上並べるときは、変種 2 つ以上か間隔の揺らぎを入れる。 同形スタンプの反復を見せない
• 画面 1 枚の密度: 広い無地の面を寂しいまま残さない — 遠景の群(雲・丘・星など)を 1〜2 群、主役の対角に副要素を 1 つ。ただし詰め込みも禁物で、面の 5〜7 割は静かに保つ

小物の決まり(8〜16px の道具・調度)

• 置き場を先に決める — 視点(真横・見下ろし・斜め)を画面で 1 つに統一し、 物が載る面(棚板・天板・床)を先に作ってから小物を置く。壁と床で視点が食い違うと、 小物がいくら良くても宙に浮く
• 面が面に見える作り(床・天板が壁や柵に化けるのを防ぐ): ①光源(窓・ランプ)の 明かりを面の上へ斜めの平行四辺形で落とす — 面の上を斜めに走る光がいちばん強い 「この面は水平だ」の合図 ②手前ほど板の幅を太らせる ③面を横切る継ぎ目を0 本にする (1 本でも残ると柄が完成して壁に見える) ④天板は前面より厚く取り、柱を立てない (柱が立つと柵の形が完成する)
• シルエット先勝ち — まず外形(墨 1 色)で何の物か読めてから中を塗る。 読めない小物は形を直す(色や模様で挽回しない)
• 中身は 2〜3 色+墨で足りる。ハイライト 1px で材質を言う(壺・瓶のテカり、 金属の点光。布・木は無し)。接地影は横長の楕円で 1〜2px(右へ 1px の線だけだと 面に載らない)
• 面に明暗の地域差を作る — 同じ材質の面に小物を並べると全部が同じ色域に沈む。 光源(ランプ・窓)や影で面を明暗に割り、暗い面には明るい色域の物を置く。 色を増やさずに済ませるなら、同じ形の小物を置き場ごとに材質(サブパレット)で 塗り分け、隣り合う材質は変える
• 置き方で生活感を出す — 整列スタンプにせず、重ね・寄せ・1〜2px の大きさ違いを 入れる(「同じ物 3 個以上は変種か揺らぎ」の規則は小物にも効く)。 壁沿いに等間隔で並べず、群にまとめて間隔をずらし、光の通り道は空ける

ウィンドウと文字(HUD・メッセージ)

• ウィンドウは「墨地+白枠+内側 1px ベベル」が基本形。入力待ちは ▼ などの小記号で示す
• 文字は自作のビットマップフォント(3×5 か 8×8)をコードで持つ。文言・名前は架空のもの

ピクセル感の道具箱(ベタ塗りで済ませない)

広い面・太い縁・大きい影をのっぺりしたベタで残さない。次の道具を要素ごとに選んで使う (全部を一画面に使う必要はない — ただしディザは予算次第で必須。「均一な点々」の禁止はここでも有効 — 表情は群でまばらに)。

• 段階グラデ: グラデーションは滑らかにせず 2〜3 段階の硬い切り替えで割る。空・水・大きい影の底力
• ランプの色相ずらし: パレット宣言の段階で、各サブパレットの暗→明を同色相の明度違いに せず、影を青紫寄り・光を黄寄りに振る。ベタ面でも色が生きる(色相の無い予算では使わない)
• クラスタ点描: 質感の点は 1px 単発でなく 2〜4px の塊で打つ(草むら・石の斑・土の礫)。 単発はノイズ、塊は物に見える。塊どうしを辺で接触させない — 接すると別々の塊が 1 つの不規則な固まりに融け、石が泡に見える。角どうしで触れるのは可。 質感には高コントラストの色を使わない(ざらつきでなくノイズになる)
• パターン柄: レンガ・網代・鱗・格子など繰り返し柄で面を埋める(タイルの文法)。 柄の 1 単位はタイル内で完結させる
• sel-out: 輪郭を一律の墨にせず、受光側の輪郭だけサブパレットの明色に置き換える
• 手打ちアンチエイリアス: 目立つ曲線・斜線の階段の角にだけ中間色を 1px 置く。 全部の縁には打たない。ギザを消すのでなくリズムを揃える
• 内側 1px ベベル: ウィンドウ枠・ブロックの縁の内側に光 1px+影 1px で厚みを出す
• ディザ: これだけは任意の道具ではない。 予算表で「ディザ必須」に当たるなら、 動かない広い面に必ず入れる。作り方も、当ててよい場所・いけない場所もすぐ下の節に まとめてある

広い面にディザで階調を作る(これが本体。縁の飾りではない)

ディザでいちばんよく失敗するのは、境目の帯にしか打たないこと。2 色の切り替え線の上に 1 列だけ市松を置いて済ませると、面そのものはベタのままで、階調はどこにも生まれない。 ディザの主な仕事は、広い面（空・地面・水・大きい影・丸い物の陰）を暗→明へ渡すこと。

作り方は 1 つの型で足りる:

1. 面のどこがどれだけ明るいかを 0..1 の値で決める（上から下へ・光源からの距離・高さ）。 valueAt: Vec2 -> Float64
2. 暗→明に並べた色の列を用意する（予算 3 色ならその 3 色）。rampAt: Vec2 -> Vector[Color]
3. 画素ごとに value * (色数-1) の小数部を Bayer の敷居と比べ、超えたら 1 段明るい色、 でなければ暗い色を置く。これで色を 1 つも増やさずに、3 色が 5 段に見える

engine の PxTerrain.fill（rampAt / valueAt / cell を渡すと上の型どおりに敷いてくれる） と PxTerrain.bayer4（4x4 Bayer の敷居。同じ座標から必ず同じ値＝描き出しが決定的）が これ。自前で書かない。（詳細は engine の docs/module-index.md）

どこに当てて、どこに当てないか

当てる場所を間違えると、階調ではなく汚れになる。

• 当てる: 動かない広い面 — 空・宇宙・遠景・水面・地面・大きい影。 ①手で描くには段が多すぎる色の勾配 ②極端に色数が乏しい予算 ③質感を出したいとき

• 当てない: 小さいスプライト（面積が足りず、ざらつくだけで階調にならない）。 動く物（コマ間でパターンが暴れて画面がちらつく。動かす予定の物には最初から当てない）。 明度差の大きい 2 色の間（隣り合う段が離れているほど、混ざらずに砂に見える。 ディザは「気づかれずに混ざる」のが目的で、暗→中→明の隣り合う段どうしにだけ渡す）

• 点の連結を避ける。曲線の上でドットが 2 つ以上つながって長い塊になったら、 打ち直すのではなく既にあるパターンを 1 画素ずらす

• 順番: まずディザなしで面を塗り、平坦さが気になった所へ後から足す。 最初から全面に敷くと、必ず打ちすぎる

• 帯は変わり目ごとに 1 本ずつ。暗→中に 1 本、中→明に 1 本。全部を 50% 市松にせず、 暗い側の帯は 25%、明るい側は 75% と疎密を変えると、3 色が 5 段に読める

• 帯には幅を持たせる。1 画素の線ではなく、面の何分の 1 かを占める幅を取る。 幅が無い＝それは縁の飾りであって階調ではない

• 面ごとに value の向きを変える。空は上下、丸い物は光源からの距離、地面は奥行き。 全部の面を同じ向きのディザで塗ると画面が 1 枚の壁紙になる

柄に見せない(「ディザ模様のタイル」にしない)

上の型で面に敷いた後の作法（打つ量を減らす話ではない）。 ディザが柄に見えるか陰影に見えるかは、升目の大きさと模様の縁の切り方で決まる。

• 升目は 1 画素。2x2 以上の塊を 1 升にすると、市松が大きな四角の柄として読め、 陰影に見えなくなる。拡大して見せたいときは絵ごと整数倍する(升目を太らせない)
• 繰り返して敷くタイルは、面を横断する階調を持てない（隣と繋がらない）。明るさの場を タイルの幅でちょうど 1 周させ、密度の高い所と低い所を作る — 一様に散らすと壁紙になる
• 地と物で升目の粗さを揃える。タイルは色の切り替え単位であって階調の単位ではない — 地形をタイルの升目(8px 等)で塗り分け、その上の物だけ 1 画素の Bayer で打つと、 粗いほうだけがモザイクに見える。地の階調も物と同じ 1 画素の升目で打つ
• 輪郭もタイルに丸めない。自然物(丘・砂丘・崖・水際)の上端・下端は列ごとに y(x) を サンプルして塗る — タイル単位に丸めると、サイドビューでは矩形の階段(建物に見える)、 クォーターでは煉瓦塀に見える。自前で書かずに engine の PxTerrain.fill を使う (高さの関数 + 暗→明の色の列 + 明るさの場を渡すと、この決まりどおりに敷いてくれる。 init で 1 回組んで持ち回す。詳細は engine の docs/module-index.md)
• 模様の縁をタイルの矩形で切らない。8px の升目でディザを始めて終わらせると、 模様の境目とタイルの境目が重なり、面が「ディザ模様のタイル」の反復に見える。 ディザの帯はタイルの縁をまたいで続ける — 境目が消えて面が 1 枚に繋がる
• 縁は面の陰の境に沿わせる(丸い物なら曲線、傾いた面なら斜め)。 縦横の直線で切り抜くと、絵の上に四角い紙を貼ったように見える
• 落ち影も同じ — 影の輪郭を矩形で置かない。楕円にするか、地面の起伏に沿わせる
• 密度は場所で変える。全面を同じ密度で埋めると壁紙(下の「均一な点々」と同じ癖)

バンディング(いちばん見落とされる欠陥)

2 つのドットの並びが互いに寄り添って出る縞。 見分ける印は 長さが同じで、線が並走していること。害は「曲線がブロックに見える」「線が意図より 太く見える」、そしていちばん重い輪郭線にぴったり沿うので光源を無視した陰影になる。

拡大して作業していると見えない。 原寸(1 倍)で見る。わざとぼかすとさらに出る。 直すのは並走をやめること — 段の長さを不ぞろいにするか、線を 1 画素ずらす。 中間色を足しても消えない。

ミクセル(比率の違う画素を 1 枚に混ぜること)も同族の欠陥。拡大・縮小は整数倍だけで、 回転も同じ — 回した絵は格子から外れて周囲から浮く。

禁止(描き比べで繰り返し出た癖)

1. テント山 — 単色三角の羅列。立体は 2 面塗り+裾の重なりで繋げる
2. 市松散布 — 物を等間隔の斜め格子に置く。塊で置き、格子を見せない
3. シールの白フチ — 境目の飾りを全周均一の太さで回さない
4. 均一な点々 — 面の模様を全面同密度で打たない
5. 直線・額縁 — 大きい地物を画面端や直線に沿わせない
6. 領域の材質塗り — 地形領域をテクスチャで塗りつぶさない。物の間に地面を見せる
7. 検査の自作拡張 — 機械検査は「パレット一致・色数」に限定。絵の作りを縛る検査を 発明しない
8. 色の再著作 — 宣言したパレットの hex を使う。近い色に置き換えたり選び直したりしない
9. 予算の超過 — 選んだ色数・画面の大きさ・質感の細かさを途中で越えない

小さい人を打つ（人物の高さがおよそ 48 画素まで）

**決まりは .claude/skills/px-character/SKILL.md にある。**サイズ別の頭身・色数・目・手の条件表、 塊の打ち方（走り・面取り・毛先・房）、ポーズ、服、顔（別冊 faces.md）、四足動物まで px 単位で入っている。何を先に決めるかの順序は figure-drawing/SKILL.md。