| 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 で毎回決め直す。
工程(順番どおりに)
- 構造分析(ANATOMY.md)を先に書く — これから描く場面に出る要素を列挙し、
要素ごとに「同じ色の予算で作られた古い作品は何色を何役で使い、どんな形をどう配置して
解いたか」を記憶から言語化する。画素単位の複製はしない。描くのは考え方を借りた
自分の解釈。この文書がその場面専用の「要素の作り」表になる — 形・縁の処理・
密度の地域差まで、描く前に文章で決め切る。skill の決まりとその場面の画面文法が
衝突したら(例: 闇が主役の画面と純黒禁止)、判断を ANATOMY に記録した上で
画面文法を優先してよい
- パレットを宣言する(PALETTE.md) — 選んだ色の予算と下の「色の決まり」に従って
共通 1+サブパレット数本×3 段階を hex で先に決め、以後は選び直さない(再著作禁止)。
宣言の改稿は、理由を PALETTE.md に記録して描画のやり直し前に 1 回まで
- ラフを描き出して往復する(本描きの前に必ず 1 回) — 中身を描き込む前に、
面を 1 色で塗った構図だけのラフを実寸で描き出す。見るのは 4 点だけ:
①主役がどこにいて画面のどこを見るか ②層が何枚あるか(下の「層とコマ」)
③無地のまま残る面が広すぎないか ④ウィンドウと文字の場所。
描き出したら自分の ANATOMY と突き合わせて 3 点だけ直す(方向転換はしない)。
人やレビュー役がいるなら、この時点で見せて 1 往復する — 描き込んだ後の直しより
何倍も安い。ラフは捨てずに
*_rough.png として残す
- 絵はコードで生成する — seed 固定(座標ハッシュ)で乱数なし。質感は関数、
モチーフ(どこに何を置くか)は意思を持って書く配置表。出力画素を手で直さない。
光源は左上で全要素統一
- 要の要素は多産→選別 — 画面の大半を占める要素と主役(キャラ・魔物など)は
作りの違う変種を 2〜3 個作り、敷き詰めた比較 PNG を描き出して目で選ぶ。
選定・落選理由を PICKS.md に記録
- 描き出して自分で批評してから提出 — 描き出す口はゲームの
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% の疎密も使い分ける。
色数の乏しい予算ほど効く(中間色が使える予算では使いすぎない)
禁止(描き比べで繰り返し出た癖)
- テント山 — 単色三角の羅列。立体は 2 面塗り+裾の重なりで繋げる
- 市松散布 — 物を等間隔の斜め格子に置く。塊で置き、格子を見せない
- シールの白フチ — 境目の飾りを全周均一の太さで回さない
- 均一な点々 — 面の模様を全面同密度で打たない
- 直線・額縁 — 大きい地物を画面端や直線に沿わせない
- 領域の材質塗り — 地形領域をテクスチャで塗りつぶさない。物の間に地面を見せる
- 検査の自作拡張 — 機械検査は「パレット一致・色数」に限定。絵の作りを縛る検査を
発明しない
- 色の再著作 — 宣言したパレットの hex を使う。近い色に置き換えたり選び直したりしない
- 予算の超過 — 選んだ色数・画面の大きさ・質感の細かさを途中で越えない
