Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
開始前のお願い
• 今回は完全同期をより体感していただくため、
ペアでテストを実施します
• AまたはBと書かれた紙のある席にお座りください
• http://bit.ly/ts-entryへアクセス
• 資料ダウンロード(ページ末尾) ,Un...
Photon TrueSyncで完全
同期のオンラインゲーム
を作ろう!
GMOクラウド株式会社
Photon運営事務局
アジェンダ
• 事前準備
• Photonのご紹介
• TrueSyncのご紹介
• ハンズオン
– アカウントとAppID取得
– ゲームシーン作成
– ボール作成
• ハンズオン (続き)
– ボックス作成
– 接続設定
– テスト
• お...
事前準備
3
Unity IDでのログイン
• Unityを起動
• お持ちのUnity IDで、ログイン
• アカウントをお持ちでない方は、可能であれば
アカウントを作成してください
• アカウント作成が難しい場合は、お近くのス
タッフにお声がけください
4
新規プロジェクトの作成
• Unityの新規プロジェクトを作成
• プロジェクト名は
PhotonTrueSync-20170901
• 場所はデフォルトでOK
• 3Dです
• Unity AnalyticsはDisable(OFF)で
5
Asset Storeを開く
• Unityエディタが開いたら、
Asset Storeを開く
• Window -> Asset Store
• 検索で
TrueSync
と入力
• Photon TrueSyncを選択
6
TrueSyncのインポート
• ダウンロードを実行
• すでにダウンロード済み
の場合は、インポートを
実行
• インポートする際は、全
ファイルが選択されてい
ることを確認
7
Photonのご紹介
8
Photonとは
• マルチプレイを実現するた
めに必要な機能を一通り
持っているツール
• サーバーとクライアント
SDKをセットで提供
• クライアント(=プレイヤー)
間の通信を簡単に実現する
ためのシステム
• サーバーは接続性を確保す...
Photonの主な機能
• ロビー
– 名前付ロビー
– マッチメイキング
– プレイヤー検索
• ルーム
– 人数制御・表示制御
– カスタムプロパティ
• 同期関連
– オブジェクト同期
– イベント通知
– RPC (PUN)
• Web...
Photonの特徴
• サーバー経由なので接続性が高い
– P2Pにありがちな問題は発生しない
• 独自技術による信頼性と低レイテンシーの両方を確
保
• クロスプラットフォーム対応で異なるプラット
フォーム間でも利用可能
• Unityからは...
Photonの開発メンバー
• 開発元はドイツ・ハンブルクの Exit Games社
• トップもエンジニアのエンジニア集団
• World Golf Tourの
ノウハウを
Photonに活用
12
Photonのラインナップ
• Aiueo
13
TrueSyncのご紹介
14
New Service!
Photonの進化系!
15
何ができるの?
• キーワードは完全同期
• Unityで、シーン内の同期対象すべてのオブジェ
クトをラグを最小限に同期を実現
16
従来の物理の同期手法
• 従来の物理オブジェクトの同期手法
1. 座標で同期
• イベント時に座標を同期
– 齟齬は生じない
– メッセージ数が大きくなる
2. ベクトルを同期
• 自分自身の座標と移動量、方向を同期
– メッセージ数は少ない
...
決定性 -Deterministic-
• 同じ位置、大きさ、重さ、強さで演算すると
全て同じ結果になる
– 物理エンジンに決定性がある
• Unityの標準物理エンジンには決定性はない
– 環境、マシンスペック、タイミングなど
– 浮動小数点...
決定性?
• 百聞は一見にしかず
– 決定性がない物理エンジンのデモを用意しました。
4つのクライアントで動作させると結果が変わることがわかります
• 1クライアント
• https://playcanv.as/b/URsl6RAv/
• 4ク...
もしこのデモを完全同期したかったら
…
• 極端な例(座標)
– 4x4x4 = 64個のboxを同期
– 64(個) x 60(fps) x 4(ccu)
= 15360(message / s)
– ほぼ実現不可能
– ベクトルでやる場合も...
実現方法の考え方
基本
物理演算の結果を全クライアントで一致させる!
そのために
物理エンジンそのものが同期
そして
インスタンスへの入力をPhotonで通信
21
中身は?
• PUN
• 予測物理エンジン
• ロックステップシステム
22
PUN
• Unity向けに最適化されたPhotonのSDK
• TrueSyncでもベース部分はPUNを利用
• ゲーム内でも併用が可能
23
予測物理エンジン
• 決定性をもった物理エンジン
• 使用条件を満たせばあらゆるプラットフォーム
で同一の結果を導き出す
• 浮動小数点の代わりに固定小数点(FP)を利用
• 2D/3Dそれぞれを搭載
• Unityの標準物理エンジン互換で、リ...
ロックステップシステム
• ゲーム内の入力をキューイングするシステム
• Photonサーバーとの最大RTTをバッファリング
することにより、クライアント間でズレをなく
して同期が可能
• シンプルなので非常に簡単
• キューの内容を保存するこ...
PUNと何が違うの?
• PUNは各オブジェクトの位置など同期させたい情報
をプログラマーが自分で書く
– 同期対象にPhotonViewをつけて、シリアライズのスクリ
プトを書く
• TrueSyncはオブジェクトへの入力を
TrueSync...
アカウントとAppID取得
27
すでにアカウントをお持ちの方
• 別で新規に取得する必要はありません
• 既存のアカウントをそのままお使いください
• 後ほどTrueSyncアプリケーションの追加だけを
お願いします
28
Webサイトへ
• 事前に開いたWebページ
にリンクがあります
– Photon アカウント取得
• 中ほどにある『メールア
ドレス登録』の欄にメー
ルアドレスを入力
• 『今すぐ無料お試し!』
を押す
29
確認メール受信
• Photon チームからのメー
ルを受信
• 本文中のリンクURLをク
リック
• ご利用規約へ同意いただ
ける場合、登録ボタンを
クリック
30
ダッシュボードへ
• 新規の方はそのままダッ
シュボードへ
• 既存アカウントをご利用
の方は、Webページの
ダッシュボードのリンク
でログイン
31
TrueSyncアプリの作成
• ダッシュボード上の『新
しくアプリを作成する』
のボタンを押す
• Photonの種別
Photon TrueSync
• アプリケーション名など
は任意
• 『作成する』を押す
32
AppIDを共有
• 新規に作成したTrueSync
アプリのAppIDをコピー
• ペアの方同士で同じアプ
リとしてつなぐ必要があ
るため、AppIDを共有
33
PhotonServerSettingsを開く
• Unityを開く
• メニューの
Window -> Photon Unity
Networking ->Highlight
Server Settings
34
PhotonServerSettingsの設定
• 設定を下記にする
Hosting: Best Region
Enabled Regions: Everything
AppID: (先ほど取得したもの)
Auto-Join Lobby: Of...
ゲームシーンの作成
36
フォルダの作成
• 直下に
HandsOn
• その下に
Prefab
• 大文字小文字に注意
37
ゲーム用シーン作成
• 新しいシーンを作成
File -> New Scene
• そのままシーンを保存
File -> Save Scene As...
• 保存場所は
HandsOn/Game
38
床の設置
• UnityのPlaneは使わず、
TrueSyncのCubeをPlane
代わりに
• GameObject -> TrueSync
-> Cube
39
床の設定
• 名前をPlaneに変更
• Transform
Position0 -0.1 0
Rotation 0 0 0
Scale 50 0.2 50
• TS Rigid Bodyを削除
40
壁の設置・設定#1
• GameObject -> TrueSync
-> Cube
• 名前はWallA
• Transform
Position0 9 25
Rotation 0 0 0
Scale 60 20 1
• Mesh Rende...
壁の設置・設定#2
• 4面作ります
• Duplicateはしないで
• WallB
Position25 9 0
Scale 1 20 60
• WallC
Position0 9 -25
Scale 60 20 1
• WallD
Pos...
メインカメラの設定
• Transform
Position0 50 -25
Rotation 70 0 0
Scale 1 1 1
43
Ballの作成・設定#1
• GameObject -> TrueSync
-> Sphere
• 名前をBall
• Transform
Position 0 0.4 0
Scale 0.8 0.8 0.8
• Mesh Renderer M...
Ballの設定#2
• TS Rigid Body
Massを1
• TS Sphere Collider
Radiusを0.4
• HandsOn/PrefabへPrefab
化
• Prefab化できたら
HierarchyのBallを削除...
TrueSyncManagerの設置・設定
• GameObject -> TrueSync
-> TrueSyncManager
• Player PrefabsのSizeを1
• Element 0にPrefab/Ballを
設定
46
TrueSyncConfigの作成
• HandsOnフォルダで
Create ->
TrueSyncConfig
47
TrueSyncConfigの設定
• General
Sync Window 3
Rollback Window 6
Show Stats On
• 3D Physics On
Speculative Contacts On
48
TrueSyncManagerへの設定
• Hierarchyの
TrueSyncManagerを選択
• True Sync Manager
Custom Configに
HansOn/TrueSyncConfig
を設定
49
シーンの保存
• 一度シーンを保存しま
しょう
• プレイボタンを押すと、
白い床の上に緑のボール
があればOK
• 確認できたらプレイボタ
ンを押して停止
50
ボール制御のスクリプト作成
• HandsOnフォルダに
BallControl
の名前でC#のスクリプト
を作成
• 作成できたらエディタで
開く
51
スクリプトの貼り付け
• 最初に開いたWebページ
にある、BallControl.csを
全てそのまま貼り付け
• エラーなどがないことを
確認して、保存
52
ボールへスクリプト追加
• Prefab/Ballを選択
• InspectorのAdd
ComponentでBall Control
を追加
• Ball ControlのPrefabに
Ballを指定
53
シーンの保存
• 再度シーンを保存
• プレイボタンを押すと、
今度はボールがカーソル
キーで操作できることを
確認
• プレイ解除をお忘れなく
54
Boxの作成・設定#1
• GameObject -> TrueSync
-> Cube
• 名前をBox
• Transform
Position0 1 0
Scale 2 2 2
• Mesh Renderer Materials
Elem...
Boxの設定#2
• TS Rigid Body
Mass 2
Linear Drag 0.1
• HandsOn/PrefabへPrefab
化
• Prefab化できたら、
HierarcyのBoxを削除
56
Box生成スクリプトの作成
• HandsOnフォルダに
BoxCreator
の名前でC#のスクリプト
を作成
• 作成したらエディタで開
く
57
スクリプトの貼り付け
• 最初に開いたWebページ
にある、BoxCreator.csを
全てそのまま貼り付け
• エラーなどがないことを
確認して、保存
58
TrueSyncManagerへの追加・設定
• Hierarchyの
TrueSyncManagerを選択
• AddComponentで
BoxCreatorを追加
• Box PrefabにBoxを設定
• Number Of Boxes...
シーンの保存
• 再度シーンを保存
• プレイボタンを押すと、
Boxが現れボールが触れ
ると色が変わることを確
認
• プレイ解除をお忘れなく
60
接続用シーンの作成
• HandsOnフォルダに
Matchシーンを作成
• HansOnフォルダを選択
した状態で、Create ->
Scene
• 名前をMatchに
• Matchシーンを開く
61
マッチングスクリプトを作成
• HandsOnフォルダに
MatchScript
の名前でC#のスクリプト
を作成
• 作成したらエディタで開
く
62
スクリプトの貼り付け
• 最初に開いたWebページ
にある、MatchScript.cs
を全てそのまま貼り付け
• エラーなどがないことを
確認して、保存
63
オブジェクト作成
• Matchシーンに空のオブ
ジェクトを作成
• GameObject ->
Create Empty
• 名前をMatchScriptに
64
スクリプト追加
• MatchScriptオブジェクト
に先ほど作った
MatchScriptのスクリプト
を追加
• Sceneにゲームのシーン
である
HandsOn/Game
を文字列で入力
• 最後にPhotonViewスクリ
プトを追...
シーンの保存・Build Settings
• Matchシーンを保存
• 2シーンを使うので、
Build Settingsで下記の順
序で設定
HandsOn/Match
HandsOn/Game
66
いよいよ接続!
• 左の方が最初にスタート
• 上のようにMasterClient
と表示されて停止してい
れば待ち受け状態
• 右の方がスタートすると、
自動的にマッチングして、
3カウントでゲーム開始
67
ゲーム開始!
• 最初に入った人のボール
は黒っぽい方
• ボールがBoxに当たると
色が変わります
• ペア同士の画面を見比べ
て、動きが一致している
ことを確認してください
68
おさらい
69
シーン作成
• 物理演算を行うオブジェクトはTrueSyncのオブ
ジェクトを使う
• Duplicateは使わないで
• TrueSyncManagerを忘れずに
70
TrueSyncManager
• 同期を管理する番人
• プレイヤーごとに属するPrefabは
TrueSyncManagerで設定すると自動生成
• 入力・反映はOnSyncedInput/OnSyncedUpdate
で
71
Photonへの接続
• ルーム入室まではPUNと全く同一
• TrueSyncを使う場合は、接続までを行うシーン
と、ゲームのシーンを分けること
72
サンプルご覧ください
• Demoフォルダにサンプルがあります
• 今日やったことをベースにすると、Demoの内
容は読みやすくなるかと思います
• このハンズオンは、Demo/Boxesを参考にしま
した
73
チュートリアルあります
• ドキュメントサイトにチュートリアルがありま
す
• https://doc.photonengine.com/ja-
jp/truesync/current/tutorial/tstutorial-part1-
do...
最後に
75
お願い
• 完全同期が、思ったより簡単に実現できたので
はないでしょうか?
• まだ生まれたてで問題があることもあるかもし
れません、いろいろ検証してみてください
• もし問題があれば、フィードバックをお願いい
たします
76
お問い合わせ
• ヘルプセンター
– https://support.photonengine.jp/hc/ja
• Webサイト
– https://photonengine.jp/
• メールアドレス
– developer@photone...
ブースでもお待ちしています!
• 1FのNo.9ブースでお待ち
しております!
• 以下のサービスもご案内
しています
ブラウザで開発できるWebGL
ゲームエンジンPlayCanvas
ブラウザだけで完結するセ
キュリティサービス
AppSe...
CEDEC 他セッション
• Photonセッション
– 8/30 (水) 17:50- 311+312
• PlayCanvasワークショップ
– 8/30(水) 14:50- 513
– 8/31(木) 16:30- 513
– 9/1(金...
Photon & PlayCanvas 全国行脚!
• Photon TrueSyncのハンズオンとPlayCanvasの
ハンズオンが、全国を回ります!
• 2017年内は下記の予定
– 9/28(木) 札幌
– 10/27(金) 福岡 (C...
Thank you!!
developer@photonengine.jp
Upcoming SlideShare
Loading in …5
×

【CEDEC2017】Photon TrueSyncで完全同期のオンラインゲームを作ろう!(2017/8/30-9/1講演)

1,753 views

Published on

CEDEC2017 Photon TrueSyncワークショップ

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

【CEDEC2017】Photon TrueSyncで完全同期のオンラインゲームを作ろう!(2017/8/30-9/1講演)

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

×