Downloaded 119 times
![アカウント取得
サイトへアクセス
• 下記URLにアクセスしま
す
• http://photoncloud.jp/
• 画面右上にある
[→ Photon Cloud 日本
公式サイトへ] をクリッ
クします
• 登録は無料です！
12](https://image.slidesharecdn.com/cedec-workshop-201308121-130820094957-phpapp01/85/Unity-PhotonCloud-12-320.jpg)
![アカウント取得
メールアドレス登録
• Photon Realtime 日本
公式サイトの画面右下
にある入力欄にメール
アドレスを入力します
• [サインアップ] ボタンを
クリックします
13](https://image.slidesharecdn.com/cedec-workshop-201308121-130820094957-phpapp01/85/Unity-PhotonCloud-13-320.jpg)
![Assetのインポート
インポート
• Importing package画面
で、全てのアイテムに
チェックが付いている事
を確認
• 画面右下の[Import] を
クリックします
23](https://image.slidesharecdn.com/cedec-workshop-201308121-130820094957-phpapp01/85/Unity-PhotonCloud-23-320.jpg)
![Photon Cloudとの接続設定
PUN Wizardを開く
• 既にあるアカウント(App
ID)を使うので、中ほど
の[Setup] をクリック
28](https://image.slidesharecdn.com/cedec-workshop-201308121-130820094957-phpapp01/85/Unity-PhotonCloud-28-320.jpg)
![カメラとネットワークの設定
ネットワーク機能(ルーム入室)実装
• ランダムマッチメイキング
のスクリプトを組込みま
す
• ‘Inspector’の下部の[Add
Component] ボタンをク
リックし、検索用の入力
窓に
‘Random’
と入力し、検索候補から
‘Random Matchmaker’を
選択して先ほど作った
‘Scripts’にアタッチ
35](https://image.slidesharecdn.com/cedec-workshop-201308121-130820094957-phpapp01/85/Unity-PhotonCloud-35-320.jpg)
![チャットの設定
チャットスクリプトの追加
• チャットのスクリプトを組
込みます
• ‘Inspector’の下部の[Add
Component]ボタンをク
リックし、検索用の入力
窓に
‘inroom’
と入力し、検索候補から
‘In Room Chat’を選択
• ‘Photon View’と’In Room
Chat’の2つのスクリプトが
アタッチされる
47](https://image.slidesharecdn.com/cedec-workshop-201308121-130820094957-phpapp01/85/Unity-PhotonCloud-47-320.jpg)
Uploaded byGMO GlobalSign Holdings K.K.
Unityで PhotonCloudを使ってリアルタイム・マルチプレイヤーゲームを作っちゃおう【導入編】
Photon Cloudはリアルタイム・マルチプレイヤーゲームを開発するために不可欠なネットワークエンジンです。 Unityなどの開発環境でプラグインで簡単に利用する事が出来ます。 そのPhotonCloudの導入編という位置付けのワークショップ資料です。
More Related Content
![Unity 2018-2019を見据えたDeNAのUnity開発のこれから [DeNA TechCon 2019]](https://cdn.slidesharecdn.com/ss_thumbnails/techcon2019harutootake-190218063853-thumbnail.jpg?width=640&height=640&fit=bounds)
![[CEDEC2018] UE4で多数のキャラクターを生かすためのテクニック](https://cdn.slidesharecdn.com/ss_thumbnails/cedec2018charcterperdormanceoptimze-180823081028-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Unityで PhotonCloudを使ってリアルタイム・マルチプレイヤーゲームを作っちゃおう【導入編】
Unityで PhotonCloudを使ってリアルタイム・マルチプレイヤーゲームを作っちゃおう【導入編】
- 1. Unity x PhotonRealtimeで オンラインゲームを作っちゃおう 【導入編】 Photon 運営事務局 1
- 2. 本日のお題 • PhotonRealtimeとは • アカウント取得 • Unityの準備 • Assetのインポート • Photon Realtimeとの接続設定 • カメラとネットワークの設定 • 床とライトの設定 • チャットの設定 • 利用事例紹介 • まとめ 2
- 3.
- 4. Photon Realtimeとは •リアルタイム通信同期 • マルチプレイヤー対応マッチメイキング • クロスプラットフォーム対応 • クラウド形式だからサーバー構築不要 • 無料でも利用可能 • 契約開発者：67,000以上 • 利用アプリ：67,000以上 4
- 5. Photon Realtimeでできること •ロビーサーバーの利用 • ルームの作成 • マッチメイキング • ランダムマッチメイキング • リアルタイム同期 • ルーム内でのメッセージ送信 • ルーム内でのチャット • イベント送信 • イベントのキャッシュ化 • Remote Procedure Call (RPC) • リモートユーザー認証 • マルチリージョン（東京あり） • 低レイテンシ（プレイヤーホス ト比） • NAT Holepunching • 無料プラグイン、SDKを提供 • 内部ロードバランシングによ る柔軟な拡張性 • シングルプレイヤーモード • オフラインモード • 完全クロスプラットフォーム 5
- 6. Photonの生い立ち • PhotonServer 誕生2009年末 – ミドルウェア • Photon Cloud 誕生2011年 – Photon Serverの技術をSaaS形式で提供 – Private Cloud版（一社専有）も • Photon Cloud 日本上陸2013年4月15日 • Photon Cloud リニューアル2014年6月 6
- 7. Photonの開発メンバー • 開発元はドイツ・ハンブルクのExitGames社 • トップもエンジニアのエンジニア集団 • 創業11年目 • World Golf Tourの ノウハウを Photonに活用 7
- 8. SDK対応プラットフォーム Unity CoronaMarmalade Unreal Engine Cocos2d-x Xamarin Andorid iOS BlackBerry JavaScript, HTML5 Linux Mac OS X PlayStation PlayStation Mobile Xbox dotNet Silverlight Windows (Win32) Windows8 RT Windows Phone Windows8 Phone 8
- 9. マルチリージョン • 世界４拠点のリージョンを利用可能 • ワンソースで簡単に世界展開できる • プレイヤーやCCUの増加時もノンストップで拡張 9
- 10. Photon Realtimeの特徴のまとめ •リアルタイム、マルチプレイヤー、クロスプラッ トフォーム • ロビーサーバーとマッチメイキング機能 • EU, USA, ASIA, JAPANマルチリージョン対応 • Unity, Marmaladeなど開発環境向けSDKとサ ンプルコードを提供 • メールアドレスの登録だけで、無料スタート 10
- 11.
- 12. アカウント取得 サイトへアクセス •下記URLにアクセスしま す • http://photoncloud.jp/ • 画面右上にある [→ Photon Cloud 日本 公式サイトへ] をクリッ クします • 登録は無料です！ 12
- 13. アカウント取得 メールアドレス登録 •Photon Realtime 日本 公式サイトの画面右下 にある入力欄にメール アドレスを入力します • [サインアップ] ボタンを クリックします 13
- 14. アカウント取得 確認メール受信 •メールソフトでPhoton チームからのメールを 受信します • 本文中のリンクURLを クリックします • ご利用規約へ同意いた だける場合、登録ボタ ンをクリックします 14
- 15.
- 16. Unityの準備 始める前に・レイアウトについて •スライド中のUnityの キャプチャーは、レイア ウトを‘Tall’にしていま す • お好みのレイアウトで 結構です 16
- 17. Unityの準備 • まずは下記URLをWebブラウザで開いておい てください http://goo.gl/7WVOrZ 17
- 18. Unityの準備 新プロジェクト作成 •Unityを起動 • 新規プロジェクト作成 • プロジェクト名は PhotonWorkShop でお願いします • 保存場所はお任せしま す 18
- 19.
- 20. Assetのインポート Asset Storeを開く • Asset Storeを開く 20
- 21. Assetのインポート Asset Storeで検索 • ‘Photon Unity Networking’で検索 • ‘Photon Unity Networking Free’をクリック 21
- 22. Assetのインポート ダウンロード •‘Photon Unity Networking Free’をダウンロード 22
- 23. Assetのインポート インポート •Importing package画面 で、全てのアイテムに チェックが付いている事 を確認 • 画面右下の[Import] を クリックします 23
- 24. Assetのインポート Aseetの内容: リファレンス • リファレンス（英文）を同梱 しています • Assets > Photon Unity Networking > PhotonNetwork- Documentation.pdf • 日本語訳文はユーザー助 け合い所で公開しています • photoncloud.jpのサイトでも 公開しました 24
- 25. Assetのインポート Assetの内容: Demo • 5つのデモサンプルが 含まれています • Assets > Photon Unity Networking > Demos 25
- 26.
- 27. Photon Realtimeとの接続設定 PUNWizardを開く • ‘Photon Unity Networking’のウィンド ウを開く (PUN Wizard) • Assetのインポート時に 開いたものがそのまま であれば、それでOKで す 27
- 28. Photon Cloudとの接続設定 PUNWizardを開く • 既にあるアカウント(App ID)を使うので、中ほど の[Setup] をクリック 28
- 29. 準備 PUNの初期設定 •ブラウザで開いたペー ジにあるApp ID 9e85… を’Your AppId’のところ に張付け • Cloud Regionに’Japan’ を選択 • Saveボタンを押して、確 認ダイアログが出たら OK。PUN Wizardを閉じ てください 29
- 30.
- 31. カメラとネットワークの設定 前準備 •新しいシーンを作成 File > New Scene • Hierarchyの中が ‘Main Camera’ だけになればOK 31
- 32. カメラとネットワークの設定 カメラの設定 •‘Hierarchy’内の ‘Main Camera’ を選択 • ‘Inspector’内の ’Transform’ の値を変更 – Position X:0 Y:10 Z:-10 Rotation: X:20 Y:0 Z:0 Scale: X:1 Y:1 Z:1 32
- 33. カメラとネットワークの設定 ネットワーク機能(ルーム入室)実装 •空のゲームオブジェ クトを作成 GameObject > Create Empty • 名前を‘Scripts’に変更 33
- 34. カメラとネットワークの設定 ネットワーク機能(ルーム入室)実装 •今作成した ‘Scripts’ を選択 • ‘Inspector’内の ’Transform’ の値を変更 – Position X:0 Y:1 Z:0 Rotation: X:0 Y:0 Z:0 Scale: X:1 Y:1 Z:1 34
- 35. カメラとネットワークの設定 ネットワーク機能(ルーム入室)実装 •ランダムマッチメイキング のスクリプトを組込みま す • ‘Inspector’の下部の[Add Component] ボタンをク リックし、検索用の入力 窓に ‘Random’ と入力し、検索候補から ‘Random Matchmaker’を 選択して先ほど作った ‘Scripts’にアタッチ 35
- 36. ライトとネットワークの設定 フォルダの作成 •ここまで出来たらシーン を保存する準備をしま す • シーン保存用のフォル ダを‘Assets’直下に ‘PhotonWorkShop’ の名前で作成 36
- 37. カメラとネットワークの設定 シーンの保存 •シーンに名前をつけて 保存 File > Save Scene as… • さきほどの ‘PhotonWorkShop’ フォルダの中に ’GameMain’ の名前で保存 37
- 38. カメラとネットワークの設定 テストラン •ここまでのシーンをPlayし てみましょう • すると、キモい何かが Instantiateされて、一瞬で 落下して行きます • 床を作っていないのでこ れで正常な動作です • 確認できたらPlayボタンを 再度クリックしてPlayを解 除しましょう 38
- 39.
- 40. 床とライトの設定 床の作成 •‘Plane’を使って床を作 成 GameObject > Create Other > Plane • ’Hierarchy’の中に ‘Plane’が追加されます 40
- 41. 床とライトの設定 床の設定 •‘Inspector’内の ’Transform’ の値を変更 – Position X:0 Y:0 Z:0 Rotation: X:0 Y:0 Z:0 Scale: X:10 Y:1 Z:10 41
- 42. 床とライトの設定 テクスチャの貼り込み •‘Project’の検索窓に ‘Pavement_01’ と入力 • 検索結果に表示された ‘Pavement_01’ のうち左または上のも のを先ほどの‘Plane’に ドラッグ&ドロップでア タッチ 42
- 43. 床とライトの設定 ライトの作成 •Directional Lightを使用 GameObject > Create Other > Directional Light • ‘Hierarchy’の中に ‘Directional light’ が追加されます 43
- 44. 床とライトの設定 ライトの設定 •‘Inspector’内の ’Transform’ の値を変更 – Position X:0 Y:10 Z:0 Rotation: X:50 Y:-30 Z:0 Scale: X:1 Y:1 Z:1 44
- 45.
- 46. チャットの設定 チャットスクリプトの追加 •先ほど作成した ‘Scripts’ を選択 46
- 47. チャットの設定 チャットスクリプトの追加 •チャットのスクリプトを組 込みます • ‘Inspector’の下部の[Add Component]ボタンをク リックし、検索用の入力 窓に ‘inroom’ と入力し、検索候補から ‘In Room Chat’を選択 • ‘Photon View’と’In Room Chat’の2つのスクリプトが アタッチされる 47
- 48. チャットの設定 プレイヤー名の変更 •チャットで誰かわかるよ うプレイヤー名を変更 • ‘Scripts’ を選択 • ‘Inspector’内 の’Random Matchmaker’を編集 – ‘Random Matchmaker’ の歯車をクリックしてEdit 48
- 49. チャットの設定 プレイヤー名の変更 •10-11行目の間に ‘Sample Code A’ の3行をコピー&ペーストで追加-> Update()メソッド内に追加 • 12行目の“guest”の中をお好きな名前に変更、終わったら保存 49 Before 8: void Start() 9: { 10: PhotonNetwork.ConnectUsingSettings("0.1"); 11: } After 8: void Start() 9: { 10: PhotonNetwork.ConnectUsingSettings("0.1"); +11: if (string.IsNullOrEmpty(PhotonNetwork.playerName)) { +12: PhotonNetwork.playerName = "guest"; +13: } 14: }
- 50. チャットの設定 シーンの保存 •ここでシーンを保存しま す File > Save Scene 50
- 51. チャットの設定 テストラン •これで完成！ • 自分で作ったリアルタイ ムマルチプレイヤー ゲームをプレイしてみ ましょう • カーソルキーでモンス ターが移動 51
- 52. テストラン ２つ以上のウィンドウで再生すると、その数だけモンス ターが現れます。 52 今回は「AppID」と「リージョン（japan）」を統一してある の、モンスターが全て同じルームに入ってきます。 モンスター同士の動きがしっかり同期されていることを 確かめてみてください！
- 53.
- 54. 利用事例紹介 CUBEMEN 2 • ゲーム種類 – リアルタイムストラテジー • 同時プレイヤー最大6人 • 対応デバイスiOS • 銃や火炎放射器、爆弾などさまざま な武器を持つキューブ兵を操るスト ラテジーゲーム。 Road Warrior • ゲーム種類 – リアルタイム戦闘レース • 同時プレイヤー最大7人 • 対応デバイスiOS / Android • 複数台の車が撃ち合いながらゴール を目指すコンバットレース。世界で 1,200万人以上が遊ぶ。 54
- 55. 利用事例紹介 Mikulus KinectOnline • ゲーム種類 – リアルタイム＋VR • 同時プレイヤー2人〜 • 利用デバイス – Oculus Rift, Kinect • 第1回OGJJで開発された アプリ。仮想空間内であ たかも出会ったり、見つ め合ったり、抱き合える 55
- 56. 利用事例紹介(Photon Server) ダンジョンズ&ゴルフ • ゲーム種類 – リアルタイムファンタジーゴル フ • 同時プレイヤー最大4人 • 対応デバイスiOS • 自分も相手も同じホールで 同時プレイを3G、LTE、Wi-Fi 混在でも快適に実現した、 リアルタイム・マルチプレ イ・ファンタジー本格ゴルフ アプリ 56
- 57. 利用事例紹介(Photon Server) 聖剣伝説RISEof MANA • ゲームの種類 – 3DアクションRPG • 同時プレイヤー最大30名 • 対応デバイスiOS,Android • 聖剣伝説RISE of MANAのレイド バトルにて、Photon Serverが利 用されています！ • リアルタイム通信の部分につい ては非常に簡単に実装できまし た！とコメントいただいています ©2014 SQUARE ENIX CO., LTD. All rights reserved. 57
- 58.
- 59. まとめ • 今回は、【導入編】ということで簡単にキャラ クタを同期させるところまでを作成 • わずかな時間でここまで作成できることを実 感していただけたでしょうか？ 59
- 60. 今後の予定 • 今回は【導入編】 • さらに自分でオブジェクトを作成して同期させ たりする【応用編】、ロビー&ルームまわりの 詳細をお話した【ロビー&ルーム活用編】を予 定 • また、プレイヤーまわり、オブジェクト同期ま わりなど、分野別に活用編を実施予定 • その他、ご要望ありましたら、ぜひぜひお知ら せください！ 60
- 61. Photon ウェブサイト •Photonサービス紹介サイ ト • http://photoncloud.jp/ • 弊社GMOクラウドが運営 する、Photon Realtimeを 日本国内向けにご紹介 するためのサイト • 日本でのご利用事例の ご紹介やイベントカレン ダー、イベントレポートを ご案内中 61
- 62. Photon ウェブサイト •Photon Cloudユーザー 助け合い所 • https://www.facebook.c om/groups/photonclou djp/ • Unityさんのアドバイス でスタートした、Photon Realtimeのユーザー同 士での情報交換や助け 合いを目的とした facebookグループ 62
- 63. Photon SNS •Photon facebookページ http://facebook.com/p hotoncloudjp • Twitterアカウント @PhotonCloudJP • イベントなどのお知らせ やサービスの最新情報 などをつぶやいていま す！ 63
- 64.
Editor's Notes
- #2 ご挨拶、自己紹介、サポートメンバー紹介 Photon Cloudをご存知ですか？と聞いてみる
- #3 大阪版 本日のお題ですが、まずは実際に試していただけるように、Unity上でサンプルのプロジェクトを作っていきます。 福岡版 本日のお題ですが、まずはUnity上にサンプルのプロジェクトを作っていきます。 以下共通 そして最初に、一番簡単な接続方法、ランダムマッチメーカーというものの動きを説明します。 その後、既にあるルームの表示や入室の方法についてお話しします。 そして、プレイヤーを検索したり、そのプレイヤーのいるルームへの入室についてお話して、 自分でルームを作成する方法について説明します。 最後に、ゲームが始まった後にプレイヤー間でシーンを同期する方法についてお話しして終わりとなる予定です。
- #16 まず準備ということで、サンプルプロジェクトを作っていきます。 大阪版 みなさん、PCとWi-Fi接続の準備は整っていますかー？
- #18 大まかな流れを先にお話しすると、Unityで新しいプロジェクトを作成して、 そこにPhotonのアセットをインポートします。 その後、Photon Cloudに接続するための設定を行います。こちらのPUNの初期設定というやつですね。 そして、サンプルのクラスとシーンをダウンロード・インポートして完了となります。 大阪版 Photon Cloudの接続情報やサンプルのダウンロードリンクがありますので、 こちらのURLをWebブラウザで開いておいてください。 また、Asset Storeを使いますので、使ったことがない方はUnityアカウントを確認しておいてください。 福岡版 最初に開いているかと思いますが、開いていない方はこちらのURLを開いておいてください。
- #19 みなさん先ほどのページが開けましたら、Unityを起動してください。 起動しましたら、新しいプロジェクトを作成してください。 既存のプロジェクトに混ぜてしまうととっても悲しいことになりかねないので、 必ず新しいプロジェクトを作成してくださいねー。 プロジェクトの名前は置き場所は、特に指定ありませんので、 お好きな名前・場所で結構です。
- #21 プロジェクトの作成が完了しましたら、Asset Storeを開いてください。 Windowメニューの中のAsset Storeという項目が真ん中下のほうにあるので、 そちらをクリックしてください。
- #22 Asset Storeが開いたら、Photon Unity Networkingと検索してください。 検索はPhotonくらいでも大丈夫かなーと思いますが。 検索すると、こちらの青緑色のPhoton Unity Networkingという無料のものが 出てきますので、そちらをクリックしてください。
- #23 クリックすると、こちらのような画面が出てくるかと思います。 そうしましたら、Downloadボタンの右の下矢印をクリックすると、メニューが出てきます。 その中のDownload and Importをクリックして、ダウンロードとインポートをしてください。 ダウンロードが終わるとインポートするファイルを選択するダイアログが出てくるかと思いますが、 すべて選択された状態でImportのボタンをクリックしてインポートを完了してください。
- #28 PUNのインポートが終わるとそのままPUN Ziwardというウインドウが表示されるかと思います。 そのままそのウィンドウを開いたままにしておいてほしいのですが、閉じてしまった方は、 メニューのWindowsの中のPhoton Unity Networkingをクリックして再度開いてください。
- #30 PUN Wizardが開いたら、2番目にあるSetupというボタンを押してください。するとこちらのような画面が出てきます。 再度またSetupのボタンがある場合はそちらをクリックすると、こちらが出てくるかと思います。 こちらの画面が出ましたら、最初にブラウザで開いていただいたページの頭にApp IDと書かれた、 598dで始まるUUID形式の文字列がありますので、コピーしてPUN WizardのYour AppIdのところに貼付けてください。 次にCloud Regionですが、Japanの項目がありますが今回はあえてAsiaを選択します。 最後に、Saveボタンを押します。すると確認のダイアログが出てくるのでOKを押してください。 そこまでできたらこのPUN Wizardの画面は閉じてしまって大丈夫です。