unityで...

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

【応用編】

Photon 運営事務局

1

本日のお題• Unity の準備• Asset のインポート• Photon Cloud との接続

設定• カメラとネットワー

クの設定

• 床とライトの設定• 弾丸の実装• モンスターの設定• 壁の設定• 衝突判定の実装• まとめ

2

Unityの準備

3

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

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

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

4

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

おいてください

http://goo.gl/sT81oN

5

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

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

成• プロジェクト名は

PhotonWorkShopでお願いします

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

6

Assetのインポート

7

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

• Asset Store を開く

8

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

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

9

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

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

10

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

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

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

11

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

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

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

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

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

12

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

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

• Assets >Photon Unity Networking >Demos

13

Photon Realtimeとの接続設定

14

Photon Realtime との接続設定接続フロー

• 最初はマスターサーバーへ接続– いわゆるロビーサーバー

• 機能– ロビー機能– ルーム作成– マッチメイキング– 収容ゲームサーバー決定

• ( ロードバランサー )

15

Photon Realtime

Master ServerClient

Photon Realtime

Game Server

Photon Realtime

Game Server

Photon Realtime

Game Server

Photon Realtime との接続設定接続フロー

• ロビーサーバーから割当られたゲームサーバーへ接続

• 機能– ルーム管理– オブジェクト同期– イベント同期– メッセージ送受信

16

Photon Realtime

Master ServerClient

Photon Realtime

Game Server

Photon Realtime

Game Server

Photon Realtime

Game Server

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

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

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

17

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

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

18

Photon Realtime との接続設定PUN の初期設定

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

• Cloud Regionに’ Japan’ を選択

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

19

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

20

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

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

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

21

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

• ‘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

22

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

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

• 名前を‘ Scripts’ に変更

23


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

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


24


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

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

25

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

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

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

26

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

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

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

27

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

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

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

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

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

28

床とライトの設定

29

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

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

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

30

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



31

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

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

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

32

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

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

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

33

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


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

34

弾丸の実装

35

弾丸の実装弾丸モデルの作成

• Sphere を使用GameObject> Create Other> Sphere

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

• ‘Sphere’ の名前を‘ Bullet’に変更

36

弾丸の実装弾丸モデルの設定


Rotation: X:0 Y:0 Z:0Scale: X:0.2 Y:0.2 Z:0.2

37

弾丸の実装Prefab 化

• ‘Hierarchy’ 内の‘ Bullet’を’ Project’ 内の下記フォルダにドラッグ & ドロップして Prefab 化Demos> MarcoPolo-Tutorial> Monstergame> Resources

• ‘Hierarchy’ 内の‘ Bullet’の文字が青くなれば OK

38

弾丸の実装弾丸モデルの削除

• Prefab 化ができたら、’ Hierarchy’ 内の‘ Bullet’は削除

39

弾丸の実装Rigidbody 追加

• ‘Bullet’ prefab を選択Demos> MarcoPolo-Tutorial> Monstergame> Resources

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

40

弾丸の実装Prefab の設定

• ‘Bullet’ prefab の ‘ Sphere Collider’– ‘Is Trigger’ チェック入れる

• ‘Rigidbody’– ‘Use Gravity’ チェック外す– ‘Is Kinematic’ チェック入れ

る

41

弾丸の実装Photon View スクリプト追加

• ‘Inspector’ 下部の[Add Component]ボタンをクリック、検索入力窓に‘ PhotonView’と入力、検索候補から ‘ Photon View’ を選択

• ‘Photon View’ を追加することにより、 Photon の同期対象となる 42

弾丸の実装同期スクリプトのコピー

• ‘Project’ の検索入力窓に ‘ Networkc’と入力、検索結果に現れた ‘ NetworkCharacter’を選択

• 選択したままEdit メニュー> Duplicateで’ NetworkCharacter’を複製、 ‘ BulletNetwork’に変更

• 名前を変えた途端に’ BulletNetwork’ は消えるが、検索を解除すれば表示される

43

弾丸の実装同期スクリプトの編集

• 今コピーして作った’ BulletNetwork’をエディタで開く

44

弾丸の実装同期スクリプト : クラス名変更

• BulletNetwork.cs を編集していることを確認

• 3 行目のクラス名をBulletNetworkに変更

45

3:public class NetworkCharacter : Photon.MonoBehaviour

Before

3:public class BulletNetwork : Photon.MonoBehaviour

After

弾丸の実装同期スクリプト : 物理挙動制御

• 6-7 行目の間に‘ Sample Code A-2’の 6 行をコピー & ペーストで追加 -> Awake() メソッド追加

46

6:private Quaternion correctPlayerRot = Quaternion.identity; // We lerp towards this 7:// Update is called once per frame 8:void Update()

Before

6:private Quaternion correctPlayerRot = Quaternion.identity; // We lerp towards this+ 7:void Awake()+ 8:{+ 9: if (photonView.isMine) {+10: rigidbody.isKinematic = false;+11: }+12:} 13:// Update is called once per frame 14:void Update()

After

弾丸の実装同期スクリプト : 不要コード削除 1

• OnPhotonSerializeView() メソッド内の 31-32 行目を削除(Sample Code A-3)

47

27: // We own this player: send the others our data 28: stream.SendNext(transform.position); 29: stream.SendNext(transform.rotation); 30:-31: myThirdPersonController myC = GetComponent<myThirdPersonController>();-32: stream.SendNext((int)myC._characterState); 33:}

Before

27: // We own this player: send the others our data 28: stream.SendNext(transform.position); 29: stream.SendNext(transform.rotation); 30: 33:}

After

弾丸の実装同期スクリプト : 不要コード削除 2

• OnPhotonSerializeView() メソッド内の 38-39 行目を削除(Sample Code A-4)

• ここまでできたらスクリプトを保存してエディタからUnity へ

48

34: // Network player, receive data 35: this.correctPlayerPos = (Vector3)stream.ReceiveNext(); 36: this.correctPlayerRot = (Quaternion)stream.ReceiveNext(); 37:-38: myThirdPersonController myC = GetComponent<myThirdPersonController>();-39: myC._characterState = (CharacterState)stream.ReceiveNext(); 40:}

Before

34: // Network player, receive data 35: this.correctPlayerPos = (Vector3)stream.ReceiveNext(); 36: this.correctPlayerRot = (Quaternion)stream.ReceiveNext(); 37: 38:}

After

弾丸の実装同期スクリプトの追加

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

• 先ほど作成した同期用スクリプトが追加される

49

弾丸の実装同期スクリプトの設定

• ‘BulletNetwork’ スクリプトを’ Photon View’ のObserveにドラッグ & ドロップ

• BulletNetwork がPhoton View から同期スクリプトとして呼ばれるようになる

50

モンスターの設定

51

モンスターの設定弾丸発射スクリプトの作成

• ‘Project’ 内の‘ PhotonWorkShop’フォルダに‘ MonsterFire’という新規の C# スクリプトを作成

52

モンスターの設定弾丸発射スクリプトの編集

• 今作った‘ MonsterFire’スクリプトをエディタで開く

• 4 行目のクラス名がMonsterFireになっていない場合は修正する

53

4:public class MonsterFire : MonoBehaviour

After

モンスターの設定弾丸発射スクリプト : 発射制御

• 13-14 行目の間に‘ Sample Code B’の 5 行をコピー & ペーストで追加 -> Update() メソッド内追加

• 編集が終わったら、保存してエディタから Unity へ

54

13:void update() { 14:}

Before

13:void update() {+14: if (Input.GetKeyDown (KeyCode.H))+15: {+16: GameObject bullet = PhotonNetwork.Instantiate("Bullet", transform.position + new Vector3(0.0f, 1.0f, 0.0f) + (transform.forward * 0.5f), transform.rotation, 0);+17: bullet.rigidbody.velocity = transform.forward * 15.0f;+18: } 19:}

After

モンスターの設定不要スクリプトの削除

• ‘Project’ の検索入力窓に‘ monster’と入力、検索結果から ‘ monsterprefab’を選択

• ‘Inspector’ 内の‘ Click Detector’ を削除

55

モンスターの設定三人称カメラスクリプトの追加

• ‘Inspector’ 下部の[Add Component]ボタンをクリック、検索入力窓に‘ third’と入力、検索候補から ‘ Third Person Camera’ を選択

• 三人称カメラのスクリプトが追加される

56

モンスターの設定弾丸発射スクリプトの追加

• ‘Inspector’ 下部の[Add Component]ボタンをクリック、検索入力窓に‘ mons’と入力、検索候補から ‘ Monster Fire’ を選択

• 先ほど作成した弾丸発射スクリプトが追加される

57

モンスターの設定スクリプトの設定

• 先ほど追加した‘ Third Person Camera’‘Monster Fire’の 2 つのスクリプトのチェックを外す

• Photon で制御を行うためのもの

58

モンスターの設定同期スクリプトの編集

• モンスターの同期スクリプトである‘ NetworkCharacter’を編集

• ‘Project’ の検索入力窓に‘ networkc’と入力、検査結果に現れた‘ NetworkCharacter’を選択

• ‘NetworkCharacter’ をエディタで開く

59

モンスターの設定同期スクリプト : スクリプト制御

• 6-7 行目の間に‘ Sample Code C-1’の 7 行をコピー & ペーストで追加 -> Awake() メソッド追加

60

6:private Quaternion correctPlayerRot = Quaternion.identity; // We lerp towards this 7:// Update is called once per frame 8:void Update()

Before

6:private Quaternion correctPlayerRot = Quaternion.identity; // We lerp towards this+ 7:void Awake()+ 8:{+ 9: if (photonView.isMine) {+10: GetComponent<ThirdPersonCamera>().enabled = true;+11: GetComponent<MonsterFire>().enabled = true;+12: }+13:} 14:// Update is called once per frame

After

モンスターの設定同期スクリプト : 削除処理

• 44-45 行目の間に‘ Sample Code C-2’の 5 行をコピー & ペーストで追加 -> Destroy() メソッド追加

61

43: } 44: } 45:}

Before

43: } 44: }+45: [RPC]+46: void destroy()+47: {+48: PhotonNetwork.Destroy(gameObject);+49: } 50:}

After

モンスターの設定シーンの保存

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

62

モンスターの設定テストラン

• ここでシーンを Playしてみる

• モンスターが石畳の上に現れる

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

• [H] キーで弾丸発射• テスト終わった

ら、 Play 解除するのをお忘れなく！

63

壁の設定

64

壁の設定壁の作成

• Cube を使って壁を作成GameObject> Create Other> Cube

• ‘Cube’ の名前を‘ Wall1’に変更

65

壁の設定奥の壁の設定

• ‘Inspector’ 内の’ Tag’ を‘ Finish’に変更



66

壁の設定壁の複製

• 先ほど作った’ Wall1’ から複製して‘ Wall3’を作成

67

壁の設定手前の壁の設定

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


– Wall1 からの変更はPosition Z を -50 に

68


• ’Wall1’ から複製して‘ Wall2’を作成

69

壁の設定右の壁の設定



70


• ’Wall2’ から複製して‘ Wall4’を作成

71

壁の設定左の壁の設定

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


– Wall2 からの変更はPosition X を -50 に

72

壁の設定シーンの保存

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

73

衝突判定の実装

74

衝突判定の実装衝突判定スクリプトの作成

• ‘Project’ 内の‘ PhotonWorkShop’フォルダに‘ Bullet’という新規の C# スクリプトを作成

75

衝突判定の実装衝突判定スクリプトの編集

• 今作った‘ Bullet’スクリプトをエディタで開く

• 4 行目のクラス名がBulletになっていない場合は修正する

76

4:public class Bullet : MonoBehaviour

After

衝突判定の実装不要部分の削除

• 6-14 行目を削除 -> Bullet クラスを空に

77

5:public class Bullet : MonoBehaviour {- 6: // Use this for initialization- 7: void Start () {- 8:- 9: }-10:-11: // Update is called once per frame-12: void Update () {-13:-14: } 15:}

Before

衝突判定の実装衝突判定メソッドの追加

• 残った 5-6 行目の間に、Sample Code Dの 18 行を追加 -> OnTriggerEnter() メソッドの追加

• 編集が終わったら、保存してエディタから Unity へ

78

+ 5:public class Bullet : MonoBehaviour {+ 6: void OnTriggerEnter(Collider other)+ 7: {+ 8: PhotonView myView = gameObject.GetComponent<PhotonView>();+ 9: if (other.gameObject.tag == "Player") {…+21: if (myView.isMine) {+22: PhotonNetwork.Destroy(gameObject);+23: }+24: } 25:}

After

衝突判定の実装弾丸へ衝突判定スクリプトの追加

• ‘Bullet’ prefab を選択• ‘Inspector’ 下部の

[Add Component]ボタンをクリック、検索入力窓に‘ bu’と入力、検索候補から ‘ Bullet’ を選択

• 衝突判定のスクリプトが追加される

79

衝突判定の実装シーンの保存

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

80

衝突判定の実装テストラン

• ここでシーンを Playしてみる

• モンスターが石畳の上に現れる

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

• [H] キーで弾丸発射• テスト終わった

ら、 Play 解除するのをお忘れなく！

81

まとめ

82

まとめ• 今回は、【応用編】ということで簡単な

オンラインシューティングゲームを作成• わずかな時間でここまで作成できること

を実感していただけたでしょうか？

83

今後の予定• 今回は【応用編】• ロビー & ルームまわりの詳細をお話した

【ロビー & ルーム活用編】を予定• また、プレイヤーまわり、オブジェクト同

期まわりなど、分野別に活用編を実施予定

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

84

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

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

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

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

85

http://photoncloud.jp/



Photon Cloud ウェブサイト• PhotonCloud facebook

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

photoncloudjp• PhotonCloud の日本版

facebook ページ• イベント、セミナー、

ワークショップの告知やダイジェストレポートを配信しています

86

http://facebook.com/photoncloudjp





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

け合い所• https://

www.facebook.com/groups/photoncloudjp/

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

87

https://www.facebook.com/groups/photoncloudjp/






Photon Cloud ウェブサイト• Twitter アカウント

@PhotonCloudJP• イベントなどのお知

らせやサービスの最新情報などをつぶやいています！

88

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

89

unityで...

Technology