| 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. 画素を 1 つずつ置く絵か(sprite.json・タイル地形・ドット絵の背景)? → はい なら /retro-pixel を読んだ: ____
- [ ] 6. 主役がキャラ・生き物か? → はい なら /px-character も読んだ(顔は px-character/faces.md): ____
絵の下限(5 性質を、どの部品で満たすか):
- [ ] 面に階調か質感がある: ____
- [ ] 主役が背景から分離して読める: ____
- [ ] 層が分かれている(奥・主役・手前): ____
- [ ] 時間が流れている: ____
- [ ] 形が物として読める(シルエット・接続・接地・比率): ____
5 性質の欄に RawDraw.box / RawDraw.circle しか書けなかったら、まだ辞書を引いていない。
先に reference.md と unused-parts.md を読む。
各手順の中身
AGENTS.local.md に人の注文(/style-interview の聞き取り)があれば、1〜3 はその範囲内で決める。
- 題材から引く。舞台・時代・素材(濡れた石/古い紙/ブラウン管/布/夜の雪)を 1 つ。
ジャンル(RPG・STG)からは引かない — ジャンルから引くと前に作った物の複製になる。
- 色を 3 つだけ先に決める(下地・主役・差し色)。増やしたくなったら明暗ではなく
色相をずらす(
Color.warm / Color.cool)。
- やらないことを 1 つ決める(例: グローを使わない/輪郭線を引かない/黒を使わない/
粒を撒かない)。制約が 1 本あると絵に個性が出る。
- 以後の批評はこの 3 行を基準にする。
画風に既定は無い。毎回決め直す。 絵の下限が要求するのは 5 性質だけで、
それをどの画風で満たすかは自由。他のテンプレと画風をそろえない。
参照
- reference.md — web の技法 → エンジンの部品の対応表(グロー・グラデ・
残像・粒・霧・コースティクス・画面揺れ・イージング・ドット絵・タイル地形・枠)と、
実証済みの癖。部品を選ぶときは必ずここを開く。
- unused-parts.md — 実装もテストもあるのに採用ゼロ〜1 の部品一覧。
「無いから手組み」の前にここを見る。
- recipes.md — 同じ下限の性質をまったく違う手で満たした実例 4 つ。
この中から選ぶための物ではない(選ぶと同じ顔のゲームが並ぶ)。翻訳の例として読む。
- loop-gif.md — 完全ループ GIF の生成のしかたと WebP 変換。
/retro-pixel — 画素を 1 つずつ置くドット絵で行くと決まった後の手つき
(色の予算・タイルと材質・小物の置き場・繰り返し出る癖の禁止)。キャラ・生き物の造形は /px-character。
画風を決めるのはこちら(この辞書)が先で、あちらは画風を画素へ落とす下位の道具。
- シェーダーの語彙(Field / Shade の全 kind とレシピ)は docs/shader-doc.md が正。
高精細な一枚絵の背景 — 問題をコードへ変換する
これはドット絵の手順そのもの。始める前に /retro-pixel(.claude/skills/retro-pixel/SKILL.md)を読む。
生の画素を 1 つずつ打つと背景は砂嵐になる。品質が跳ねるのは
「面はアルゴリズム・モチーフは意思」で分けたとき(2026-08 の腕試しで実証)。
画風は毎回自由。ここで縛るのは分解と順序だけ。
- 先に決める: 光源の方向 1 つ・遠中近の 3 層・主役のモチーフ 1 つ
- 分解する: 空や壁の大きな面 = 段階グラデ + ディザ / 遠景 = シルエット /
モチーフ = 1 画素ずつ意思を持って / 手前 = 霧や枠で締める
- 面は使い捨てスクリプトで組み立てる(色ランプ + Bayer や塊ノイズ)。
手で打つのはモチーフの形だけ
- 生成して目視 → 直す、を最低 3 周。「紙吹雪・機械的な市松・四角い暈」に
見えたらディザの粒度と掛け場所が悪い。光の帯は 1 本に整理する
- 検査は
bin/fge sprite(色数・近すぎる色)と下限 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 全体が既定値へ落ちる
(エラーは出ず、絵だけ別物になる)。書いたら必ず生成して確かめる。
辞書の穴(エンジン側の宿題 — 勝手に直さず、相談してから)
glowAt の減衰カーブ・輪数を渡す引数(放射の明かり・翳り自体は Render.lightAt / darkAt で解決済み。残るのはカーブと輪数の引数だけ)
Light のテクスチャレス・フォールバック
ShaderDoc の語彙: Worley の軸別スケール
PxSprite の小数 scale / legend α