見出し画像

開発日誌 #2 — 「光る液体」を 2D 描画だけで作る

PixelRyu

前回の記事で、Liquid Glow は「絵素材ゼロ」で作るという話をしました。今回はその核心、ガラス試験管に光る液体を、画像を一切使わずコードだけで描く 部分の話です。結論から言うと、液体も試験管も、フラグメントシェーダーではなく Godot の 2D 描画プリミティブ（draw_rect / draw_circle / draw_arc / draw_line） だけで描いています。

なぜ「絵を使わない」にこだわるのか

理由はシンプルで、個人開発者にとって「絵を描く」という工程が一番のボトルネックだからです。

  • イラストレーターを雇う予算はない

  • 自分で描くと品質が頭打ち

  • いったん絵を作ると、後から「ちょっと色を変えたい」が高コストになる

一方、コードで描いた表現は、定数を変えるだけで色・明るさ・縁の太さ・ハイライトの強さが全部変わります。色覚特性に合わせたカラーパレットの差し替えも、color_palette.gd の値を触るだけ。絵を描き直す必要がありません。これは個人開発者にとって、計り知れない利点でした。


メインのゲーム画面。複数の試験管に発光色の液体が入っている

試験管は _draw() の重ね描きでできている

試験管1本は、Node2D の _draw() の中で、下のレイヤーを順に重ねて描いています。

1. ガラスの内側（空き部分）

暗い半透明の矩形に、下端だけ draw_circle で丸みを付ける。背景がうっすら透けて「ガラスの中の空洞」に見えます。さらに下半分を少し暗くして、縦の落ち込みを足しています。

2. 液体セグメント

4 マス分の色を、draw_rect で1段ずつ積み上げ。最下段だけは底の丸みに合わせて draw_circle で角を取ります。色は color_palette.gd のネオン系パレットから取得。

3. ガラスの外形線

上が開いた口・下が丸い形を、draw_line と draw_arc で縁取り。試験管そのものは「縁」だけで、脳が勝手に「ガラスだ」と解釈してくれます。

「光って見える」は錯覚で作っている

ここがこの記事の肝です。実際には emission も Bloom も WorldEnvironment も使っていません。「光っている」という印象は、次の重ね描きで錯覚させています。

  1. 内側コアを少し明るく：各液体セグメントの内側に、元色を +0.25 した半透明（α0.18）の矩形を一枚重ねる。中心がほのかに明るく見える。

  2. 液面のハイライト帯：各段の上端に細い白帯を引く（最上段は濃く α0.45、下層は薄く α0.20）。これだけで“濡れた光沢”が出ます。

  3. 選択時の外側ハロ：試験管をタップで選ぶと、外周に半透明の矩形を3枚、外側ほど薄く重ねて、sin でゆっくり明滅させる。これが「淡く発光しているハロ」に見えます。

本物の発光処理（Bloom）は GPU 負荷も発熱も大きい。「明るい色を、明るく見える順番で重ねる」だけ で、ミドルレンジ Android でも軽く動く“光り方”を作れたのは、個人開発的にはかなり美味しい発見でした。


レベル選択画面。多数のレベルが並んでおり、それぞれに完成度が見える

唯一のシェーダーは「背景」だけ

プロジェクトでフラグメントシェーダーを使っているのは、実は 背景（background.gdshader）の1枚だけ です。縦グラデーションに、チラチラ瞬く星（スターフィールド）とビネットを乗せた、夜空のような背景。ここだけは 2D 描画より canvas_item シェーダーのほうが安く綺麗に出せるので採用しました。

逆に言うと、ゲームの主役である試験管・液体・パーティクル（クリア演出の CPUParticles2D）は、シェーダーに頼らずに成立しています。

モバイルでの軽さの工夫

「光らせる」のを錯覚に寄せたぶん、重い処理はほとんどありません。それでも気をつけている点はあります。

  1. 再描画は必要なときだけ：試験管は状態が変わったとき（注ぐ・選ぶ）だけ queue_redraw()。毎フレーム描き直すのは、選択中のハロを明滅させているときだけ。

  2. パーティクルはクリア時に集中：常時パーティクルは出さず、レベルクリアの瞬間だけ CPUParticles2D を一気に噴き出す。

  3. 重ね描きの枚数を抑える：ハロは3枚まで、ハイライトは1段1枚まで、と上限を決める。

このあたりは「絵で誤魔化す」のではなく、「描画の順番と枚数で誤魔化す」アプローチです。

制約が表現を作る

最初は「絵素材ゼロ」という制約に消極的でした。お金がないからしょうがなく頑張る、というネガティブな動機。

でも作っていくうちに、プリミティブの重ね描きでしか出せない、均整の取れた“清潔な光り方” が確かにあることに気づきました。手描きのイラストとも、ゴリゴリのシェーダー発光とも違う、コードで積んだグラデーション。これは Liquid Glow のアイデンティティそのものになりました。

制約が表現を生むというのは本当だなと、今は思っています。

Liquid Glow について

描画の現物は、まもなくクローズドテストで触れます。 PixelRyu の他のプロジェクトも含めて: https://pixelryu.github.io/

いいなと思ったら応援しよう！