20140508 在校生向けUnity&AR講座

1,851 views
1,728 views

Published on

20140508に行った在校生向けUnity&AR講座のスライド
コード量少なめ、簡単な画面作成まで
画面サイズに合わせてあれこれできるコードを追加したかったけど、難しそうなのと時間制限の為カット。

Published in: Software
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,851
On SlideShare
0
From Embeds
0
Number of Embeds
184
Actions
Shares
0
Downloads
21
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

20140508 在校生向けUnity&AR講座

  1. 1. UNITY & AR ~SPRING~ UNIVERSITY OF NAGASAKI SAYA KATAFUCHI 1
  2. 2. INDEX-FIRST SESSION  WHO AM I?  Unityをインストールしよう  Unityってなに?  開発環境の比較  Unityで作られた作品(ゲーム)  Unityで作られた作品(映像)  実際にプロジェクトを作ってみよう  Unityの画面に慣れよう  画面が切り替わるアプリを作ってみよう  なめなび(仮)概要  画面遷移図  下準備 2
  3. 3. INDEX-FIRST SESSION  ボタンを表示させてみよう  メニュー画面をつくろう  メニューのシーンを保存する  背景色を変更する  タイトルを表示する  ボタンを並べていく  ボタンイベントを登録する  滑石ぷらぷら情報へ  新しいシーンを追加する  画像を表示する  ボタンイベントを登録する  滑石の風景を見る  今日のまとめ  LINKS 3
  4. 4. INDEX-FIRST SESSION  WHO AM I?  Unityをインストールしよう  Unityってなに?  開発環境の比較  Unityで作られた作品(ゲーム)  Unityで作られた作品(映像)  実際にプロジェクトを作ってみよう  Unityの画面に慣れよう  画面が切り替わるアプリを作ってみよう  なめなび(仮)概要  画面遷移図  下準備 4
  5. 5. WHO AM I ? 片渕 小夜(かたふち さや) 21歳 4年生 吉村ゼミ所属  人工知能の研究をしています  趣味でARアプリ作ります  AR使って2次元キャラクターとわいわいしてたらな んかiPad貰いました これからなかよくしてね! 5
  6. 6. ボスからおおいにいぢめてくださいとの指令が下ったので… 6
  7. 7. ビシバシいこうと思います! 7
  8. 8. というのは冗談で・・・ 8
  9. 9. わからないことがあったらどんなに些細な事でも聞いてね! 9
  10. 10. INDEX-FIRST SESSION  WHO AM I?  Unityをインストールしよう  Unityってなに?  開発環境の比較  Unityで作られた作品(ゲーム)  Unityで作られた作品(映像)  実際にプロジェクトを作ってみよう  Unityの画面に慣れよう  画面が切り替わるアプリを作ってみよう  なめなび(仮)概要  画面遷移図  下準備 10
  11. 11. UNITYをインストール しよう Unity3Dの公式ホームページからダウンロードできます! 2014年4月30日現在の公式Webサイト ここから ダウンロード! 11
  12. 12. UNITYって何?  基本無料で使える3Dゲーム制作ソフト  iPhone,iPad,Androidなどのスマートフォン端末向けのアプリが作れ る!(iOS端末は別途Developerプログラムへの加入が必要)  ゲームだけでなく、映像作品なんかも作れます  3Dモデルを使ったゲームやアプリをつくるなら断然Unityでしょ! 12
  13. 13. 開発環境の比較 UNITY  画面上ですぐに動作 確認ができる  3Dモデルの扱いが簡 単  JavaScript,C#など比 較的使いやすいプロ グラミング言語を使 うことができる  機能によってはPro版 (13万円)を要求され る… ANDROID(JAVA) IOS(OBJECTIVE-C)  30億のデバイスで走る Java(笑)  Objective-Cとかいう意 味不明言語  推奨されている開発環 境が使いにくい  3Dモデルを表示させる だけでたくさんコード を書かなければいけな い(つらい)  開発環境は無料でフル 機能が使える 13
  14. 14. 30億のデバイスで走るJavaの裏ではたくさんのプログラマが闇を見ている 14
  15. 15. UNITYで作られた作品 (ゲーム) iOS端末向けアプリ 『ドラゴンクエストⅧ 空と海と大地と呪われし姫君』 15
  16. 16. UNITYで作られた作品 (映像) 16
  17. 17. INDEX-FIRST SESSION  WHO AM I?  Unityをインストールしよう  Unityってなに?  開発環境の比較  Unityで作られた作品(ゲーム)  Unityで作られた作品(映像)  実際にプロジェクトを作ってみよう  Unityの画面に慣れよう  画面が切り替わるアプリを作ってみよう  なめなび(仮)概要  画面遷移図  下準備 17
  18. 18. 実際にプロジェクトを 作ってみよう クリック 18
  19. 19. 実際にプロジェクトを 作ってみよう クリック 19
  20. 20. 実際にプロジェクトを 作ってみよう 新規フォルダを作成 →選択 20
  21. 21. 実際にプロジェクトを 作ってみよう 指定したとおりになってい る事を確認したら・・・ Createをクリック 21
  22. 22. UNITYの画面に慣れよう ーWELCOME画面 Unityの使い方の ビデオチュートリアルを 見ることができる Unityに関するマニュアル や,質問をする フォーラムなどの案内 アセットストアへ アクセス 22
  23. 23. (補足) アセットストアとは アセットストアは  3Dモデル  プログラム  モーション  サウンド・エフェクト,BGM などのソフトウェア開発に必要な素材を有料で手に入れることの できる市場のこと(一部無料) ゲームは作れないけどモデルは作れる,モデルは作れないけどプ ログラムは書けるという人のお小遣い稼ぎの場にもなっています 23
  24. 24. UNITYの画面に慣れよう ーMAIN画面 Sceneビュー ここで3Dモデルの位置調整や回転を 行うことができる 24
  25. 25. UNITYの画面に慣れよう ーMAIN画面 Hierarchyタブ: Sceneビューに存在する3Dモデル やカメラなどのオブジェクトを 確認することができる 25
  26. 26. UNITYの画面に慣れよう ーMAIN画面 Projectタブ: このプロジェクトに追加した すべてのファイル (3Dモデル,モーションデー タ,スクリプト…) を確認することができる 26
  27. 27. UNITYの画面に慣れよう ーMAIN画面 Projectタブ: このプロジェクトに追加した すべてのファイル (3Dモデル,モーションデー タ,スクリプト…) を確認することができる 27
  28. 28. UNITYの画面に慣れよう ーMAIN画面 Consoleタブ: プロジェクトをRun(デバッグ) した時に警告やエラーが表示さ れる. C/C++でいうprintfのような標 準出力結果もここに表示される 28
  29. 29. UNITYの画面に慣れよう ーMAIN画面 Inspectorタブ: 3Dモデルやカメラなどのオブ ジェクトの細かい設定を行うこ とができる. このタブはかなり重要になるの でいつでも開いておく 29
  30. 30. UNITYの画面に慣れよう ーMAIN画面 主に  左のデバッグボタン  真ん中の一時停止ボタン を使います 30
  31. 31. INDEX-FIRST SESSION  WHO AM I?  Unityをインストールしよう  Unityってなに?  開発環境の比較  Unityで作られた作品(ゲーム)  Unityで作られた作品(映像)  実際にプロジェクトを作ってみよう  Unityの画面に慣れよう  画面が切り替わるアプリを作ってみよう  なめなび(仮)概要  画面遷移図  下準備 31
  32. 32. INDEX-FIRST SESSION  ボタンを表示させてみよう  メニュー画面をつくろう  メニューのシーンを保存する  背景色を変更する  タイトルを表示する  ボタンを並べていく  ボタンイベントを登録する  滑石ぷらぷら情報へ  新しいシーンを追加する  画像を表示する  ボタンイベントを登録する  滑石の風景を見る  今日のまとめ  LINKS 32
  33. 33. 画面が切り替わる アプリを作ってみよう 今回は長崎県長崎市滑石町を紹介するARアプリを作ってみます! なめし 33
  34. 34. なめなび(仮)概要  滑石にあるお店を紹介する  滑石の風景を撮影した動画を見ることができる  滑石ぷらぷら地図と連動してARコンテンツを提供す る  滑石ぷらぷら情報(Facebookページ)へのリンクを貼 る 滑石のいいところをたくさん紹介するアプリにしよう! 34
  35. 35. 画面遷移図 メイン画面のイメージ 4つの画面に移動できるような メニュー画面を作る <今流行りのフラットデザイン風です…フフフ Twitterアイコンをタップしたら製作者の アカウントにつながる(余力があれば) 35
  36. 36. 画面遷移図 『お店の情報を見る』ボタンの移動先 Google Mapsを埋め込み,予め お店の場所にピンを表示してお く ピンをタップすると,お店の名 前が表示される 36
  37. 37. 画面遷移図 『滑石の風景を見る』ボタンの移動先 Youtubeの動画へのリンクを貼 る→タップするとブラウザが起 動して動画を見ることができる 37
  38. 38. 画面遷移図 『滑石ぷらぷら情報へ』ボタンの移動先 『滑石ぷらぷら情報』の Facebookページを開く 38
  39. 39. 下準備 39 File->Build Setting をクリック
  40. 40. 下準備 40 持っている方の端末を選んで クリック
  41. 41. 下準備 41 アスペクト比が 変更できるようになる!
  42. 42. 下準備 42 iPhone5(縦)だと こんなかんじ
  43. 43. ボタンを表示させてみよう Assetsフォルダの中で 右クリック 新しいフォルダを作る 43
  44. 44. ボタンを表示させてみよう 『Scripts』という名前 にする プログラムはすべてこのフォルダの中に入れます. 44
  45. 45. ボタンを表示させてみよう Scriptsフォルダの中に 入ったら,なにも無いと ころで右クリック Create->Javascriptをク リック 45
  46. 46. ボタンを表示させてみよう 『Menu』という 名前をつける このMenuファイルを編集して最初の画面を作っていきます 46
  47. 47. ボタンを表示させてみよう 47
  48. 48. ボタンを表示させてみよう (プログラム解説)  Start関数 このプログラムファイルが呼びだされた時に実行される関数. この関数を使って変数の初期化を行ったり,アプリの使い方などを説明する ポップアップを表示させたりする  Update関数 1フレームごとに呼び出される関数で,何かの処理を連続的に行いたいとき に使用する (cf.オブジェクトを1ずつ移動させたい,回転させたい)  #pragma strict このプログラムを静的型判定モードにする. 静的型判定モードとは,変数を定義するときにしっかり型宣言をしてあげな いとプログラムが動かないようにするモードのこと. 通常JavaScriptでは『var』で変数を宣言しておけば整数でも浮動小数点数 でも文字でも使える変数を定義できる(動的型付けという)が,型を解析する 分だけプログラムの処理が重くなる. 48
  49. 49. ボタンを表示させてみよう Update関数の下に function OnGUI(){ if (GUI.Button(Rect(10,10,200,20),“おしてね”)) Debug.Log(“おされた"); } というプログラムを追加する 49
  50. 50. 50
  51. 51. ボタンを表示させてみよう GameObject-> Create Empty を選択 51
  52. 52. ボタンを表示させてみよう 『Menu』という名前に 変えておく 52
  53. 53. ボタンを表示させてみよう 53 ドラッグ スクリプトが 追加される
  54. 54. ボタンを表示させてみよう 54 クリック
  55. 55. ボタンを表示させてみよう 55 ボタンが出てきた! ボタンを押したら 表示されればOK
  56. 56. ボタンを表示させてみよう (プログラムの解説)  OnGUI関数 GUIに関係するクラスを使用できる.この関数内以外で GUI.Button()を呼び出しても動きません  GUI.Button(Position:Rect,Text:String) ボタンを表示させる関数.Positionでボタンを表示させる位 置を決める.Textでボタンに表示させる文字列を指定.  Rect(left: float, top: float, width: float, height: float) 四角形の座標を決めるクラス. 56
  57. 57. メニュー画面を作ろう 57 GUI.Label() GUI.Button()
  58. 58. メニューのシーンを 保存する 58 File->SaveScene をクリック
  59. 59. メニューのシーンを 保存する 59 『Menu』で保存
  60. 60. メニューのシーンを 保存する 60 Menuシーンができた!
  61. 61. 背景色を変更する 61 MainCameraをクリック Backgroundを変更していく
  62. 62. 背景色を変更する 62 数値を変更する
  63. 63. 背景色を変更する 63 背景色が変わった!
  64. 64. タイトルを表示する var myStyle : GUIStyle = new GUIStyle(); myStyle.normal.textColor = Color.white; myStyle.fontSize = 50; GUI.Label(Rect(Screen.width-240, 10, Screen.width, 200), " なめなび", myStyle); 64
  65. 65. タイトルを表示する 65 タイトルが表示できた!
  66. 66. ボタンを並べていく GUI.backgroundColor = Color.yellow; GUI.Button(Rect(Screen.width-240,100,200,70), "お店の情報 を見る"); GUI.Button(Rect(Screen.width-240,200,200,70), "なめしの風 景を見る”); GUI.Button(Rect(Screen.width-240,300,200,70), "滑石ぷらぷ ら地図AR"); GUI.Button(Rect(Screen.width-240,400,200,70), "滑石ぷらぷ ら情報へ"); 66
  67. 67. ボタンを並べていく 67 ボタンが表示できた!
  68. 68. ボタンイベントを登録する ー滑石ぷらぷら情報へ if(GUI.Button(Rect(Screen.width-240,400,200,70), "滑石ぷら ぷら情報へ")){ Application.OpenURL("https://www.facebook.com/pages /%E6%BB%91%E7%9F%B3%E3%81%B7%E3%82%89%E3%81%B7%E3%82%89%E6 %83%85%E5%A0%B1/417710838312785"); } ※URLは実際にFaceBookの滑石ぷらぷら情報のページを開いてコ ピー&ペーストする 68
  69. 69. ボタンイベントを登録する ー滑石ぷらぷら情報へ (プログラムの解説) Application.OpenURL(“URL"); 引数に指定したURLのページを開く. なお,Webページを開くときは端末標準搭載のブラウザを起動す る. Android→ブラウザ iOS→Safari 69
  70. 70. ボタンイベントを登録する ー滑石ぷらぷら情報へ 70 ボタンを押すと ページが開く
  71. 71. 新しいシーンを追加する 71 File->New Scene をクリック
  72. 72. 新しいシーンを追加する 72 空のGameObjectを追加して, 『view』と名前を変更 背景色も変えておく
  73. 73. 新しいシーンを追加する 73 View.jsを追加
  74. 74. 新しいシーンを追加する ー練習 74 GUI.LabelGUI.LabelGUI.Button
  75. 75. Youtubeの動画のURLは https://www.youtube.com/watch?v=Wjca-QH_rhQ です. 75
  76. 76. 新しいシーンを追加する (解答) var titleStyle : GUIStyle = new GUIStyle(); /*タイトルのスタイル*/ titleStyle.normal.textColor = Color.white; titleStyle.fontSize = 50; var myStyle : GUIStyle = new GUIStyle(); /*本文のラベルのスタイル*/ myStyle.normal.textColor = Color.white; myStyle.fontSize = 20; GUI.backgroundColor = Color.blue; /*ボタンの背景色*/ GUI.Label(Rect(Screen.width-240, 10, Screen.width, 200), "なめなび", titleStyle); GUI.Label(Rect(Screen.width-240, 100, Screen.width, 200), "2013滑石くんち 龍踊り", myStyle); if(GUI.Button(Rect(Screen.width-240,300,200,70), "Youtubeで動画を見る")){ Application.OpenURL("https://www.youtube.com/watch?v=Wjca-QH_rhQ"); } GUI.Label(Rect(Screen.width-220, 450, Screen.width, 200), "今後もどんどんn追加していきます! ", myStyle); 76
  77. 77. 画像を表示する 77 GameObject ->CreateOther ->GUI.Textureを選択
  78. 78. 画像を表示する 78 ロゴが表示された
  79. 79. 画像を表示する 79 任意の画像を追加
  80. 80. 画像を表示する 80 名前を変更する Textureを追加した画 像に変えて,数値を調 整する ※ここでシーンを保存します.名前はviewです.
  81. 81. ボタンイベントを登録する 81 今日はこの2つの イベントを登録します 今日はこの2つの イベントを登録します
  82. 82. ボタンイベントを登録する ー滑石の風景を見る 82 作ったシーンを 登録する File-> Build Settings をクリック
  83. 83. ボタンイベントを登録する ー滑石の風景を見る Menu.js if(GUI.Button(Rect(Screen.width-240,200,200,70), "なめしの 風景を見る")){ Application.LoadLevel("view"); } 83
  84. 84. ボタンイベントを登録する ー滑石の風景を見る (プログラム解説) Application.LoadLevel(“シーン名"); 引数にシーン名を追加すると,その名前のシーンに移行する Unityでは,画面が移り変わる動作はシーンを変更させることで 画面を切り替えているようにみせている 84
  85. 85. INDEX-FIRST SESSION  ボタンを表示させてみよう  メニュー画面をつくろう  メニューのシーンを保存する  背景色を変更する  タイトルを表示する  ボタンを並べていく  ボタンイベントを登録する  滑石ぷらぷら情報へ  新しいシーンを追加する  画像を表示する  ボタンイベントを登録する  滑石の風景を見る  今日のまとめ  LINKS 85
  86. 86. 今日のまとめ  Unityのインストール  画面構成に慣れる  ボタンを表示してみる  画面を切り替えるボタンイベントをつくる  ブラウザを起動するボタンイベントをつくる 86
  87. 87. 次回  AR機能をつくる  画面のデザインを画面構成図に近づける  スマホ向けにビルドしてみる(できれば) 87
  88. 88. 今日はお疲れ様でした! 88
  89. 89. LINKS  Unity3D(Unityの公式HP) http://japan.unity3d.com/  Cacoo(画面遷移図を作ったWebサービス) https://cacoo.com/  SlideShare(このスライドはネットでも公開してます!) http://www.slideshare.net/yomoyamareiji  Mail(なんかわからないことがあれば) b2211017@sun.ac.jp  Twitter(急ぎでアドバイスがほしいorメールがめんどくさい) https://twitter.com/reiji1020 89

×