retro-pixel

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

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

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

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

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

引かない:

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

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

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

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

ドット絵の作法は使える色の少なさから来る。どれだけ乏しいかで、同じ規則でも 打ち方が変わる。1 つ選んで PALETTE.md の冒頭に書き、以後の判断の根拠にする。 途中で予算を増やさない — 増やした瞬間にドット絵ではなく低解像度の絵になる。

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

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

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

工程(順番どおりに)

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

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

• 共通 1 色+サブパレット数本×3 段階(暗・中・明)。本数と全体の色数は選んだ予算から 引く。1 タイルは 1 サブパレット+共通色のみ(タイル属性の見立て)。 これは背景の規則 — キャラや重なる物(スプライトの見立て)は別勘定でよい
• 共通色は**青みの黒(墨)**にする。純黒 #000000 と sRGB 原色(#ff0000 等)は禁止。 彩度は低め・柔らかい配色。白は泡・ハイライト・目印などの取っておきに残す (階調だけの予算では色相が無いので、墨=いちばん暗い階調と読み替える)
• サブパレットは材質で引く(水/草木/土・砂/石 が基本形)。 物の区別を色相の発明でやらない — 山は土・石で塗る(草木の緑で塗ると森に読める)、 木は草木、壁と屋根は石。同じ材質の物は同じサブパレットに乗る
• 3 段階の使い分け: 中=面の底、明=受光、暗=影。輪郭と接地影は共通の墨

層とコマ

• 層は最低 3 枚(奥・主役・手前)。奥は暗く低彩度・粗く、手前は締める。 層が 1 枚しかない絵は、要素をいくら足しても書き割りに見える
• コマ = 時間。1 枚絵でも「次のコマ」が想像できる形にする — 炎・煙・水面・光の明滅・旗など、動く物を 1 つは置く
• 層をまたいで同じ密度で模様を打たない。密度の差が奥行きを作る

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

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

キャラの決まり(等身はドット数から逆算)

• 顔に画素を集める — レトロなキャラは顔(頭)が名刺。縦 16〜32px のキャラは 2〜3 頭身に潰し、頭を大きく取って髪型・帽子・ヒゲ・目など 1〜2 個の特徴で 見分けさせる。体は記号(服の色+手足の示唆)でよい
• リアル等身は縦 48px を超えてから。画面文法が大写しのリアル等身を求めるとき (格闘・スポーツなど)は ANATOMY に記録して上げてよいが、その場合も 頭部と顔の特徴に最も画素を割く配分は変えない
• 大写しの顔は部品まで降りる — 縦 48px 超の顔は、目に黒目を入れ(白い塊だけだと 面(マスク)に見える)、鼻は影の塊でなく鼻筋か小鼻を 1px、口は歯だけでなく唇の線、 髪は帽子状の塊でなく毛束の形を作る。ここを省くと人でなく人形に見える。 ただし目の部品は増やしすぎない — まぶたを上下とも墨で締めると目が箱に見え、 黒目を 2px 取ると見開いた顔になる
• 大きいキャラ(縦 32px 超)はドット数を曲線に使う — 平行な直線の縁を 長く走らせない。輪郭は先細り(肩→手首・腿→足首)で描き、関節で軸を折り、 直立でも左右どこかを崩す。胴・腕にも受光/影の 2 面を通す。 16px の箱組み文法をそのまま拡大しない

小物の決まり(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 単位はタイル内で完結させる
• sel-out: 輪郭を一律の墨にせず、受光側の輪郭だけサブパレットの明色に置き換える
• 手打ちアンチエイリアス: 目立つ曲線・斜線の階段の角にだけ中間色を 1px 置く。 全部の縁には打たない。ギザを消すのでなくリズムを揃える
• 内側 1px ベベル: ウィンドウ枠・ブロックの縁の内側に光 1px+影 1px で厚みを出す
• ディザ: 影の際など狭い範囲の中間調に。市松 50% だけでなく 25%/75% の疎密も使い分ける。 色数の乏しい予算ほど効く(中間色が使える予算では使いすぎない)

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

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