20140508 在校生向けUnity&AR講座

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





4

WHO AM I ?

片渕　小夜（かたふち　さや） 21 歳

4 年生　吉村ゼミ所属

人工知能の研究をしています趣味で AR アプリ作ります AR 使って 2 次元キャラクターとわいわいしてたら

なんか iPad 貰いました

これからなかよくしてね！

5

ボスからおおいにいぢめてくださいとの指令が下ったので… 6

ビシバシいこうと思います！

7

というのは冗談で・・・

8

わからないことがあったらどんなに些細な事でも聞いてね！

9





10

UNITY をインストールしようUnity3D の公式ホームページからダウンロードできます！

2014 年 4 月 30 日現在の公式 Web サイト

ここからダウンロード！

11

UNITY って何？基本無料で使える 3D ゲーム制作ソフト

iPhone,iPad,Android などのスマートフォン端末向けのアプリが作れる！ (iOS 端末は別途 Developer プログラムへの加入が必要 )

ゲームだけでなく、映像作品なんかも作れます

３ D モデルを使ったゲームやアプリをつくるなら断然 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





17

実際にプロジェクトを作ってみよう

クリック

18


クリック

19


新規フォルダを作成→ 選択

20


指定したとおりになっている事を確認したら・・・

Create をクリック

21

UNITY の画面に慣れようー WELCOME 画面

Unity の使い方のビデオチュートリアルを

見ることができる

Unity に関するマニュアルや，質問をする

フォーラムなどの案内

アセットストアへアクセス

22

(補足 )アセットストアとはアセットストアは 3D モデルプログラムモーションサウンド・エフェクト， BGM

などのソフトウェア開発に必要な素材を有料で手に入れることのできる市場のこと (一部無料 )

ゲームは作れないけどモデルは作れる，モデルは作れないけどプログラムは書けるという人のお小遣い稼ぎの場にもなっています

23

UNITY の画面に慣れようー MAIN 画面

Scene ビューここで 3D モデルの位置調整や回転を行うことができる

24


Hierarchy タブ：Scene ビューに存在する 3D モデルやカメラなどのオブジェクトを確認することができる

25


Project タブ：このプロジェクトに追加したすべてのファイル(3D モデル，モーションデータ，スクリプト… )を確認することができる

26


Project タブ：このプロジェクトに追加したすべてのファイル(3D モデル，モーションデータ，スクリプト… )を確認することができる

27


Console タブ：プロジェクトを Run( デバッグ ) した時に警告やエラーが表示される．C/C++ でいう printf のような標準出力結果もここに表示される

28


Inspector タブ：3D モデルやカメラなどのオブジェクトの細かい設定を行うことができる．このタブはかなり重要になるのでいつでも開いておく

29


主に左のデバッグボタン真ん中の一時停止ボタンを使います

30





31






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

今日はこの２つのイベントを登録します

今日はこの２つのイベントを登録します

ボタンイベントを登録するー滑石の風景を見る

82

作ったシーンを登録する

File->Build Settings

をクリック

ボタンイベントを登録するー滑石の風景を見るMenu.js

if(GUI.Button(Rect(Screen.width-240,200,200,70), " なめしの風景を見る ")){

Application.LoadLevel("view");

}

83

ボタンイベントを登録するー滑石の風景を見る( プログラム解説 )

Application.LoadLevel(“ シーン名 ");

引数にシーン名を追加すると，その名前のシーンに移行する

Unity では，画面が移り変わる動作はシーンを変更させることで画面を切り替えているようにみせている

84






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( なんかわからないことがあれば )

　 [email protected]

Twitter(急ぎでアドバイスがほしい or メールがめんどくさい )

　 https://twitter.com/reiji1020

89

http://japan.unity3d.com/

http://japan.unity3d.com/

https://cacoo.com/

https://cacoo.com/

http://www.slideshare.net/yomoyamareiji



mailto:[email protected]

https://twitter.com/reiji1020

https://twitter.com/reiji1020

20140508 在校生向けUnity&AR講座

Software