SlideShare a Scribd company logo
1 of 101
Download to read offline
©makohira2013
第1回Unity初心者勉強会
2013.5.21
by makohira
©makohira2013
自己紹介開発者名:makohira(本名:山平誠)
住所:愛知県尾張旭市
  facebook.com/Makoto.Yamahira
  @makohira
普段の仕事:業務系SE
家で:スマホアプリ開発(Android, iPhone)
趣味:英語、飲み会、カラオケ・・・
最近よく行く所
レガーレカフェ栄(http://www.legarecafe.com)
名古屋iPhone開発者勉強会(https://www.facebook.com/iDevNagoya)
その他
実はまだUnity初心者です。
自分の勉強とモチベーション維持のため定期的にUnity初心者勉強会を開催しています。(愛知県名古屋市で)
今のところ非公開のイベントにしていますが、興味のある方は連絡ください。
©makohira2013
英文法クエスト
https://itunes.apple.com/us/app/ying-wen-fakuesuto/id596772964?l=ja&ls=1&mt=8
RPGで遊びながら英文法を勉強するiPhoneアプリです。
(...すいません。Unityではなくcocos2dで作りました。)
おかげさまで2013年3月18日にAppStore有料教育カテゴリで1位になりました^^
代表アプリ
©makohira2013
Unity初心者勉強会の目的
Unityで開発するためのキッカケを作る。
開発するための基本的な流れや技術を身に付
ける。
©makohira2013
まず大まかなイメージをつかんでもらいたいので...
©makohira2013
本日の予定
簡単なゲームを作ってみようと思います。
©makohira2013
TestGame01
上から出現する球体をひたすら
避けるゲーム。
...しょぼくてゴメンなさい。
でもコレを作ります。
©makohira2013
1.プロジェクトの作成
メニューから[File]-[New Project...]を選択
プロジェクトの場所を決めて[Create Project]をクリック
©makohira2013
こんな画面が表示されると思います。
©makohira2013
Unityではゲーム開始直前の世界を作成します。
ヒエラルキービュー
ここに「ゲームオブジェクト」
を配置して画面を組み立てる。
©makohira2013
それではPlayerを作ってみましょう。
メニューから
[GameObject]-[Create Other]-[Cube]を選択
2.Playerの作成
©makohira2013
ヒエラルキービューに「Cube」が追加されました。
右側のシーンビューで実際のグラフィックを確認できま
す。(小さくて見にくいかもしれませんが。)
©makohira2013
Cubeの設定をしてみましょう。
インスペクタ
ここで「ゲームオブジェクト」
の設定をする。
©makohira2013
Cubeの設定をしてみましょう。
1.名前を「Player」に変更。
2.Positionを「x=0, y=-3, z=0」に変更。
1.「Player」に変更→
2.値を設定→
©makohira2013
ヒエラルキービューに「Cube」が
「Player」に変わりました。
位置も動いたハズです。
©makohira2013
それではゲームを実行してみましょう。
(まだゲームとは言えないけど。)
[実行]ボタンをクリックしましょう。
実行ボタン→
©makohira2013
ゲームビューに切り替わります。
プレイヤーが表示されていますが、
何か暗いですね。
©makohira2013
ゲーム画面を明るくするためには
「ライト」が必要です。
3.ライトの追加
©makohira2013
ゲームビューが表示されているので、
シーンビューに戻しましょう。
もう一度 [実行] ボタンを押してください。
( [一時停止] ボタンではないですよ。)
実行ボタン→
©makohira2013
それではライトを追加してみましょう。
メニューから
[GameObject]-[Create Other]-[Directional Light]を選択
©makohira2013
ヒエラルキービューに「Directional Light」が追加されました。
それでは実行してみましょう。
©makohira2013
明るくなりました。
Playerが立体表示されているのがわかると思います。
確認できたら [実行] ボタンを押してシーンビューに戻
しましょう。
©makohira2013
現在、画面は3D表示されています。
今回作るゲームは2D表示のように見せたいです。
画面の見え方を変えるために
「メインカメラ」を調整します。
4.メインカメラの調整
©makohira2013
ヒエラルキービューの「Main Camara」を選択
1.選択→
2.カメラの設定画面に変わる→
©makohira2013
Main Camerの設定をしてみましょう。
1.「Projection」を「Orthographic」に変更
! ! 「Perspective : 透視投影」
! ! 「Orthographic : 平行投影」
2.「Size」を「5」に変更。
©makohira2013
2D表示になりました。
確認できたら [実行] ボタンを押してシーンビューに戻
しましょう。
©makohira2013
Playerを左右に動かしてみましょう。
オブジェクトの移動方法は色々ありますが、
今回は「transform」コンポーネントを利用して
処理を実装してみます。
今回はC#のスクリプトを作成します。
5.Playerを動かしてみる
©makohira2013
まずプロジェクトビューにスクリプトを作成します。
プロジェクトビューの 「Assets」を右クリックし、
[Create]-[C# Script]を選択
今回ファイル名は「PlayerScript」にします。
©makohira2013
プロジェクトビューにC#のスクリプトファイルが
追加されました。
ダブルクリックするとエディタが開きます。
©makohira2013
メニューの
[Unity]-[Preferences...]-[External Tools]-[External Script Editor]
で使用するエディタの設定ができます。
ちなみに私は「Sublime Text 2」を使っています。
だって標準のMonoDevelop(Mac版)では日本語が入力できないから。
©makohira2013
ひな形を見てみましょう。
メソッドが2つ準備されているのが分かります。
void Start() { }! ! →!コンポーネントが作られた時の動作を記述。
void Update() { }!! →!フレーム毎の動作を記述。
このように Unityでは何かイベントが発生した時に自動的に呼び出されるメソッ
ドがいくつか定義されています。
©makohira2013
実際にコードを書いてみましょう。
とりあえず何も考えずにただ右に移動させてみます。
transform.Translate(new Vector3(1, 0, 0));
意味:オブジェクトを「x方向」に「1」動かす。
Unityは3Dで物事を考えるので「Vector3(x, y, z)」
がよく使われます。
©makohira2013
こんな感じですね。
コーディングが終わったら、
保存をしてからUnityの画面に戻りましょう。
©makohira2013
PlayerScriptとPlayerオブジェクトを結び付けましょう。
プロジェクトビューの「PlayerScript」を
ヒエラルキービューの「Player」に
ドラッグ&ドロップしてください。
ドラッグ&ドロップ!!
©makohira2013
Playerオブジェクトのインスペクタビューに
「Player Script」が追加されているのが
分かると思います。
それでは実行してみましょう!
©makohira2013
どうなりました?
一瞬で画面の右へと消えていったのでないでしょうか?
すごいスピード!!!
©makohira2013
今回、void Update() { }に処理を書きました。
このメソッドはフレーム毎に呼び出されるので、
何回も何回も右に動かす処理が実行されることになります。
ちなみにフレームが呼ばれるスピードは一定ではありません。
なのでUpdateメソッド内で移動処理をする時には
Time.deltaTime
を掛けるのが普通です。
(Time.deltaTimeで前回フレームが呼び出されてからの時間
 が取得できます。)
©makohira2013
コードを書き直します。
修正できたら実行してみましょう。
©makohira2013
一定のスピードで動くようになりました。
少しスピードが遅いので調整しましょう。
一定のスピード
©makohira2013
メンバ変数に Speed を定義します。
Updateメソッドも少し変更します。
©makohira2013
※脱線「C#の命名規約」
C#以外の言語に慣れていると変数名やメソッド名に
違和感を感じるかもしれません。
参考として一部をJavaと比較してみました。
(...でも何かUnityのクラスを見ていると違うのもあるような気がする。)
Java C#
クラス Pascal Pascal
メソッド Camel Pascal
ローカル変数 Camel Camel
メンバ変数 Camel Pascal
定数 Snack Pascal
列挙定数 Snack Pascal
例 説明
Pascal FooBar 単語の頭は大文字、それ以外は小文字
Camel fooBar 最初の単語は小文字、それ以外はPascalと同じ
Snack FOO_BAR 全て大文字、単語と単語の間にアンダースコア
©makohira2013
それでは実行してみましょう。
スピードアップしました。
スピードアップ
©makohira2013
ちなみにメンバー変数として定義したものは、
インスペクタで値を変更できます。
ここでSpeedの値を変更できる→
©makohira2013
試しに Speed を「-10」にしてみましょう。
左に動くのが分かります。
スピード変更
©makohira2013
※Vector3について
今回は「new Vector3(1, 0, 0)」の様に書きましたが、
実はもっと簡単に書く方法が用意されています。
Vector3.right → new Vector3(1, 0, 0) と同じ
Vector3.up → new Vector3(0, 1, 0) と同じ
Vector3.forward → new Vector3(0, 0, 1) と同じ
©makohira2013
Vector3.rightを使ってコードを書き直しておきます。
©makohira2013
Playerをユーザーの入力で動かせるようにしてみます。
[ ← ]キー で左
[ → ]キー で右
に動かしたいですよね?
6.ユーザー入力を受け付ける
©makohira2013
Unityはマルチプラットフォームに対応しているので、
ユーザー入力は色々なパターンがあります。
パソコンだとキーボードやマウスを使いますし、
スマホだとタッチイベントやセンサーを使ったりします。
ユーザーが入力の設定を変更したいと言ってくるかもしれません。
Unityでは様々な入力状態を管理するために
Inputクラスが用意されています。
詳細は後日みていこうと思っています。
©makohira2013
今回は
Input.GetAxis(“Horizontal”)
を利用します。
ユーザー入力の水平軸の状態をfloat値で取得できます。
©makohira2013
コードを書き換えます。
修正できたら実行してみましょう。
©makohira2013
[ ← ] [ → ] キーで左右に動かせるようになりました。
たけど画面からはみ出してしまいますね。
左右に動かせる
©makohira2013
コードを書き換えます。
transform.localPosition.xの値は直接変更できないので新しいVector3を作っています。
修正できたら実行してみましょう。
©makohira2013
画面からはみ出ることがなくなればOKです。
©makohira2013
球体(障害物)を作ってゲームらしくしましょう。
7.球体を作ろう
©makohira2013
まず、Playerの時と同じように、
球体を一つだけ作ってみましょう。
メニューから
[GameObject]-[Create Other]-[Sphere]を選択
Positionを(0, 4, 0)くらいにして
とりあえず実行してみます。
©makohira2013
球体が表示されました。
©makohira2013
次に球体を下に動かすスクリプトを作ります。
プロジェクトビューの 「Assets」を右クリックし、
[Create]-[C# Script]を選択
今回ファイル名は「SphereScript」にします。
©makohira2013
コーディングします。
完成したらヒエラルキーのSphereにドラッグ&ドロップして関連付けます。
SphereのPositionも(0, 8, 0)くらいに修正しておきましょう。
©makohira2013
球体が落ちてくるようになりました。
球体が落ちてくる
©makohira2013
球体とPlayerに当たり判定を付けてみましょう。
7.当り判定を付けよう
©makohira2013
Unityには当たり判定を簡単に実装するしくみがあります。
Rigidbodyコンポーネントを持っているオブジェクトは、
Colliderコンポーネントを持っているオブジェクトに
反応するようになっています。
衝突が起こったとき、特定のメソッドが呼ばれます。
※CubeやSphere等の基本オブジェクトは
 最初からColliderコンポーネントを持っています。
©makohira2013
それではSphereオブジェクトに
Rigidbodyコンポーネントを追加しましょう。
ヒエラルキービューでSphereを選択した状態で
メニューから
[Component]-[Physics]-[Rigidbody]を選択
インスペクタで
「Use Gravity」のチェックをはずしたら、
実行してみましょう。
©makohira2013
衝突するようになりました。
©makohira2013
衝突したらSphereが消える処理を書いてみましょう。
衝突時には
void OnCollisionEnter(Collision collision) { }
メソッドが呼ばれます。
自分自身は「gameObject」変数で参照でき、
消える処理は「Destroy」メソッド
で実装できます。
©makohira2013
コーディングします。
完成したら実行してみましょう。
©makohira2013
衝突したら球体が消滅しました。
©makohira2013
球体をたくさん作ります。
1つだと面白くないしね。
8.球体をたくさん作ろう
©makohira2013
ここまでみてきた方法でも球体を量産できますが、
Unityにはオブジェクトのひな形を作る機能があります。
これからひな形を作ってみますが
このひな形のことをUnityでは「プレハブ(Prefab)」
と呼びます。
©makohira2013
それではプレハブを作ってみましょう。
ヒエラルキービューの「Sphere」を
プロジェクトビューにドラッグ&ドロップします。
ドラッグ&ドロップ!!
©makohira2013
この時プロジェクトビューにできあがるものが
「プレハブ」です。
名前を「SpherePrefab」に変えておきましょう。
©makohira2013
それでは早速、球体をたくさん作ってみましょう!
©makohira2013
プロジェクトビューの「SpherePrefab」を
ヒエラルキービューに好きなだけドラッグ&ドロップしてみよう。
どんどん追加されます。
追加したらそれぞれPositionを動かした後、実行してみましょう。
ドラッグ&ドロップ!!
©makohira2013
球体がたくさん出てきました。
動きも当たり判定も予定通りです。
©makohira2013
手動で追加するのは限界があるよね。
自動化しよう。
9.球体を自動生成しよう
©makohira2013
プレハブを使えばいつでも球体は作れるので、
とりあえずヒエラルキービューから全ての球体を
削除しちゃいましょう。
©makohira2013
ヒエラルキービューの「SpherePrefab」を全て選択し、
[command]+[delete]キーを押す。
←選択して[command]+[delete]
©makohira2013
次に球体発生装置を作ります。
球体発生装置は目に見えるものではないですが、
ゲーム中で球体を発生させるという役割があります。
なのでヒエラルキービューに追加します。
メニューから
[GameObject]-[Create Empty]を選択
名前を「SphereSpawner」に変更します。
さらにスクリプトも作ります。
プロジェクトビューの 「Assets」を右クリックし、
[Create]-[C# Script]を選択
ファイル名は「SphereSpawnerScript」にします。
ドラッグ&ドロップで関連づけもやってね。
©makohira2013
準備ができたので自動生成のコードを書きましょう。
©makohira2013
ゲームオブジェクトを作るには
Instantiate(src, Vector3, Quaternion)メソッド
を使います。
第1引数に作りたいオブジェクトを、
第2引数に位置を、
第3引数に角度を指定します。
指定するオブジェクトはメンバ変数として作っておき、
インスペクタで設定すると作りやすいです。
Random.Range(min, max)メソッド
でランダム値が取得できます。
©makohira2013
それではコーディングしてみましょう。
©makohira2013
SpherePrefabをメンバ変数に設定しましょう。
設定できたら実行してみよう。
©makohira2013
球体がたくさん出てきました。
位置もランダムになっています。
でも下に消えていったオブジェクトが残りっぱなしです。
これってマズイよね。
←増えっぱなし
©makohira2013
避けた球体を削除するように修正しよう。
©makohira2013
SphereScriptを修正します。
←追加
©makohira2013
球体が一定以上は増えなくなりました。
これでOKですね。
←一定以上増えなくなった。
©makohira2013
まだPlayerは無敵です。
3回当たったら死ぬようにしましょう。
10.PlayerにLifeを持たせよう
©makohira2013
PlayerScriptに「Life」を追加し、
OnCollistionEnterメソッドで衝突時にLifeを減らします。
printメソッドでコンソール出力できます。
©makohira2013
うまく動きましたか?
3回当たったらPlayerがいなくなりますか?
←ここでLifeの動きを確認できる。
©makohira2013
文字の表示にはGUIを使います。
11.Lifeを表示しよう
©makohira2013
GUIについては後日みていきます。
今回はラベル表示のみ実装します。
GUIの表示は
void OnGUI() { } メソッド
に記述します。
©makohira2013
GUI用のオブジェクトをヒエラルキービューに追加します。
メニューから
[GameObject]-[Create Empty]を選択
名前を「DisplayLayer」に変更します。
さらにスクリプトも作ります。
プロジェクトビューの 「Assets」を右クリックし、
[Create]-[C# Script]を選択
ファイル名は「DisplayLayerScript」にします。
ドラッグ&ドロップで関連づけもやってね。
©makohira2013
コーディングしよう。
完成したら実行してみましょう。
←メソッド名に注意!
©makohira2013
球体に当たるとLifeが減れば成功です。
←Lifeが表示されました。
©makohira2013
背景を表示してみよう。
考えるのが疲れてきたので、
とりあえずシリンダーにテクスチャを貼付けて
くるくるまわしてみます。
画像はNasaのサイトから適当にダウンロードしました。
12.(おまけ)背景を表示してみよう
©makohira2013
メニューから
[GameObject]-[Create Other]-[Cylinder]を選択
「Position = (0, 0, 100)」「Rotation = (0, 0, 90)」
「Scale = (20, 20, 20)」
にする。
背景画像をプロジェクトビューにドラッグ&ドロップ
プロジェクトビューの背景画像をヒエラルキービューのシリンダに
ドラッグ&ドロップ。
さらにスクリプトも作ります。
プロジェクトビューの 「Assets」を右クリックし、
[Create]-[C# Script]を選択
ファイル名は「CylinderScript」にします。
ドラッグ&ドロップで関連づけもやってね。
©makohira2013
コーディングしよう。
transform.Rotateメソッドで回転処理を実装できます。
完成したら実行してみましょう。
©makohira2013
背景ができました。
©makohira2013
作ったシーンを保存します。
13.シーンの保存
©makohira2013
作成した画面はシーンとして保存しておきます。
1つのプロジェクトに複数のシーンを保存することができます。
メニューから
[File]-[Save Scene As...]を選択
シーンに名前を付けて保存します。
今回は「Scene01」と名前を付けて保存してみましょう。
©makohira2013
シーンの保存ができました。
©makohira2013
おしまい
お疲れ様でした。

More Related Content

Similar to Unityで簡単なゲームを作ってみる(第1回unity初心者勉強会)

テレニコツイ
テレニコツイテレニコツイ
テレニコツイjz5 MATSUE
 
携帯電話時代から続くモバイルゲームとアプリの関係
携帯電話時代から続くモバイルゲームとアプリの関係携帯電話時代から続くモバイルゲームとアプリの関係
携帯電話時代から続くモバイルゲームとアプリの関係gree_tech
 
ど田舎でもAWSを使いたい!
ど田舎でもAWSを使いたい!ど田舎でもAWSを使いたい!
ど田舎でもAWSを使いたい!Takuya Tachibana
 
教師が主体的に扱える教材を目指して(デジタル教科書学会2013年度年次大会)
教師が主体的に扱える教材を目指して(デジタル教科書学会2013年度年次大会)教師が主体的に扱える教材を目指して(デジタル教科書学会2013年度年次大会)
教師が主体的に扱える教材を目指して(デジタル教科書学会2013年度年次大会)Sunami Hokuto
 
CoderDojo福井の取り組み
CoderDojo福井の取り組みCoderDojo福井の取り組み
CoderDojo福井の取り組みtecking
 
第28回名古屋i phoneアプリ開発勉強会アンケート結果
第28回名古屋i phoneアプリ開発勉強会アンケート結果第28回名古屋i phoneアプリ開発勉強会アンケート結果
第28回名古屋i phoneアプリ開発勉強会アンケート結果Takatoshi Hattori
 
#yidev 横浜 iPhone 勉強会 - 第16回 オープニング
#yidev 横浜 iPhone 勉強会 - 第16回 オープニング#yidev 横浜 iPhone 勉強会 - 第16回 オープニング
#yidev 横浜 iPhone 勉強会 - 第16回 オープニングTomohiro Kumagai
 
江戸川大学講義資料20140422
江戸川大学講義資料20140422江戸川大学講義資料20140422
江戸川大学講義資料20140422Osamu Ise
 

Similar to Unityで簡単なゲームを作ってみる(第1回unity初心者勉強会) (8)

テレニコツイ
テレニコツイテレニコツイ
テレニコツイ
 
携帯電話時代から続くモバイルゲームとアプリの関係
携帯電話時代から続くモバイルゲームとアプリの関係携帯電話時代から続くモバイルゲームとアプリの関係
携帯電話時代から続くモバイルゲームとアプリの関係
 
ど田舎でもAWSを使いたい!
ど田舎でもAWSを使いたい!ど田舎でもAWSを使いたい!
ど田舎でもAWSを使いたい!
 
教師が主体的に扱える教材を目指して(デジタル教科書学会2013年度年次大会)
教師が主体的に扱える教材を目指して(デジタル教科書学会2013年度年次大会)教師が主体的に扱える教材を目指して(デジタル教科書学会2013年度年次大会)
教師が主体的に扱える教材を目指して(デジタル教科書学会2013年度年次大会)
 
CoderDojo福井の取り組み
CoderDojo福井の取り組みCoderDojo福井の取り組み
CoderDojo福井の取り組み
 
第28回名古屋i phoneアプリ開発勉強会アンケート結果
第28回名古屋i phoneアプリ開発勉強会アンケート結果第28回名古屋i phoneアプリ開発勉強会アンケート結果
第28回名古屋i phoneアプリ開発勉強会アンケート結果
 
#yidev 横浜 iPhone 勉強会 - 第16回 オープニング
#yidev 横浜 iPhone 勉強会 - 第16回 オープニング#yidev 横浜 iPhone 勉強会 - 第16回 オープニング
#yidev 横浜 iPhone 勉強会 - 第16回 オープニング
 
江戸川大学講義資料20140422
江戸川大学講義資料20140422江戸川大学講義資料20140422
江戸川大学講義資料20140422
 

Unityで簡単なゲームを作ってみる(第1回unity初心者勉強会)