アズールレーンをStadia風に遊ぶ
スマートフォン向けゲームであるアズールレーンでGoogleのStadiaのようなストリーミングゲームを作ってみました。（クラウドゲームにあらず。理由は後述）
デモ
※音声はスピーカーから拾っているので音量が小さいです。
概要
デモ動画ではWindowsとUbuntu Desktopの両方で同じゲーム画面が表示されていることが分かると思います。
ゲームそのものは自宅サーバのエミュレータで起動していて、Windows PCにゲーム画面をストリーミング配信しています。
この記事ではデモを作るに当たって使用した技術要素を紹介します。
ソースコードをGitHubに公開していますので最後にまとめます。
デモ環境
自宅に設置しているサーバをゲームサーバとして使用しているので、"クラウド"ゲームとは呼べません。とはいえ、標準的なUbuntuで動かしているので今後クラウド環境に移行することも検討しています。
デモはPCから動かしていますが手持ちのMacBookやタブレットでも動きました。
メジャーなブラウザを搭載していれば他の端末でも使えるはずです。
ホスト（ゲーム＆配信サーバ）
HPE ProLiant MicroServer Gen10
・Core：AMD Opteron™ X3421（2Core）
・メモリ：16GB
・OS：Ubuntu 18.04 LTS Desktop
クライアント
Windows10 Home + Google Chrome ver81.0（要デバイスモード）
全体構成
すべてゲームサーバに展開します。
ブラウザ以外クライアントにインストールするものはありません。
Androidエミュレータ
・Android Studio（Android Emulator）
ストリーミング配信
・WebRTC Native Client Momo
フロントエンド
・TypeScript + webpack
・improbable-eng/grpc-web
・NGINX
バックエンド
・go
・google.golang.org/grpc
・xdotool
Androidエミュレータ
アズールレーンはAndroid/iOS用のスマホゲームですが、エミュレータに多数対応しています。
今回はUbuntu上で動かすためにAndroid Studioに同梱されているAndroid Emulatorを使います。
Android Studio（Android Emulator）
Android SDK（デモ環境ではPie）をインストールしたらAndroid EmulatorでPixel2のイメージを作成します。設定からDevice Frame＞Enable Device Frameのチェックを外せば外観を変更できます。
イメージを起動するとGoogle Playが使用できるのでGoogleアカウントにログインしてアズールレーンをダウンロードします。
起動したアプリが英語表記になる場合はOSの言語設定を日本語に変更してください。
ストリーミング配信
クラウドゲームは低レイテンシなストリーミング配信を求められるため、今回は配信プロトコルにWebRTCを使用します。株式会社時雨堂様のWebRTC Native Client MomoはOSSとしてソースが公開されていて扱いやすいWebRTC実装です。
WebRTC Native Client Momo
Momo自体はスクリーンキャプチャに対応していないので、今回はforkして独自で実装しました。
Momoがスクリーンキャプチャに対応していました！ただし、Window単位でキャプチャを選択できないので引き続き独自で実装しています。
フロントエンド
フロントエンドの役割は２つです。
・ストリーミングされたプレイ画面をブラウザに表示する
・ブラウザの入力情報をバックエンドに転送する
TypeScript + webpack
後述するgrpc-webの処理でTypeScriptを使用します。
webpackはソースをまとめるために使用するのみでwebpack-dev-serverは使用していません。
TypeScript以外にもブラウザのタッチイベントを取得する処理とプレイ画面の表示についてはJavaScriptを使用しています。
improbable-eng/grpc-web
画面タップの情報をバックエンドに転送するための通信プロトコルとして使用します。
調べた範囲でgrpc/とimprobable-eng/の2種類の実装がありましたが、今回はimprobable-eng/を使用しています。
grpc-webは単体でバックエンドとgrpc通信できないので別途Proxyを立てる必要があります。
grpc/はProxyにDockerとEnvoyを使用していますが
improbable-eng/はgoベースのサーバを立ち上げます。バックエンドにgoを使っていることもあってこちらを選びました。
NGINX
webpackでサーバを立てなかったので別途webサーバを用意します。
こなれているNGINXを選択しましたが、webpack-dev-serverやApacheでも問題ないと思います。
バックエンド
バックエンドはフロントエンドから転送される入力情報を元にしてエミュレータを操作します。
go
grpcでProxyから入力情報を受け付けて後述するxdotoolに渡します。
gccの呼び出しにはcgoを使用します。
google.golang.org/grpc
特にありません。
xdotool
C言語で書かれたコマンドラインからGUIを操作するライブラリです。
Ubuntu上でエミュレータをリモート操作するのに使用します。
機能が不足していたことと、cgoでgoから実行するに当たって今回はライブラリの一部を抜粋して使っています。
SDL
Protocol Buffersのコード生成はprotocで行います。
フロントエンドとバックエンドでそれぞれ以下のプラグインを導入しています。
・フロントエンド：ts-protoc-gen
・バックエンド：protoc-gen-go
GitHub
ソースコードをApache License ver2.0で公開しています。
Todo
・ARM 64アーキテクチャに移行
・クラウドサービス（AWS）に移行