visual-dict

name	visual-dict
description	画面の絵を作るときの手順と、web/Canvas/Shadertoy の技法をこのエンジンの部品へ翻訳する辞書。画風の決め方（色 3 つ・やらないこと 1 つ）と絵の下限 5 性質のチェックリストを出す。新しいゲーム・新しい画面（View）を書くとき、背景・キャラ・エフェクトを置くとき、「見栄えを良くして」「〜っぽい絵にして」と言われたとき、グロー・vignette・グラデ・残像・パーティクル・ドット絵・完全ループ GIF を作る/移植するときに使う。
sync	2026-08-13T00:00:00.000Z

visual-dict — 絵の作り方

View を書く前に毎回引く。 車輪の再発明と、矩形だけで済ませる退避を防ぐのがこの辞書の仕事。

手順

このチェックリストを回答にコピーし、埋めながら進める。埋め終わるまでコードを書かない。

画風（部品を選ぶ前に決める）:
- [ ] 1. 題材を 1 つ決めた（舞台・時代・素材。ジャンルからは引かない）: ____
- [ ] 2. 色を 3 つ決めた（下地 / 主役 / 差し色）: ____
- [ ] 3. やらないことを 1 つ決めた: ____
- [ ] 4. 人の注文があるか確かめた（無ければ先に /style-interview）→ 上の 3 行を AGENTS.local.md の「この画面の画風」に書いた
- [ ] 5. 光の色と影の色を決めた（下の「固有色をそのまま塗らない」）: 光＝____ / 影＝____
- [ ] 6. 構図の白黒サムネイルの次に、**色ラフを 1 枚焼いた**（面をベタで塗るだけの実寸 1 枚。
       構図 → 色ラフ → 本描画の順で、色の配分をここで決める。描き出す口はゲームごとに違うので
       いちばん軽い口を使う: `make render` / `make render-changed` など）: ____
- [ ] 7. 画素の格子に乗せる絵か？ → はい（sprite.json・タイル地形・ドット絵の背景）なら /retro-pixel を、
       いいえ（高解像度・なめらかな輪郭・シェーダーで塗る面）なら /smooth-render を読んだ: ____

絵の下限（5 性質を、どの部品で満たすか）:
- [ ] 面に階調か質感がある: ____
- [ ] 主役が背景から分離して読める: ____
- [ ] 層が分かれている（奥・主役・手前）: ____
- [ ] 時間が流れている: ____
- [ ] 形が物として読める（シルエット・接続・接地・比率）: ____

5 性質の欄に RawDraw.box / RawDraw.circle しか書けなかったら、まだ辞書を引いていない。 先に reference.md と unused-parts.md を読む。

各手順の中身

AGENTS.local.md に人の注文（/style-interview の聞き取り）があれば、1〜3 はその範囲内で決める。

1. 題材から引く。舞台・時代・素材（濡れた石／古い紙／ブラウン管／布／夜の雪）を 1 つ。 ジャンル（RPG・STG）からは引かない — ジャンルから引くと前に作った物の複製になる。

2. 色を 3 つだけ先に決める（下地・主役・差し色）。増やしたくなったら明暗ではなく 色相をずらす（Color.warm / Color.cool）。 面積で彩度を決める — 広い面ほど彩度を落とし、高い彩度は差し色の小さい面積にだけ置く （広い面に高彩度を置くと、そこだけ宝石のように浮く）。

   固有色をそのまま塗らない — 光の色と影の色を先に決める。 物そのものの色（葉は緑・岩は灰）を 明暗だけで振ると、材質ごとに色が独立して1 つだけ浮く（実例: 岩だけ青く浮いた）。 光源の環境から光の色と影の色の 2 色を先に決め、全材質の受光面を光の色へ、影の面を 影の色へ寄せる（Color.mix(材質の色, 光の色, 0.25) / Color.mix(材質の色, 影の色, 0.35)。 色相だけ振るなら Color.warm / Color.cool）。夕方なら 光＝暖色・影＝赤紫〜青、 晴天の昼なら 光＝わずかに黄・影＝青。この 2 色は 4 色目ではない — 色 3 つから導く。

3. やらないことを 1 つ決める（例: グローを使わない／輪郭線を引かない／黒を使わない／ 粒を撒かない）。制約が 1 本あると絵に個性が出る。

4. 以後の批評はこの 3 行を基準にする。

画風に既定は無い。毎回決め直す。 絵の下限が要求するのは 5 性質だけで、 それをどの画風で満たすかは自由。他のテンプレと画風をそろえない。

参照

• reference.md — web の技法 → エンジンの部品の対応表（グロー・グラデ・ 残像・粒・霧・コースティクス・画面揺れ・イージング・ドット絵・タイル地形・枠）と、 実証済みの癖。部品を選ぶときは必ずここを開く。
• unused-parts.md — 実装もテストもあるのに採用ゼロ〜1 の部品一覧。 「無いから手組み」の前にここを見る。
• recipes.md — 同じ下限の性質をまったく違う手で満たした実例 4 つ。 この中から選ぶための物ではない（選ぶと同じ顔のゲームが並ぶ）。翻訳の例として読む。
• loop-gif.md — 完全ループ GIF の描き出し方と WebP 変換。
• /retro-pixel — 画素を 1 つずつ置くドット絵で行くと決まった後の手つき （色の予算・タイルと材質・キャラの等身・小物の置き場・繰り返し出る癖の禁止）。 画風を決めるのはこちら（この辞書）が先で、あちらは画風を画素へ落とす下位の道具。
• /smooth-render — 画素の格子に乗せない絵（高解像度・なめらかな輪郭・シェーダーで塗る面）で 行くと決まった後の手つき（エッジの硬さ・面積と彩度・質感の重ね方・なめらかな面に出る縞の消し方）。 retro-pixel と同じく、画風を決めるのはこの辞書が先。
• シェーダーの語彙（Field / Shade の全 kind とレシピ）は engine リポの docs/shader-doc.md が正 （engine の在り処はゲームの Makefile 冒頭の ENGINE 変数）。

画風に依らず効く作法

• 動く値は必ず補間を通す — 値を飛ばさない。座標は float のまま
• 光の側と影の側は Color.warm / Color.cool で色そのものを分ける（同じ色の明暗だけにしない）
• エッジの硬さを 1 枚の絵の中で使い分ける — 主役の輪郭はくっきり、遠景と霞は溶かす。 全部を同じ硬さで作ると距離が読めない（格子に乗らない絵での作り方は /smooth-render）
• 完全に静止した画面を出さない。静けさが画風なら、揺れを極小にする（ゼロにはしない）

engine のバージョンと、黙って既定へ落ちる罠

[新] 付きの部品は 0.13.0 から。PxSprite.sizeOf / Render.fadeAll / Color.hex / Num.* / Grid.dimsOfRows は 0.14.0 から。 0.19.0 から: Pass(レンダーターゲット=別の紙)・HeadlessRender.renderGifWithPasses・Fx の 3 語彙。 0.20.0 から: 図形プリミティブは RawDraw.*(旧 Render.box 系の名前は存在しない)。 自分のゲームが引いているバージョンは flix.toml の github:ababup1192/flix_game_engine を見る。

シェーダーは知らない kind が 1 つあるだけで Doc 全体が既定値へ落ちる （エラーは出ず、絵だけ別物になる）。書いたら必ず描き出して確かめる。

辞書の穴（エンジン側の宿題 — 勝手に直さず、相談してから）

1. glowAt の減衰カーブ・輪数を渡す引数（放射の明かり・翳り自体は Render.lightAt / darkAt で解決済み。残るのはカーブと輪数の引数だけ）
2. Light のテクスチャレス・フォールバック
3. ShaderDoc の語彙: Worley の軸別スケール
4. PxSprite の小数 scale / legend α

落ち影（光源を決めたら、必ず全部の物に配る）

物が地面に貼り付いて見える原因のほとんどはこれ（接地影＝足元の小さな暗がりだけを置いて、 地面に伸びる影を置いていない）。光源の位置を決めた時点で、影は自動的に決まる。

• 向きは光源の反対側、長さは光源の高さで決まる（低い太陽 = 夕方・朝は長く伸びる）。 数値をベタ書きせず、光源の位置から導く
• 全部の物に配る。 主役だけに落とすと、主役だけ別の世界に立っているように見える。 木・岩・茂み・キャラクターを同じ規則で扱う
• 影は地面の形に沿う。 起伏や段をまたぐ所で切れたり浮いたりしない
• 色は黒ではなく影の色（光源の反対＝空の色側）。純黒に落とすと画面から色が消える
• 影の中に見える物（縁の反射光）を少し残す。真っ黒の帯は絵ではなく穴に見える

地形: DualGrid で描くか、1:1 タイルで描くか

DualGrid（Terrain.fromRows）は半セルずらして角の 4 セルを見る仕組みなので、絵の境目は 必ずマスの中央を通る。マス目と絵が半マスずれるのが本質で、これが効く場面と邪魔な場面が はっきり分かれる。マップだから DualGrid、と自動で決めない。

そのマスは「面の一部」か、「その場所」か。 面なら DualGrid、場所なら 1:1 タイル。

• 面（DualGrid が効く） — 芝⇔土⇔水、壁⇔床、洞窟の岩。境目がマス中央を通っても困らない、 むしろ有機的に見える。種類は 2〜3 種まで（多いと重ね合わせの段が増えて 16 通りの利点が消える）
• 場所（1:1 タイルにする） — ワールドマップの町・城・山・森のようなマス = 1 枚のスタンプ。 国境・道・区画のように境界そのものが情報の物。クリック当たり・移動コスト・目的地が マス単位で意味を持つ物。ここで DualGrid を使うと、絵の位置とマスの意味が半マスずれる
• グリッドを見せたい絵柄（方眼の戦略マップ）は DualGrid の目的と逆 — 使わない

ワールドマップの定石は分けること: 海と陸の下地だけ DualGrid、町・山・森は その上に 1:1 のスプライト層として重ねる。下地と記号を同じ仕組みで描こうとすると破綻する。

詳しい仕組みは engine の docs/dual-grid.md。

人（キャラクター）を置くとき

.claude/skills/figure-drawing/SKILL.md を先に読む。 シルエット・重心と接地・塊の比率・ 前後の重なり・向きの手がかり・持ち物、の順で決める判断がそこにある。塗り方はこの辞書と retro-pixel / smooth-render の「人」の節。