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

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）。
3. やらないことを 1 つ決める（例: グローを使わない／輪郭線を引かない／黒を使わない／ 粒を撒かない）。制約が 1 本あると絵に個性が出る。
4. 以後の批評はこの 3 行を基準にする。

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

参照

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

高精細な一枚絵の背景 — 問題をコードへ変換する

生の画素を 1 つずつ打つと背景は砂嵐になる。品質が跳ねるのは 「面はアルゴリズム・モチーフは意思」で分けたとき(2026-08 の腕試しで実証)。 画風は毎回自由。ここで縛るのは分解と順序だけ。

1. 先に決める: 光源の方向 1 つ・遠中近の 3 層・主役のモチーフ 1 つ
2. 分解する: 空や壁の大きな面 = 段階グラデ + ディザ / 遠景 = シルエット / モチーフ = 1 画素ずつ意思を持って / 手前 = 霧や枠で締める
3. 面は使い捨てスクリプトで組み立てる(色ランプ + Bayer や塊ノイズ)。 手で打つのはモチーフの形だけ
4. 描き出して目視 → 直す、を最低 3 周。「紙吹雪・機械的な市松・四角い暈」に 見えたらディザの粒度と掛け場所が悪い。光の帯は 1 本に整理する
5. 検査は bin/lint-sprite.py(色数・近すぎる色)と下限 5 性質

画風に依らず効く作法

• 動く値は必ず補間を通す — 値を飛ばさない。座標は float のまま
• 光の側と影の側は Color.warm / Color.cool で色そのものを分ける（同じ色の明暗だけにしない）
• 完全に静止した画面を出さない。静けさが画風なら、揺れを極小にする（ゼロにはしない）

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 α