プレーンピザ公式ブログ

東京タクシー3D バージョン17〜22開発の振り返り

2022/05/04
テーマ: Game / 活動まとめ / 2022 / すべて


東京タクシー3D を久々に大きく変更したので振り返ってみます。

目次

mathutils→numpy置き換え
グラフィックライブラリを OpenGL ES から Metal に更新
モデルワークフローに glTF 導入
地面のガタガタを改善
道を少し広くした
ハンドル、アクセル、ブレーキのグラフィックを改善
信号機、横断歩道、歩道橋、道路の白線、歩道、木などグラフィックを改善
車のグラフィックを改善
いくつかの車を追加
タイムアタックモードを追加
ガレージ画面でドライバーを選べるようになった
お客さんやプレイヤーのキャラクターを新調
なるべく個別アニメーションに依存しない作りにした
ドライバーやお客さんの頭上にツイッターアカウントの画像と名前を出すようにした
爆弾が即爆発するようになった
消火器ボタンを追加
AI車の挙動を改善
アイコンを可愛いやつに変更
左上のマップに方位磁石を表示するようにした
まれにアプリが終了してしまう問題を修正
全体の色味を調整
空をいい感じに
ナビの経路計算を軽く
カリングをいい感じに
たくさんリファクタリング、テスト整備
iOS を拡大表示モードにしていると画面がおかしくなる問題を修正
スクショ、PV 作成

mathutils→numpy置き換え

mathutils は blender で使われている python のベクトル行列ライブラリを誰かが切り出して pip 化したやつ。内部で C++ を使っている部分が古くて結構前からビルドできず、pip3 install できなくなっていたので numpy に移行。

マップやモデルの事前処理などビルドフェーズで幅広く使っていたので、変更箇所が多くて面倒でした。置き換えた後も行列の乗算演算子の順序の違いとかでいつの間にか動かなくなってたりして難儀。

グラフィックライブラリを OpenGL ES から Metal に更新

これが一番大きな変更で、できたらいいけど相当大変な割に移行メリットあるのか長らく疑問だったけど、最近 Metal C++ バインディングが出たことを知って今回エイヤでやってみました。

Metal と GLES はかなり違っていて、state セット関数呼び出し, VAO, VBO, GLSL などを render pass, pipeline state, metal shader, metal buffer などに移行するあたりが特に大きな変更でした。

地味に NDC やテクスチャ UV 座標系が違うところも落とし穴。

全体的に再設計が必要だったものの、GLES の何でも GLuint で管理するスタイルと違って Metal はちゃんと型付きになっているのでやりやすかったです。

uniform 変数も単に buffer 受け渡しになって vertex shader に vertex_id が渡るようになったので見通しが良くなりました。

Xcode の Metal debugger が神ツール。draw 命令ごとに vertex shader の出力が数値で見えたり、NDC で可視化しつつズームや回転して細部の確認ができたり、shadow map の中身が簡単に見れたりしたので、面倒なバグがいくつも直りました。

これを機に instanced drawing の導入ができたのも Metal 化して良かった点。

モデルワークフローに glTF 導入

モデルのフォーマットに FBX が加わったので、これまで blender のメッシュを独自形式にしていたのを glTF を挟むように変更。

FBX → glTF
Blender → glTF
glTF → 独自形式 →(加工)→ 独自形式

みたいな流れになって以前よりシンプルに。

地面のガタガタを改善

地面のガタガタ具合を指標化して、いい感じになるように調整。

道を少し広くした

銀座耐久コースとかさすがに細すぎるかなと思ったので、一般的な道路の道幅とか調査の上調整。

ハンドル、アクセル、ブレーキのグラフィックを改善

シンプルなデザイン、色は黒半透明で統一。

信号機、横断歩道、歩道橋、道路の白線、歩道、木などグラフィックを改善

横断歩道や信号機の設置場所をちゃんと計算するようにしたり、歩道橋が平面ポリゴンだったのを立体にしたり。

歩道と側溝も追加して以前よりそれっぽい街になりました。

車のグラフィックを改善

ナンバープレートやタクシーにベタベタ貼ってあるステッカーを高精細化するなど。

いくつかの車を追加

アセットを調達して取り込みました。取り込むにあたってメッシュやテクスチャの結合をしたり、カラバリ用に車モデルとテクスチャの生成ワークフローをいい感じにしたりしました。

タイムアタックモードを追加

これはさくっと。

ガレージ画面でドライバーを選べるようになった

車選択 UI がすでにあったのでそれを流用。

お客さんやプレイヤーのキャラクターを新調

以前は自分で作ったキャラクタでしたが、アセットを調達した方が高品質なので入れ替え。

調達したアセットの素性調査や scale 変換、skeleton の共通化などの前処理が結構面倒。

なるべく個別アニメーションに依存しない作りにした

以前は自作モデル + 自作アニメーションだったのでコードとアニメーションを密結合させていたけど、調達アセットを使う以上アニメーションのカスタマイズはコストが高いので、なるべく object 本体の移動や回転で表現するようにしてアニメーション自体は歩く走る立っているなどの基本的なセットだけで済むようにしました。

このアニメーションが 1 loop 終わったら次の動作、といったコードも廃止。アニメーション内容とコードを独立にしました。

ドライバーやお客さんの頭上にツイッターアカウントの画像と名前を出すようにした

以前は客が乗ったら画面中央下の専用エリアにアイコンとツイートを表示していましたが、アイコンは頭上、ツイートは吹き出しに出せばいいやとなって廃止。画面がよりシンプルになりました。

爆弾が即爆発するようになった

以前は 3,2,1,0 で爆発していたのが即爆発に。

消火器ボタンを追加

中には車が燃えていると乗らない客がいますが、消火器を発動させると火が消えて乗ってくるように。

AI車の挙動を改善

原理的なところから考察して式を立てて実装してシミュレータで走らせる、これを何回も繰り返し。

アイコンを可愛いやつに変更

かわいいは正義。

左上のマップに方位磁石を表示するようにした

どっちが北なのか普通に知りたくなったので。

まれにアプリが終了してしまう問題を修正

Bullet でどういうわけか null pointer へのアクセスが発生していたので修正。使い方が悪いのか本体の問題なのか不明。

全体の色味を調整

Metal 化に伴って linear ←→ sRGB 変換するしないを選べるようになって何も考えずに変換しないにした上で色味を調整していたけど、gamma について調べているうちにこれは変換するのが正しいという結論になったので変換した上で調整。

空をいい感じに

ナイスなアセットに変更。

rectangular テクスチャから cube map テクスチャをレンダリングする blender ファイルを作って変換。

ナビの経路計算を軽く

たまにナビの経路計算が遅くて描画がカクカクしていたので、高速化。

カリングをいい感じに

それっぽいカリング処理でごまかしていたのを、ちゃんと完全に視錐台の外にあるか判定するように変更。

たくさんリファクタリング、テスト整備

以前急いで開発するためにあえてアレな感じにした部分などをきれいにリファクタリング。

skeletal bone アニメーション再生ライブラリやマップセルのロード状態を管理するライブラリ、メッシュの内部表現、texture atlas 生成ライブラリなどはきれいに作り直し。

大事なコンポーネントを中心に unit test を追加。

物理演算, リソースロードを別スレッドで処理している部分を GCD に置き換え。コードがシンプルになりました。

iOS を拡大表示モードにしていると画面がおかしくなる問題を修正

アプリ内で論理画面サイズと drawable サイズがごっちゃになっている部分があって、拡大表示モードにしている時だけそれで問題がおきていたので修正。

拡大表示モード、そんなのあったのかーい。

スクショ、PV 作成

プレイしている画面をキャプチャして、スクショは ImageMagick、PV は iMovie で編集。

サイレントモードでキャプチャしたら無音になってしまって撮影やり直しになったりしました。


2022/05/04
テーマ: Game / 活動まとめ / 2022 / すべて