ダークサイドにようこそ!

限界クリエイターのブログ

PhotonのJavaScript用SDKを使って開発するまでの流れ

Photonとはマルチプレイヤーゲームを実現するためのSDKやサーバーアプリケーション等を含むプラットフォームです(用途はゲームに限らないけど)。ただJavaScript用(ウェブアプリケーション)に開発する場合、Unity用の専用パッケージ(PUN)のようなものはないし、ネット上の情報も少なかったので開発に着手するまでの手順を備忘録的に残しておきます。

www.photonengine.com

 

f:id:hahaeatora:20210519195633j:plain

まずはPhotonのアカウントを作成しダッシュボードより「新しくアプリを作成」します。ちなみに20CCU(同時接続数)までは無料です。

 

f:id:hahaeatora:20210519200438j:plain

「Photonの種別」について全ては理解していないですが、基本的な用途でクライアント側の開発のみに集中したい場合はPhoton Realtimeを選択します(他の選択肢はUnity用であったりチャット専用であったりみたいです)。「URL」は恐らく適当でも大丈夫?

 

f:id:hahaeatora:20210519201101j:plain

アプリケーション作成後、ダッシュボードから確認できるアプリケーションID(AppId)をメモしておきます。

 

www.photonengine.com

その後、Photon Client Javascript SDKをダウンロードし展開します。あとは、SDK内に含まれるinstall.txt & readme.txtを確認すれば良い感じなんですが少し補足します。

  • 最初はサンプルコードを参考することになると思うのですが、src以下にあるdemo-loadbalancing(ウェブブラウザベースの簡易チャットアプリ)が一番シンプルでベースとして良さげです。その際にcloud-app-info.js内のAppIdを先ほどメモしたアプリケーションIDに変更します、他はデフォルトのままでとりあえず大丈夫っぽい。その後はdefault.htmlとapp.jsを基本いじることになるかと思います。
  • 開発したアプリケーションの動作確認時はどこぞのサーバーにSDK含めたファイル一式をホストしても良いし、htmlファイルをブラウザで複数開くだけでも大丈夫だと思います。

 

以上、簡単ですがPhotonのJavaScriptSDKを使って開発するまでの流れを紹介しました。始めはだいぶ取っつきにくかったのですが、サンプルコードの流れを追っているとなんとなく分かってきます。以下に公式ドキュメント含め参考にさせていただいたリンクも載せておきます。

doc.photonengine.com

doc.photonengine.com

doc-api.photonengine.com

qiita.com