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

1. UNITY
&
AR
~SPRING~
UNIVERSITY OF NAGASAKI
SAYA KATAFUCHI
1

2. INDEX-FIRST SESSION
 WHO AM I?
 Unityをインストールしよう
 Unityってなに？
 開発環境の比較
 Unityで作られた作品(ゲーム)
 Unityで作られた作品(映像)
 実際にプロジェクトを作ってみよう
 Unityの画面に慣れよう
 画面が切り替わるアプリを作ってみよう
 なめなび(仮)概要
 画面遷移図
 下準備
2

3. INDEX-FIRST SESSION
 ボタンを表示させてみよう
 メニュー画面をつくろう
 メニューのシーンを保存する
 背景色を変更する
 タイトルを表示する
 ボタンを並べていく
 ボタンイベントを登録する
 滑石ぷらぷら情報へ
 新しいシーンを追加する
 画像を表示する
 ボタンイベントを登録する
 滑石の風景を見る
 今日のまとめ
 LINKS
3

4. INDEX-FIRST SESSION
 WHO AM I?
 Unityをインストールしよう
 Unityってなに？
 開発環境の比較
 Unityで作られた作品(ゲーム)
 Unityで作られた作品(映像)
 実際にプロジェクトを作ってみよう
 Unityの画面に慣れよう
 画面が切り替わるアプリを作ってみよう
 なめなび(仮)概要
 画面遷移図
 下準備
4

5. WHO AM I ?
片渕 小夜（かたふち さや） 21歳
4年生 吉村ゼミ所属
 人工知能の研究をしています
 趣味でARアプリ作ります
 AR使って2次元キャラクターとわいわいしてたらな
んかiPad貰いました
これからなかよくしてね！
5

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

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

8. というのは冗談で・・・
8

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

10. INDEX-FIRST SESSION
 WHO AM I?
 Unityをインストールしよう
 Unityってなに？
 開発環境の比較
 Unityで作られた作品(ゲーム)
 Unityで作られた作品(映像)
 実際にプロジェクトを作ってみよう
 Unityの画面に慣れよう
 画面が切り替わるアプリを作ってみよう
 なめなび(仮)概要
 画面遷移図
 下準備
10

11. UNITYをインストール
しよう
Unity3Dの公式ホームページからダウンロードできます！
2014年4月30日現在の公式Webサイト
ここから
ダウンロード！
11

12. UNITYって何？
 基本無料で使える3Dゲーム制作ソフト
 iPhone,iPad,Androidなどのスマートフォン端末向けのアプリが作れ
る！(iOS端末は別途Developerプログラムへの加入が必要)
 ゲームだけでなく、映像作品なんかも作れます
 ３Dモデルを使ったゲームやアプリをつくるなら断然Unityでしょ！
12

13. 開発環境の比較
UNITY
 画面上ですぐに動作
確認ができる
 3Dモデルの扱いが簡
単
 JavaScript,C#など比
較的使いやすいプロ
グラミング言語を使
うことができる
 機能によってはPro版
(13万円)を要求され
る…
ANDROID(JAVA)
IOS(OBJECTIVE-C)
 30億のデバイスで走る
Java(笑)
 Objective-Cとかいう意
味不明言語
 推奨されている開発環
境が使いにくい
 3Dモデルを表示させる
だけでたくさんコード
を書かなければいけな
い(つらい)
 開発環境は無料でフル
機能が使える
13

14. 30億のデバイスで走るJavaの裏ではたくさんのプログラマが闇を見ている
14

15. UNITYで作られた作品
(ゲーム)
iOS端末向けアプリ
『ドラゴンクエストⅧ 空と海と大地と呪われし姫君』
15

16. UNITYで作られた作品
(映像)
16

17. INDEX-FIRST SESSION
 WHO AM I?
 Unityをインストールしよう
 Unityってなに？
 開発環境の比較
 Unityで作られた作品(ゲーム)
 Unityで作られた作品(映像)
 実際にプロジェクトを作ってみよう
 Unityの画面に慣れよう
 画面が切り替わるアプリを作ってみよう
 なめなび(仮)概要
 画面遷移図
 下準備
17

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

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

20. 実際にプロジェクトを
作ってみよう
新規フォルダを作成
→選択
20

21. 実際にプロジェクトを
作ってみよう
指定したとおりになってい
る事を確認したら・・・
Createをクリック
21

22. UNITYの画面に慣れよう
ーWELCOME画面
Unityの使い方の
ビデオチュートリアルを
見ることができる
Unityに関するマニュアル
や，質問をする
フォーラムなどの案内
アセットストアへ
アクセス
22

23. (補足)
アセットストアとは
アセットストアは
 3Dモデル
 プログラム
 モーション
 サウンド・エフェクト，BGM
などのソフトウェア開発に必要な素材を有料で手に入れることの
できる市場のこと(一部無料)
ゲームは作れないけどモデルは作れる，モデルは作れないけどプ
ログラムは書けるという人のお小遣い稼ぎの場にもなっています
23

24. UNITYの画面に慣れよう
ーMAIN画面
Sceneビュー
ここで3Dモデルの位置調整や回転を
行うことができる
24

25. UNITYの画面に慣れよう
ーMAIN画面
Hierarchyタブ：
Sceneビューに存在する3Dモデル
やカメラなどのオブジェクトを
確認することができる
25

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

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

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

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

30. UNITYの画面に慣れよう
ーMAIN画面
主に
 左のデバッグボタン
 真ん中の一時停止ボタン
を使います
30

31. INDEX-FIRST SESSION
 WHO AM I?
 Unityをインストールしよう
 Unityってなに？
 開発環境の比較
 Unityで作られた作品(ゲーム)
 Unityで作られた作品(映像)
 実際にプロジェクトを作ってみよう
 Unityの画面に慣れよう
 画面が切り替わるアプリを作ってみよう
 なめなび(仮)概要
 画面遷移図
 下準備
31

32. INDEX-FIRST SESSION
 ボタンを表示させてみよう
 メニュー画面をつくろう
 メニューのシーンを保存する
 背景色を変更する
 タイトルを表示する
 ボタンを並べていく
 ボタンイベントを登録する
 滑石ぷらぷら情報へ
 新しいシーンを追加する
 画像を表示する
 ボタンイベントを登録する
 滑石の風景を見る
 今日のまとめ
 LINKS
32

33. 画面が切り替わる
アプリを作ってみよう
今回は長崎県長崎市滑石町を紹介するARアプリを作ってみます！
なめし
33

34. なめなび(仮)概要
 滑石にあるお店を紹介する
 滑石の風景を撮影した動画を見ることができる
 滑石ぷらぷら地図と連動してARコンテンツを提供す
る
 滑石ぷらぷら情報(Facebookページ)へのリンクを貼
る
滑石のいいところをたくさん紹介するアプリにしよう！
34

35. 画面遷移図
メイン画面のイメージ
4つの画面に移動できるような
メニュー画面を作る
＜今流行りのフラットデザイン風です…フフフ
Twitterアイコンをタップしたら製作者の
アカウントにつながる(余力があれば)
35

36. 画面遷移図
『お店の情報を見る』ボタンの移動先
Google Mapsを埋め込み，予め
お店の場所にピンを表示してお
く
ピンをタップすると，お店の名
前が表示される
36

37. 画面遷移図
『滑石の風景を見る』ボタンの移動先
Youtubeの動画へのリンクを貼
る→タップするとブラウザが起
動して動画を見ることができる
37

38. 画面遷移図
『滑石ぷらぷら情報へ』ボタンの移動先
『滑石ぷらぷら情報』の
Facebookページを開く
38

39. 下準備
39
File->Build Setting
をクリック

40. 下準備
40
持っている方の端末を選んで
クリック

41. 下準備
41
アスペクト比が
変更できるようになる！

42. 下準備
42
iPhone5(縦)だと
こんなかんじ

43. ボタンを表示させてみよう
Assetsフォルダの中で
右クリック
新しいフォルダを作る
43

44. ボタンを表示させてみよう
『Scripts』という名前
にする
プログラムはすべてこのフォルダの中に入れます．
44

45. ボタンを表示させてみよう
Scriptsフォルダの中に
入ったら，なにも無いと
ころで右クリック
Create->Javascriptをク
リック
45

46. ボタンを表示させてみよう
『Menu』という
名前をつける
このMenuファイルを編集して最初の画面を作っていきます
46

47. ボタンを表示させてみよう
47

48. ボタンを表示させてみよう
(プログラム解説)
 Start関数
このプログラムファイルが呼びだされた時に実行される関数．
この関数を使って変数の初期化を行ったり，アプリの使い方などを説明する
ポップアップを表示させたりする
 Update関数
1フレームごとに呼び出される関数で，何かの処理を連続的に行いたいとき
に使用する
(cf.オブジェクトを1ずつ移動させたい，回転させたい)
 #pragma strict
このプログラムを静的型判定モードにする．
静的型判定モードとは，変数を定義するときにしっかり型宣言をしてあげな
いとプログラムが動かないようにするモードのこと．
通常JavaScriptでは『var』で変数を宣言しておけば整数でも浮動小数点数
でも文字でも使える変数を定義できる(動的型付けという)が，型を解析する
分だけプログラムの処理が重くなる．
48

49. ボタンを表示させてみよう
Update関数の下に
function OnGUI(){
if (GUI.Button(Rect(10,10,200,20),“おしてね”))
Debug.Log(“おされた");
}
というプログラムを追加する
49

50. 50

51. ボタンを表示させてみよう
GameObject->
Create Empty
を選択
51

52. ボタンを表示させてみよう
『Menu』という名前に
変えておく
52

53. ボタンを表示させてみよう
53
ドラッグ
スクリプトが
追加される

54. ボタンを表示させてみよう
54
クリック

55. ボタンを表示させてみよう
55
ボタンが出てきた！
ボタンを押したら
表示されればOK

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
GUI.Label()
GUI.Button()

58. メニューのシーンを
保存する
58
File->SaveScene
をクリック

59. メニューのシーンを
保存する
59
『Menu』で保存

60. メニューのシーンを
保存する
60
Menuシーンができた！

61. 背景色を変更する
61
MainCameraをクリック
Backgroundを変更していく

62. 背景色を変更する
62
数値を変更する

63. 背景色を変更する
63
背景色が変わった！

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
タイトルが表示できた！

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
ボタンが表示できた！

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. ボタンイベントを登録する
ー滑石ぷらぷら情報へ
（プログラムの解説）
Application.OpenURL(“URL");
引数に指定したURLのページを開く．
なお，Webページを開くときは端末標準搭載のブラウザを起動す
る．
Android→ブラウザ
iOS→Safari
69

70. ボタンイベントを登録する
ー滑石ぷらぷら情報へ
70
ボタンを押すと
ページが開く

71. 新しいシーンを追加する
71
File->New Scene
をクリック

72. 新しいシーンを追加する
72
空のGameObjectを追加して，
『view』と名前を変更
背景色も変えておく

73. 新しいシーンを追加する
73
View.jsを追加

74. 新しいシーンを追加する
ー練習
74
GUI.LabelGUI.LabelGUI.Button

75. Youtubeの動画のURLは
https://www.youtube.com/watch?v=Wjca-QH_rhQ
です．
75

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
GameObject
->CreateOther
->GUI.Textureを選択

78. 画像を表示する
78
ロゴが表示された

79. 画像を表示する
79
任意の画像を追加

80. 画像を表示する
80
名前を変更する
Textureを追加した画
像に変えて，数値を調
整する
※ここでシーンを保存します．名前はviewです．

81. ボタンイベントを登録する
81
今日はこの２つの
イベントを登録します
今日はこの２つの
イベントを登録します

82. ボタンイベントを登録する
ー滑石の風景を見る
82
作ったシーンを
登録する
File->
Build Settings
をクリック

83. ボタンイベントを登録する
ー滑石の風景を見る
Menu.js
if(GUI.Button(Rect(Screen.width-240,200,200,70), "なめしの
風景を見る")){
Application.LoadLevel("view");
}
83

84. ボタンイベントを登録する
ー滑石の風景を見る
(プログラム解説)
Application.LoadLevel(“シーン名");
引数にシーン名を追加すると，その名前のシーンに移行する
Unityでは，画面が移り変わる動作はシーンを変更させることで
画面を切り替えているようにみせている
84

85. INDEX-FIRST SESSION
 ボタンを表示させてみよう
 メニュー画面をつくろう
 メニューのシーンを保存する
 背景色を変更する
 タイトルを表示する
 ボタンを並べていく
 ボタンイベントを登録する
 滑石ぷらぷら情報へ
 新しいシーンを追加する
 画像を表示する
 ボタンイベントを登録する
 滑石の風景を見る
 今日のまとめ
 LINKS
85

86. 今日のまとめ
 Unityのインストール
 画面構成に慣れる
 ボタンを表示してみる
 画面を切り替えるボタンイベントをつくる
 ブラウザを起動するボタンイベントをつくる
86

87. 次回
 AR機能をつくる
 画面のデザインを画面構成図に近づける
 スマホ向けにビルドしてみる(できれば)
87

88. 今日はお疲れ様でした！
88

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