盤の上の空を消した日 — 動く演出をゲーム盤から降ろした話
タムナのゲーム盤に、空を一枚重ねたことがあります。半透明の雲が左から右へゆっくり流れ、カモメが二羽、羽ばたきながら斜めに横切り、灯台をクリックすると光が一周する。CSSには「低い不透明度なのでプレイの邪魔にはならない」と、自分でコメントまで書き添えていました。結局、それを全部消しました。この日の変更は二つのファイルから百三十行あまりを削り、足したのはたった二行です。作業そのものは小さいのに、あとに残ったのは基準のほうでした。何を入れ、何を見て、何を残したのかを順番に書いておきます。
記録日: 2026-06-14
盤の上を生きた海にしたかった
入れたのは三種類です。雲は三つ、それぞれ高さも大きさも速さも変えて、一度横切るのに三十四秒・四十六秒・四十秒。不透明度は〇・一六から〇・二の間に抑え、両端では消えるようにして、盤の角にぽつんと浮いて見える不自然さを避けました。カモメは二羽で、二十六秒と三十秒。移動を親のアニメーション、羽ばたきを子のアニメーションに分け、横切りながら翼が上下するようにしています。灯台は触ると光が一・四秒かけて一周してから消える、クリックできる置きものにしました。
この空はSVGのいちばん最後に置いています。タイルより後に描かれるので、島の上を通り過ぎるように見える。代わりにクリックを奪わないよう、レイヤー全体をポインタ非干渉にしました。動きを減らす設定にも対応させて、その環境ではアニメーションが止まります。舞台が海に囲まれた島なのだから、盤の上の空も少しは生きていてほしい——入れたときの理由はそれだけで、技術的に破綻しているところはありませんでした。
自分の目で見て、判断が変わった
確かめ方は単純で、動いている画面を複数フレームで撮って並べて見ました。そこで分かったのは、カモメが鳥に見えないということです。あの大きさとあの薄さで画面を横切る線は、鳥ではなく染みか残像に見える。画面に何か付いているのかと目が止まった時点で、演出としてはもう失敗しています。
雲も同じでした。海の上を流れているうちはよくても、タイルに差しかかった瞬間、資源の絵と数字の上にかかるノイズになる。灯台の光はもっとはっきりしていて、盤は真上から見た絵なのに、光だけが横から照らしている。視点が合っていないので、回れば回るほど嘘に見えました。コードが思ったとおりに動くことと、画面で正しく見えることは別なのだと、撮った絵が教えてくれました。
消したものと、残したもの
消したのは、雲・カモメと羽ばたき・灯台の光という三つのアニメーション定義と、盤の側の空レイヤーです。光を一回転させるためだけに持っていた状態も、一緒に要らなくなりました。差分は二つのファイルで百三十一行の削除に対して二行の追加、つまりほとんど元の構成に戻しただけです。
残したものもあります。静かに立っている灯台と、その足元の玄武岩の岩礁、それに海の波紋のリング。どれも動かないか、動いても盤の外側にあるものです。動かないものは、見たいときにだけ見ればいい。プレイヤーの目を勝手に引っぱらないなら、島らしさを足す分には邪魔になりません。残す基準は「きれいかどうか」ではなく、「盤を読む邪魔になるかどうか」でした。
演出を降ろした先
動く演出そのものが悪いとは思っていません。だから捨てずに場所を移しました。ハルバン、雲、太陽と月、帆掛け舟——生きている絵はログイン画面のほうに集めています。あちらの太陽と月は飾りではなく実際の時刻と連動していて、位置が一分ごとに更新されます。夜にログインすれば夜の空が出る。
ログイン画面で同じ演出が成立するのは、そこに読み取るものがないからです。数える駒もなければ、次に押す場所を探す必要もない。動きそのものが中身になれる。一方でゲーム盤は、どの数字のタイルか、誰の道か、どこに建てられるか、画面のほとんどが読むための情報です。同じ雲でも、置く場所が変われば意味が反対になります。
手元に残った基準
一つめは、盤の上で動いていいのは情報を持つものだけ、という線引きです。手番が移ったこと、何かが変わったこと、押せる場所があること——そのどれも伝えないなら、その動きはノイズだと考えるようになりました。
二つめは、自分の目で、しかも複数フレームで見るまでは判断しないことです。「邪魔にならない」とコメントに書いたのは私自身で、その私が間違っていました。どう作ったつもりかは、画面に何が見えているかの証拠にはなりません。
三つめは、消すのを惜しまないことです。百三十一行を消して二行を足すだけの変更でも、機能を足した日より良い日はあります。この一件以降、盤に何かを足したくなったら、まず撮って、並べて、それから決めるようにしています。