Game Development Tutorial 2021

by YuukiARIA

Slide 1

Slide 1 text

ゲーム開発研修 2021/04/22 2021新卒研修

Slide 2

Slide 2 text

本日の予定 ■ 10:30-11:00 イントロダクション ■ 11:00-13:00 基礎編（岡本さん） ■ 13:00-14:00 お昼休憩 ■ 14:00-17:30 実践編（信夫） ■ 17:30-18:30 社員講演（井本さん、田那辺さん、本間さん）

Slide 3

Slide 3 text

私は誰開発本部CTO室 Yuuki Shinobu / YuukiARIA 2014年新卒入社 ■ モンストサーバエンジニア ■ ブラナイリードサーバエンジニア ■ 新規ゲームクライアント・サーバエンジニア ■ その他色々…

Slide 4

Slide 4 text

メンバー紹介 ■ 信夫裕貴（yuki.shinobu） – 14新卒開発本部CTO室 ■ 田那辺輝（akira.tanabe） – 開発本部CTO室 ■ 岡本勇太（yuta.okamoto） – 18新卒モンストクライアントG ■ 佐々木智崇（tomotaka.sasaki） – 20新卒モンストクライアントG ■ 篠崎瑞樹（mizuki.shinozaki） – 20新卒モンストクライアントG ■ 井本大登（imo） – ﾓﾝｽﾄ事業本部 MSｽﾋﾟﾝｵﾌｹﾞｰﾑ事業部ﾄﾞﾘｱﾝG ｴﾝｼﾞﾆｱﾘﾝｸﾞT ■ 本間心（makoto.homma） – 20卒開発本部CTO室

Slide 5

Slide 5 text

イントロダクション

Slide 6

Slide 6 text

Unity社内事例① TIPSTAR (2020) ■ ネイティブアプリに Unity as a Library を導入し、ガチャ演出をリッチに ©TIPSTAR

Slide 7

Slide 7 text

Unity社内事例② Alter3 Simulator (2019) ■ AIエンジンで動くロボットのシミュレータをUnityで制作 ■ シミュレータ内のTCPソケットによりAIエンジンと通信連携

Slide 8

Slide 8 text

ゲームじゃなくない？ ■ 今挙げた2つの例はゲームではありません – 実は非ゲーム領域におけるゲームエンジンの活用は増えつつあり、ミクシィでもこうした取り組みをおこなっています – いわゆる“ゲーム”クライアントエンジニアでなくともUnityを使用する機会は十分に考えられます ■ もちろん、ファイトリーグ、モンパニ、スタスマと、Unityによるゲームもリリース・開発中です – 研修の最後で実際のゲーム開発現場や教育への活用についても紹介します

Slide 9

Slide 9 text

本日の研修を受けるにあたって ■ 本日はUnityの基本的な使い方とゲーム開発の基礎を扱います ■ また、Photon Engine によるネットワーク同期を使用するゲームも扱い、マルチプレイの基本的な仕組みにも触れます ■ ゲームクライアントエンジニアではない人も、ゲーム開発の世界観を感じ取れればと思います ■ 非ゲームでの応用や、ゲームのサーバエンジニアとしてクライアントエンジニアとやり取りする上で、言葉や要素が分かることは全体を見渡す助けになります ■ ぜひ楽しんでください！

Slide 10

Slide 10 text

環境構築 ■ 環境構築はお済みでしょうか？ – 事前に案内した環境構築ドキュメントを参照してください ■ Unity 2019.4.23f1

Slide 11

Slide 11 text

基礎編

Slide 12

Slide 12 text

岡本さんお願いします！

Slide 13

Slide 13 text

実践編

Slide 14

Slide 14 text

後半の内容について ■ マルチプレイ要素のあるゲームを題材に、ゲーム開発の基礎を体験します

Slide 15

Slide 15 text

マルチプレイ実現技術 ■ Photon Engine ■ Monobit Engine ■ MLAPI ■ Unity NetCode ■ gRPC, WebSocket, MagicOnion, ... ■ ちなみにモンストは… – TURN (RFC5766) をリレーサーバとするHost/Guestクライアント型の構造

Slide 16

Slide 16 text

マルチプレイ実現技術 ■ Photon Engine ■ Monobit Engine ■ MLAPI ■ Unity NetCode ■ gRPC, WebSocket, MagicOnion, ... ■ ちなみにモンストは… – TURN (RFC5766) をリレーサーバとするHost/Guestクライアント型の構造今回の研修ではこちらを扱います

Slide 17

Slide 17 text

準備 ■ RingCrisisプロジェクトを開いてください

Slide 18

Slide 18 text

[準備] Gameビューのアスペクト比設定 ■ 1080x720 を想定して作られているので、Gameビューのアスペクト比の設定を合わせておくとよいです

Slide 19

Slide 19 text

[準備] Photon AppID の設定 ■ メニュー [Window]>[Photon Unity Networking]>[Highlight Server Settings] を選択 – または Assets/Photon/PhotonUnityNetworking/Resources/PhotonServerSettings アセットを選択 ■ App Id PUN に配布された Photon App Id を入力 – 新卒以外の方はご自身でPhotonアカウントを作成（無料）し、AppIDを取得してください – https://doc.photonengine.com/ja-jp/realtime/current/getting-started/obtain-your-app-id

Slide 20

Slide 20 text

PhotonTutorial ■ Assets/PhotonTutorial/Scenes/PhotonTutorial シーンを開いてください ■ Photon Engine を使った通信の基礎を学びます – Photonサーバへの接続 – ルームの作成と入室 – RPC機能を使った簡単な通信

Slide 21

Slide 21 text

PhotonTutorial 接続切断イベントログルーム名入力ニックネーム入力ルーム作成メッセージ入力 RPC実行ルーム入室 ※フォントデータの都合上、ASCII文字以外は正しく表示されません

Slide 22

Slide 22 text

Photonサーバの構成 ■ マッチメイキングを行う Master Server – ルーム一覧取得や条件マッチング、Game Server へのルーティング ■ 実際にクライアント間でやり取りする Game Server – 情報の保持と通信の中継、カスタムゲームロジック Master Server Lobby Game Server Game Server Game Server Room Room Room

Slide 23

Slide 23 text

ビルド・実行方法 ■ メニュー [ビルド]>[PhotonTutorialをビルドして実行] を選択 ■ メニュー [ビルド]>[ビルドフォルダを開く] を選択するとビルド成果物のフォルダを開きます ■ mac でアプリケーションを複数起動したい場合、ターミナル上で以下のコマンドを実行します – ビルドしたアプリケーションとUnityエディタ間でも通信に支障ありません open -n RingCrisis/Builds/PhotonTutorial/PhotonTutorial.app

Slide 24

Slide 24 text

1. [Connect] ボタンをクリックします 2. ニックネームとルーム名を入力します 3. [Create Room] ボタンをクリックします通信のテスト: ホスト側の準備 ① ② ③

Slide 25

Slide 25 text

通信のテスト: ゲスト側の準備 1. [Connect] ボタンをクリックします 2. ニックネームとルーム名を入力しますルーム名はホスト側で入力したものと同一の文字列を入力してください 3. [Join Room] ボタンをクリックします ① ② ③

Slide 26

Slide 26 text

1. メッセージを入力します 2. [Send RPC] ボタンをクリックします通信のテスト: RPCの実行 ① ②

Slide 27

Slide 27 text

[PT0] クリック座標を送信するRPCの作成

Slide 28

Slide 28 text

[PT0] クリック座標を送信するRPCの作成 ■ 左クリックの検知 – Input.GetMouseButtonDown(0) – 座標の取得は Input.mousePosition プロパティ – Update メソッドの中でチェックしよう ■ RPCの作成 – Vector3 の引数をもつメソッドを定義 – PunRPC 属性をつける – サンプルのように送信者のニックネームなどを追加してもよい ■ RPCの送信 – サンプルと同様に _photonView.RPC を使う ■ 接続状態、ルーム入室状態をチェックする – PhotonNetwork.InRoom を条件に加えよう

Slide 29

Slide 29 text

[PT0] クリック座標を送信するRPCの作成 [PunRPC] private void NotifyClick(string sender, Vector3 position) { AppendLog($"{sender}> {position}"); } private void Update() { if (PhotonNetwork.InRoom && Input.GetMouseButtonDown(0)) { var sender = PhotonNetwork.NickName; var position = Input.mousePosition; _photonView.RPC("NotifyClick", RpcTarget.AllViaServer, sender, position); } }

Slide 30

Slide 30 text

[PT1] クリックした位置にマーカーを表示 ■ PT0の内容を拡張し、受け取った座標にマーカー画像を表示してみましょう – Canvas の下にマーカー用の Image を作成 – PhotonTutorial からマーカー用オブジェクトの Transform を参照 – マーカー用オブジェクトの Transform の position を受け取った座標で更新 ■ マーカー画像は Assets/PhotonTutorial/Sprites/cursor を使ってください

Slide 31

Slide 31 text

PhotonViewについて ■ ネットワーク越しにオブジェクトを同期するための基本的なコンポーネント – https://doc.photonengine.com/ja-jp/pun/v1/getting-started/feature- overview#00g284n2rn1tuqq6 ■ RPC以外にも、オブジェクトの状態を監視して自動的に同期する仕組みなど、あまりコードを書かなくても動く便利な仕組みもあります – Observed Components とある部分 – OnPhotonSerializeView といったメソッドでシリアライズだけ定義すればよい ■ オブジェクトの状態ではなくイベント系の通知などはRPCの方が向いている – リバーシや将棋などで駒を打つときなど ■ この研修では、通信のやり取りが見えやすいRPCのみを使って実装していきます – 興味のある方は PhotonTransformView など便利なコンポーネントについても調べてみてください

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

輪投げバトルゲームを作ります ■ Assets/RingCrisis/Scenes/Game シーンを開いてください

Slide 34

Slide 34 text

動画

Slide 35

Slide 35 text

ビルド・実行方法 ■ メニュー [ビルド]>[RingCrisisをビルドして実行] を選択してください ■ 複数起動等はPhotonTutorialと同様です

Slide 36

Slide 36 text

[RC0] リングの発射をRPC同期する ■ リング発射処理はRingShooterクラスにあります – Assets/RingCrisis/Scripts/RingShooter.cs ■ ShootRingメソッドは指定されたチームカラーと初速でリングを生成して発射します ■ このメソッドをRPC経由で呼び出すようにしましょう

Slide 37

Slide 37 text

[RC0] リングの発射をRPC同期する ■ RpcManagerにPunRPCをつけたメソッド実装 ■ RpcManagerにeventを追加 ■ RingShooterでeventにShootRingを呼ぶデリゲートを登録 ■ リング発射タイミングでRPCを送信するように変更

Slide 38

Slide 38 text

[RC1] 軌道ガイドを正しく実装する ■ 小さい球が連なっているのは、軌道ガイドを実装しようとしたもの ■ RingShooter.CalculateTrajectoryPointメソッドを実装しよう

Slide 39

Slide 39 text

[RC1] 軌道ガイドを正しく実装する ■ 上 (+Y) 方向の初速度 VelocityY – 定数として private static readonly で定義してあります ■ 下 (-Y) 方向への重力加速度 9.8f – 即値で使っても定数定義してもよいです ■ 水平（XZ平面）方向へは等速直線運動 – 速度ベクトルが引数 velocityXZ で渡されます ■ 球のインデックス番号 0 ≦ i ＜ n ■ ヒント – まず y = 0 から発射して、再び y = 0（着地）するのにかかる時間を求めよう

Slide 40

Slide 40 text

[RC1] 軌道ガイドを正しく実装する 𝑦 = 𝑣𝑦 𝑡 − 1 2 𝑔𝑡2 d = v𝑥𝑧 𝑡 𝑡𝑖 = 𝑖 𝑛 − 1 ∙ 𝑡max 時刻 t における y 座標時刻 t における x, z 座標（ベクトル）球 i に対応する時刻 ti

Slide 41

Slide 41 text

[RC2] ターゲットをランダム位置に生成する ■ 最初に1つだけ原点に生成されている ■ ランダムな位置に生成するように変更しよう ■ でもYは0にしよう ■ UnityEngine.Randomクラスを使おう – https://docs.unity3d.com/ja/current/ScriptReference/Random.html – Rangeメソッドには引数がint/floatのオーバーロードが存在するので注意！

Slide 42

Slide 42 text

[RC3] ターゲットを一定時間ごとに生成する ■ ターゲットが1つだけではつまらない！ – というか5点先取なのにゲーム中で1点しか取れない ■ 一定時間ごとにターゲットが生成されるように実装しよう ■ Time.deltaTime を上手く使おう – Time.deltaTime: 直近のフレームの処理にかかった時間 [s] – https://docs.unity3d.com/ja/current/ScriptReference/Time-deltaTime.html

Slide 43

Slide 43 text

[RC4] ターゲットを一定時間で消滅させる ■ ターゲットが無限に増えていく ■ このままではまずいので、一定時間経過したらターゲットは消滅するようにしよう ■ 実は Ring はすでに一定時間で自然消滅するようになっている ■ 同様の実装をターゲットに対しても実装しよう ■ オブジェクトの削除は Destroy メソッドを使います – Destroy(gameObject) ではなく Destroy(this) とするとどうなるでしょうか – 理由も考えてみてください

Slide 44

Slide 44 text

[RC5] ターゲットの生成をRPC同期する ■ ターゲットはたくさん生成されるようになったが、対戦者間で位置がバラバラ ■ リングの発射と同様に、ターゲットの生成もRPCにしよう ■ 今回はマスタークライアントが生成の責任をもつことにしよう – PhotonNetwork.IsMasterClient をチェックしよう

Slide 45

Slide 45 text

[RC6] 操作状況（軌道ガイド）を同期する ■ 操作の情報をRPCで送受信しよう ■ 軌道ガイドの再現にはどんな情報が必要か

Slide 46

Slide 46 text

[RC7] リング発射にクールタイムを設ける ■ ゲームにおける「クールタイム」とは、特定の行動をしたあとに再びその行動ができるようになるまでの時間を指します ■ 現状のRingCrisisはノータイムでリングが発射できるので、発射のリスクが少ないです ■ リングを発射したら、一定時間経過しないと再び発射できないようにしましょう ■ また、クールタイムの状況が分かるようなUIも追加しましょう – TMP_Text コンポーネントで状態や時間を表示するのが簡単でしょう – ちょっと凝った作りにしたい場合は、Image の Fill Amount を活用してみましょう

Slide 47

Slide 47 text

[RC7] リング発射にクールタイムを設ける ※実際にはZ座標をずらす必要はありません

Slide 48

Slide 48 text

[RC7] リング発射にクールタイムを設ける ■ もうちょっとオシャレにしたい人は枠の形を変えたり、ストライプにしたりスクロールアニメーションしたり…

Slide 49

Slide 49 text

[RC8] 高得点なターゲットを作る ■ プレハブを新しく作ろう（Target.prefabのコピーでも可） ■ マテリアルを変えていかにも高得点の見た目にしよう ■ 特別なエフェクトを追加してもよさそう ■ どのターゲットを生成するかの情報をRPCに含める

Slide 50

Slide 50 text

他にも ■ プロジェクト内にはまだ説明しきれていない要素も盛り込んであります – シェーダー – エフェクト – エディタ拡張（ビルドのメニュー） ■ いろいろ観察したりいじったりしてみてください ■ 今回は基礎的な内容にフォーカスしましたが、それぞれの要素ごとにもう少し発展的な講習を実施するかも知れません ■ Unity Engine Challenge というイベントもやっています

Slide 51

Slide 51 text

おわりに ■ 本日の研修で扱った内容はまだまだごく一部です – サウンド、アニメーション、AssetBundle、… ■ Unityマニュアルや書籍などを活用することで更に様々な機能を知ることができます – https://docs.unity3d.com/ja/current/Manual/UnityManual.html ■ 社内にも多くのUnityエンジニアがおり、社内外に情報を発信しています – まずはdocbaseを眺めてみると良いでしょう ■ ぜひゲームを作ったり、またゲーム以外でも映像やコンテンツ生成など、様々に活用してみてください

Slide 52

Slide 52 text

研修後の Photon AppID について ■ 新卒の皆さんに配布した AppID は研修担当側のPhotonアカウント上で作成したものになります ■ 研修終了後はすみやかに削除するので、引き続きPhotonを使用したい場合はご自身で Photonアカウントを作成してください

Slide 53

Slide 53 text

Staff Credits Developer Relations Koji Kita Engineers Yuuki Shinobu Yuta Okamoto Akira Tanabe Hiroto Imoto Mizuki Shinozaki Tomotaka Sasaki Makoto Homma And you...

Slide 54

Slide 54 text

No content