Photon実用ケーススタディご紹介
&PlayCanvas新機能
GMOクラウド株式会社

Photon実用ケース
スタディご紹介
GMOクラウド株式会社
Photon運営事務局
並木 健太郎

アジェンダ
• Photonのご紹介
• こんなことも出来ます
• 基本的な動作イメージ
• 最新情報
• 協力プレイ
• まとめ
• 対戦プレイ
• MMOっぽいMO
• ターン制ゲーム

Photonのご紹介

Photonとは
Photonは
ネットワークエンジン
です！

Photonのしくみ
• すべてのクライアント(=プレイ
ヤー)はサーバーへ接続する
Photo
ho n
to
• サーバーはクライアント間の
通信をリレーする役割
• サーバー自身は基本的には
処理を行わないが、Webho
SDK
SDK
SDK
oksやPluginを利用してカス
SDK
SDK
S
タマイズも可能
Cl
C ien
i
t
en
Cl
C ien
i
t
en
Cl
C ilen
i
t
en

Photonのサービス形態
• クラウド型サービス
• ミドルウェア型サービス
• サーバーはサービス提供元
• ソフトウェアとしてご提供、
で運用
お客さまで運用
• クライアントにSDKを組み
• サーバーサイドのカスタマイ
込むだけで利用可能
ズが自由に

Photon Cloudのラインナップ
汎用性に優れたスタンダードサービス
Unityで使いやすくUnity Networking互換
P2Pをベースに手軽にネットワーク実装
UNETをPhotonで実現
完全同期！
他サービスと併用可能なChat
ゲームに音声通話を手軽に追加

基本的な動作イメージ

基本シーケンス
• Photonはいわゆるリレーサーバです。
• サーバ側に演算機能等はありません。そのため、プレ
イヤーのお互いの情報を送受信する必要があります
。
• ゲームによって異なりますが、アクション性のある
ゲームであれば1秒間あたり5〜10回程度の情報の
やり取りが必要となってきます。

基本シーケンス

協力プレイ

協力プレイ
• Photonの一般的な使用例として他のプレイヤーとの協力プレイがあ
ります。
• 同じルーム内のプレイヤーと協力して、何かを成し遂げるゲーム性。
• RPGなどであれば、ゲーム中に全体回復のアイテムを使った場合に、
そのアイテムが使われたという情報を共有します。
• 同じくRPGなどで、全員で協力して1体のボスを倒すクエストなど。
ボスのHPを共有したり、味方の攻撃内容の共有をする。
• 音ゲーであれば、他のプレイヤーのスコアやステータス情報、またスキ
ル等の特殊効果の発動タイミングの共有を行います。

協力プレイシーケンス

対戦プレイ

対戦プレイ
• PvP、GvGなどと言われるようなゲームです。
• 海外だとFPSにも採用されています。
• 日本国内であればTPSにも実際に使用されております。
• 対戦プレイの場合、数フレームに1度、自分の情報を送信し合い、
その情報を互いのクライアント上で反映することによって、相手
の位置や状態などがわかるようになります。
• また、それとは別に攻撃の情報を送信することにより、お互いの
クライアントで攻撃の当たり判定を行い、ゲームが進行します。

対戦プレイのシーケンス

MMOっぽいMO

MMOっぽいMOを作る
• Photon Server(もしくはPhoton Enterprise Clou
d)を使用し、協力プレイを行う
※なぜPhoton ServerかPhoton Enterprise Cloudなのかは後述します。
• また、Photon Serverなどで使用できるPluginを活
用し、ゲーム中の処理をPluginで処理をする
• Pluginを使うとクライアントで処理する物をサーバー
で処理することが可能です！！

MMOっぽいMOとは？

なぜServerでないとダメなのか
• 先ほどのスライドの仕組みを実行するのはCloudで
も可能である。
• しかしLobbyRoomからGameRoomへ移動するに
当たり、Cloudの場合、処理が煩雑化します。
(色々とありますが、今回は省略します)
• この辺の煩雑さを解消するためにはPlugin機能を使
うのがお勧めです。

ターン制ゲーム

ターン制ゲームの基盤として
• ターン制のゲーム対戦型カードゲームにもPhoton
は使われております！！
• ターン制に対応したAPIなどがあり、容易にターン制
のゲームも作れます！

ターン制ゲームのフロー

こんなことも出来ます

こんなことも出来ます(その1)
• リアルタイムチャット
ルームやギルドのチャットシステムとしてPhotonを利用することができ
ます。
• 実装次第ではLINEライクなトーク画面も作れます。
• フィルター機能など、より高性能なチャットを使いたい場合はPhoto
nChatという物もあります！！
• PhotonChatでは通常のPhotonでは実現できないメッセージ履歴
等もつかえます！！
• さらにPhotonVoiceを使えばボイスチャットも可能！！

こんなこともできます(その2)
• 新サービスのPhoton TrueSyncでは物理演算エン
ジンを搭載しております！
• これにより完全同期を実現しております！！
• 具体的にはスポーツなどでボールの軌道の演算な
どが簡単に同期できます！
• photonengine.comからダウンロードできますので
興味のある方はお試し下さい！！

こんなこともできます(その3)
• UnityのUNET APIに対応したThunderという製品もございます
。
• こちらの特徴としてはUNET APIに対応しつつ、Photonのマッチ
ング機能や、安定したネットワーク接続が可能となっております。
• UNETのパフォーマンスに悩んでいる方がいれば是非お試し下
さい！！
• 現在アーリーアクセスとなっていますので、興味のある方はお問
い合わせください！！

こんなことも出来ます(その4)
• Photonは様々なリージョンに対応しています！！その
ため、海外での展開も可能です！！(アメリカ、ヨーロッ
パ、アジア、南米など)
• 既存のネットワークのコードをほとんどいじらなくて
対応可能！！
• 事例に関してはUnite 2017 Tokyoで発表したBNE
様の事例をご覧下さい！！

最新情報

進化しているPhoton
• ロビー周りが従来より進化しています！！(PUN Ver
1.81より対応)マッチングでフィルタ機能が充実しま
した！(SQL Lobbyが進化しています)
• これにより、近いレベルのプレイヤーとのマッチング
などが容易になりました！！

あのハードにも対応！！
• Nintendo Switchに対応しました！！
• Native向けSDKとUnityに対応しております！！
• ご興味のある方はPhoton運営事務局までお問い合
わせください。(任天堂のDeveloper登録をしている
方に限ります)

まとめ

まとめ
• Photon使うのは難しくないです！
• やりたいことを整理しましょう
• シーケンス図を描きましょう
• 簡単なプロトタイプを実装してイメージを掴みましょ
う
• すべてフリースタートです、まずはお試しを！

…続いてPlayCanvas!
developer@photonengine.jp

PlayCanvas新機能
PlayCanvas運営事務局
津田

アジェンダ
1.
PlayCanvasとは
4.
次世代スクリプティング –script2.0-
– Editor
– ノンリローディング，コンパイル
– Engine
– 共同開発
– Community
– パブリッシング時の圧縮化と難読化
2.
Editorの新機能
5.
Engineの新機能
– リアルタイムチャット
– WebVR ステレオレンダリングの最適化
– アセットレジストリ
– WebGL2.0対応
– プレビュー強化
– テクスチャ圧縮
6.
WebGLアプリの今後
– REST API
– WebGLのマーケットプレース
3.
あたらしくなった Code Editor
– 増えるWeb API
– 機能の充実化
– 補完の強化
7.
まとめ

PlayCanvasとは

PlayCanvasとは
• HTML5 WebGLで動く3Dゲームを
ブラウザ上で開発配信できる統合環境
• Editor ＋ Engine ＋ Community 一体型
「クラウドホスティングゲーム開発環境」
– リアルタイムコラボレーションに焦点を当てた開発・プレイ環境を目指し、日々
改善が進められている

PlayCanvas Editor
• Web上で完全に動作
• 直感的なデザイン
• コラボレーション
• 即時反映

PlayCanvas Engine
• MITライセンスのOSS
• Editorとは別でも提供
• JavaScript 96%
• コンポーネント指向
• 軽量なのが特徴
– ソースコード8MB
– ランタイムコード2.43MB
– gZip圧縮後 147KB

PlayCanvas Community
• サービスサイトにコミュニティも統合
– 開発物の紹介や相談等活発
• 無料から使える公開環境
– 200MBまで無料で使える
– 人気プロジェクトはExploreに
– 他ゲームのシーンやコードは閲覧可能

クラウドホスティングゲーム開発環境
• 開発環境の構成比較：一般的な開発
開発環境
バー
バ ジョ
ジ ン
ョ 管理
管
ツー
ツ ル
ー
提供元
開発キッ
開発キ ト
情報共有
情報
ツ
共有 ー
ツ ル
ー
作業
作 成
業 果
成
検証
最新データ
最新デー
開発グループ
会社
検証版
検証
検証版
配信
配 版
信
配信
配 先
信
配置先

クラウドホスティングゲーム開発環境
• 開発環境の構成比較：PlayCanvasでの開発
作業
作
開発キッ
キ ト
ッ
最新データ
Play
a Can
a va
s
検証版
配信
配 版
信
開発グルー
ル プ
検証
配信
配 版
検証
配信
配 版
信
配信
配 先
信
会社
開発に必要なものはPC，ネット，ブラウザのみ！

ご利用事例
• ＣＭサイト様
– ＣＭサイトが自社アドゲーム開発にPlayCanvasを採用！ＣＭサイトの考える次世代のア
ドゲームとは？
https://support.playcanvas.jp/hc/ja/articles/115005023268
• ボトルキューブ様
– PlayCanvasを採用し4タイトルのゲームアプリを開発したボトルキューブの次なる一
手は？
https://support.playcanvas.jp/hc/ja/articles/230074267
PlayCanvasの国内でのご採用も徐々に増えてきています！！

PlayCanvasの新機能
PlayCanvas Editor
- Webとは思わせない、リッチで高機能な3Dエディターへ -

PlayCanvas Editor
• PlayCanvasのEditorも常に進化を続けています！
– リアルタイムチャット
– アセットレジストリ
– プレビュー機能
– テクスチャ圧縮

リアルタイムチャット
• エディターにリアルタイムチャットが搭載
– 遠隔地での共同作業でもサードパーティのチャットツールが不要に

アセットレジストリ
• アセットごとにロードするタイミングを制御する機能
ロード時間を短縮化
– Asset > preload が falseならストリーミングに
– ロード時間を効率的に短縮化
– pc.AssetRegistry.once(“load”)イベントを利用して
ロードイベントの実行や終了時のコールバック等も

アセットレジストリ
• モデルケース その1
– asset 118 1.95MB (material 94, model 24)
– アセットが増えれば増えるほど
preload時間は増大 → その対策に
2.84s
4.18s
プリロ
プリ ー
ロ
ド
DOM操
M 作
操
prel
e oad
描画開始
2.89s 3.31s
ストリー
ストリ
ミング
DOM操作
操
pre
p l
rel
oa
oadd
描画開始

アセットレジストリ
• モデルケース その2
Pl
P ayC
y anva
s
– 同じゲームシステムでアセットだけ切り替えて
複数展開先にデプロイしたい場合
デプロ
デプ イ先
デプロイ
ロ 先
A
B
– Assetごとにタグを設定可能
A
• pc.AssetRegistry.findByTag()で
タグ付けされたAssetを検索、ロード
• 効率的にアセットを管理

プレビュー強化
• プレビュー強化により開発を加速！
– Assetプレビュー
– カメラプレビュー
– アニメーションプレビュー
– パーティクルプレビュー

テクスチャ圧縮
• WebGLゲームにとってリソース管理は常に気にするべき存在
– テクスチャビットマップをワンクリック操作で圧縮
– テクスチャの圧縮率とVRAM展開サイズをメニュー上で確認可能。最適化。
– たとえばこの画像
• 4096 x 2048px
• JPG 1.81MB
• WebGLで扱う場合には24ビットRGB
→ VRAMの33.6MBを占める
– アセットが増えるとデータ量は増大
• WebGLではGPU上のハードウェアでサポートされる
いくつかの圧縮テクスチャ形式を提供することで解決

テクスチャ圧縮
• PlayCanvasは3つのテクスチャ圧縮形式に対応
• DXT :
全てのデスクトップデバイス及び一部のAndroidデバイス
• PVR :
全てのiOSデバイス及び一部のAndroidデバイス
• ETC1
:
大部分のAndroidデバイス
• テクスチャアセットのインスペクターから
– 現在のサイズ[VRAMで占めるサイズ]
• 1/6のサイズに圧縮化
• 動作するデバイスで最適な圧縮方法をPlayCanvasが選択
• 端末で動作するデモはこちら

REST API
• ダウンロード→デプロイの流れをシームレスに
– API経由でダウンロードファイルの生成を要求
– JobIDが指定されるのでポーリングしてステータスを確認
– パラメータでアプリの名前やリリースノート，バージョン等入力
クライアント
Pl
P ay
a C
y an
C
v
an as
a
– ビルド終了後、DLリンクが発行される
API経由でリクエスト
jobID
ビルド
jobステータスを確認
アプリのパラメータ指定
• Organizationプランのみに提供
応答 download_urlにlink

REST APIのほかの使い方
• PlayCanvasの強み
– 共同作業、リアルタイム感
→ バージョン管理や復元などが難しい
• そこでREST API
– プロジェクト全体をzipでダウンロードすることができるAPIを提供
– 継続的にDLすることでバックアップに

Code Editor
- スクリプティングにも最適 より使いやすくモダンなエディターへ -

PlayCanvas CodeEditor
• PlayCanvasではCode Editorも専用のものを提供
– サードパーティのエディターは基本的に未対応
• 共同開発，予測や補完等のため
– JavaScript, HTML, CSS, Json, GLSL, text等が書ける
– PlayCanvas以外のJSファイルも入れられる・実行可能
• サードパーティのjsライブラリも
ソースファイルをアップロードできるなら使用可能
• <script>タグでURL指定して利用する方法はできない

Code Editorの進化
• 2017年2月に大幅アップデート
– ファイルビューとタブ
• コードエディター内で全てのファイルを参照可能
– キーボードショートカットの拡充
• テキストエディタでの標準的なショートカットをおおむね使用可
– 検索・置換機能の強化
• インタフェース変更、全ファイルからの検索も1クリック！

PlayCanvasの新機能
script2.0
- 次世代スクリプティングシステム -

PlayCanvasでのスクリプティング
• 開発言語はJavaScript
– プロトタイプチェインで基本的には一般的なJS
– コンポーネントとなるスクリプトはpc.createScript()で作成
– 基本的なメソッド
var Script = pc.createScript('script');
• initialize … 初期化時に実行
• update … 毎フレーム実行
Script.prototype.initialize = function() { };
• swap … 後述
Script.prototype.update = function(dt) { };
Script.prototype.swap = function(old) { };

ノンリローディング・ノンコンパイル
• swap()
– ホットリローディング時に呼ばれるメソッド。アプリケーション内で実行中のイン
スタンスに対して動的にアップデート可能。

複数人での共同編集に対応！
• 複数人で同一コードのリアルタイム編集が可能
– コミット，プッシュ，プルといったワークフローを排除
– コンフリクトを回避

スクリプト連結
• 開発規模に応じて、スクリプト数は増大..
• スクリプト連結機能
複数スクリプトがデプロイ時には1つに
– 単独のJSファイルでの複数スクリプト定義をサポート
– チェックボックス1つで可能
– Option
• >Concatenate Scripts

スクリプト連結
• モデルケース
__game-scripts.js
Concatenate Scripts
連結、短縮化
難読化
1ファイル 7KB
13ファイル 1.09MB

Engine
- PlayCanvasを支える 軽量で高速なエンジン -

Engine
• MITライセンスで公開中
– 6522 commits
– 26 contributors
– Fork 500↑
• 内部の実装は全て閲覧可能
– オープンソースなので、ロジックやメンバは簡単にわかる
– 全てJavaScriptで記述されているのでスクリプティングに慣れれば実装もわかる
• WebGLライブラリとして利用することも可能
– マークアップで開発する方法
– その際はライセンス費用は発生しない

PlayCanvas Engineの新機能
• 物理エンジンの最適化
– PlayCanvasには物理エンジン[Ammo.js]がデフォルトで搭載
• Ammo.js … BulletをemscriptenでJavaScriptにクロスコンパイルしたもの
• リファクタリングが完了し、より多くのAPIが利用可能に
– もちろんサードパーティの物理エンジンも
利用可能
• ammo.jsはかなりリッチな物理エンジン
• p2.jsなど2D限定の物理エンジン等も選択肢

PlayCanvas Engineの新機能
• WebVRの標準搭載
– WebVR…Webブラウザ上で動作するVRアプリケーション
• ハイエンドPCとハイエンドHMDを接続して楽しむタイプ
– ブラウザベンダがHMD向けAPIを公開
• スマートフォンでステレオレンダリング、汎用ゴーグルで楽しむタイプ
– fullscreen API, deviceemotion等要素はそろっている
• PlayCanvasはどちらも対応！！
– ゲーム開発感覚でWebVRアプリを開発可能
• 特にスマホWebVRに注力
– ステレオレンダリングが最適化、モバイルでの
パフォーマンスが大幅に向上

WebGL2.0
• WebGLの新規格 WebGL2.0が公開
– Open GL ES3.0互換の新しいWebGL
– 基本コンセプトは変わらず、いくつかの新機能搭載
• Transform feedback
• 3D テクスチャ
• MSAAを使用したHDRレンダリング
• ハードウェアPCF
• 対象範囲へのアルファ
– mozillaと共同でWebGL2.0デモ
「AFTER THE FLOOD」を公開
https://playcanv.as/e/p/44MRmJRU/

WebGL2.0
• PlayCanvasのランタイムエンジンには実装済み
– Setting > RENDERING > Prefer WebGL 2.0のチェックボックスを入れるだけ！
デフォルトではtrue
– 実行時にWebGL2.0対応プラットフォームかどうかPlayCanvas側で判断
非対応端末だった場合はWebGLでレンダリング

WebGL2.0のブラウザ対応状況
• デスクトップブラウザには徐々に対応中
– Firefox
– Chrome
– Opera がすでに対応済み
– Edge : UNDER CONSIDERATION
– webkit : IN DEVELOPMENT
2017.6時点
https://caniuse.com/#search=webgl2
https://developer.microsoft.com/en-us/microsoft-edge/platform/status/webgl20/

WebGLアプリの今後
- ゲームプラットフォームとしてのWeb -

Webにゲームが戻ってくる日
• 端末性能の向上
– PC, スマホともにWebがゲームプラットフォームとして十分機能する
• 次世代ブラウザゲーム
– 美麗なグラフィックスを活かしたゲームも開発可能に
– 開発環境の登場。Webを意識することなくゲーム開発に集中可能
• Webの自由度
– ネイティブアプリとの大きな違い
• マーケット管理者に左右されない、コンテンツの自由度
• インストール不要，ＵＲＬひとつで配信可能

昨今のWebGLゲームを取り巻く環境
• HTML5 ゲームプラットフォームが多く登場
– ポイントサイト等のミニゲームプラットフォームが主流だった
– WebGL, ストリーミング技術の向上により大型IPタイトル等も登場
• より増えるWeb APIとWebアプリの可能性
– Web Audio API … 音声ファイル，動的にエフェクト，リバーブなど
– GamePad API
… ゲームコントローラの入力を受付
– Indexed DB, WebStorage… データベースやストレージ
– Payment Request API
… 支払いのチェックアウトフローをより簡単に
– http, https, WebSocket, WebRTC … P2Pもサーバー/クライアント通信も。
もちろんPhotonも ！
• 新しい要素は増え続けている
– Web Bluetooth API getUserMedia/Stream API
iOS 11 ARkitの登場で今後WebARも可能に

まとめ
• PlayCanvasは日々進化し続けています！
– ゲーム開発者がWebGLアプリ開発を始めるにはとっても心強い味方！
• Webを意識せず、ゲーム開発に集中できる環境が整ってきている
• ゲームプラットフォームとしてのWebも成長！
– 多くのHTML5プラットフォームが登場
– 要素となるWeb APIも数々登場
• Webでの表現手法がより広がる
PlayCanvasは皆様のWebGLゲーム開発をお助けします！
このタイミングでWebGLゲーム開発をはじめてみませんか？

最後にお知らせ

Photon x PlayCanvasで全国行脚！
• Photon x PlayCanvasで全国行脚予定！
• 2017年内は札幌、名古屋、大阪、福岡の4か所予
定！
– 変更になる可能性もあります
• 詳細が決まり次第、WebやSNSでご案内します

WebとSNS
• Photon
– Web https://photonengine.jp
– Twitter
@PhotonCloudJP
– Facebook
https://facebook.com/photoncloudjp
• PlayCanvas
– Web https://playcanvas.com
– Twitter
@PlayCanvasJP
– Facebook
https://facebook.com/playcanvasjp

続きはブースで！
• もっと聞きたい！という方はブースで
• ブースコーナー中央手前でお待ちしております
• PhotonやPlayCanvasのほか、AppSealingも
• ノベルティたくさんご用意して
お待ちしております！

Thank you!!
developer@photonengine.jp
info@playcanvas.jp