Unity学習サイト

ホーム / 基本的なUnityの使い方からパレットを使ったフィールドの作成

Unityの基本画面

①ヒエラルキーウィンドウ

ここではシーンの編集ができます。シーンの中には ゲームオブジェクトがあります。

②シーンウィンドウ・ゲームウィンドウ

ゲームシーンの製作画面になります。②の左上のGameを押せば ゲームウィンドウに切り替わります。ゲームウィンドウは実際のゲーム画面になります。

③インスペクターウィンドウ

ゲームオブジェクトの情報を追加、編集する画面になります。

④プロジェクトウィンドウ

ゲームを構成するのに必要なフォルダを保管する場所です。

Unityの基本的な使い方・流れ

学習素材の入手

下記の画像は、クリックすると自動でダウンロードされます。

鳥

まずは、鳥さんの画像を名前を変更せずに保存し、プロジェクトウィンドウのアセットにドラックアンド ドロップして鳥さんの画像をUnityに登録しましょう。

次に登録した画像をシーンウィンドウにドラックアンドドロップしてください。 どうですか?ヒエラルキーウィンドウにtoriが追加されたと思います。これが、 ゲームオブジェクトというものです。 toriをクリックしてみてください。インスペクターウィンドウにいろいろとでてきましたね? これが、toriに付いているコンポーネントというものになります。

Unityではゲームオブジェクトにコンポーネントと呼ばれる要素を追加してゲームに必要な 個々の動きをつけています。
次に、アセットの中で右クリック→Create→C# script をクリックして名前をToriにしてください。 これはスクリプトです、ゲームオブジェクトの動きをプログラミングして決めます。

Toriスクリプトをヒエラルキーウィンドウにあるtoriゲームオブジェクトにドラックアンドドロップしてください。 toriゲームオブジェクトをクリックするとインスペクターウィンドウの一番下に Toriスクリプトが追加されている事がわかると思います。

そのままインスペクターウィンドウの最下部のAdd Componentを押して Physics2D→Capsule Collider 2Dを押してコライダーコンポーネントを追加してください。 シーンウインドウの鳥さんに緑の線が付いたと思います。これは、簡単に言えば当たり判定 です。緑の線が鳥さんの当たり判定の範囲になります。あたり範囲が鳥さんの形でないのは 気にしないでください。

続けて、Add Componentを押してPhysics2D→Rigidbody 2Dを追加してください。このコンポーネント はゲームオブジェクトに物理法則を加えるものです。例えば、重力などです。

次に、ヒエラルキーウィンドウ上で右クリック→Create Emptyを押してゲームオブジェクトを作ってください。

そのゲームオブジェクトにAdd Component→Physics2D→Box Collider 2DをつけてEdit Colliderを押して画像のように コライダーを変更してください。

シーンウィンドウの上にある三角形の再生ボタンを押してみてください。どうなりましたか? 鳥さんにはRigidbodyがついているので重力で落ちました、さらに、Colliderもついていたので先ほど作った ゲームオブジェクトのColliderと衝突して落下が止まりました。
確認出来たらもう一度三角の再生ボタンを押してゲームの再生を止めておきましょう。

ひとまずはここまでをUnityの基本的な操作・流れとします。お疲れ様でしたぁあ!


Unityの基本的な流れ

Unityでゲームを作っていくにあたっての基本的な流れとしては画像をUnityに登録→画像をゲームオブジェクト化 →コンポーネントと呼ばれる個々の要素を追加→シーン変遷を作るというような流れで制作していきます。

フィールドの作成方法

鳥さんが落ちてゲームオブジェクトに衝突して止まるところまで作成したと思います。しかし、鳥さんは今 空中で止まってい状態にあると思います。これでは、鳥さんが超能力で浮遊しているようになってしまっているので フィールドを作成して鳥さんの超能力状態を解いてあげましょう。
あ、その前に前回作ったゲームオブジェクトは不要なのでヒエラルキーウィンドウのGameObject上 で右クリック→Deletedで削除してしまいましょう。

学習素材の入手

下記の画像は、クリックすると自動でダウンロードされます。

TilePalette

まずは、上の画像を名前を変更せず保存してアセットウィンドウに登録してください。
少し余談を、、今後画像が増えてきて、アセットウィンドウが見づらくなっていきます。 そうなると無駄な時間を取られてたり、ミスが増えてしまいます。そこで、画像用のフォルダ を作りアセットウィンドウを整理しましょう。
アセットウィンドウ上で 右クリック→Create→folder で新しいフォルダを作ります。

名前は何でもいいですがとりあえず、Item としましょう。 Itemフォルダに画像を突っ込んでください。これできれいになりましたね?今後画像登録する場合はItem フォルダに登録しましょう。
いい機会なのでもう一度同じ作業を行いフォルダを作りましょう、次はフォルダ名をScriptにしてください。 今はまだ空のToriスクリプトしかないですが、今後スクリプトも増えていくので先にフォルダを作ってしまいましょう。 作れたら、Toriスクリプトをフォルダに入れましょう。

少し話がそれましたが本題へ入りましょう。
登録した画像は処理を軽減するために1つの画像に9つパーツが入っています。これをUnityで フィールドとして扱うために登録した画像を9つに分割します。
まず、Unityに画像が一枚として登録されているのでそれを変更します。登録したGround画像を クリックしインスペクターウィンドウを確認してください。Sprite ModeがSingleになっていますので これをMultipleに変更してください。

変更することができたら下のSprite Editorというボタンを押してください。するとポップアップで 先程変更したSprite Modeの変更を適用しますか?と出てくるのでApply(適用する)を押してください。 すると下のような画面が出てくると思います。

左上にSliceというボタンがあると思うので押してください。そして、TypeをAutomatickから Grid by cell sizeに変更してください。

変更ができたら、PixelSizeをX100、Y100にしてください。出来たら下のSliceボタンを押して スライスしてください。うまくできている場合は画像に薄く線が出ていると思います。 出来ましたら、画面右上のApplyボタンで変更を適用してからSlice画面を閉じてください。

アセットウィンドウのGround画像の右側に三角形ができていると思います、それをクリックすると 分割された画像たちが出てくると思います。

次にヒエラルキーウィンドウ上で 右クリック→2D Object→TileMapをクリックしてください。 ヒエラルキーにGridというオブジェクトが作られたと思います。
次に、Unity画面上部のWindowをクリック→2D→TilePaletteを開いてください。

ヒエラルキーウィンドウの横にタイルパレットウィンドウが追加されたと思います。 タイルパレットウィンドウのCreateNewPaletteと書かれたドロップダウンメニューを開いてください。 名前などは何でもいいのでそのまま右下のCreateボタンを押してください。

どこに保存するかと聞かれると思います、デフォルトだとGroundが保存されているItemフォルダ が表示されると思うのでそのままそこに保存してください。

出来たら、タイルウィンドウにGround画像をドラックアンドドロップしてください、また先ほどと同じで どこに保存する?と出てくるのですがそのままデフォルトのItemフォルダに保存してください。下の画像 のようにタイルパレットウィンドウにGroundの画像が表示されているとうまく出来ています。

次にタイルパレットウィンドウの画像上段真ん中の画像をクリックしてシーンウィンドウに クリックしたままスライドさせてみてください。下の画像のようにできましたか?これが、地面 になります。

実は左上二枚の画像同じように見えて若干違います。上段真ん中の画像は上の面が凸凹しているのですが、 上段左の画像は平らになっています。左の画像は土の中用のものなので凸凹の地面の下用の物なので使うときは 気をつけてください、凸凹を地面の中に配置すると地面の中に空洞ができます。


それでは適当にフィールドを作ってみてください。あまり大きくしないでくださいね! 今後スクリプトの確認などで面倒になったりしますので!笑

こんな感じでできましたか?それでは、シーンウインドウの上にある再生ボタンを押してみましょう!

あれ、、鳥さん落ちていきましたね。。こうなることが予想できた方もいるかと思います。 そうです、Paletteで書いたフィールドにはコライダーが付いてなく鳥さんは衝突を検知できず 落ちて行ってしまったんですね。では、どうしたらいいのか。
ヒエラルキーウィンドウのGridの横にある三角形を押してもらうと下にTileMapオブジェクトが出てくると思います。 TileMapオブジェクトをクリックしてもらいインスペクターウィンドウから Add Component→TileMap→TileMap Collider 2Dをつけてください。これでフィールドに当たり判定が付きました。 しかしこのままだと地面以外にも当たり判定が付いているため、草や木に鳥さんが乗ってしまいますね。

アセットウィンドウgurund画像の石(gurund_2)の画像をクリックしてインスペクターウィンドウを確認すると Collider TypeがSpriteになっているのでこれをNoneに変更します。

ヒエラルキーウィンドウのTileMapをクリックしてもらうと 変更した石だけコライダーが付いてないのが見てわかると思います。これを、地面では無い画像すべてに 行います。(ground画像の中)

できましたか?出来たら再生ボタンを押してみましょう。 やっと鳥さんが地面に降り立つことができましたね。
ここまでで今回の講座はおしまいです!!お疲れ様でした!!

次の講座へ

ホームへ

2019