AI を活用したリアルタイム内視鏡診断 ... · ai を活用したリアルタイム内視鏡診断サポートシステム開発 〜大腸内視鏡検査での見逃し回避を目指す〜
Unityで...
-
Upload
gmo-cloud-kk -
Category
Technology
-
view
8.758 -
download
2
Transcript of 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
Rotation: X:0 Y:0 Z:0Scale: X:1 Y:1 Z:1
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
床とライトの設定床の設定
• ‘Inspector’ 内の’ Transform’の値を変更– Position X:0 Y:0 Z:0
Rotation: X:0 Y:0 Z:0Scale: X:10 Y:1 Z:10
31
床とライトの設定テクスチャの貼り込み
• ‘Project’ の検索窓に‘ Pavement_01’と入力
• 検索結果に表示された‘ Pavement_01’のうち左または上のものを先ほどの‘ Plane’ にドラッグ & ドロップでアタッチ
32
床とライトの設定ライトの作成
• Directional Light を使用GameObject> Create Other> Directional Light
• ‘Hierarchy’ の中に ‘ Directional light’が追加されます
33
床とライトの設定ライトの設定
• ‘Inspector’ 内の’ Transform’の値を変更– Position X:0 Y:10 Z:0
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
弾丸の実装弾丸モデルの設定
• ‘Inspector’ 内の’ Transform’の値を変更– Position X:0 Y:0 Z:0
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’に変更
• ‘Inspector’ 内の’ Transform’の値を変更– Position X:0 Y:5 Z:50
Rotation: X:0 Y:0 Z:0Scale: X:100 Y:10 Z:1
66
壁の設定壁の複製
• 先ほど作った’ Wall1’ から複製して‘ Wall3’を作成
67
壁の設定手前の壁の設定
• ‘Inspector’ 内の’ Transform’の値を変更– Position X:0 Y:5 Z:-50
Rotation: X:0 Y:0 Z:0Scale: X:100 Y:10 Z:1
– Wall1 からの変更はPosition Z を -50 に
68
壁の設定壁の複製
• ’Wall1’ から複製して‘ Wall2’を作成
69
壁の設定右の壁の設定
• ‘Inspector’ 内の’ Transform’の値を変更– Position X:50 Y:5 Z:0
Rotation: X:0 Y:0 Z:0Scale: X:1 Y:10 Z:100
70
壁の設定壁の複製
• ’Wall2’ から複製して‘ Wall4’を作成
71
壁の設定左の壁の設定
• ‘Inspector’ 内の’ Transform’の値を変更– Position X:-50 Y:5 Z:0
Rotation: X:0 Y:0 Z:0Scale: X:1 Y:10 Z:100
– 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
Photon Cloud ウェブサイト• PhotonCloud facebook
ページ• http://facebook.com/
photoncloudjp• PhotonCloud の日本版
facebook ページ• イベント、セミナー、
ワークショップの告知やダイジェストレポートを配信しています
86
Photon Cloud ウェブサイト• PhotonCloud ユーザー助
け合い所• https://
www.facebook.com/groups/photoncloudjp/
• Unity さんのアドバイスでスタートした、 PhotonCloud のユーザー同士での情報交換や助け合いを目的とした facebook グループ
87
Photon Cloud ウェブサイト• Twitter アカウント
@PhotonCloudJP• イベントなどのお知
らせやサービスの最新情報などをつぶやいています!
88
ありがとうございました!
89