Unity x Photon Realtime でオンラインゲームを作っちゃおう

【導入編】

Photon 運営事務局

1

本日のお題• Photon Realtime とは• アカウント取得• Unity の準備• Asset のインポート• Photon Realtime との接続設定• カメラとネットワークの設定• 床とライトの設定• チャットの設定• 利用事例紹介• まとめ

2

Photon Realtimeとは

3

Photon Realtime とは• リアルタイム通信同期• マルチプレイヤー対応マッチメイキング• クロスプラットフォーム対応• クラウド形式だからサーバー構築不要• 無料でも利用可能• 契約開発者： 67,000 以上• 利用アプリ： 67,000 以上

4

Photon Realtime でできること• ロビーサーバーの利用• ルームの作成• マッチメイキング• ランダムマッチメイキング• リアルタイム同期• ルーム内でのメッセージ送信• ルーム内でのチャット• イベント送信• イベントのキャッシュ化• Remote Procedure Call

(RPC)• リモートユーザー認証

• マルチリージョン （東京あり）

• 低レイテンシ （プレイヤーホスト比）

• NAT Holepunching• 無料プラグイン、 SDK を提供• 内部ロードバランシングによ

る柔軟な拡張性• シングルプレイヤーモード• オフラインモード• 完全クロスプラットフォーム

5

Photon の生い立ち• Photon Server 誕生 2009 年末– ミドルウェア

• Photon Cloud 誕生 2011 年– Photon Server の技術を SaaS 形式で提供– Private Cloud 版（一社専有）も

• Photon Cloud 日本上陸 2013 年 4 月 15 日• Photon Cloud リニューアル 2014 年 6 月

6

Photon の開発メンバー• 開発元はドイツ・ハンブルクの ExitGames

社• トップもエンジニアのエンジニア集団• 創業 11 年目• World Golf Tour の

ノウハウをPhoton に活用

7

SDK 対応プラットフォームUnity Corona Marmalade

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

マルチリージョン• 世界４拠点のリージョンを利用可能• ワンソースで簡単に世界展開できる• プレイヤーや CCU の増加時もノンストップで拡

張

9

Photon Realtime の特徴のまとめ• リアルタイム、マルチプレイヤー、クロス

プラットフォーム• ロビーサーバーとマッチメイキング機能• EU, USA, ASIA, JAPAN マルチリージョン対応• Unity, Marmalade など開発環境向け SDK と

サンプルコードを提供• メールアドレスの登録だけで、無料ス

タート

10

アカウント取得

11

アカウント取得サイトへアクセス

• 下記 URL にアクセスします

• http://photoncloud.jp/• 画面右上にある

[→ Photon Cloud 日本公式サイトへ ] をクリックします

• 登録は無料です！

12

アカウント取得メールアドレス登録

• Photon Realtime 日本公式サイトの画面右下にある入力欄にメールアドレスを入力します

• [ サインアップ ] ボタンをクリックします

13

アカウント取得確認メール受信

• メールソフトで Photon チームからのメールを受信します

• 本文中のリンク URLをクリックします

• ご利用規約へ同意いただける場合、登録ボタンをクリックします

14

Unityの準備

15

Unity の準備始める前に・レイアウトについて

• スライド中の Unity のキャプチャーは、レイアウトを ‘ Tall’ にしています

• お好みのレイアウトで結構です

16

Unity の準備• まずは下記 URL を Web ブラウザで開いて

おいてください

http://goo.gl/7WVOrZ

17

Unity の準備新プロジェクト作成

• Unity を起動• 新規プロジェクト作

成• プロジェクト名は

PhotonWorkShopでお願いします

• 保存場所はお任せします

18

Assetのインポート

19

Asset のインポートAsset Store を開く

• Asset Store を開く

20

Asset のインポートAsset Store で検索

• ‘Photon Unity Networking’ で検索• ‘Photon Unity Networking Free’ をクリック

21

Asset のインポートダウンロード

• ‘Photon Unity Networking Free’ をダウンロード

22

Asset のインポートインポート

• Importing package 画面で、全てのアイテムにチェックが付いている事を確認

• 画面右下の [Import] をクリックします

23

Asset のインポートAseet の内容 : リファレンス

• リファレンス（英文）を同梱しています

• Assets >Photon Unity Networking > PhotonNetwork-Documentation.pdf

• 日本語訳文はユーザー助け合い所で公開しています

• photoncloud.jp のサイトでも公開しました

24

Asset のインポートAsset の内容 : Demo

• 5 つのデモサンプルが含まれています

• Assets >Photon Unity Networking >Demos

25

Photon Realtimeとの接続設定

26

Photon Realtime との接続設定PUN Wizard を開く

• ‘Photon Unity Networking’ のウィンドウを開く(PUN Wizard)

• Asset のインポート時に開いたものがそのままであれば、それで OK です

27

Photon Cloud との接続設定PUN Wizard を開く

• 既にあるアカウント(App ID) を使うので、中ほどの [Setup] をクリック

28

準備PUN の初期設定

• ブラウザで開いたページにある App ID9e85…を’ Your AppId’ のところに張付け

• Cloud Regionに’ Japan’ を選択

• Save ボタンを押して、確認ダイアログが出たら OK。 PUN Wizard を閉じてください

29

カメラとネットワークの設定

30

カメラとネットワークの設定前準備

• 新しいシーンを作成File > New Scene

• Hierarchy の中が‘ Main Camera’だけになれば OK

31

カメラとネットワークの設定カメラの設定

• ‘Hierarchy’ 内の‘ Main Camera’を選択

• ‘Inspector’ 内の’ Transform’の値を変更– Position X:0 Y:10 Z:-10

Rotation: X:20 Y:0 Z:0Scale: X:1 Y:1 Z:1

32

カメラとネットワークの設定ネットワーク機能 ( ルーム入室 )実装

• 空のゲームオブジェクトを作成GameObject> Create Empty

• 名前を‘ Scripts’ に変更

33

カメラとネットワークの設定ネットワーク機能 ( ルーム入室 )実装

• 今作成した‘ Scripts’を選択

• ‘Inspector’ 内の’ Transform’の値を変更– Position X:0 Y:1 Z:0

Rotation: X:0 Y:0 Z:0Scale: X:1 Y:1 Z:1

34

カメラとネットワークの設定ネットワーク機能 ( ルーム入室 )実装

• ランダムマッチメイキングのスクリプトを組込みます

• ‘Inspector’ の下部の [Add Component] ボタンをクリックし、検索用の入力窓に‘ Random’と入力し、検索候補から ‘ Random Matchmaker’ を選択して先ほど作った ‘ Scripts’ にアタッチ

35

ライトとネットワークの設定フォルダの作成

• ここまで出来たらシーンを保存する準備をします

• シーン保存用のフォルダを‘ Assets’直下に ‘ PhotonWorkShop’の名前で作成

36

カメラとネットワークの設定シーンの保存

• シーンに名前をつけて保存File > Save Scene as…

• さきほどの ‘ PhotonWorkShop’フォルダの中に’ GameMain’の名前で保存

37

カメラとネットワークの設定テストラン

• ここまでのシーンを Playしてみましょう

• すると、キモい何かが Instantiate されて、一瞬で落下して行きます

• 床を作っていないのでこれで正常な動作です

• 確認できたら Play ボタンを再度クリックして Playを解除しましょう

38

床とライトの設定

39

床とライトの設定床の作成

• ‘Plane’ を使って床を作成GameObject> Create Other> Plane

• ’Hierarchy’ の中に ‘ Plane’ が追加されます

40

床とライトの設定床の設定

• ‘Inspector’ 内の’ Transform’の値を変更– Position X:0 Y:0 Z:0

Rotation: X:0 Y:0 Z:0Scale: X:10 Y:1 Z:10

41

床とライトの設定テクスチャの貼り込み

• ‘Project’ の検索窓に‘ Pavement_01’と入力

• 検索結果に表示された‘ Pavement_01’のうち左または上のものを先ほどの‘ Plane’ にドラッグ & ドロップでアタッチ

42

床とライトの設定ライトの作成

• Directional Light を使用GameObject> Create Other> Directional Light

• ‘Hierarchy’ の中に ‘ Directional light’が追加されます

43

床とライトの設定ライトの設定

• ‘Inspector’ 内の’ Transform’の値を変更– Position X:0 Y:10 Z:0

Rotation: X:50 Y:-30 Z:0Scale: X:1 Y:1 Z:1

44

チャットの設定

45

チャットの設定チャットスクリプトの追加

• 先ほど作成した‘ Scripts’を選択

46

チャットの設定チャットスクリプトの追加

• チャットのスクリプトを組込みます

• ‘Inspector’ の下部の [Add Component] ボタンをクリックし、検索用の入力窓に‘ inroom’と入力し、検索候補から ‘ In Room Chat’ を選択

• ‘Photon View’ と’ In Room Chat’ の 2 つのスクリプトがアタッチされる

47

チャットの設定プレイヤー名の変更

• チャットで誰かわかるようプレイヤー名を変更

• ‘Scripts’を選択

• ‘Inspector’ 内の’ Random Matchmaker’ を編集– ‘Random

Matchmaker’ の歯車をクリックして Edit

48

チャットの設定プレイヤー名の変更

• 10-11行目の間に‘ Sample Code A’の 3行をコピー &ペーストで追加 -> Update() メソッド内に追加

• 12行目の“ guest” の中をお好きな名前に変更、終わったら保存

49

8: void Start() 9: { 10: PhotonNetwork.ConnectUsingSettings("0.1"); 11: }

Before

8: void Start() 9: { 10: PhotonNetwork.ConnectUsingSettings("0.1");+11: if (string.IsNullOrEmpty(PhotonNetwork.playerName)) {+12: PhotonNetwork.playerName = "guest";+13: } 14: }

After

チャットの設定シーンの保存

• ここでシーンを保存しますFile> Save Scene

50

チャットの設定テストラン

• これで完成！• 自分で作ったリアル

タイムマルチプレイヤーゲームをプレイしてみましょう

• カーソルキーでモンスターが移動

51

テストラン

52

２つ以上のウィンドウで再生すると、その数だけモンスターが現れます。

今回は「 AppID」と「リージョン（ japan ）」を統一してあるの、モンスターが全て同じルームに入ってきます。

モンスター同士の動きがしっかり同期されていることを確かめてみてください！

利用事例紹介

53

利用事例紹介CUBEMEN 2• ゲーム種類

– リアルタイムストラテジー• 同時プレイヤー 最大 6人• 対応デバイス iOS• 銃や火炎放射器、爆弾などさまざまな武器を持つキューブ兵を操るストラテジーゲーム。

Road Warrior• ゲーム種類

– リアルタイム戦闘レース• 同時プレイヤー 最大 7人• 対応デバイス iOS / Android• 複数台の車が撃ち合いながらゴールを

目指すコンバットレース。世界で 1,200万人以上が遊ぶ。

54

利用事例紹介Mikulus Kinect Online

• ゲーム種類– リアルタイム＋ VR

• 同時プレイヤー 2人〜• 利用デバイス

– Oculus Rift, Kinect

• 第 1回 OGJJ で開発されたアプリ。仮想空間内であたかも出会ったり、見つめ合ったり、抱き合える

55

利用事例紹介 (Photon Server)ダンジョンズ&ゴルフ

• ゲーム種類– リアルタイムファンタジーゴルフ

• 同時プレイヤー 最大4人

• 対応デバイス iOS• 自分も相手も同じホール

で同時プレイを3G 、 LTE 、 Wi-Fi混在でも快適に実現した、リアルタイム・マルチプレイ・ファンタジー本格ゴルフアプリ

56

利用事例紹介 (Photon Server)聖剣伝説 RISE of MANA

• ゲームの種類– 3D アクション RPG

• 同時プレイヤー最大 30 名• 対応デバイス

iOS,Android

• 聖剣伝説 RISE of MANA のレイドバトルにて、 Photon Serverが利用されています！

• リアルタイム通信の部分については非常に簡単に実装できました！とコメントいただいています

©2014 SQUARE ENIX CO., LTD. All rights reserved.

57

まとめ

58

まとめ• 今回は、【導入編】ということで簡単に

キャラクタを同期させるところまでを作成

• わずかな時間でここまで作成できることを実感していただけたでしょうか？

59

今後の予定• 今回は【導入編】• さらに自分でオブジェクトを作成して同期

させたりする【応用編】、ロビー & ルームまわりの詳細をお話した【ロビー & ルーム活用編】を予定

• また、プレイヤーまわり、オブジェクト同期まわりなど、分野別に活用編を実施予定

• その他、ご要望ありましたら、ぜひぜひお知らせください！

60

Photon ウェブサイト• Photon サービス紹介サ

イト• http://photoncloud.jp/• 弊社 GMO クラウドが運

営する、 Photon Realtimeを日本国内向けにご紹介するためのサイト

• 日本でのご利用事例のご紹介やイベントカレンダー、イベントレポートをご案内中

61

Photon ウェブサイト• Photon Cloud ユーザー助

け合い所• https://

www.facebook.com/groups/photoncloudjp/

• Unity さんのアドバイスでスタートした、 Photon Realtime のユーザー同士での情報交換や助け合いを目的とした facebook グループ

62

Photon SNS

• Photon facebookページhttp://facebook.com/photoncloudjp

• Twitter アカウント@PhotonCloudJP

• イベントなどのお知らせやサービスの最新情報などをつぶやいています！

63

ありがとうございました！

64