【2020年版】Unityインストール～ミニゲーム作成(入門・初心者)

-

 

動作環境

windows10 64bit
Unity 2019.3.9f1(Unity 2019.3.11f1でも可)
Unity 2019.3.~なら動作確認済み。それ以外は保証しません。

参考サイト

Unity入門！ダウンロード・インストール手順とゲーム開発向け学習法まとめ | 侍エンジニアブログ

インストール

サクッとインストールしていきましょう。
まずはUnity Hubをダウンロードします。数年前にはこんなのなかったのですが時代が進んでUnityのバージョン管理がしやすくなったみたいです。世の中便利になってゆくものですね。 まずは下記URLにアクセス。
https://store.unity.com/ja/?_ga=2.87454808.1330355094.1587536022-1199353874.1586658817#plans-individual  今回はPersonalを選択、初心者ならこれで十分だと思います。
  利用規約を確認し同意の上で次に進んでください。
 ライセンス条件を確認後同意した方は次に進んでください。
 Unity Hubのインストール完了後自動で起動するようにチェックを入れて完了ボタンをクリック。
 自動起動後
Unity自体をインストールしていきます。  Unity2019.3をインストールとなっていることを確認してください。
このインストール方法では正式リリースされた最新バージョンを自動で選択してインストールしてくれるので他のバージョンが指定されている場合は最新版をインストール後別バージョンをインストールできるので各自でダウンロードしてください。
Unityはメジャーアップデートされるとうまく動作しなくなることが多いそうなのでなるべくバージョンを合わせる必要があるみたいです。
動作バージョンは記事最上部の動作確認を参照してください。
 初めての方は必要事項を記入後Unity IDを作成かすでに持っている方はそちらを選択してください。  インストール完了後サンプルのゲームを遊ぶことが出来るようになっています。名前と遊びたいサンプルを適当に選んで次に進みましょう。
 先ほどからも出ていると思いますが、ダウンロードとインストールのゲージが出ていると思うので100％になるまで待ちます。完了後LANCH UNITYと出てくるのでクリックし選んだサンプルがプレイできるようになっています。 次はゲームを新しく作っていくので遊び終わったら閉じておいてください。 メモリをかなり使っているので起動させすぎると動作がもっさりしたり不具合を起こすので注意しましょう。
ほかのアプリも同様です。

ゲーム作成

プロジェクト作成

unity hubがインストール出来たら起動します。
起動後は画像に従ってください。

 赤く塗りつぶされているところには今後、読者が作ったプロジェクトの一覧になっていきます。個人的に見せたくないので塗りつぶしています。

新規ウィンドウが開かれて画像のようになります。
画像で書かれている名前や保存先は例なので読者が自由に変えてもらっても構いません。私は画像のように進めていきます。

 プロジェクト作成完了までのゲージが出てくるので終わるまで少し待ち、画像のような画面になったら作成は完了です。

 もう一度Unity hubを開いてみるとしっかり作成されていることがわかります。
バージョンなども確認と変更などができるので確かめてみてください。
次回開きたいときはここからプロジェクトを開くことができます。

アセットの追加とインポート

今回使うアセットを最初に追加していきます。
インポートするアセットはStandard Assetsだけで充分です。 Standard Assetsは最新版に合わせて新しく作っているのか作る気がないのかわかりませんが執筆現在では2018年で更新が途絶えています。
しかし少し手を加えてあげるだけで現在のバージョンでも動いてくれるので使っていきます。

 初めて追加する人は赤枠のところがDownloadとなっているのでダウンロードした後に画像と同じくImportと出てくるので必ずインポートしてください。

 ダウンロードだけではプロジェクトで使えないのでしっかりインポートしましょう。
先ほども話したようにこのアセットは古くなっているので新しく作ろうとしている？のか今のバージョンだと不具合が出ているらしく、悪さをしているスクリプトがあるらしいのでそちらを消していきます。こちらの操作は先人が簡潔な操作説明をしているのでそちらを参考にしてください。

www.sbcr.jp

  • 注意：上記の操作を必ず行ってください。このままでは正常に動作しません。

一度ダウンロードしたアセットは今後画像と同じようにImportと出てくるようになるのでインポートだけすればよくなります。
アセットストアウィンドウの上部にあるMy Assetsを選択することで一度ダウンロードしたアセットが見られるようになっています。

これでアセットの追加は終わりました。

フィールドの生成

最初にこのままでは人型のモデルをせっかく追加しても底なしの沼に落ちていくだけなのでまずは足場を作っていきます。 一番簡単な方法は別にありますが最後に地形の追加などもしていきたいのでTerrainと言う機能を使っていきます。
Terrainは名前の通り大地をつくるためにあり早速作っていきます。

  • 注意：画像内では左クリックとなっていますが右クリックです。

青枠内の場所をHierarchy(ヒエラルキー)と言います。unityを触るのが初めての人は覚えておいた方がいいと思います。画面それぞれの場所でできることなどが決まっているのでそれぞれ少しだけ説明を挟んでいくので覚えていってください。細かい説明は省きますが深く知りたい方は個人で調べると良いでしょう。


新しくチェスボードのようなものが追加されます。 このようになればモデルが底なしの沼に落ちることがなくなります。
青枠の場所がInspecter(インスペクター)と言いオブジェクトなどの細かい設定をしていくところになります。

キャラクタの追加

モデルの追加をしていきたいと思います。
Standard Assetsは無料でとても優秀なので人型のモデルも入っているのでそちらを使えるようにしていきます。

 青枠のProject(プロジェクト)は追加したアセットや自分で作ったマテリアルやプレハブなどを操作する場所でエクスプローラなどと同じ使い方になります。
モデルを取り出すためにプロジェクト内で操作をして

Assets>Standard Assets>Characters>ThirdPersonCharacter>Prefabs>ThirdPersonController.prefabs

をヒエラルキーにドラッグ＆ドロップして追加します。
これで画像と同じようにSceneにキャラクターが追加されます。
実際に動かしていきます。  画面上部の再生ボタンを押すことで開始と終了ができます。

 初期の位置だとチェスボードのようなところから落ちてしまうことがあるのでヒエラルキーで先ほど追加したThirdPersonControllerをダブルクリックするとモデルに視点がフォーカスしてして矢印が出てくるので自由に動かして位置を調節しておきましょう。

再生ボタンを押してエラーが出ずに実行出来たらマインクラフトと同じうような操作方法で動かすことができるようになっています。
この時点でエラーが出ている場合はアセットの追加の時の悪さをするスクリプトを消していない可能性があるので前章を参考にもう一度確認してみてください。
無事動かすことができたら成功です。
でもこれだとカメラが止まってて画角からキャラクタが出たら見えないじゃんってなりますよね。
次にカメラの設定を行っていきます。

 ヒエラルキーにすでに用意されているMain Cameraを選択し画像に従って操作します。
プレビューを見て自分好みにできたらヒエラルキーのMain CameraをThirdPersonControllerにドラッグ＆ドロップします。

 ThirdPersonControllerの中にMain Cameraがあれば大丈夫です。
こうすることでThirdPersonControllerが親でMain Cameraを子として扱われるので簡単に説明するとカメラのポジションをキャラクタの移動に合わせてずらしてくれるようになります。説明下手なので実際に動かしてみればわかります。先ほどまではカメラが固定されていたのに対して今回はキャラと一緒に移動していることがわかります。
私は昔unityを触ったときはまたっく何の知識もなくここまでのことすら出来なかったので今では簡単にここまで出来ちゃうことに感動しています。
初めて触る方は割とスゲーって思うんじゃないかな？皆さんはどうでしょう。

オブジェクトの追加

今回はちょっとしたゲーム(マリオがコインを集める的な感覚)を作っていくのでコインと同じような機能を果たすオブジェクトを作っていきます。
あまり作り込む気はないので適当で。  画像のようにヒエラルキーで右クリックし3D ObjectからSphereを選択し球体のオブジェクトを作成します。
Sphereではなくても自分の好きなものでも構いません。
追加したら適当に移動させて実行し確認してみましょう。  こんな感じであれば大丈夫。
こいつに光を追加してみましょう。
今回追加したオブジェクトの上で右クリックし画像に従ってください。
 そうすると光が追加されると思います。
これは光が球体の子オブジェクトとして登録されている状態になります。
今回はPointLightを選択しましたが必要に応じて他に変えても構いません。
次にキャラがこのオブジェクトに触れたときの挙動をいろいろ設定していきたいと思います。
追加したオブジェクトを選択しインスペクターの設定を画像を見てしてください。
 こうすることでゲーム内ではすり抜けるようになりプログラムからその時の当たり判定を使うことができます。
その後   
タグを新しく作って登録したタグをオブジェクトにつけておく。 こうすることでプログラムからオブジェクトの種類をタグで判断することができるようになります。

  • 注意：私は最初大文字のSphereと登録しました。

次はようやくプログラムを書いていきます。
追加したオブジェクトに触れたら消えるようにしていきます。
プロジェクトからAssetsを選択して画像にしたがってスクリプトファイルを作ってください。
 名前は安直に

sphere_destroy

としておきます。
作ったスクリプトファイルの中のコードを削除し以下をコピペしてください。

using UnityEngine;

public class sphere_destroy : MonoBehaviour{
    void Start(){
    }
    void OnTriggerEnter(Collider collider){
        Destroy(this.gameObject);
    }
}

保存したらオブジェクトにアタッチしていきます。
 ここまで出来たら実行して追加したオブジェクトに触れてみてください。
ちゃんと消えたら成功です。

スコアボードを追加する

画像に従ってください。
  数値の設定を行ってから好きな位置に移動させた方がいいと思います。
数値は大きめにとってあるので好きに変えても構いませんが小さすぎるとフォントの大きさによってはうまく表示されないことがあるので今回は適当に大きく取っておきましょう。
実行して同じように設定していれば左上端に表示されれば成功です。
後ほど使用するのでここまででスコアボードは完成です。

ゲームのプログラム作成

先ほどと同じようにスクリプトファイルを生成し名前を

counter

としておきます。
その後中身を消して以下をコピペして下さい。

using UnityEngine;
using UnityEngine.UI;


public class counter : MonoBehaviour{

    public Text scoreText;
    private int score = 0;

    void Update(){
        scoreText.text = "Score:" + score;
    }

    void OnTriggerEnter(Collider collider){

        if (collider.gameObject.tag == "Sphere"){
            score++;
        }

    }
}
  • 注意：18行目のSphere(Sは大文字)は先ほどタグで登録した名前と同じにしてください。触れたオブジェクトのタグで判断しているのでタグ名と合致していないといけません。

保存しスクリプトを先ほど説明したオブジェクトにアタッチするのと同じようにThirdPersonControllerにアタッチしていきます。
これはThirdPersonControllerにアタッチする必要はありませんがわかりやすくキャラクターに付与させておきます。
画像の赤枠のようになっていれば成功。  次に青で書かれているように操作してください。
終わったら実行して確かめてみると  スコアボードに出力されて球体を触って消すと  スコアボードに加算されていきます。 まだオブジェクトは一つなので1までしかカウントしませんが次で複数生成していきます。

オブジェクトをランダムに複数生成

まずはヒエラルキー内の追加したオブジェクトのプレハブを生成します。  これだけでプレハブの完成、簡単でしょ！
そしたらスクリプトファイルを作成、名前は

random_sphere

中身を削除して下記をコピペ

using UnityEngine;

public class random_sphere : MonoBehaviour
{
    public GameObject sphere;

    void Start()
    {
        for (int i = 0; i < 10; i++) {
            float x = Random.Range(1.0f, 20.0f); //1～20の間のX座標を生成(横)
            float y = Random.Range(0.5f, 2.0f);　//0.5～2の間のY座標を生成(高さ)
            float z = Random.Range(1.0f, 20.0f); //1～20の間のY座標を生成(縦)

            Instantiate(sphere, new Vector3(x, y, z), Quaternion.identity);
        }
    }

}

保存してヒエラルキーのThirdPersonControllerにスクリプトをアタッチし作成したプレハブをドラッグ＆ドロップで指定していきます。
こちらも適当にわかりやすくキャラクターにアタッチしていきたいと思います。  操作完了後実行してみると  すべてに触って消してみると  スコアが11になっているのはプログラムでは10個プレハブから生成しているのですが最初に作ったオブジェクトが一つ残っているのでヒエラルキーから消してしまいましょう。 そうするとフィールドに生成されるのが11個ではなく10個になるはずです。

これで立派とは言いませんが簡易的なゲーム？はできたのではないでしょうか？

少しコードは増えますが10個見つけだすまでの時間を測ったりなんかもできますね。

counter

スクリプトファイルをの一部を書き換えて

using UnityEngine;
using UnityEngine.UI;


public class counter : MonoBehaviour{

    public Text scoreText;
    private int score = 0;
    private float time = 0;

    void Update(){
        if (score < 10){
            time += Time.deltaTime;
        }
        scoreText.text = "Score:" + score + "\n" + "時間:" + time.ToString("f2") + "秒";
    }

    void OnTriggerEnter(Collider collider){

        if (collider.gameObject.tag == "Sphere"){
            score++;
        }

    }
}

こんな感じに書き換えるかコピペして起動すると。  10個すべて消し終わったらタイマが止まるようになっています。
と、まぁ簡単なゲーム制作はできたと思います。

地形の生成

Terrainでフィールドだけは作ってあるので次に簡単な地形のつくりからを説明します。
長くなっているのでサクッと説明します。
フィールドの作成で作ったヒエラルキー上のTerrainを選択しインスペクターを確認すと

赤枠左から
Create Neighbor Terrains:フィールドとして使用する範囲を広げられる(今回はすでに十分すぎる広さを確保できているので不使用)
Paint Terrain:フィールドのテクスチャを貼ることや高低差を作ることなどが出来ます Paint Tree:木を追加する
Paint Details:草などを追加する

まずテクスチャを追加してみましょう。  こんな感じに操作すると  いい感じ。
先ほどと同じやり方で別のテクスチャを追加してブラシで塗ってみましょう。
 適当なブラシを選んで好きなように塗っていきましょう。
次に高低差を追加します。
 先ほどと同じようにブラシを選択して高低差を付けます。 英語でも書かれていますが左クリックで上にシフトキーと左クリックで下に高低差を付けられるようになっています。
木の追加をしていきます。   草の追加をしていきます。  ブラシの設定を行い塗っていきます。
遠目で見ているので塗っても変わりがなくわからない場合がありますのでゲームを起動してみるとわかりやすくなります。
 少し草の背が高いので変えていきます。  これで高さがよくなりました。 ざっと説明しましたがこれで地形生成は終わりました。
ほかのアセットを使うことによってボタン一つで地形が作られたりもしますが自分で一から作りたい方にはお勧めです。

まとめ

昔Unityを触ったときは使い方も全く理解できなかったのに久しぶりに触ってそんな難しくないな。なんて思えるようになったので自分が少しは成長してるんだなって感慨深くなりました。
変わらないのは細かい設定や数値が表にバッと並んでるUIが苦手で初めて触ったときも情報量が多すぎてリタイアしてしまったので初心者には厳しいのかな？とは思います。(この方がやりやすい方もいますが)
プログラムの知識すら身についていない人にはUIの操作で手一杯になる印象はあるので初心者の方はあきらめずにやっていくと達成感は半端ないので頑張ってください。

コメント

コメントを投稿

このブログの人気の投稿

Phaser3 + Typescriptを使ってRPGゲームの基礎を作ろう！その２

-
イメージ
前回の記事 に引き続きPhaser3+Typescriptを使って RPG の基礎を作っていきます。 この記事は前回の記事を呼んだ前提で説明していきますので、ぜひそちらを先に読むことをお勧めします。 また、今回の記事は前回よりも難易度と内容量が上がっていますが、記事の最後に作業後の リポジトリ のリンクがありますので、そちらを先にダウンロードしてそちらと比較しながら学習することができます。 前回まで作成した状態のプログラムが以下の リポジトリ からダウンロードできますので前回まででうまくいっていない方は参考にしてみてください。 github.com 最終目標（再掲） ・Phaser3とTypescriptで RPG ゲームの基礎を作る。 ・Phaser3をTypescriptで使う方法を学ぶ ・Phaser3の使い方を学ぶ 今回の目標 ・ゲームの作り方の断片を知る ・キャラの表示できるようにする ・キャラを移動できるようにする ・当たり判定をつける ・ NPC の追加してみる ・話しかけられるようにする 開発前提（再掲） ・Nodejsの環境・知識がある ・ Javascript ・Typescriptがある程度かける ・当ページ紹介の環境を試す場合はgit・ github の知識がある 使用した主要Nodeモジュール（再掲） ・typescript（Typescriptの コンパイル 用） ・phaser（フロントの Javascript 用ゲームライブラリ） ・live-server（ソースを監視してブラウザのページをリロード） ・ts-loader（webpackがTypescriptをバンドルする用）webpack（言わずと知れたモジュール依存をいい感じに解決しバンドルする） ・webpack- cli （webpackを コマンドライン で使用するのに必要） 注：各Nodeモジュールバージョンは後述 当ブログ仕様の画像素材の注意点 当ブログで使用する画像素材は『 ピポヤ倉庫 』より許可なしで無償再配布・改変が認められたものを改変して作成されたものです。 中には許可なく再配布・改変してはいけない素材もインターネット上には多く存在するのでそれらを使用するときは十分に規約を呼んでから使用しましょう。 1. キャラの表示 想定画面 今回は、はじめにキャラつまり操作
続きを読む

M5Stackで、においセンサー（TGS2450）を使ってみる。（LCDに表示編）

-
イメージ
今回は、においセンサー（TGS2450）から取得したデータをM5Stackの LCD にグラフ表示をしていきます。 今回主に使用したもの M5Stack 10Ω抵抗 5本 Pch  MOSFET  2SJ334（スイッチとして利用） M5StackSideBB（ブレッドボード） M5Stackのピンはそのままだと配線するとき手間がかかるかと思いますので、今回はM5StackSideBBを利用しました。 ブレッドボードも付いているので、手軽に電子工作できるので個人的にオススメです。 SideBB for M5Stack www.switch-science.com 諸注意 本ブログのプログラムはArduinoIDEまたはPlatformIOでM5Stackの開発ができる状態であること前提のものですので、各自導入をお願いします。 過去に Windows のArduinoIDEで M5Stackの開発環境を構築する記事 があるので、参考にしてください。 においセンサー（TGS2450）について 今回使用したセンサーは 秋月電子通商 で購入できます。 http://akizukidenshi.com/catalog/g/gP-00989/ akizukidenshi.com TGS2450には4つのピンがあり、使用するのはそのうちの3本でヒーターを温めるピン、センサー情報を得るピン、GNDがあります。 ここで注意したいのは、ヒーター電圧は1.6Vと記述されているのでM5Stackで利用するときは分圧して3.3Vを1.6V近くまでに降圧することをお勧めします。 TGS2450のセンサーは可変抵抗になっており、データシートには5.62kΩ〜56.2kΩの間を抵抗が変化し、においが強いとより低くなると記述されていました。 よって、センサーの値をM5Stackで取得するにはセンサー抵抗と外部に接続する任意の値の抵抗による分圧回路によって求めることができます。 TGS2450の動作方法は、250ms周期でセンサーに電圧を5ミリ秒on、245ミリ秒offの状態にしてヒーターは8ミリ秒on、242ミリ秒offにすることで値を取得します。 配線 においセンサーとM5Stackの配線 上の図が配線図です。 30Ωの抵抗は10Ωの抵抗を三つ直列に接続して作成しました。 また、上部の抵抗10Ω二
続きを読む

Phaser3 + Typescriptを使ってRPGゲームの基礎を作ろう！その１

-
イメージ
今回はPhaser3とTypescriptを使って簡単な RPG ゲームを作る方法を紹介していきます。 内容はPhaser3およびゲーム作りについての記事なので、Nodejsの周辺モジュールなどの説明は一部省いての説明になりますのでご了承ください。 またこの記事では Phaser2 ではなく Phaser3 を使用するので注意してください。 この記事は二部構成になりますので、この記事を読んだ際はぜひ次の記事も読むことをお勧めします。 最終目標 ・Phaser3とTypescriptで RPG ゲームの基礎を作る。 ・Phaser3をTypescriptで使う方法を学ぶ ・Phaser3の使い方を学ぶ 今回の目標 ・開発環境を整える ・Phaser3の開発構成を知る ・スタート画面を作る ・マップ表示をさせる 開発前提 ・Nodejsの環境・知識がある ・ Javascript ・Typescriptがある程度かける ・当ページ紹介の環境を試す場合はgit・ github の知識がある 使用した主要Nodeモジュール ・typescript（Typescriptの コンパイル 用） ・phaser（フロントの Javascript 用ゲームライブラリ） ・live-server（ソースを監視してブラウザのページをリロード） ・ts-loader（webpackがTypescriptをバンドルする用）webpack（言わずと知れたモジュール依存をいい感じに解決しバンドルする） ・webpack- cli （webpackを コマンドライン で使用するのに必要） 注：各Nodeモジュールバージョンは後述 1. 最低限の開発環境の準備 今回最低限の環境を整えるために、『Typescript + Phaser3』の開発テンプレートを github リポジトリ で公開しました。 以下からZIPをダウンロードするか、 git clone コマンドで各自環境に展開してみてください。 ここから先は リポジトリ のプログラムを元に説明していきます。 github.com 展開するとファイル構造は以下のようになっているかと思われます。 注： 他にもファイルやフォルダがあるかと思われますが、表記されているのは今回使うものになっています。 - src/ （これから書くプログラムの保存領域）
続きを読む