Unity-Photon-WebGL Handson 20160626.WTM
2 likes1,176 views
初めてUnityに触れる方対象のUnityとPhotonとWebGLを使ったブラウザで動作するインタラクティブネットゲームを開発するハンズオン資料です。 2016/06/26 WTM ＋ 広島Unity勉強会 で利用 http://www.webtouchmeeting.com/meeting/91wtm-unity.html
![UnityからPhotonを使えるようにする
ブラウザで下記URLへアクセス
Photon Unity Networking Free を「Open in Unity」し、Unityの
[AssetStore]よりダウンロード&インポートする。
http://u3d.as/2ey
58](https://image.slidesharecdn.com/unity-photon-webglhandson-160625215951/85/Unity-Photon-WebGL-Handson-20160626-WTM-58-320.jpg)
![アプリIDの設定
AppIdを入力します。 ※AppIdは本日のみ利用できるものをお伝えします
ここでシーンを一度保存しておきましょう。
メニューより[File]-[Save Scene]とし、
Assets/Scenes/Main に保存します。
60](https://image.slidesharecdn.com/unity-photon-webglhandson-160625215951/85/Unity-Photon-WebGL-Handson-20160626-WTM-60-320.jpg)
![Photonと接続する設定 01
空（から）のオブジェクトをつくる
[Hierarchy]-[Create]-[Create Empty]
61](https://image.slidesharecdn.com/unity-photon-webglhandson-160625215951/85/Unity-Photon-WebGL-Handson-20160626-WTM-61-320.jpg)
![Photonと接続する設定 01
Photonのスクリプトをオブジェクトに張り付ける
[Assets]-[Photon Unity Networking]-[Demos]-[MarcoPolo-Tutorial]-
[RandomMatchmaker]をGameObjectにドロップする
[Inspector]でGameObjectにスクリプトがつきます。
62](https://image.slidesharecdn.com/unity-photon-webglhandson-160625215951/85/Unity-Photon-WebGL-Handson-20160626-WTM-62-320.jpg)
![床をつくる 01
キャラクターが動き回る床をつくる
[Hierarchy]-[3D Objects]-[Plane]
Scale (X, Y, Z)を(10, 1, 10)とする
63](https://image.slidesharecdn.com/unity-photon-webglhandson-160625215951/85/Unity-Photon-WebGL-Handson-20160626-WTM-63-320.jpg)
Unity-Photon-WebGL Handson 20160626.WTM
- 1. Unity-Photon-WebGL Handson 2016/06/26 第91回「WTM ＋ 広島Unity勉強会」 一般社団法人T.M.C.N / 株式会社システムフレンド 前本 知志 1
- 2. ・システムフレンドという会社でセンサー＆デバイス部長やってます！ KINECT等のセンサーを使ったアプリ（イベント用コンテンツ、医療ヘルスケア系） スマフォのARアプリなどを作っています。 http://www.systemfriend.co.jp/kinect_nui https://youtu.be/ZSXwhj8HqkE ・TMCN (Tokyo MotionControl Network) Co-founder(理事) https://www.facebook.com/TokyoMotioncontrolNetwork ・著書「Intel RealSense SDK センサープログラミング」 https://www.shoeisha.co.jp/book/detail/9784798139630 ・HoloMagicians – 日本初のホロレンズ開発者チーム http://holomagicians.azurewebsites.net/ 自己紹介 2
- 5. Agena 1. Unityをさわってみる a. Unityの基本説明 b. 物理挙動を使ってみる 2. スマホの傾きを使ってみる Unity WebGLがスマホ未サポートだった… 3. Photonを使ってクラウド上のルームへ！ 4. みんなで同じルームの中を飛んでみよう！ 5. これは面白い！と思った人へのNext Step. 5
- 10. 講師紹介 ▼IoTイノベーターカップ 特別賞 ▼Innovator Academy 特別賞 ▼Tokyo Hackademics 2015 優勝 ▼Shockathon2015 京セラ賞 Tech in AsiaやMaker Faire tokyo2015など出展 来月は２つのハッカソンに出場予定 高橋 理佳子 獨協大学 経済学部経営学科 在学 サイバーエージェント、voyage group、Benesse、 リンクアンドモチベーションなど８社のインターンに参 加 その後、ビジコンに参加するも企画立案で終わることに 物足りなさを感じハッカソンに参加。そこで自分の技術 にの低さを痛感&プログラミングに出会い、独学で勉強中 ４月からリクルートホールディングスに入社予定 10 今日はおじさん でごめん。。
- 11. 今日のながれ ① アイスブレーク (1)たかりかを知ろう(2)unityを知ろう！ ② unityを触ってみよう！ ③ ゲームを作ってみよう！ ④ 遊んでみよう！ ⑤ クロージング 11
- 13. インストールしましたよね♪ 13
- 14. それじゃ起動しましょうか 14
- 15. プロジェクトの作成 15
- 18. 画面レイアウトがよくわからなくなったら… とりあえず 2 by 3 だ。 ウィンドウを消して しまったら 「Window」からまた 開けるぞ。 18
- 19. 画面の説明 Gameビュー Consoleビュー ツールバーのプレイを押すこと で 作成中のゲームを実際に動かし て プレビューすることが出来る エラーメッセージを確認することが出来ま す 19
- 28. 軽くtips ①ALT + CTRL(Macの人はcommand) + ドラッグ ⇒“平行移動！！” ②ALT + ドラッグ ⇒“視界の旋回！！” ③マウスホイール ⇒“ズーム” ④Hierarchyから選択したオブジェクトをダブルクリック ⇒選択したオブジェクトに焦点を合わせる これは便利ですよ28
- 32. 玉に物理挙動を与える 玉(Sphere)を選択して、メニューから “Component”⇒“Physics”⇒“Rigidbody” Unityでは重力に従っ た動きを簡単に使え るぞ。 32
- 37. playボタン押してる状 態 え！プロパティ変更が保存されないんだけど！ playボタン押してない状 態 今の状態を確認したらplayボタン押して ない状態にしましょう！ 保存されないのです.. > < .. 最初よく戸惑う ポイントだ。 37
- 39. もう一度再生！！ 39
- 50. 実装 ドラッグ＆ドロップ 50
- 55. Photonとは クラウド上の仮想ルームにログインして多人数でプレイするゲームな どを作れるものです。 サーバーを持っていなくてもすぐ使えます。 無料プランでも20人まで同時接続ができます。 Unityから簡単に使えます。 GMOクラウドさんが窓口です。 チュートリアル http://photonengine.jp/ http://photonengine.jp/support/movie.html 55
- 56. Photonサインアップ & ログイン 今日は時間の関係で実際のアカウント登録は割愛しますが 手順は下記動画をご覧頂き、ご自身で手続きをお願い致します。 https://youtu.be/vFzPyJ7YEMA 【公式】Photonのアカウント取得方法 56
- 58. UnityからPhotonを使えるようにする ブラウザで下記URLへアクセス Photon Unity Networking Free を「Open in Unity」し、Unityの [AssetStore]よりダウンロード&インポートする。 http://u3d.as/2ey 58
- 59. Unity Asset Storeからインストール 02 Unityへインポート 59
- 60. アプリIDの設定 AppIdを入力します。 ※AppIdは本日のみ利用できるものをお伝えします ここでシーンを一度保存しておきましょう。 メニューより[File]-[Save Scene]とし、 Assets/Scenes/Main に保存します。 60
- 62. Photonと接続する設定 01 Photonのスクリプトをオブジェクトに張り付ける [Assets]-[Photon Unity Networking]-[Demos]-[MarcoPolo-Tutorial]- [RandomMatchmaker]をGameObjectにドロップする [Inspector]でGameObjectにスクリプトがつきます。 62
- 63. 床をつくる 01 キャラクターが動き回る床をつくる [Hierarchy]-[3D Objects]-[Plane] Scale (X, Y, Z)を(10, 1, 10)とする 63
- 67. Let’s fly! 前のセクションで作成したデモに少し手を加えたものを用意しました。 自由にフライトを楽しんでください！ 操作方法： ← → 操縦桿左右 ↑ ↓ 操縦桿上下（上げると下降 下げると上昇） スペースキー 自分視点と神視点の切り替え http://goo.gl/gPGhOy http://goo.gl/D12kut Room 01 Room 02 67
- 69. サンプルを改造しよう 岩や他の飛行機にぶつかったときに跳ね返ったりダメージをうけたり 弾を撃てるようにしたりスコアやステージを用意してよりゲームっぽ くしてみたり BGMや効果音を追加したり AppStoreやGoogle Playストア、Windosストアなどストアにアプリをリ リースしたり 広告で儲けたりｗ 様々なことがUnityで行えます。 ぜひトライしてみてください。 69