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.
Unity x Photon Realtimeで 
オンラインゲームを作っちゃおう 
【応用編】 
Photon 運営事務局 
1
本日のお題 
• Unityの準備 
• Assetのインポート 
• Photon Cloudとの接続 
設定 
• カメラとネットワークの 
設定 
• 床とライトの設定 
• 弾丸の実装 
• モンスターの設定 
• 壁の設定 
• 衝突...
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- 
Documentatio...
Assetのインポート 
Assetの内容: Demo 
• 5つのデモサンプルが 
含まれています 
• Assets > 
Photon Unity 
Networking > 
Demos 
13
Photon Realtimeとの接続設定 
14
Photon Realtimeとの接続設定 
接続フロー 
• 最初はマスターサーバーへ 
接続 
– いわゆるロビーサーバー 
• 機能 
– ロビー機能 
– ルーム作成 
– マッチメイキング 
– 収容ゲームサーバー決定 
• (ロード...
Photon Realtimeとの接続設定 
接続フロー 
• ロビーサーバーから割当ら 
れたゲームサーバーへ接 
続 
• 機能 
– ルーム管理 
– オブジェクト同期 
– イベント同期 
– メッセージ送受信 
16 
Photon ...
Photon Realtimeとの接続設定 
PUN Wizardを開く 
• ‘Photon Unity 
Networking’のウィンド 
ウを開く 
(PUN Wizard) 
• Assetのインポート時に 
開いたものがそのまま 
...
Photon Realtimeとの接続設定 
PUN Wizardを開く 
• 既にあるアカウント(App 
ID)を使うので、中ほど 
の[Setup]をクリック 
18
Photon Realtimeとの接続設定 
PUNの初期設定 
• ブラウザで開いたペー 
ジにあるApp ID 
9e85… 
を’Your AppId’のところ 
に張付け 
• Cloud Regionに’Japan’ 
を選択 
• ...
カメラとネットワークの設定 
20
カメラとネットワークの設定 
前準備 
• 新しいシーンを作成 
File > New Scene 
• Hierarchyの中が 
‘Main Camera’ 
だけになればOK 
21
カメラとネットワークの設定 
カメラの設定 
• ‘Hierarchy’内の 
‘Main Camera’ 
を選択 
• ‘Inspector’内の 
’Transform’ 
の値を変更 
– Position X:0 Y:10 Z:-10...
カメラとネットワークの設定 
ネットワーク機能(ルーム入室)実装 
• 空のゲームオブジェ 
クトを作成 
GameObject 
> Create Empty 
• 名前を‘Scripts’に変更 
23
カメラとネットワークの設定 
ネットワーク機能(ルーム入室)実装 
• 今作成した 
‘Scripts’ 
を選択 
• ‘Inspector’内の 
’Transform’ 
の値を変更 
– Position X:0 Y:1 Z:0 
Ro...
カメラとネットワークの設定 
ネットワーク機能(ルーム入室)実装 
• ランダムマッチメイキング 
のスクリプトを組込みま 
す 
• ‘Inspector’の下部の[Add 
Component]ボタンをク 
リックし、検索用の入力 
窓に ...
カメラとネットワークの設定 
フォルダの作成 
• ここまで出来たらシーン 
を保存する準備をしま 
す 
• シーン保存用のフォル 
ダを‘Assets’直下に 
‘PhotonWorkShop’ 
の名前で作成 
26
カメラとネットワークの設定 
シーンの保存 
• シーンに名前をつけて 
保存 
File > Save Scene as… 
• さきほどの 
‘PhotonWorkShop’ 
フォルダの中に 
’GameMain’ 
の名前で保存 
27
カメラとネットワークの設定 
テストラン 
• ここまでのシーンをPlayし 
てみましょう 
• すると、キモい何かが 
Instantiateされて、一瞬で 
落下して行きます 
• 床を作っていないのでこ 
れで正常な動作です 
• 確認...
床とライトの設定 
29
床とライトの設定 
床の作成 
• ‘Plane’を使って床を作 
成 
GameObject 
> Create Other 
> Plane 
• ’Hierarchy’の中に 
‘Plane’が追加されます 
30
床とライトの設定 
床の設定 
• ‘Inspector’内の 
’Transform’ 
の値を変更 
– Position X:0 Y:0 Z:0 
Rotation: X:0 Y:0 Z:0 
Scale: X:10 Y:1 Z:10 
...
床とライトの設定 
テクスチャの貼り込み 
• ‘Project’の検索窓に 
‘Pavement_01’ 
と入力 
• 検索結果に表示された 
‘Pavement_01’ 
のうち左または上のも 
のを先ほどの‘Plane’に 
ドラッグ&...
床とライトの設定 
ライトの作成 
• Directional Lightを使用 
GameObject 
> Create Other 
> Directional Light 
• ‘Hierarchy’の中に 
‘Directional ...
床とライトの設定 
ライトの設定 
• ‘Inspector’内の 
’Transform’ 
の値を変更 
– Position X:0 Y:10 Z:0 
Rotation: X:50 Y:-30 Z:0 
Scale: X:1 Y:1 Z...
弾丸の実装 
35
弾丸の実装 
弾丸モデルの作成 
• Sphereを使用 
GameObject 
> Create Other 
> Sphere 
• ‘Hierarchy’の中に 
‘Sphere’が追加されま 
す 
• ‘Sphere’の名前を 
‘...
弾丸の実装 
弾丸モデルの設定 
• ‘Inspector’内の 
’Transform’ 
の値を変更 
– Position X:0 Y:0 Z:0 
Rotation: X:0 Y:0 Z:0 
Scale: X:0.2 Y:0.2 Z:...
弾丸の実装 
Prefab化 
• ‘Hierarchy’内の 
‘Bullet’ 
を’Project’内の下記フォ 
ルダにドラッグ&ドロップ 
してPrefab化 
Demos 
> MarcoPolo-Tutorial 
> Monst...
弾丸の実装 
弾丸モデルの削除 
• Prefab化ができた 
ら、’Hierarchy’内の 
‘Bullet’ 
は削除 
39
弾丸の実装 
Rigidbody追加 
• ‘Bullet’ prefabを選択 
Demos 
> MarcoPolo-Tutorial 
> Monstergame 
> Resources 
• ‘Inspector’下部の 
[Add ...
弾丸の実装 
Prefabの設定 
• ‘Bullet’ prefabの 
‘Sphere Collider’ 
– ‘Is Trigger’ チェック入れる 
• ‘Rigidbody’ 
– ‘Use Gravity’ チェック外す 
– ...
弾丸の実装 
Photon Viewスクリプト追加 
• ‘Inspector’下部の 
[Add Component] 
ボタンをクリック、検索 
入力窓に 
‘PhotonView’ 
と入力、検索候補から 
‘Photon View’を選...
弾丸の実装 
同期スクリプトのコピー 
• ‘Project’の検索入力窓に 
‘Networkc’ 
と入力、検索結果に現れた 
‘NetworkCharacter’ 
を選択 
• 選択したまま 
Edit メニュー 
> Duplicat...
弾丸の実装 
同期スクリプトの編集 
• 今コピーして作った 
’BulletNetwork’ 
をエディタで開く 
44
弾丸の実装 
同期スクリプト: クラス名変更 
• BulletNetwork.csを編集していることを確認 
• 3行目のクラス名を 
BulletNetwork 
に変更 
45 
Before 
3:public class Networ...
弾丸の実装 
同期スクリプト: 物理挙動制御 
• 6-7行目の間に 
‘Sample Code A-2’ 
の6行をコピー&ペーストで追加-> Awake()メソッド追加 
46 
Before 
6:private Quaternion c...
弾丸の実装 
同期スクリプト: 不要コード削除1 
• OnPhotonSerializeView()メソッド内の31-32行目を削除 
(Sample Code A-3) 
47 
Before 
27: // We own this pla...
弾丸の実装 
同期スクリプト: 不要コード削除2 
• OnPhotonSerializeView()メソッド内の38-39行目を削除 
(Sample Code A-4) 
• ここまでできたらスクリプトを保存してエディタからUnityへ 
...
弾丸の実装 
同期スクリプトの追加 
• ‘Inspector’下部の 
[Add Component] 
ボタンをクリック、検索 
入力窓に 
‘Bullet’ 
と入力、検索候補から 
‘Bullet Network’を選択 
• 先ほど作...
弾丸の実装 
同期スクリプトの設定 
• ‘BulletNetwork’スクリプ 
トを’Photon View’の 
Observe 
にドラッグ&ドロップ 
• BulletNetworkがPhoton 
Viewから同期スクリプト 
とし...
モンスターの設定 
51
モンスターの設定 
弾丸発射スクリプトの作成 
• ‘Project’内の 
‘PhotonWorkShop’フォ 
ルダに 
‘MonsterFire’ 
という新規のC#スクリプ 
トを作成 
52
モンスターの設定 
弾丸発射スクリプトの編集 
• 今作った 
‘MonsterFire’ 
スクリプトをエディタで開く 
• 4行目のクラス名が 
MonsterFire 
になっていない場合は修正する 
53 
After 
4:publi...
モンスターの設定 
弾丸発射スクリプト: 発射制御 
• 13-14行目の間に 
‘Sample Code B’ 
の5行をコピー&ペーストで追加-> Update()メソッド内追加 
• 編集が終わったら、保存してエディタからUnityへ 
...
モンスターの設定 
不要スクリプトの削除 
• ‘Project’の検索入力窓 
に 
‘monster’ 
と入力、検索結果から 
‘monsterprefab’ 
を選択 
• ‘Inspector’内の 
‘Click Detector’...
モンスターの設定 
三人称カメラスクリプトの追加 
• ‘Inspector’下部の 
[Add Component] 
ボタンをクリック、検索 
入力窓に 
‘third’ 
と入力、検索候補から 
‘Third Person Camera’...
モンスターの設定 
弾丸発射スクリプトの追加 
• ‘Inspector’下部の 
[Add Component] 
ボタンをクリック、検索 
入力窓に 
‘mons’ 
と入力、検索候補から 
‘Monster Fire’を選択 
• 先ほど...
モンスターの設定 
スクリプトの設定 
• 先ほど追加した 
‘Third Person Camera’ 
‘Monster Fire’ 
の2つのスクリプトの 
チェックを外す 
• Photonで制御を行うた 
めのもの 
58
モンスターの設定 
同期スクリプトの編集 
• モンスターの同期スクリ 
プトである 
‘NetworkCharacter’ 
を編集 
• ‘Project’の検索入力窓に 
‘networkc’ 
と入力、検査結果に現れ 
た 
‘Netw...
モンスターの設定 
同期スクリプト: スクリプト制御 
• 6-7行目の間に 
‘Sample Code C-1’ 
の7行をコピー&ペーストで追加-> Awake()メソッド追加 
60 
Before 
6:private Quaterni...
モンスターの設定 
同期スクリプト: 削除処理 
• 44-45行目の間に 
‘Sample Code C-2’ 
の5行をコピー&ペーストで追加-> Destroy()メソッド追加 
61 
Before 
43: } 
44: } 
45:...
モンスターの設定 
シーンの保存 
• ここで一旦シーンを保 
存します 
File 
> Save Scene 
62
モンスターの設定 
テストラン 
• ここでシーンをPlayして 
みる 
• モンスターが石畳の上 
に現れる 
• カールキーでモンス 
ターが動く 
• [H]キーで弾丸発射 
• テスト終わったら、Play 
解除するのをお忘れな 
く...
壁の設定 
64
壁の設定 
壁の作成 
• Cubeを使って壁を作成 
GameObject 
> Create Other 
> Cube 
• ‘Cube’の名前を 
‘Wall1’ 
に変更 
65
壁の設定 
奥の壁の設定 
• ‘Inspector’内の’Tag’を 
‘Finish’ 
に変更 
• ‘Inspector’内の 
’Transform’ 
の値を変更 
– Position X:0 Y:5 Z:50 
Rotation...
壁の設定 
壁の複製 
• 先ほど作った’Wall1’か 
ら複製して 
‘Wall3’ 
を作成 
67
壁の設定 
手前の壁の設定 
• ‘Inspector’内の 
’Transform’ 
の値を変更 
– Position X:0 Y:5 Z:-50 
Rotation: X:0 Y:0 Z:0 
Scale: X:100 Y:10 Z:1...
壁の設定 
壁の複製 
• ’Wall1’から複製して 
‘Wall2’ 
を作成 
69
壁の設定 
右の壁の設定 
• ‘Inspector’内の 
’Transform’ 
の値を変更 
– Position X:50 Y:5 Z:0 
Rotation: X:0 Y:0 Z:0 
Scale: X:1 Y:10 Z:100 
...
壁の設定 
壁の複製 
• ’Wall2’から複製して 
‘Wall4’ 
を作成 
71
壁の設定 
左の壁の設定 
• ‘Inspector’内の 
’Transform’ 
の値を変更 
– Position X:-50 Y:5 Z:0 
Rotation: X:0 Y:0 Z:0 
Scale: X:1 Y:10 Z:100 ...
壁の設定 
シーンの保存 
• ここで一旦シーンを保 
存します 
File 
> Save Scene 
73
衝突判定の実装 
74
衝突判定の実装 
衝突判定スクリプトの作成 
• ‘Project’内の 
‘PhotonWorkShop’フォ 
ルダに 
‘Bullet’ 
という新規のC#スクリプ 
トを作成 
75
衝突判定の実装 
衝突判定スクリプトの編集 
• 今作った 
‘Bullet’ 
スクリプトをエディタで開く 
• 4行目のクラス名が 
Bullet 
になっていない場合は修正する 
76 
After 
4:public class Bul...
衝突判定の実装 
不要部分の削除 
• 6-14行目を削除-> Bulletクラスを空に 
77 
Before 
5:public class Bullet : MonoBehaviour { 
- 6: // Use this for in...
衝突判定の実装 
衝突判定メソッドの追加 
• 残った5-6行目の間に、 
Sample Code D 
の18行を追加-> OnTriggerEnter()メソッドの追加 
• 編集が終わったら、保存してエディタからUnityへ 
78 
A...
衝突判定の実装 
弾丸へ衝突判定スクリプトの追加 
• ‘Bullet’ prefabを選択 
• ‘Inspector’下部の 
[Add Component] 
ボタンをクリック、検索 
入力窓に 
‘bu’ 
と入力、検索候補から 
‘B...
衝突判定の実装 
シーンの保存 
• シーンを保存します 
File 
> Save Scene 
80
衝突判定の実装 
テストラン 
• ここでシーンをPlayして 
みる 
• モンスターが石畳の上 
に現れる 
• カールキーでモンス 
ターが動く 
• [H]キーで弾丸発射 
• テスト終わったら、Play 
解除するのをお忘れな 
く!...
まとめ 
82
まとめ 
• 今回は、【応用編】ということで簡単なオンライ 
ンシューティングゲームを作成 
• わずかな時間でここまで作成できることを実 
感していただけたでしょうか? 
83
今後の予定 
• 今回は【応用編】 
• ロビー&ルームまわりの詳細をお話した【ロ 
ビー&ルーム活用編】を予定 
• また、プレイヤーまわり、オブジェクト同期ま 
わりなど、分野別に活用編を実施予定 
• その他、ご要望ありましたら、ぜひぜひ...
Photon Cloud ウェブサイト 
• PhotonCloudサービス紹 
介サイト 
• http://photoncloud.jp/ 
• 弊社GMOクラウドが運営 
する、PhotonCloudを日本 
国内向けにご紹介するた 
め...
Photon Cloud ウェブサイト 
• PhotonCloud facebook 
ページ 
• http://facebook.com/p 
hotoncloudjp 
• PhotonCloudの日本版 
facebookページ 
•...
Photon Cloud ウェブサイト 
• PhotonCloudユーザー 
助け合い所 
• https://www.facebook.c 
om/groups/photonclou 
djp/ 
• Unityさんのアドバイス 
でスター...
Photon Cloud ウェブサイト 
• Twitterアカウント 
@PhotonCloudJP 
• イベントなどのお知らせ 
やサービスの最新情報 
などをつぶやいていま 
す! 
88
ありがとうございました! 
89
Upcoming SlideShare
Loading in …5
×

Unityで Photonを使ってリアルタイム・マルチプレイヤーゲームを作っちゃおう【応用編】

16,779 views

Published on

Published in: Technology
  • Light and its nature have caused a lot of ink to flow during these last decades. Its dual behavior is partly explained by (1)Double-slit experiment of Thomas Young - who represents the photon’s motion as a wave - and also by (2)the Photoelectric effect in which the photon is considered as a particle. A Revolution: SALEH THEORY solves this ambiguity and this difficulty presenting a three-dimensional trajectory for the photon's motion and a new formula to calculate its energy. More information on https://youtu.be/mLtpARXuMbM
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Unityで Photonを使ってリアルタイム・マルチプレイヤーゲームを作っちゃおう【応用編】

  1. 1. Unity x Photon Realtimeで オンラインゲームを作っちゃおう 【応用編】 Photon 運営事務局 1
  2. 2. 本日のお題 • Unityの準備 • Assetのインポート • Photon Cloudとの接続 設定 • カメラとネットワークの 設定 • 床とライトの設定 • 弾丸の実装 • モンスターの設定 • 壁の設定 • 衝突判定の実装 • まとめ 2
  3. 3. Unityの準備 3
  4. 4. Unityの準備 始める前に・レイアウトについて • スライド中のUnityの キャプチャーは、レイア ウトを‘Tall’にしていま す • お好みのレイアウトで 結構です 4
  5. 5. Unityの準備 • まずは下記URLをWebブラウザで開いておい てください http://goo.gl/sT81oN 5
  6. 6. Unityの準備 新プロジェクト作成 • Unityを起動 • 新規プロジェクト作成 • プロジェクト名は PhotonWorkShop でお願いします • 保存場所はお任せしま す 6
  7. 7. Assetのインポート 7
  8. 8. Assetのインポート Asset Storeを開く • Asset Storeを開く 8
  9. 9. Assetのインポート Asset Storeで検索 • ‘Photon Unity Networking’で検索 • ‘Photon Unity Networking Free’をクリック 9
  10. 10. Assetのインポート ダウンロード • ‘Photon Unity Networking Free’をダウンロード 10
  11. 11. Assetのインポート インポート • Importing package画面 で、全てのアイテムに チェックが付いている事 を確認 • 画面右下の[Import] を クリックします 11
  12. 12. Assetのインポート Aseetの内容: リファレンス • リファレンス(英文)を同梱 しています • Assets > Photon Unity Networking > PhotonNetwork- Documentation.pdf • 日本語訳文はユーザー助 け合い所で公開しています • photoncloud.jpのサイトでも 公開しました 12
  13. 13. Assetのインポート Assetの内容: Demo • 5つのデモサンプルが 含まれています • Assets > Photon Unity Networking > Demos 13
  14. 14. Photon Realtimeとの接続設定 14
  15. 15. Photon Realtimeとの接続設定 接続フロー • 最初はマスターサーバーへ 接続 – いわゆるロビーサーバー • 機能 – ロビー機能 – ルーム作成 – マッチメイキング – 収容ゲームサーバー決定 • (ロードバランサー) 15 Photon Realtime Master Server Client Photon Realtime Game Server Photon Realtime Game Server Photon Realtime Game Server
  16. 16. Photon Realtimeとの接続設定 接続フロー • ロビーサーバーから割当ら れたゲームサーバーへ接 続 • 機能 – ルーム管理 – オブジェクト同期 – イベント同期 – メッセージ送受信 16 Photon Realtime Master Server Client Photon Realtime Game Server Photon Realtime Game Server Photon Realtime Game Server
  17. 17. Photon Realtimeとの接続設定 PUN Wizardを開く • ‘Photon Unity Networking’のウィンド ウを開く (PUN Wizard) • Assetのインポート時に 開いたものがそのまま であれば、それでOKで す 17
  18. 18. Photon Realtimeとの接続設定 PUN Wizardを開く • 既にあるアカウント(App ID)を使うので、中ほど の[Setup]をクリック 18
  19. 19. Photon Realtimeとの接続設定 PUNの初期設定 • ブラウザで開いたペー ジにあるApp ID 9e85… を’Your AppId’のところ に張付け • Cloud Regionに’Japan’ を選択 • Saveボタンを押して、確 認ダイアログが出たら OK。PUN Wizardを閉じ てください 19
  20. 20. カメラとネットワークの設定 20
  21. 21. カメラとネットワークの設定 前準備 • 新しいシーンを作成 File > New Scene • Hierarchyの中が ‘Main Camera’ だけになればOK 21
  22. 22. カメラとネットワークの設定 カメラの設定 • ‘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 22
  23. 23. カメラとネットワークの設定 ネットワーク機能(ルーム入室)実装 • 空のゲームオブジェ クトを作成 GameObject > Create Empty • 名前を‘Scripts’に変更 23
  24. 24. カメラとネットワークの設定 ネットワーク機能(ルーム入室)実装 • 今作成した ‘Scripts’ を選択 • ‘Inspector’内の ’Transform’ の値を変更 – Position X:0 Y:1 Z:0 Rotation: X:0 Y:0 Z:0 Scale: X:1 Y:1 Z:1 24
  25. 25. カメラとネットワークの設定 ネットワーク機能(ルーム入室)実装 • ランダムマッチメイキング のスクリプトを組込みま す • ‘Inspector’の下部の[Add Component]ボタンをク リックし、検索用の入力 窓に ‘Random’ と入力し、検索候補から ‘Random Matchmaker’を 選択して先ほど作った ‘Scripts’にアタッチ 25
  26. 26. カメラとネットワークの設定 フォルダの作成 • ここまで出来たらシーン を保存する準備をしま す • シーン保存用のフォル ダを‘Assets’直下に ‘PhotonWorkShop’ の名前で作成 26
  27. 27. カメラとネットワークの設定 シーンの保存 • シーンに名前をつけて 保存 File > Save Scene as… • さきほどの ‘PhotonWorkShop’ フォルダの中に ’GameMain’ の名前で保存 27
  28. 28. カメラとネットワークの設定 テストラン • ここまでのシーンをPlayし てみましょう • すると、キモい何かが Instantiateされて、一瞬で 落下して行きます • 床を作っていないのでこ れで正常な動作です • 確認できたらPlayボタンを 再度クリックしてPlayを解 除しましょう 28
  29. 29. 床とライトの設定 29
  30. 30. 床とライトの設定 床の作成 • ‘Plane’を使って床を作 成 GameObject > Create Other > Plane • ’Hierarchy’の中に ‘Plane’が追加されます 30
  31. 31. 床とライトの設定 床の設定 • ‘Inspector’内の ’Transform’ の値を変更 – Position X:0 Y:0 Z:0 Rotation: X:0 Y:0 Z:0 Scale: X:10 Y:1 Z:10 31
  32. 32. 床とライトの設定 テクスチャの貼り込み • ‘Project’の検索窓に ‘Pavement_01’ と入力 • 検索結果に表示された ‘Pavement_01’ のうち左または上のも のを先ほどの‘Plane’に ドラッグ&ドロップでア タッチ 32
  33. 33. 床とライトの設定 ライトの作成 • Directional Lightを使用 GameObject > Create Other > Directional Light • ‘Hierarchy’の中に ‘Directional light’ が追加されます 33
  34. 34. 床とライトの設定 ライトの設定 • ‘Inspector’内の ’Transform’ の値を変更 – Position X:0 Y:10 Z:0 Rotation: X:50 Y:-30 Z:0 Scale: X:1 Y:1 Z:1 34
  35. 35. 弾丸の実装 35
  36. 36. 弾丸の実装 弾丸モデルの作成 • Sphereを使用 GameObject > Create Other > Sphere • ‘Hierarchy’の中に ‘Sphere’が追加されま す • ‘Sphere’の名前を ‘Bullet’ に変更 36
  37. 37. 弾丸の実装 弾丸モデルの設定 • ‘Inspector’内の ’Transform’ の値を変更 – Position X:0 Y:0 Z:0 Rotation: X:0 Y:0 Z:0 Scale: X:0.2 Y:0.2 Z:0.2 37
  38. 38. 弾丸の実装 Prefab化 • ‘Hierarchy’内の ‘Bullet’ を’Project’内の下記フォ ルダにドラッグ&ドロップ してPrefab化 Demos > MarcoPolo-Tutorial > Monstergame > Resources • ‘Hierarchy’内の ‘Bullet’ の文字が青くなればOK 38
  39. 39. 弾丸の実装 弾丸モデルの削除 • Prefab化ができた ら、’Hierarchy’内の ‘Bullet’ は削除 39
  40. 40. 弾丸の実装 Rigidbody追加 • ‘Bullet’ prefabを選択 Demos > MarcoPolo-Tutorial > Monstergame > Resources • ‘Inspector’下部の [Add Component] ボタンをクリック、検索入 力窓に ‘Rigidbody’ と入力、検索候補から ‘Rigidbody’を選択 40
  41. 41. 弾丸の実装 Prefabの設定 • ‘Bullet’ prefabの ‘Sphere Collider’ – ‘Is Trigger’ チェック入れる • ‘Rigidbody’ – ‘Use Gravity’ チェック外す – ‘Is Kinematic’ チェック入れる 41
  42. 42. 弾丸の実装 Photon Viewスクリプト追加 • ‘Inspector’下部の [Add Component] ボタンをクリック、検索 入力窓に ‘PhotonView’ と入力、検索候補から ‘Photon View’を選択 • ‘Photon View’を追加す ることにより、Photonの 同期対象となる 42
  43. 43. 弾丸の実装 同期スクリプトのコピー • ‘Project’の検索入力窓に ‘Networkc’ と入力、検索結果に現れた ‘NetworkCharacter’ を選択 • 選択したまま Edit メニュー > Duplicate で’NetworkCharacter’ を複製、 ‘BulletNetwork’ に変更 • 名前を変えた途端に ’BulletNetwork’は消えるが、 検索を解除すれば表示される 43
  44. 44. 弾丸の実装 同期スクリプトの編集 • 今コピーして作った ’BulletNetwork’ をエディタで開く 44
  45. 45. 弾丸の実装 同期スクリプト: クラス名変更 • BulletNetwork.csを編集していることを確認 • 3行目のクラス名を BulletNetwork に変更 45 Before 3:public class NetworkCharacter : Photon.MonoBehaviour After 3:public class BulletNetwork : Photon.MonoBehaviour
  46. 46. 弾丸の実装 同期スクリプト: 物理挙動制御 • 6-7行目の間に ‘Sample Code A-2’ の6行をコピー&ペーストで追加-> Awake()メソッド追加 46 Before 6:private Quaternion correctPlayerRot = Quaternion.identity; // We lerp towards this 7:// Update is called once per frame 8:void Update() After 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()
  47. 47. 弾丸の実装 同期スクリプト: 不要コード削除1 • OnPhotonSerializeView()メソッド内の31-32行目を削除 (Sample Code A-3) 47 Before 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:} After 27: // We own this player: send the others our data 28: stream.SendNext(transform.position); 29: stream.SendNext(transform.rotation); 30: 33:}
  48. 48. 弾丸の実装 同期スクリプト: 不要コード削除2 • OnPhotonSerializeView()メソッド内の38-39行目を削除 (Sample Code A-4) • ここまでできたらスクリプトを保存してエディタからUnityへ 48 Before 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:} After 34: // Network player, receive data 35: this.correctPlayerPos = (Vector3)stream.ReceiveNext(); 36: this.correctPlayerRot = (Quaternion)stream.ReceiveNext(); 37: 38:}
  49. 49. 弾丸の実装 同期スクリプトの追加 • ‘Inspector’下部の [Add Component] ボタンをクリック、検索 入力窓に ‘Bullet’ と入力、検索候補から ‘Bullet Network’を選択 • 先ほど作成した同期用 スクリプトが追加される 49
  50. 50. 弾丸の実装 同期スクリプトの設定 • ‘BulletNetwork’スクリプ トを’Photon View’の Observe にドラッグ&ドロップ • BulletNetworkがPhoton Viewから同期スクリプト として呼ばれるようにな る 50
  51. 51. モンスターの設定 51
  52. 52. モンスターの設定 弾丸発射スクリプトの作成 • ‘Project’内の ‘PhotonWorkShop’フォ ルダに ‘MonsterFire’ という新規のC#スクリプ トを作成 52
  53. 53. モンスターの設定 弾丸発射スクリプトの編集 • 今作った ‘MonsterFire’ スクリプトをエディタで開く • 4行目のクラス名が MonsterFire になっていない場合は修正する 53 After 4:public class MonsterFire : MonoBehaviour
  54. 54. モンスターの設定 弾丸発射スクリプト: 発射制御 • 13-14行目の間に ‘Sample Code B’ の5行をコピー&ペーストで追加-> Update()メソッド内追加 • 編集が終わったら、保存してエディタからUnityへ 54 Before 13:void update() { 14:} After 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:}
  55. 55. モンスターの設定 不要スクリプトの削除 • ‘Project’の検索入力窓 に ‘monster’ と入力、検索結果から ‘monsterprefab’ を選択 • ‘Inspector’内の ‘Click Detector’を削除 55
  56. 56. モンスターの設定 三人称カメラスクリプトの追加 • ‘Inspector’下部の [Add Component] ボタンをクリック、検索 入力窓に ‘third’ と入力、検索候補から ‘Third Person Camera’を 選択 • 三人称カメラのスクリプ トが追加される 56
  57. 57. モンスターの設定 弾丸発射スクリプトの追加 • ‘Inspector’下部の [Add Component] ボタンをクリック、検索 入力窓に ‘mons’ と入力、検索候補から ‘Monster Fire’を選択 • 先ほど作成した弾丸発 射スクリプトが追加され る 57
  58. 58. モンスターの設定 スクリプトの設定 • 先ほど追加した ‘Third Person Camera’ ‘Monster Fire’ の2つのスクリプトの チェックを外す • Photonで制御を行うた めのもの 58
  59. 59. モンスターの設定 同期スクリプトの編集 • モンスターの同期スクリ プトである ‘NetworkCharacter’ を編集 • ‘Project’の検索入力窓に ‘networkc’ と入力、検査結果に現れ た ‘NetworkCharacter’ を選択 • ‘NetworkCharacter’をエ ディタで開く 59
  60. 60. モンスターの設定 同期スクリプト: スクリプト制御 • 6-7行目の間に ‘Sample Code C-1’ の7行をコピー&ペーストで追加-> Awake()メソッド追加 60 Before 6:private Quaternion correctPlayerRot = Quaternion.identity; // We lerp towards this 7:// Update is called once per frame 8:void Update() After 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
  61. 61. モンスターの設定 同期スクリプト: 削除処理 • 44-45行目の間に ‘Sample Code C-2’ の5行をコピー&ペーストで追加-> Destroy()メソッド追加 61 Before 43: } 44: } 45:} After 43: } 44: } +45: [RPC] +46: void destroy() +47: { +48: PhotonNetwork.Destroy(gameObject); +49: } 50:}
  62. 62. モンスターの設定 シーンの保存 • ここで一旦シーンを保 存します File > Save Scene 62
  63. 63. モンスターの設定 テストラン • ここでシーンをPlayして みる • モンスターが石畳の上 に現れる • カールキーでモンス ターが動く • [H]キーで弾丸発射 • テスト終わったら、Play 解除するのをお忘れな く! 63
  64. 64. 壁の設定 64
  65. 65. 壁の設定 壁の作成 • Cubeを使って壁を作成 GameObject > Create Other > Cube • ‘Cube’の名前を ‘Wall1’ に変更 65
  66. 66. 壁の設定 奥の壁の設定 • ‘Inspector’内の’Tag’を ‘Finish’ に変更 • ‘Inspector’内の ’Transform’ の値を変更 – Position X:0 Y:5 Z:50 Rotation: X:0 Y:0 Z:0 Scale: X:100 Y:10 Z:1 66
  67. 67. 壁の設定 壁の複製 • 先ほど作った’Wall1’か ら複製して ‘Wall3’ を作成 67
  68. 68. 壁の設定 手前の壁の設定 • ‘Inspector’内の ’Transform’ の値を変更 – Position X:0 Y:5 Z:-50 Rotation: X:0 Y:0 Z:0 Scale: X:100 Y:10 Z:1 – Wall1からの変更は Position Zを-50に 68
  69. 69. 壁の設定 壁の複製 • ’Wall1’から複製して ‘Wall2’ を作成 69
  70. 70. 壁の設定 右の壁の設定 • ‘Inspector’内の ’Transform’ の値を変更 – Position X:50 Y:5 Z:0 Rotation: X:0 Y:0 Z:0 Scale: X:1 Y:10 Z:100 70
  71. 71. 壁の設定 壁の複製 • ’Wall2’から複製して ‘Wall4’ を作成 71
  72. 72. 壁の設定 左の壁の設定 • ‘Inspector’内の ’Transform’ の値を変更 – Position X:-50 Y:5 Z:0 Rotation: X:0 Y:0 Z:0 Scale: X:1 Y:10 Z:100 – Wall2からの変更は Position Xを-50に 72
  73. 73. 壁の設定 シーンの保存 • ここで一旦シーンを保 存します File > Save Scene 73
  74. 74. 衝突判定の実装 74
  75. 75. 衝突判定の実装 衝突判定スクリプトの作成 • ‘Project’内の ‘PhotonWorkShop’フォ ルダに ‘Bullet’ という新規のC#スクリプ トを作成 75
  76. 76. 衝突判定の実装 衝突判定スクリプトの編集 • 今作った ‘Bullet’ スクリプトをエディタで開く • 4行目のクラス名が Bullet になっていない場合は修正する 76 After 4:public class Bullet : MonoBehaviour
  77. 77. 衝突判定の実装 不要部分の削除 • 6-14行目を削除-> Bulletクラスを空に 77 Before 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:}
  78. 78. 衝突判定の実装 衝突判定メソッドの追加 • 残った5-6行目の間に、 Sample Code D の18行を追加-> OnTriggerEnter()メソッドの追加 • 編集が終わったら、保存してエディタからUnityへ 78 After + 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:}
  79. 79. 衝突判定の実装 弾丸へ衝突判定スクリプトの追加 • ‘Bullet’ prefabを選択 • ‘Inspector’下部の [Add Component] ボタンをクリック、検索 入力窓に ‘bu’ と入力、検索候補から ‘Bullet’を選択 • 衝突判定のスクリプト が追加される 79
  80. 80. 衝突判定の実装 シーンの保存 • シーンを保存します File > Save Scene 80
  81. 81. 衝突判定の実装 テストラン • ここでシーンをPlayして みる • モンスターが石畳の上 に現れる • カールキーでモンス ターが動く • [H]キーで弾丸発射 • テスト終わったら、Play 解除するのをお忘れな く! 81
  82. 82. まとめ 82
  83. 83. まとめ • 今回は、【応用編】ということで簡単なオンライ ンシューティングゲームを作成 • わずかな時間でここまで作成できることを実 感していただけたでしょうか? 83
  84. 84. 今後の予定 • 今回は【応用編】 • ロビー&ルームまわりの詳細をお話した【ロ ビー&ルーム活用編】を予定 • また、プレイヤーまわり、オブジェクト同期ま わりなど、分野別に活用編を実施予定 • その他、ご要望ありましたら、ぜひぜひお知ら せください! 84
  85. 85. Photon Cloud ウェブサイト • PhotonCloudサービス紹 介サイト • http://photoncloud.jp/ • 弊社GMOクラウドが運営 する、PhotonCloudを日本 国内向けにご紹介するた めのサイト • 日本でのご利用事例の ご紹介やイベントカレン ダー、イベントレポートを ご案内中 85
  86. 86. Photon Cloud ウェブサイト • PhotonCloud facebook ページ • http://facebook.com/p hotoncloudjp • PhotonCloudの日本版 facebookページ • イベント、セミナー、 ワークショップの告知や ダイジェストレポートを 配信しています 86
  87. 87. Photon Cloud ウェブサイト • PhotonCloudユーザー 助け合い所 • https://www.facebook.c om/groups/photonclou djp/ • Unityさんのアドバイス でスタートした、 PhotonCloudのユー ザー同士での情報交換 や助け合いを目的とし たfacebookグループ 87
  88. 88. Photon Cloud ウェブサイト • Twitterアカウント @PhotonCloudJP • イベントなどのお知らせ やサービスの最新情報 などをつぶやいていま す! 88
  89. 89. ありがとうございました! 89

×