円城塔『文字渦』を読み終えました
円城塔さんの本『文字渦』をついに読み終えました。単行本の発売から幾星霜、さらに文庫版の発売からも数ヶ月。ついに読んでしまいました。
『文字渦』はタイトルの通り文字についての小説です。文字についての連作の短編集であり、それぞれの短編がゆるーくふんわりとつながっています。あらすじ、あらすじは、うーん、うまく要約するのはむずかしいですが、「阿語」という謎の言語についての奇譚集といったふうです。「阿語」やその他登場するキーワードたちの解釈が短編によって異なるので、読むたびに違った姿が見えてくるつくりになっています。各短編のテーマは、光る文字開発史に見せかけた巨大な未解読文字列発掘記、未来の書記デバイス「帋」、天に書かれる原初の文字、文字化石発掘記、連続殺字事件とその解決、などなど。プログラマとして一番たのしい短編は『誤字』で、Unicode 2.0でのハングル文字大移動を契機に勃発した文字たちの領地争いからのルビでしょうか。円城節が炸裂しておりくすりとくる細部にも注目です。
おもしろいとわかっていたもののその上をいっておもしろかったです。それなのに積んでいたのは2つ理由があります。
1つは、昔は読書する以外にすることがなかったから読書してたけれどいまは隙あらばプログラミングばかりしていて本を読まなくなったことがあります。まあ読書がここ5年くらい捗らない。なんなら書くほうも捗らない。つらい。
2つめは、これは『文字渦』に特化した理由なんですが、1つめの短編『文字渦』が中国の秦の始皇帝の話で歴史が苦手なためか「うっ」となって止まっていた点があります。そういえば同じ理由で、読み始めたとき『新字』でも止まりました。
おっと、これはあくまでも技術記事。というわけなので本題に入りましょう。
『文字渦』の短編『天書』をゲームに！
『天書』これもおもしろい短編です。実在の書家の王羲之と道士が呪符についての対話をし、そして天に描かれる謎の文字——それはだれも読めない原初の文字——の話を聞く、というあらすじです。この、天に書かれた文字というのを具現化してみたのがこの記事の本題です。どういう意味なのかは『文字渦』を買って読んでください。
具現化した成果物は以下のページで触わって遊ぶことができます。
https://t-sin.github.io/tensho/
ご覧のとおり、文字で構成されたスペースインベーダーです。JavaScriptで実装しHTML5のCanvasに描画しているので、ブラウザで遊ぶことができます。六日くらいかけてつくりました。
『天書』の設計
ゲーム自体をつくるのも初体験だったので試行錯誤がありました。設計時には以下の点を考えました:
- 画面遷移について
- ゲーム画面とは別に、タイトル画面くらいはほしい
- シーン遷移っぽいものは意識しておく必要がある
- 『文字渦』の二次創作なのだから、ほとんど文字にしたい
- インベーダーの弾（元のスペースインベーダーではギザギザがアニメーションする）を再現できるの…？
- 『天書』準拠な漢字にしたい
- ただし中国の古典なんにもわからん
- Unicodeの文字表をひたすら眺めねばならぬ
- 名古屋撃ちできるようにしたい
- 敵弾の発射位置に注意
- 敵は波うつように移動してほしい
- 原作のアレ
- 登場も同様になってほしい
これら以外は（はじめてなので）深く考えずに実装に入りました。
『天書』の実装
実装といってももりもりやるだけなので書くことあまりないんですが、つくっていく手順を記しておくことは初めてな人の役に立つ可能性が1ピコグラムくらいあるかもしれないので考えていたことと共に並べておきます。
- HTMLをつくる
- Canvasに文字を書いてみる
- とりあえずNoto Sans CJK JPをGoogle Fontsからもってくる
- 「凸」描画
- ゲーム画面の状態を用意し、敵を初期化して描画 (状態更新なし)
- キー入力と状態の更新を導入。「凸」動く
- 自機のショットを実装
- 文字は「｜」（全角バーティカルバー）
- 「ー」は縦書きじゃないので没に
- 移動時の制限等をゲーム内定数としておき、状態更新等で参照
- 敵の死にエフェクトとしていい文字はないか、Unicodeの文字一覧を渉猟
- 「＊」「⁂」（なにこのもじ）を選定
- ほんとうは「渋谷」の「渋」の右下部分みたいな漢字がほしかった…
- 当たり判定（点と矩形）を実装。デバッグ用にバウンディングボックス表示
- 敵移動。もちろん1フレームに1敵しか移動しない
- 1ファイルで書いてたらよくわからなくなってきた上に盛大にバグってたので、流用しつつ書き換え
- 5x11とはいえ1フレームで6箇所くらい敵全走査が発生してたし…
- バグ取り
- 盛大なバグの一因は、敵の下降は1フレームに1回でよいのに全敵でやってたから
- 折り返しの処理は、敵の最左段あるいは最右段を検出する必要がありめんどかった
- 敵、撃つ
- 文字の選定
- ちなみにUbuntuでは、Notoフォントを全部いれないと豆腐になる
- Windowsでは表示できる。Windowsすごい
- 当たり判定の実装（敵、自機）
- 盛大にズレててむずかった
- 勝利・敗北条件実装
- 敵が最下段にきても自機の負け
- トーチカ（バリア）の実装
- 文字で構成したかった（『天書』ネタその2）
- 自機、敵ショットとの当たり判定（速度と大きさの兼ね合いですり抜ける）
- 敵とトーチカの当たり判定は5重ループが確定なので、毎フレーム常に5重ループ
- 室温、上がる
- トーチカにバウンディングボックスをつけて5重ループが発生するタイミングを減らす
- スコア機能実装
- タイトルロゴをドット絵ソフトでつくる
- タイトルのアニメーションを実装
- GitHub Pagesへの自動デプロイ feat. GitHub Actions
- リリース！
学び・反省点
実装で工夫した点はあまりないですが、今後のゲームづくりに活かすために今後気をつけたらいいポイントを探りながら実装していました。以下の点は気付きポイントでした:
- 表示と当たり判定が一致するかどうかは開発スピードおよびデバッグの容易さに直結する
- なので速い段階で一致するようにやっとくとよい
- Canvasにおいて、文字は左下を基準に、
fillRectは左上を基準に描画される - またフォントサイズによって文字の真ん中と描画開始点のズレがある
- これらに後半かなり翻弄された
- というかいまだってトーチカの文字あたりはちょっと変
- 文字描画位置と当たり判定の不一致によって、当たり判定処理も個々に謎値が書き込まれていてカオス
- 1をやった上で、当たり判定処理は括り出したほうがバグを生みにくかったと思う
- オブジェクトの状態遷移を一箇所に記述したほうが混乱しにくい
- ループ削減やらの影響を受けて各所に散っているのでわかりにくくなってしまった
- 演出のための記述が、当たり判定などに混じって書かれているので演出も書きにくいし変更が全体的にムズ
- ただしどうあるべきかはまだわからない
- アニメーション記述言語…？
- タイトル画面をもっとかっこよくしたかった
- 演出の細部に集中したい
感想
過去にはゲーム設計なしに弾幕言語から作りはじめる（例1, 例2）とかやっていましたが、ゲームのルールをつくっていなかったのでポシャっております。ゲームのルール設計はやったことがなく、かつどうやっていいかもわからないので、これはすこしずつ挑戦する必要を感じました。また、過去の名作ゲームをコピーするのは、ルールはすでにあるので純粋にゲーム開発の勉強になりました。
じっさいのところ、スペースインベーダーなんてすぐできるじゃろと思ってました。やってみると、考えること（細かい処理や性能的な側面）が多い上に、ゲームルールがある程度の複雑性を持っていることがわかり、よくできたゲームなのだということを認識できました。
これからもちょくちょくゲーム開発をやっていき、いつかはなにかの作品に実を結ぶといいなあ。
今後のtensho
ここからは、いったん完成したこともあり燃え尽きかけてるのでやるかはわからないことです。
現時点の版は完全に無音です。敵の移動音やUFO音など、サウンドはゲームプレイ時の気分を盛り上げるのに重要なことは周知の事実なので、このプログラムにも音をつけたいです。Web Audio APIかなあ。
また、背景に薄く、文字がふよふよするようなジェネラティブアートのようなアニメーションを入れたいなあと妄想していました。実際ゲーム画面のcanvasの下に背景用のcanvasも置いてあるのですが、めんどくさくてやってません。センスが不足していて思い付かないのも理由です。
長くなりましたが、みなさんも5000点めざしてtenshoを遊んでみてください。