【CEDEC2017】Photon TrueSyncで完全同期のオンラインゲームを作ろう！(2017/8/30-9/1講演)
•Download as PPTX, PDF•
0 likes•4,663 views
CEDEC2017 Photon TrueSyncワークショップ
Recommended
Recommended
More Related Content
Featured
Featured (20)
【CEDEC2017】Photon TrueSyncで完全同期のオンラインゲームを作ろう！(2017/8/30-9/1講演)
- 1. 開始前のお願い • 今回は完全同期をより体感していただくため、 ペアでテストを実施します • AまたはBと書かれた紙のある席にお座りください • http://bit.ly/ts-entryへアクセス • 資料ダウンロード(ページ末尾) ，Unityセットアップ photonアカウント作成を進めてください
- 3. アジェンダ • 事前準備 • Photonのご紹介 • TrueSyncのご紹介 • ハンズオン – アカウントとAppID取得 – ゲームシーン作成 – ボール作成 • ハンズオン (続き) – ボックス作成 – 接続設定 – テスト • おさらい • 最後に 2
- 4. 事前準備 3
- 5. Unity IDでのログイン • Unityを起動 • お持ちのUnity IDで、ログイン • アカウントをお持ちでない方は、可能であれば アカウントを作成してください • アカウント作成が難しい場合は、お近くのス タッフにお声がけください 4
- 6. 新規プロジェクトの作成 • Unityの新規プロジェクトを作成 • プロジェクト名は PhotonTrueSync-20170901 • 場所はデフォルトでOK • 3Dです • Unity AnalyticsはDisable(OFF)で 5
- 7. Asset Storeを開く • Unityエディタが開いたら、 Asset Storeを開く • Window -> Asset Store • 検索で TrueSync と入力 • Photon TrueSyncを選択 6
- 8. TrueSyncのインポート • ダウンロードを実行 • すでにダウンロード済み の場合は、インポートを 実行 • インポートする際は、全 ファイルが選択されてい ることを確認 7
- 9. Photonのご紹介 8
- 10. Photonとは • マルチプレイを実現するた めに必要な機能を一通り 持っているツール • サーバーとクライアント SDKをセットで提供 • クライアント(=プレイヤー) 間の通信を簡単に実現する ためのシステム • サーバーは接続性を確保す るためのもので、基本的に 処理を行うのはクライアン ト Photon Client Client Client SDK SDK SDK 9
- 11. Photonの主な機能 • ロビー – 名前付ロビー – マッチメイキング – プレイヤー検索 • ルーム – 人数制御・表示制御 – カスタムプロパティ • 同期関連 – オブジェクト同期 – イベント通知 – RPC (PUN) • WebHooks/WebRPC • オフラインモード 10
- 12. Photonの特徴 • サーバー経由なので接続性が高い – P2Pにありがちな問題は発生しない • 独自技術による信頼性と低レイテンシーの両方を確 保 • クロスプラットフォーム対応で異なるプラット フォーム間でも利用可能 • UnityからはAsset Storeからダウンロードするだけ でSDKの利用が可能 – 詳細は後ほどご案内します 11
- 13. Photonの開発メンバー • 開発元はドイツ・ハンブルクの Exit Games社 • トップもエンジニアのエンジニア集団 • World Golf Tourの ノウハウを Photonに活用 12
- 15. TrueSyncのご紹介 14
- 18. 従来の物理の同期手法 • 従来の物理オブジェクトの同期手法 1. 座標で同期 • イベント時に座標を同期 – 齟齬は生じない – メッセージ数が大きくなる 2. ベクトルを同期 • 自分自身の座標と移動量、方向を同期 – メッセージ数は少ない – 物理エンジンに決定性がないため齟齬が生じる 17
- 19. 決定性 -Deterministic- • 同じ位置、大きさ、重さ、強さで演算すると 全て同じ結果になる – 物理エンジンに決定性がある • Unityの標準物理エンジンには決定性はない – 環境、マシンスペック、タイミングなど – 浮動小数点演算の誤差 – 人為的にキャップするのが一般的 18
- 20. 決定性？ • 百聞は一見にしかず – 決定性がない物理エンジンのデモを用意しました。 4つのクライアントで動作させると結果が変わることがわかります • 1クライアント • https://playcanv.as/b/URsl6RAv/ • 4クライアント • http://playcanvas.utautattaro.com/quadiframe.html?tile_x=2&t ile_y=2&url=https://playcanv.as/b/URsl6RAv/
- 21. もしこのデモを完全同期したかったら … • 極端な例（座標） – 4x4x4 = 64個のboxを同期 – 64(個) x 60(fps) x 4(ccu) = 15360(message / s) – ほぼ実現不可能 – ベクトルでやる場合も齟齬が生じる r = 0.75 m = 5 v = 100 w = 32 h = 32 μ = 0.5 h,w = 1 m = 1 4x4x4
- 23. 中身は？ • PUN • 予測物理エンジン • ロックステップシステム 22
- 24. PUN • Unity向けに最適化されたPhotonのSDK • TrueSyncでもベース部分はPUNを利用 • ゲーム内でも併用が可能 23
- 25. 予測物理エンジン • 決定性をもった物理エンジン • 使用条件を満たせばあらゆるプラットフォーム で同一の結果を導き出す • 浮動小数点の代わりに固定小数点(FP)を利用 • 2D/3Dそれぞれを搭載 • Unityの標準物理エンジン互換で、リプレースが 容易 24
- 26. ロックステップシステム • ゲーム内の入力をキューイングするシステム • Photonサーバーとの最大RTTをバッファリング することにより、クライアント間でズレをなく して同期が可能 • シンプルなので非常に簡単 • キューの内容を保存することにより、リプレイ が簡単に実現可能 25
- 27. PUNと何が違うの？ • PUNは各オブジェクトの位置など同期させたい情報 をプログラマーが自分で書く – 同期対象にPhotonViewをつけて、シリアライズのスクリ プトを書く • TrueSyncはオブジェクトへの入力を TrueSyncManager経由で与え、物理演算の結果を一 致させる – 入力をPhotonで管理、物理演算結果は各クライアントが 持つがそれは全て一致する 26
- 28. アカウントとAppID取得 27
- 29. すでにアカウントをお持ちの方 • 別で新規に取得する必要はありません • 既存のアカウントをそのままお使いください • 後ほどTrueSyncアプリケーションの追加だけを お願いします 28
- 30. Webサイトへ • 事前に開いたWebページ にリンクがあります – Photon アカウント取得 • 中ほどにある『メールア ドレス登録』の欄にメー ルアドレスを入力 • 『今すぐ無料お試し！』 を押す 29
- 31. 確認メール受信 • Photon チームからのメー ルを受信 • 本文中のリンクURLをク リック • ご利用規約へ同意いただ ける場合、登録ボタンを クリック 30
- 33. TrueSyncアプリの作成 • ダッシュボード上の『新 しくアプリを作成する』 のボタンを押す • Photonの種別 Photon TrueSync • アプリケーション名など は任意 • 『作成する』を押す 32
- 35. PhotonServerSettingsを開く • Unityを開く • メニューの Window -> Photon Unity Networking ->Highlight Server Settings 34
- 36. PhotonServerSettingsの設定 • 設定を下記にする Hosting: Best Region Enabled Regions: Everything AppID: (先ほど取得したもの) Auto-Join Lobby: Off Enable Lobby Stats: Off Pun Logging: Errors Only Network Logging: ERROR Run In Background: On 35
- 37. ゲームシーンの作成 36
- 38. フォルダの作成 • 直下に HandsOn • その下に Prefab • 大文字小文字に注意 37
- 39. ゲーム用シーン作成 • 新しいシーンを作成 File -> New Scene • そのままシーンを保存 File -> Save Scene As... • 保存場所は HandsOn/Game 38
- 40. 床の設置 • UnityのPlaneは使わず、 TrueSyncのCubeをPlane 代わりに • GameObject -> TrueSync -> Cube 39
- 41. 床の設定 • 名前をPlaneに変更 • Transform Position0 -0.1 0 Rotation 0 0 0 Scale 50 0.2 50 • TS Rigid Bodyを削除 40
- 42. 壁の設置・設定#1 • GameObject -> TrueSync -> Cube • 名前はWallA • Transform Position0 9 25 Rotation 0 0 0 Scale 60 20 1 • Mesh RendererとTS Rigid Bodyを削除 41
- 43. 壁の設置・設定#2 • 4面作ります • Duplicateはしないで • WallB Position25 9 0 Scale 1 20 60 • WallC Position0 9 -25 Scale 60 20 1 • WallD Position-25 9 0 Scale 1 20 60 42
- 44. メインカメラの設定 • Transform Position0 50 -25 Rotation 70 0 0 Scale 1 1 1 43
- 45. Ballの作成・設定#1 • GameObject -> TrueSync -> Sphere • 名前をBall • Transform Position 0 0.4 0 Scale 0.8 0.8 0.8 • Mesh Renderer Materials Element 0を green 44
- 46. Ballの設定#2 • TS Rigid Body Massを1 • TS Sphere Collider Radiusを0.4 • HandsOn/PrefabへPrefab 化 • Prefab化できたら HierarchyのBallを削除 45
- 47. TrueSyncManagerの設置・設定 • GameObject -> TrueSync -> TrueSyncManager • Player PrefabsのSizeを1 • Element 0にPrefab/Ballを 設定 46
- 49. TrueSyncConfigの設定 • General Sync Window 3 Rollback Window 6 Show Stats On • 3D Physics On Speculative Contacts On 48
- 50. TrueSyncManagerへの設定 • Hierarchyの TrueSyncManagerを選択 • True Sync Manager Custom Configに HansOn/TrueSyncConfig を設定 49
- 51. シーンの保存 • 一度シーンを保存しま しょう • プレイボタンを押すと、 白い床の上に緑のボール があればOK • 確認できたらプレイボタ ンを押して停止 50
- 54. ボールへスクリプト追加 • Prefab/Ballを選択 • InspectorのAdd ComponentでBall Control を追加 • Ball ControlのPrefabに Ballを指定 53
- 55. シーンの保存 • 再度シーンを保存 • プレイボタンを押すと、 今度はボールがカーソル キーで操作できることを 確認 • プレイ解除をお忘れなく 54
- 56. Boxの作成・設定#1 • GameObject -> TrueSync -> Cube • 名前をBox • Transform Position0 1 0 Scale 2 2 2 • Mesh Renderer Materials Element 0をblueに 55
- 57. Boxの設定#2 • TS Rigid Body Mass 2 Linear Drag 0.1 • HandsOn/PrefabへPrefab 化 • Prefab化できたら、 HierarcyのBoxを削除 56
- 60. TrueSyncManagerへの追加・設定 • Hierarchyの TrueSyncManagerを選択 • AddComponentで BoxCreatorを追加 • Box PrefabにBoxを設定 • Number Of Boxes X Number Of Boxes Z をそれぞれ3に 59
- 61. シーンの保存 • 再度シーンを保存 • プレイボタンを押すと、 Boxが現れボールが触れ ると色が変わることを確 認 • プレイ解除をお忘れなく 60
- 62. 接続用シーンの作成 • HandsOnフォルダに Matchシーンを作成 • HansOnフォルダを選択 した状態で、Create -> Scene • 名前をMatchに • Matchシーンを開く 61
- 65. オブジェクト作成 • Matchシーンに空のオブ ジェクトを作成 • GameObject -> Create Empty • 名前をMatchScriptに 64
- 66. スクリプト追加 • MatchScriptオブジェクト に先ほど作った MatchScriptのスクリプト を追加 • Sceneにゲームのシーン である HandsOn/Game を文字列で入力 • 最後にPhotonViewスクリ プトを追加 65
- 67. シーンの保存・Build Settings • Matchシーンを保存 • 2シーンを使うので、 Build Settingsで下記の順 序で設定 HandsOn/Match HandsOn/Game 66
- 68. いよいよ接続！ • 左の方が最初にスタート • 上のようにMasterClient と表示されて停止してい れば待ち受け状態 • 右の方がスタートすると、 自動的にマッチングして、 3カウントでゲーム開始 67
- 69. ゲーム開始！ • 最初に入った人のボール は黒っぽい方 • ボールがBoxに当たると 色が変わります • ペア同士の画面を見比べ て、動きが一致している ことを確認してください 68
- 70. おさらい 69
- 71. シーン作成 • 物理演算を行うオブジェクトはTrueSyncのオブ ジェクトを使う • Duplicateは使わないで • TrueSyncManagerを忘れずに 70
- 72. TrueSyncManager • 同期を管理する番人 • プレイヤーごとに属するPrefabは TrueSyncManagerで設定すると自動生成 • 入力・反映はOnSyncedInput/OnSyncedUpdate で 71
- 74. サンプルご覧ください • Demoフォルダにサンプルがあります • 今日やったことをベースにすると、Demoの内 容は読みやすくなるかと思います • このハンズオンは、Demo/Boxesを参考にしま した 73
- 75. チュートリアルあります • ドキュメントサイトにチュートリアルがありま す • https://doc.photonengine.com/ja- jp/truesync/current/tutorial/tstutorial-part1- download-install • バックグラウンドなども説明されているので、 こちらもぜひご覧ください 74
- 76. 最後に 75
- 77. お願い • 完全同期が、思ったより簡単に実現できたので はないでしょうか？ • まだ生まれたてで問題があることもあるかもし れません、いろいろ検証してみてください • もし問題があれば、フィードバックをお願いい たします 76
- 78. お問い合わせ • ヘルプセンター – https://support.photonengine.jp/hc/ja • Webサイト – https://photonengine.jp/ • メールアドレス – developer@photonengine.jp 77
- 80. CEDEC 他セッション • Photonセッション – 8/30 (水) 17:50- 311+312 • PlayCanvasワークショップ – 8/30(水) 14:50- 513 – 8/31(木) 16:30- 513 – 9/1(金) 16:30- 513 79
- 81. Photon & PlayCanvas 全国行脚！ • Photon TrueSyncのハンズオンとPlayCanvasの ハンズオンが、全国を回ります！ • 2017年内は下記の予定 – 9/28(木) 札幌 – 10/27(金) 福岡 (CEDEC+KYUSHU2017前日) – 11月 大阪 (予定) – 12月 名古屋 (予定) 80
Editor's Notes
- ちょっと細かい話になってしまいましたが、ここで開発元のお話をしたいと思います。 Photonは、ドイツのハンブルクにあるExitgames社が開発しました。 Exitgames社は、トップも含めほとんどがエンジニアの集団であります。 元々はWorld Golf Tourというブラウザベースのオンラインゴルフゲームのネットワークエンジン部分をExitgames社が担当しておりました。そのエンジン部分を汎用的にサービス化したのが、このPhotonということになります。 ですので、実績を積みながら開発が続けられているのです。