LoginSignup
8
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@projectappbird(あぷりばーど/Appbird)

スマホ写真の投稿でフィールドが作られてゆく2Dプラットフォームゲーム「Landscape Extenders」の紹介

Last updated at Posted at 2024-12-24

https://qiita.com/advent-calendar/2024/siv3d

この記事は、Siv3D Advent Calendar 2024の25日目の記事です。

本記事では、筆者がOpenSiv3Dを用いて制作した 多人数参加型ゲーム「Landscape Extenders」 の概要とその実装を紹介します。

1. 何を作ったの？

「Landscape Extenders」はゲーム参加者らが投稿した写真をステージにして、駆け巡れる2Dアクションゲームです。

figure1.png

image.png

参加者は会場に示したWebサイトを通じて、スマートフォンから所望の写真を投稿します。その写真は新たなゲームステージに変換され、今まで投稿されたステージに繋がっていきます。その後、参加者はゲーム端末に移り、キャラクタを操作することで投稿した写真がつながったステージを駆け巡れます。

上図のQRコードでWebアプリが提示されていますが、今は動作しません。

2. 実装

image.png

システム「Landscape Extenders」の機能は次の3つの部分に大きく分けられます。

i. デモ参加者らが投稿する写真を受理して保管する
ii. 投稿された写真をゲームフィールドに追加する
iii. キャラクタがゲームフィールドを駆け巡れるようにする

このうち、i.の機能はWebアプリケーションとして、ゲーム端末部分ii., iii.の実装はOpenSiv3Dアプリケーションとして実装しています。

以降では、各機能をどのように実装したか、そしてWebアプリケーションとOpenSiv3Dアプリケーションをどのように接続したかについての方針を説明します。

i) デモ参加者らが投稿する写真を受理して保管する

この機能は、写真を送信するためのフォームと写真データを保管するサーバを配置することで実装しました。フォームでは、次のような画面で写真をフィールドのどの位置に置くかをドラッグ＆ドロップして指定できたり、写真をサーバに送信したりできます。

image.png

Webアプリケーションの実装にはFirebaseを用いています。サイトの配信にはFirebase Hostingを使用しています。また、写真の配置情報はFirestoreに、写真そのもののデータはFirebase Cloud Storageに保存しました。

ii) 投稿された写真をゲームフィールドに追加する

投稿された写真をフィールドに反映するには、Firebaseに格納された画像データ・配置情報をOpenSiv3D アプリに送信する必要があります。現状FirebaseはC++におけるPCアプリ向けAPIは用意していませんが、Firestore, Cloud Storageに対するREST APIが用意されています。1 たとえば、https://(ホスト名)/v1/projects/(プロジェクト名)/databases/(default)/documents/...といったURLに対してGETリクエストを送ることで、Firestoreからデータを読み取れます。

従って、OpenSiv3DアプリからHTTPリクエストを送ることで、投稿されたデータを受信できます。この実装にあたり、OpenSiv3DのSimpleHTTP::Save関数が使えます。また、FirebaseサーバからのレスポンスはJSON形式で記述されているため、その読み取りにはOpenSiv3DのJSON名前空間中の関数を活用できます。

実装のさらなる詳細について

  1. REST APIからFirestore等を操作する場合、あらかじめFirebase ID トークンを取得しておく必要があります
    このIDトークンはFirebase Authentication上のアカウントに対して発行できます。
    従って、上記の処理に加えて匿名アカウントをAuth APIを通じて作成し、そのアカウントのIDトークンを発行するという処理を挟む必要があります。配置データをFirestoreから読み取る時にも、IDトークンをAuthenticationヘッダに添付しなくてはなりません。
    また、トークンには有効期限（1時間程度）が定められています。Firebaseへのデータ取得が挟まるたびにトークンが有効かを調べ、有効でなかったらトークンのIDを再取得をしています。
    c.f. Firebase Auth REST APIについて

  2. すでに一度取得した画像データを2回取得しないよう、画像取得に対してはキャッシュ機能を設けています
    そのため、ステージのデータを更新するたび、新たに追加されたステージ（ドキュメント）がないかを確認します。もし新たに追加された画像があればそれをダウンロードすることで対処しています。

実装に関する参考情報

iii) キャラクターがゲームフィールドを駆け巡れるようにする

ここまでで、投稿された写真情報をゲーム端末に送信できました。ですが、写真の地形通りにキャラクタが駆け巡るには、フィールドに当たり判定を設定する必要があります。

地形は物体の境界（画像上では、輝度が大きく変化するライン）に対応することが多いです。従って、OpenCVにある線分検出アルゴリズムを用いることで、そのような地形の位置を推測できます。しかし、ゲームの地形として利用するには更に工夫が必要となります。（この詳細は 3章 Landscape Wander にて後述します）

そのほか、ゲーム部のメインループ・描画の実装にもOpenSiv3Dの機能を用いています。工夫の一例として、ゲーム画面中のプレイヤキャラクタの強調があります。プレイヤのスプライトをそのまま描画すると、写真の背景の色合いに埋もれてしまい、どこにキャラクタがいるのかわかりにくいことがあります。そこで、キャラクタを画面中で少し光らせ、どのような色合いの写真であってもキャラクタが目立つようにしました。（2Dライトブルーム）2Dライトブルームは、ガウシアンブラー（Shader::GaussianBlur）と加算合成2Dレンダーステート（ScopedRenderStates2D { BlendState::Additive }）を組み合わせることで実装できます。

image.png

（余談）デモ会場では、Joy-Conを用いてプレイヤキャラクタを操作できたりしました。このJoy-Conの入出力もまたOpenSiv3Dの機能を用いています。

3. Landscape Wander：写真から地形情報を抽出する枠組みについて

写真の地形に合わせてプレイヤキャラクタが動き回るためには，その写真に映る地形の形に合わせて当たり判定を配置する必要がありました。このタスクを補助するモジュールが、筆者らが開発を進めている「Landscape Wander」です。

写真の地形（物体境界）の検出はOpenCVにある 確率的Hough変換 や Fast Line Detector 等の線分検出器を用いれば実装はできます。しかし、その検出結果をゲームの地形に直接適用するにはいくつかの課題があります。

  • i. 大量の画像処理パラメータを入力画像ごとに適切に定める必要がある

    • パラメータの数をできるだけ減らして、簡潔に設定したい

  • ii. 出力される地形に途切れが発生する

    • プレイヤの地形当たり判定をナイーブに実装すると、プレイヤがその途切れた部分で落ちてしまう

  • iii. 足場として抽出したい対象は、開発したいゲームごとに変わり得る

    • 例えば、写真に写った雲を足場として検出したくないケースが考えられる
    • 検出対象を制御する手段を提供したい

「Landscape Wander」では、これらの問題を解消するための処理を追加した関数を提供しています。

image.png

はじめに、以下の二つの前処理・後処理を加えました。

  • 前処理：バイラテラルフィルタによるエッジ保存ぼかし
    • このぼかしフィルタを用いると、あまり色が変化してない領域だけを選択的にぼかせる
    • 建物の壁面の模様などの細やかなディティールをぼかして、足場として誤検出されることを防げる
    • ぼかす強さは可変なため、コントラストに基づいて抽出対象の制御ができる
  • 後処理：線分結合処理
    • 問題ii.の線分途切れの問題に対し、似た位置と傾きを持つ線分を結合する処理を加えている
    • こうすることで、プレイヤが隙間から落ちることなく安定して足場を走れるようになる

また、三つのパラメータ（制御パラメータ）を新たに定義し、それらの値によって画像処理に用いるパラメータを決定するようにしました。
制御パラメータ$\alpha, \beta, \gamma$は$0$以上$1$以下の値を取り、それぞれ次のような意味合いを持ちます。

  • $\alpha$：検出対象のコントラストの閾値
    • 値を高めると周囲に対して強い輝度を持ったオブジェクトしか抽出されにくくなる
    • e.g. 写真に写った雲の上を足場として抽出するかどうかを制御できたりする
  • $\beta$：検出対象をどれだけ細かく取るか
    • 値を高めると、より形に合うように細かな線分を組み合わせて物体を表現する
  • $\gamma$：線結合処理において、どれだけ近い線分を結合するか
    • 値を高めると、より近い線分しか結合されなくなる

たとえば、$\alpha$の値を変えることで、画像のように抽出対象を変えられます。

スクリーンショット 2024-12-25 0.09.01.png

以上の工夫により、三つの制御パラメータでより簡易に適切な画像処理パラメータを探索したり、抽出対象を制御できたりするようになりました。

おわりに

この記事では、筆者らが制作したデモンストレーション「Landscape Extenders」についてその実装の詳細とOpenSiv3Dの利活用法、その中核を担うライブラリ「Landscape Wander」を紹介しました。

ライブラリ「Landscape Wander」はまだ開発途中にあり、実用段階に持っていくにはいくつか課題が残されています。

  1. 写真に映る物体を用いたインタラクション
    現地点では古典的な線分検出技術によって地形を検出しています。
    写真中の物体の内容に応じたリアクションを開発者が設定できるようになれば、より面白いゲームが作れそうです。例としては、「木の枝の上に乗っかったらバネのようにジャンプできる」「物体を動かしたり」など。
    近年はリアルタイムセマンティックセグメンテーションの研究が進んでいる 2 ため、機械学習的アプローチをLandscape Wanderで活用することも有効かもしれません。あるいは、GrabCut法とボックス検出を組み合わせるという方法でも良いかも。

  2. 計算量の削減
    Landscape Wanderで導入した「2線分を結合する後処理」は、検出された線分の数$n$に対し$O(n^2)$の時間計算量を持ちます。検出された線分の数が1000個、10000個程度になると、地形検出に時間がかかってしまいます。たとえば、四分木を用いれば組み合わせの数を減らせて、計算量を定数倍の範囲で軽減できそうです。
    うまく最適化問題に落とし込めば計算量次数を改善できそうな予感もしています。この分野はLine Segment Mergingと呼ばれるようですが、有効そうなアルゴリズムは今のところ発見できていないです....(情報求む！)

今後は、Landscape Extendersの制作事例を拡充とともに、こういった現実世界の写真を活用したゲーム開発の技術基盤として機能拡充を行っていく予定です。世界中の景色をゲームの舞台にしたアクションゲームを遊べる日を夢見て、開発・研究を頑張りたいところ...！

発表原稿 ＆ 関連リンク

  1. iOSアプリ向けのAPIは実装されていますが、スタンドアロンのPCアプリ向けについてはまだ実装されていないようです。 ↩

  2. Jiacong Xu: PIDNet: A Real-time Semantic Segmentation Network Inspired by PID Controllers https://arxiv.org/abs/2206.02066v3 ↩

Siv3DAdvent Calendar 2024

Day 25
8
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
8
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?