20140508 在校生向けUnity&AR講座
Upcoming SlideShare
Loading in...5
×
 

20140508 在校生向けUnity&AR講座

on

  • 777 views

20140508に行った在校生向けUnity&AR講座のスライド ...

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

Statistics

Views

Total Views
777
Views on SlideShare
760
Embed Views
17

Actions

Likes
2
Downloads
6
Comments
0

3 Embeds 17

http://www.slideee.com 10
http://s.deeeki.com 5
http://webcache.googleusercontent.com 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

20140508 在校生向けUnity&AR講座 20140508 在校生向けUnity&AR講座 Presentation Transcript

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