20140514在校生向けUnity&AR講座

2,723 views
2,477 views

Published on

在校生向けのAR講座(後半)で使用した資料をアップロードしました.コード量少なめ,今回はVuforiaの使い方についての説明.

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

No Downloads
Views
Total views
2,723
On SlideShare
0
From Embeds
0
Number of Embeds
254
Actions
Shares
0
Downloads
27
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

20140514在校生向けUnity&AR講座

  1. 1. UNITY & AR ~SPRING~ UNIVERSITY OF NAGASAKI SAYA KATAFUCHI
  2. 2. INDEX-SECOND SESSION  ARコンテンツを作ろう  Vuforiaの使い方  サインインする  SDKをダウンロードする  画像を登録する  特徴点画像をダウンロードする  Unityで使用する  AR機能を作る  メニュー画面からリンクさせる  テストしてみよう  なめなび(仮)を端末に書きだそう  Android  iOS
  3. 3. INDEX-SECOND SESSION  まとめ  伝えたかったこと  Contest…?  Links
  4. 4. INDEX-SECOND SESSION  ARコンテンツを作ろう  Vuforiaの使い方  サインインする  SDKをダウンロードする  画像を登録する  特徴点画像をダウンロードする  Unityで使用する  AR機能を作る  メニュー画面からリンクさせる  なめなび(仮)を端末に書きだそう  Android  iOS
  5. 5. 時間がなさそうなので… 前回までの講義スライドで作ったプロジェクトの完成版を配布し ています (デザイン,ボタン等細かい調整を行っています) ARに関するSDKも入れていますので, 今日はこのプロジェクトを使用してください.
  6. 6. ARコンテンツをつくろう 滑石ぷらぷら地図 この地図を認識したら 何か表示できるように したい!
  7. 7. ARコンテンツをつくろう (CF.おくんちナビ) おくんちナビ(提供:NIB長崎放送 制作:扇精光) 庭先回りMAPを認識 →踊町の歴史や出し物 の所在,レストランの 情報などが提示される
  8. 8. ARコンテンツをつくろう  地図を読み込んだら,地図の上に何か表示させよう →本当は滑石に関係する物を表示させたいけど,滑石って何も ない丁度良い素材がないので県立大学のマークを重畳表示さ せてみよう ※Unityを用いたゲーム開発について • ジャイロセンサ • GPS • カメラ(インサイド・アウトサイド問わず) などの端末独自の機能を用いたプログラムは,Unity内では 十分にテストをすることができません. これらの機能を使ったアプリは端末にプログラムを入れて デバッグする必要があります.
  9. 9. VUFORIAの使い方  AR機能をつけるためのSDK『Vuforia(ビューフォリア)』 https://developer.vuforia.com/
  10. 10. VUFORIAの使い方 (サインインする) 会員登録が必要! メールアドレスと パスワードを登録する
  11. 11. VUFORIAの使い方 (サインインする) 上から • 名 • 姓 • メールアドレス • メールアドレス再入力(確認) • ログインパスワード • パスワード再入力(確認) • 所属組織名(会社) • 在住国 • どこでVuforiaを知ったか? • ユーザーネーム
  12. 12. VUFORIAの使い方 (サインインする) • iOSとAndroidどちらの端末を 使うつもりか? • 利用規約に同意する • メールマガジンの登録 • 不正なユーザー登録を防ぐための 認証
  13. 13. VUFORIAの使い方 (サインインする) • 登録が完了すると,正式登録のためのverifyメールが届きます • きちんと登録されていれば,登録したメールアドレスとログ インパスワードでマイページにログインできるようになりま す
  14. 14. VUFORIAの使い方 (SDKをダウンロードする) ログインした状態で Download the SDK をクリック
  15. 15. SDKとは ソフトウェア開発キット(Software Development Kit)の略 特定のソフトウェアパッケージやソフトウェアフレームワーク, コンピュータ・システム,オペレーティングシステムを開発する ためのキットのことを指す アプリ開発やソフトウェア開発においてよく目にする言葉であり, 技術系の会社に就職するときの筆記試験においてもこれに関する 質問をされることがある…かも?
  16. 16. VUFORIAの使い方 (SDKをダウンロードする) Download Unity Extension 2.8.9 for Android & iOS をクリック
  17. 17. VUFORIAの使い方 (SDKをダウンロードする) 利用規約を読む 一番下まで読むと Agreeボタンが押せるようになる
  18. 18. VUFORIAの使い方 (SDKをダウンロードする) ダウンロードできた!
  19. 19. VUFORIAの使い方 (画像を登録する) ログインした状態で TargetManager をクリック
  20. 20. VUFORIAの使い方 (画像を登録する) このボタンから マーカー画像を登録する フォルダを作ります
  21. 21. VUFORIAの使い方 (画像を登録する) 画像をまとめるフォルダ の名前を入力
  22. 22. VUFORIAの使い方 (画像を登録する) 追加できた!
  23. 23. VUFORIAの使い方 (画像を登録する) フォルダの中身はまだ 空っぽです このボタンから画像を登 録します
  24. 24. VUFORIAの使い方 (画像を登録する) 画像の情報を入力します 上から ・画像の名前 ・画像のタイプ(1枚だけか? 箱状の画像タイプか?等) • 画像の幅 • 画像ファイルを選択
  25. 25. VUFORIAの使い方 (画像を登録する) 登録が完了した!
  26. 26. ShowFeatures をクリックすると 画像に付いた 特徴点情報を確認できます
  27. 27. VUFORIAの使い方 (特徴点画像をダウンロードする) 1)チェックを入れて 2)ダウンロード
  28. 28. VUFORIAの使い方 (特徴点画像をダウンロードする) UnityEditorにチェックを入れて 『Create』をクリック
  29. 29. VUFORIAの使い方 (特徴点画像をダウンロードする) ダウンロードできた
  30. 30. VUFORIAの使い方 (UNITYで使用する) まずAR機能用の新しいシーンを追加しましょう New Sceneで新しいシーンを作成 Ctrl + Sで名前をつけてシーンを保存 今回は『AR』という名前をつけました
  31. 31. VUFORIAの使い方 (UNITYで使用する) Assets->Import Package-> Custom Packageをクリック
  32. 32. VUFORIAの使い方 (UNITYで使用する) SDKファイルの方を選択し, 『開く』をクリック
  33. 33. VUFORIAの使い方 (UNITYで使用する) 全てにチェックが入った状態で 『Import』をクリック
  34. 34. VUFORIAの使い方 (UNITYで使用する) ファイルがインポートできた!
  35. 35. VUFORIAの使い方 (UNITYで使う) 同じ要領でマーカー画像のファイルも読み込む
  36. 36. VUFORIAの使い方 (UNITYで使う) 全てにチェックが入った状態で 『Import』をクリック
  37. 37. VUFORIAの使い方 (UNITYで使う) 全てにチェックが入った状態で 『Import』をクリック
  38. 38. AR機能を作る Assets->Qualcomm Augumented Reality-> Prefabs の中にある ImageTargetを選択
  39. 39. AR機能を作る ImageTargetとARCameraを ドラッグしてHierarchyタブに持っていく
  40. 40. AR機能を作る ARCameraのインスペクタに Data Set Load Behaviour という項目がある チェックボックスにチェックを入れ, Activateにもチェックを入れる 画像セット名
  41. 41. AR機能を作る ImageTargetのインスペクタに Image Target Behaviour という項目がある DataSetを20140515ARKouzaに, ImageTarget をnameshi_mapに指定する
  42. 42. AR機能を作る GameObject->Create Other- > Cubeをクリックし, Hierarchyに追加する
  43. 43. AR機能を作る Cubeをドラッグし, ImageTargetに重ね合わせる ※画像を読み込んだ時に表示させたいものは ImageTargetの中に入れる!
  44. 44. AR機能を作る ImageTargetの下にCubeが 入ったことを確認
  45. 45. AR機能を作る サイズが小さすぎて Cubeが見えないので…
  46. 46. AR機能を作る Scaleを調整して サイズを大きくする
  47. 47. AR機能を作る Cubeが半分埋まっていたので, Y軸方向のPositionを調整する
  48. 48. AR機能を作る GameObject->Create Other ->Directional Light をクリック
  49. 49. AR機能を作る Cubeがきれいに見えるように なった!
  50. 50. AR機能を作る このシーンで使うカメラは ARCameraなので MainCameraをDeleteする
  51. 51. AR機能を作る (メニュー画面からリンクさせる) Unityの各シーンを繋ぐ時はApplication.LoadLevelを使う menu.js If(GUI.Button(Rect(Screen.width-240,300,200,70)),”滑石ぷ らぷら地図AR”){ Application.Loadlevel(“AR”) }
  52. 52. AR機能を作る (まとめ)  Hierarchyタブに『ARCamera』と『ImageTarget』を追加す る.  Inspectorタブでマーカーとして使用する画像セットを指定す る  ARで表示させたいモノはGameObject(今回はCube)で作り, ImageTargetの中に入れる  MainCameraを消し忘れると動かないので,必ず消すこと
  53. 53. INDEX-SECOND SESSION  ARコンテンツを作ろう  Vuforiaの使い方  サインインする  SDKをダウンロードする  画像を登録する  特徴点画像をダウンロードする  Unityで使用する  AR機能を作る  メニュー画面からリンクさせる  テストしてみよう  なめなび(仮)を端末に書きだそう  Android  iOS
  54. 54. なめなびを端末に書き出そう (ANDROID) Androidは私が端末を持っていないので詳しく説明出来るわけで はありませんが… Androidアプリを作る為に必要な Android SDK(http://developer.android.com/sdk/index.html) をダウンロードしておきます Android SDKには,Androidのバージョンごとに違うSDKが用意 されています. 自分の持っている端末のバージョンを確認してダウンロードする ようにして下さい
  55. 55. (補足) ANDROIDのバージョン 今みなさんが持っている(であろう)Android端末のバージョンと APIレベルの対応表 プラットフォーム APIレベル コードネーム 公開日 Android4.0 14 Ice Cream Sandwich 2011/10/19 Android4.0.1 Android4.0.2 Android4.0.3 15 Ice Cream Sandwich MR1 2011/12/16 Android4.1 16 Jelly Bean 2012/12/16 Android4.1.1 Android4.2 17 Jelly Bean MR1 2012/12/13 Android4.2.2 Android4.3 18 Jelly Bean MR2 2013/07/24
  56. 56. なめなびを端末に書き出そう (ANDROID) Unity→Preferencesでウィンドウを開く Extensional Toolsタブの, Android SDK Locationから SDKがある場所を指定する
  57. 57. なめなびを端末に書き出そう (IOS) iOS端末に書き出す時は『Xcode』というMacの開発環境を用意 しなければならない XcodeはAppStoreで無料でインストール可能
  58. 58. なめなびを端末に書き出そう (IOS) また,端末に書き出す機能はAppleDeveloperライセンスの所持 者に限定されるので,7800円のお布施(2014年5月14日現在)を Appleに払ってDeveloperプログラムに参加する必要がある Apple Developer Programへの登録に関してはここでは触れま せん.以下のURLから確認して下さい. https://developer.apple.com/jp/support/ios/enrollment.ht ml
  59. 59. なめなびを端末に書き出そう File->Build Settings… をクリック
  60. 60. なめなびを端末に書き出そう 使うシーンをすべて登録して Buildをクリック
  61. 61. なめなびを端末に書きだそう BuildとBuild & Runの違い  Build Unityで作ったソフトウェアを各プラットフォームで使用で きるファイルに変換し,所定の場所に保存する  Build & Run Unityで作ったソフトウェアを各プラットフォームで使用で きるファイルに変換し,さらに各端末の方で実際にプログラ ムを動かす
  62. 62. なめなびを端末に書きだそう (端末の設定) PlayerSettingsをクリック
  63. 63. なめなびを端末に書きだそう (端末の設定) Inspectorタブに設定画面が表示される 上から • 企業名(任意) • アプリ名 • アプリのアイコン • アプリ内で使用するカーソル画像 • カーソル画像における先端位置 下のタブでは各端末ごとにスプラッシュスクリーンや アイコンの設定,デフォルトの端末の向き(縦・横)などを 指定することができます
  64. 64. INDEX-SECOND SESSION  まとめ  伝えたかったこと  Contest…?  Links
  65. 65. まとめ  (今回は飛ばしたが)Vuforiaへのユーザー登録を行う  SDKと特徴点画像をダウンロードする  この時Unity用のパッケージでダウンロードすること  ARCamera,ImageTargetのInspectorタブで画像セットの指 定を忘れない  ARで表示したいものはImageTargetの中に入れる  (Androidの場合)自分の持っている端末とAndroidSDKのバー ジョンを間違えないようにする  (iOSの場合)AppleDeveloperProgramに参加しないとほぼ何 もできない
  66. 66. INDEX-SECOND SESSION  まとめ  伝えたかったこと  Contest…?  Links
  67. 67. 伝えたかったこと  (慣れれば)アプリ開発難しくないよ!  複雑なアプリでも,誰かが作ったプログラムを利用すれば割 りと簡単に作れる  「○○したいんだけどどうすればいいの?」→Google先生に 聞けば大体解決する  地方はすごくさびれてる  「ITで活発にする」のではなく,「地元住民の『地元と盛り 上げるぞ!』という気持ちをITが応援する」というのが理想 的→なめなび(仮)を作るためのコンテンツの少なさにかなり悩 まされた
  68. 68. INDEX-SECOND SESSION  まとめ  伝えたかったこと  Contest…?  Links
  69. 69. CONTEST…? 『長崎デジタルコンテスト』 http://digicon.me/ 作品を作って、審査員にプレゼンでアピールする実践 型コンテスト アプリやソフトウェアを作る『プログラミング部門』 CGや動画、デザインを作る『マルチメディア部門』 とても楽しくて良い経験になるコンテストなので参加 してみてもいいと思います
  70. 70. INDEX-SECOND SESSION  まとめ  伝えたかったこと  Contest…?  Links
  71. 71. LINKS  Unity3D(本日使ったソフトウェア『Unity3D』の配布元) http://japan.unity3d.com/  Qualcomm(AR機能を作るために使ったSDKの配布元) http://www.qualcomm.co.jp/  SlideShare(ネット上でもこのスライドを見ることができます) http://www.slideshare.net/yomoyamareiji  Mail(何かわからないこととかあれば) b2211017@sun.ac.jp  Twitter(メールが面倒くさい,すぐにアドバイスがほしい) https://twitter.com/reiji1020

×