プロジェクトを作成しよう のバックアップ(No.12)

はじめに

前回はUnityをインストールしてもらいました。
今回はダウンロードしたUnityを使って、

1. プロジェクトの作成
2. Unityの画面の見方
3. オブジェクトを作って遊ぶ

ということをやっていこうと思います。

 

Unityで新しいプロジェクトを作成

まずはUnityで新しいプロジェクトの作成を行います。

 
unity_プロジェクト作成1.png
 

Unity Hubを開き、右上のの新しいプロジェクトを押します。

 
unity_プロジェクト作成2.png
 

このような画面になります。たくさんのテンプレートがありますが、今回は一番基本的なテンプレート2Dを選択します。
右下でプロジェクトの名前や保存場所を設定できます(プロジェクト名は「テスト」でも「練習」でもなんでも良いです)
できたら右下のプロジェクトを作成を押します。
テンプレートが読み込まれ,新しいプロジェクトが作成されます。

 

Unityの画面の見方

 
Unity画面.png

Unityを起動すると様々なタブが表示されてますね。これらの中から主要なものを説明していきます。

・Hierarchy(ヒエラルキー)
　-ここにオブジェクトが追加されます。
・Inspecter(インスペクター)
　-オブジェクトについているコンポーネントをいじることが出来る場所です。コンポーネントは大事な要素なので、また後ほど解説します。
・Scene(シーン)
　-オブジェクトを配置することが出来る場所です。
・Game(ゲーム)
　-ゲーム画面です。シーンと似ているようですが、シーンはゲーム画面外や非表示にされているオブジェクトなどが見えるのに対し、ゲームシーンではちゃんとし　た挙動通りのものしか見えません。
・Project(プロジェクト)
　-スクリプトや画像、その他の色々な素材が格納されている場所です。

 

オブジェクトを作って遊ぶ

 

それでは少しゲーム制作っぽいことをしていきましょう。まず、必要となる素材をダウンロードしていきます。

 

素材のインポート

 
Unity画面2.png
 

まずは練習用の素材をインポートします。
インポートとという言葉は素材をダウンロードしてUnityに取り込むという意味で使っています。

以下にひつじの画像があるのでそれをクリックしてダウンロードし、UnityのプロジェクトタブのAssetsのなかにドラック＆ドロップします。

ひつじの画像 http://3.bp.blogspot.com/-pNz44UfwDxk/Vn-CnuX8adI/AAAAAAAA2L8/f1C7p7wm8k0/s180-c/eto_remake_hitsuji.png

 
Unity画面3.png

このようになります。
先ほども書きましたが、プロジェクトタブはゲームの素材を管理する場所です。

 

ゲームにひつじを表示してみる

 

インポートしたひつじを実際にゲームで表示してみます。
ヒエラルキーに、さっきのひつじをドラック＆ドロップします。

 
projectからHierarchyへ画像を移動.png
 

ヒエラルキーに画像をドロップすると、勝手にオブジェクトが生成されます。生成されたオブジェクトは隣のシーンで見ることが出来ます。
それでは、この羊がどのように動くのか確認してみましょう。上の再生ボタンを押してゲームを起動します。

 
ゲームを再生.png
 

ひつじが青い画面の上で浮いているだけの謎のゲームができました。

 
ゲームを再生2.png
 

もう一度再生ボタンを押して再生を止めてください。再生を止めないと編集ができません。

Unityではなにも設定していないと、エディタ上でゲームが実行中かどうか見た目でわかりにくくなっています。

以下のようなサイトを参考にして、実行中の状態をわかりやすくしておくと意図しないミスを防ぐことができます。

https://www.midnightunity.net/unity-editor-playmode-tint/

 

ひつじを動かしてみる

 

ひつじを動かしてみましょう。
Sceneタブにいるひつじをクリックします。

 
インスペクターの表示.png
 

右側のインスペクタータブのなかにごちゃごちゃとパラメータが現れました。

インスペクタータブは、選択したものの機能（コンポーネント）を編集する場所です。

選択したひつじには

Transform ... Unity上でひつじを表示する場所(position)や、ひつじの画像の角度(rotation)を管理する機能

Sprite Renderer ... Unity上でひつじの画像を表示する機能

などが初めからついています。

ひつじをシーン上でドラッグすると、TransformのPositionが動くのがわかるでしょうか。

 

Scene上のひつじはインスペクターからも動かすことができます。試しにTransformのpositionのx座標とy座標を1に動かしてみましょう。

 
インスペクターの数値をいじる.png
 

動かせましたか？
座標はその枠の中に入力することでも動かせますが、マウスでドラッグすることでも動かせます。rotationやscaleも同じようにいじれるので興味があったらいじってみてください。

 

さて、今ひつじにはTransformとSprite Rendererというコンポーネントがついていますが、これだけではゲームを作っていくのには物足りません。
そこで、新しい機能（コンポーネント）を追加していきましょう。
機能を追加するには、インスペクターの下のほうにある「Add Component」という場所から行います。

 
Add_Componentの位置.png
 

色々出てきましたね。今回は、ひつじに物理演算の処理を追加していきます。２つのコンポーネントを追加したいので、AddComponentの検索のところに「rigidbody2D」と「Circle Collider 2D」と打ち込んで、出てきたものをクリックしてみてください。

 
Rigidbody2DとCircleCllider2Dの追加.png
 

出来ましたか？それを追加するとこんな状態になると思います。それでは、この状態でゲームを再生してみてください。

 
羊が落ちた.png
 

ひつじが落ちていく様子が見られましたか？rigidbody2Dは物理的性質（質量、重力影響、回転可能軸、etc…）を機能として追加するものです。今、ひつじは重力を持っているので下に落ちていったのですね。それと、Collider2Dは当たり判定をゲームオブジェクトに付与するものです。Collider2Dを追加したときにひつじの周りに緑色の線が出たのがわかると思います。これが当たり判定です。

 

それでは、この落ちていくひつじをブロックで受け止めてみましょう。ヒエラルキー上で右クリックして、
2D Object < Sprites < Square と選択してください。すると、新しく四角いブロックができたはずです。このブロックをひつじの下に配置してみましょう。それと、ひつじを受け止められるようにボックスの横を少し長くしておきましょう。長くするときはTransformのScaleをいじると長くできます。

 
Squareの追加.png
 

これでゲームを再生してみます。

 
ひつじがすり抜けた.png
 

おっと、ひつじがすり抜けていきました。これは、ボックスのほうに当たり判定がついていないからですね。それでは、ボックスのほうにも当たり判定を付けていきましょう。ヒエラルキーで「Square」を選択した後、AddComponentを選び「BoxCollider2D」と入力して出てきたものを入れてください。
さきほどとCollider2Dの名前が違いますが、これは当たり判定の形がCircleであれば円、Boxであれば四角という違いがあります。

 
BoxCollider２Dの追加.png
 

ちなみに、Collider2Dからは当たり判定を調整することができます。SquareのBoxCllider２DのEditColliderを押してみてください。

 
EditColliderを押した.png
 

Squareの周りの枠線が緑色になったと思います。今回は当たり判定がしっかりと設定してあると思いますので、そのままで大丈夫です。
それでは、ゲームを再生してみようと思います。

 
ひつじが乗った.png
 

うまくひつじが乗りましたね。このように、コンポーネントは機能を持ったもののまとまりです。ゲームオブジェクトに何らかの機能を追加したい！という時はコンポーネントを追加する、ということを覚えておいてください。