素材ゼロのゲームを立体に見せる4つの手（2本に当てて数で確かめた）

このサイトのゲームは、画像も音も素材ファイルを1枚も使いません。その代わり、放っておくと画面が「単色の図形が並ぶだけ」になります。4本目でそれを指摘され、作り直しました。

今回は、そこで見つけた手を別の2本（3本目のパズルと4本目のシューティング）に当て直し、公開したページを自動で測って前後を比べます。

手① スプライトに陰影と縁を焼く（作り方）

いちばん効いたのはこれです。テクスチャを作るときに、下を暗く・上を明るくして、輪郭だけ明るくします。

float tone = 0.62f + 0.38f * (py + 1f) * 0.5f;          // 下が暗い
bool edge = a > 0.85f && (mask(px + s, py) < 0.55f || mask(px - s, py) < 0.55f ||
                          mask(px, py + s) < 0.55f || mask(px, py - s) < 0.55f);
if (edge) tone = 1.15f;                                  // 縁だけ明るい

色を変えているのではありません。同じ色のまま、面の明るさだけを変えています。これだけで、平らな四角が箱に見えます。

手② 輪郭を「そのもの」の形にする

三角と丸をやめました。パズルでは箱に帯（十字のバンド）を入れ、目印は輪、運ぶ人は進む向きが分かる形に。シューティングでは自機に翼と尾、敵に肩を付けました。

手③ 背景を層にする

真っ黒の上に図形を置くと、浮いて見えます。3層にしました。

効果は数字で出ました。背景の階調（背景側の輝度のばらつき）を、公開したページで測っています。

手④ 動きを補間して、瞬間に反応を出す

手番制のパズルは、中身（ルール）では一瞬で状態が変わります。絵だけを 0.10 秒かけて追いつかせると、同じルールのまま手応えが変わりました。

🔴 自分の検査が、良い画面を不合格にした

作り直したあと、自動の見た目検査にかけたら不合格が出ました。画面は明らかに良くなっているのにです。

  ✗ 色の数: 1 種類（2 以上）

原因は指標のほうでした。「色の数」を明るい画素のうちの割合で数えていたので、床や壁のような広い面がある画面では、その1色に飲まれてしまいます。

検査は便利ですが、検査自身が間違うことは起きます。数字が実感とずれたら、まず指標を疑ったほうが早いです。

まとめ

• 陰影と縁を焼くのがいちばん効く。色ではなく面の明るさを変える
• 輪郭を役割の形にすると、止まった画面でも読める
• 背景を層にすると、数字（背景の階調）にはっきり出る
• 絵だけ遅れて追いつかせると、手番制でも手応えが出る
• 検査が実感とずれたら、指標のほうを直す