マウスイベントとかいう便利すぎるメソッド #14

#2020/8/16に更新

どうもラブヘイトです

今回はマウスイベントメソッドを使って

タンスを開くイベントを作成していきます

完成図↑

◆マウスイベント

マウスイベントとは、オブジェクトをマウスでタップや通過するなど動作で、それが起因となって実行されるのがマウスイベントメソッドのことです

はじめたばかりの人は結構知りたい情報なのではないでしょうか？

私も２DならButtonUIとかEventSystemでイベントを起こしていたのですが

3Dはよくわからず、Canvasに透明なButtonを配置して擬似的にそのオブジェクトを押したかのように見せるというアホなことをしていました

（オブジェクトが移動するとButtonの位置も手動で変えなければいけないため

相当時間がかかりますし、正確ではありません）

つい最近、本でMonoBehaivourにマウスイベント関数があったことを知って驚愕しましたので紹介していきます

◆使い方

とても簡単です

まずプロジェクトビューで新しいスクリプトを作成します

そしてOnMouseDown()を加えて、マウスボタンを押した時に実行したい処理を記述します

using System.Collections;

using System.Collections.Generic;

using UnityEngine;

public class tumbOpens : MonoBehaviour {

bool open = false;

    Vector3 offset = new Vector3(0,0,14f);

    // Use this for initialization

    void Start () {

    }

    

    // Update is called once per frame

    void Update () {

    }

    /// <summary>

    /// OnMouseDown is called when the user has pressed the mouse button while

    /// over the GUIElement or Collider.

    /// </summary>

    void OnMouseDown()

    {

　　　　　if(open){

            transform.localPosition -= offset;

            open = !open;

        }else{

            transform.localPosition += offset;

            open = !open;

        }

    }

}

タンスを開くなんてマニアックな処理を検索にかける人は少ないかと思いますが

一応処理内容も記述しておきますw

※メソッドの上のsummaryを見るとコライダー全体にマウスイベントが適用されるため、もちろんアタッチするオブジェクトにコライダーが設定されていないと使えません

このスクリプトをタンスの開戸全てにアタッチします

◆その他のマウスイベント

マウスで押す以外にも様々なイベントに対応している

　　void OnMouseDrag()

    {

        //ドラッグ中のイベント

    }

    void OnMouseEnter()

    {

        //コライダーに入った時のイベント

    }

    void OnMouseExit()

    {

        //コライダーから出た時のイベント

    }

    void OnMouseOver()

    {

        //コライダーにマウスが載っている時のイベント

    }

これだけでもいろんなアプリが作成できます

こんなメソッドが最初からあったなんて・・・私も始めたばかりの時に知りたかったなぁ

というところで、うにty生活ブログ史上もっとも短い記事でした

それではまた 

Audioつけてみた＋3Dサウンドの検証 #13

どうもラブヘイトです

今月は１日も０PVがありません！（今の所）

モチベーション上がるぜ

自分もだんだんとUnityを理解できてきているのか、過去の記事でちょっとここ違うな・・・とか出てきましたので

それも少しずつ直して正確でわかりやすい情報を伝えられたらなと思います

今回はUnitychanの走る音をつけます

そしてUnityには３Dサウンドという機能があるので、実際にイヤホンで音の聞き分けができるか検証していきます！

◆はじめに

パーティクルの記事でもちょいちょい言ってましたが、

静止画やgifだけでは伝わりにくいことも増えてきましたので

youtubeにアカウントを作成しました！

Hate Love - YouTube

これからは動画も取り入れて記事を書いていきますね

◆AudioClipのインポート・設定

対応しているフォーマットはこちらから参考にしてください

docs.unity3d.com

オーディオコンポーネントを追加したらこんな感じになります

では説明

Force To Mono

音声データをモノラルにする項目

ステレオはスピーカー２つ、モノラルはスピーカー１つで音を出します

基本ステレオで大丈夫です

Normalizeは音を均一に大きくする方法です

Load In Background

メインスレッドとは別のスレッドでオーディオファイルの読み込みをしてくれます

ここはチェックを入れておきましょう

Ambisonic

アンビソニックというのは360°全方位の音を再生するときに使用します

VRを使用するアプリであれば必要ですが、今回説明は割愛します

ここからは下のOverride〜の項目の説明です

LoadType

インポートするオーディオファイルをどのように展開するか決める項目

・Decompress On Load

ロードの際に解凍される、短い音（一瞬で終わる音）などはこれがいい

・Compressed In Memory

再生される直前に解凍される、ファイルは軽くなるが再生時に多少処理が入ってしまう

長いオーディオに適用したら遅れそう

・Streaming

ストリーミング再生なので、再生されながらメモリに読み込んでいきます

→オーディオ全てをメモリに読み込まなくてよくなる

Preload Audio Data

onの場合はシーン再生時にオーディオクリップが読み込まれる

offにしている場合はスクリプトの方で制御が必要

じゃあ多少の制御は必要になっても、offにしている時の方がシーン読み込みが早くなるのかな？また検証してみなくては・・

Compression Format

サウンドファイルの圧縮方法

・PCM

圧縮をかけない方式、ファイルサイズがでかくなる代わりに解凍させる時間などは必要ない

・Vorbis

Ogg Vorbis形式で圧縮をかける。聞いたことない形式だな・・・

 ・ADPCM

ADPCM形式で圧縮,Vorbisより圧縮率が低く音の劣化は少ないです

Quality

どれだけの圧縮率か選択する。Vorbis圧縮形式だけで使用可能

下にサイズのプレビューも出てくるので便利

◆Audio Souceのインスペクター

AudioClip

音声データを紐づける項目

Output

オーディオミキサーグループを割り当てることができます

オーディオミキサーはWindow>Audio>Audio Mixerから新しく作成可能

 Outputに設定できるのはこの中のMasterなので、ここの名前を変えていないと紛らわしくなるので注意

Bypass Effects

「バイパス」はオーディオ系の単語で加工しないで音を出すという意味らしいです

つまり原音をそのまま出している状態（Mixerで加工したのもは反映される）

なのでBypass Listener Effectsも聞こえ方の設定かと、そんなに大切ではないです

Play On awake

シーン再生時に再生するかどうか

Priority

シーン内のオーディオの優先度を決める、優先度が高いほどそのオーディオに優先的にリソースが割り当てられるのかな

StereoPan

右と左どっちのスピーカーから聞こえるか設定する

3Dサウンドを適用している場合はうまく動作しない

Spatial Blend

3Dサウンドかどうか値を１にすると３Dサウンドになる

下のグラフで詳細に聞こえ方を変更できます

◆実際に音をつけてみる

音をつけるのは簡単です

Audioクリップに再生したいオーディオを選択してPlayOnAwakeにチェックを入れれば再生されます

ただこのままでは問題があります

・歩いてもないのに再生されている

・このUnityちゃんは走ることもできるため走った時、足の動作に合わない

これら２つの問題を解決していきます

新たに「WalkAudioPlayer」という名前でスクリプトを作成

Unitychanにアタッチしてください

public class walkAudioPlayer : MonoBehaviour {

Animator animator;

AudioSource source;

bool walkOn =true;

    // Use this for initialization

    void Start () {

        animator = GetComponent<Animator>();

        source = GetComponent<AudioSource>();

    }

    

    // Update is called once per frame

    void FixedUpdate () {

        if(animator.GetBool("walking")||animator.GetBool("run")){

            if(walkOn){

                source.Play();

                walkOn =false;

            }

        }else{

            source.Stop();

            walkOn = true;

        }

        if(animator.GetBool("walking"))source.pitch=1;

        if(animator.GetBool("run"))source.pitch=2;

    }

}

FixedUpdate関数でプレイヤー（Unityちゃん）の歩くパラメーター（walking）もしくは走るパラメーター(run)が有効になっているかどうか取得していきます

このパラメーターの部分がわからない場合は過去の記事を参考にしてみてください

tubakihimelovehate.hatenablog.com

意外と難しかったのが、「Update内で一度だけ再生させる」ということでした

Play()をするたびに足音が最初の部分だけ連続再生されて、どうしよ・・・ってなりましたがなんとかこういう形で割と簡潔に記述できました

完成した動画です

youtu.be

◆３Dサウンド

 最後に３Dサウンドがちゃんと動作しているか確認してみます

youtu.be

丸い玉から音が出ています

オーディオの録音方法があまりよくなかったため伝わりにくいですが

右と左できちんと分かれているし、遠近で音量が変わって行くのがわかります！

なんて便利な機能なんだ！

ということで初めて動画を出してみましたが動画はいいとして音が・・・

また色々試してみます

それではまた

パーティクルで雨と雪を降らせる #12

#2020/8/16更新

どうも、

Fortniteで忙しいラブヘイトです

今回は雨とか雪とか降らせてみます

◆雪を降らせる

雪は簡単です

GameObjecct＞Efect＞Particle Systemを選択するとすぐにパーティクルがプレビューされます

Instectorで設定項目がかなりありますが設定するのは２つだけ

・ParticleSystemの「Gravity Modifier」の値を0.5に

・Shapeの項目をBoxにして平べったく広げます

そうすると雪はあっという間に完成です！

◆雨を降らせる

雪より早いスピードにして細くすれば雨の完成なのですが

どうやって細くすればいいのかわからなかったので、有名ブログを参考にさせていただきました

tsubakit1.hateblo.jp

ちゃんとできました！ありがとうございます

基本の雨の降らせかたはこちらに書いてあるとおりなので、ちょっと補足

StartLifetimeはパーティクルが消えるまでの寿命なので降らせる場所が高くなるほど値を高くしないと地上までたどり着きません

あとは自分好みにカスタマイズ！

◆応用編１『最初はポツポツとゆっくり降る雨にしたい』

ゲリラ豪雨でもない限り、急に雨が降ってくることはありませんよね

降り始めはポツポツと少しずつ降ると思います

パーティクルのカーブという機能を使いまくってこれを再現していきたい

カーブは時間経過とともに、その時間におけるStart LifeTime(寿命)やらRate over Time(１秒間のパーティクル量)を変化させていきます

x軸は必ずDurationが基準となっていて

y軸が各項目です

例えば上の画像ではStart SpeedがDurationの７５を超えるあたりまでほぼ０で１００にかけて一気に高くなり、雨の勢いが強くなります

例えばと言いましたがこちらは必要な項目ですので同じように設定してください

カーブには基本的にテンプレートがありますが自分でいじることもできます

動かしたい場所に合わせて右クリック＞Add Kyeでグラフに点ができます

こんな感じでEmissionのRate over Timeもカーブで変化させていきます

これで完成しましたが、なんかgif画像じゃ伝わりにくいですね・・・

工夫しなければ

youtubeにチャンネルでも作ろうかな

LoopingはDurationを繰り返しているので、途中で雨が再度ポツポツなります

外しておきましょう

代わりにDurationを降らせたい時間分増やせば解決

◆応用編２『ゆらゆら揺れる雪にしたい』

揺れる雪を作成するには「Velocity over LifeTime」を使用します

Linear項目の右端の▼からRandom Between Two Constantsを選択します

x,y,z全て -1~1にします

完成！

うん、やっぱりgif画じゃわかりにくい

◆応用編３『結晶のマテリアルを設定した雪』

先ほどの揺れる雪にプラスしてマテリアルを雪の結晶にしていきます

フリーで雪の結晶（試すだけならなんの画像でも良い）を探したらUnityにインポートします

次にマテリアルを作成してsnowとでも名付けて

Shaderは「Unlit/Transparent」にしましょう

さっきインポートした画像をTextureに設定たら私の場合はこんな感じのマテリアルになりました

これをRendererの項目に設定します

サイズが少し大きいのでParticleSystemの「Start Size」項目を0.3くらいにします

そのままだと紙みたいに降ってきてしょぼいので、Textureをくるくる回転させましょう

Rotation over LifetimeでY軸だけを変えていきます

さっきRandom Bettween Two Constants使ったので今度はRandom Between Two Curveで回転させます

AddKyeとかで、こんな感じで適当にぐねぐねさせたら完成！

Textureが様々な方向に向いてます

Unityちゃんの世界でも降らせたよ！

最近RedDead Redemptionもやり始めたのでシネマチックに撮ってみました笑

初めてパーティクルを触りましたが、割と直感的に扱えるのと、

カーブの使い方さえ理解できれば最初は十分な表現ができると感じました

それではまた

【まとめ】Canvasを使いこなそうのコーナー #11.1

どうも最近全然体力のないラブヘイトです

すぐ寝ちゃうけど長くは眠れないのです(おじいちゃn・・・w)

今回は前回の記事で触れたCanvasについて詳細に勉強していきます

tubakihimelovehate.hatenablog.com

◆Canvasとは

リファレンスでは「Canvas はすべての UI 要素を配置していくための領域で、すべての UI 要素はその Canvas の子要素でなければいけません」と明記されています

https://docs.unity3d.com/ja/current/Manual//UICanvas.html

つまりはUIを配置するためにはCanvasが必要ということなのです

＜Canvasの特徴＞

・Canvas外にUIを配置しようとしてもCanvasが自動的に作成される

・プロジェクト内のどこかにCanvasがあるとき、ない場所でUIを作成したら自動的にCanvasの子に移動されちゃう

・Canvas自体はいくらでも配置可能

つまりUnityを始めたての人は最初にこれを最低限理解しなければUI配置すらもできないという重要な部分

◆Canvasコンポーネント

RenderMode

レンダーモードではCanvasの配置方法を変更します

Canvasの子になるUIにも、どのように影響するかが変わります

各モードはこちら

・Screen Space - Overlay

このレンダーモードではスクリーンの大きさに合わせてUIを配置・拡大縮小します

私がUnityを始めたての頃、驚いたのがここでした

「Canvasを配置したのにどこにあるんだろう・・・？」

それもそのはず、なぜならCanvasはデフォルトではとてつもなく大きいのだから

Canvasはデフォルトでこのモードになっていて

最初はスクリーンの大きさで出現するからどこにあるかわからなかった

このモードではCanvasの場所に関係なく必ず最初に描画されるため、UIが隠れる心配はありません

結構いいモードですが、このモードではCanvasのTransformは全く触れないのでちょっとでかくて邪魔かな〜とも思います

・Screen space -Camera

カメラをアタッチした場合、カメラから一定の位置にCanvasが置かれます

ただこの場合カメラとCanvasの間にオブジェクトが存在するとUIが隠れてしまいます

下の画像はカメラとCanvasの間に青いキューブを配置した時の見え方

また、カメラをアタッチしなかった場合はOverlayと同じように描画される

Plane Distanceはカメラとの距離を調節することができます

あまり近すぎるとエラーが出ることもあるので注意

・World Space

このモードだとCanvasが他のオブジェクトと同じように扱われる

つまり映像が流れるパネルのようなものも作れるし、壁掛けの絵画も表現できる

１つのオブジェクトなのでカメラと一緒に動きません(親子関係でない場合)

Pixel Perfect

onにするとPixelが整列されて文字とかのぼやけが綺麗になるみたい

私のエディターでは最初から鮮明すぎて違いを確認することができませんでした・・・

Sort Order

これはCanvasがいくつもあるときの描画順です

Canvasだけはヒエラルスキービューの順番ではないのでここで指定する必要があります

Terget Display

どのDisplayに表示させるか選択できます

ディスプレイを変更させた場合カメラが違うので実質Canvasを変更したことになる

Addtional Shader Channel

この部分だけはよくわかりませんでした

UIにシェーダーを反映できるようなのですが実現できませんでした

ただ調べてみたらかなり夢のある機能だなということはわかったので、引き続き勉強していきます(ここで紹介できるほど単純な機能ではないのは確か)

◆Canvas Scaler

UI Scale Mode

・Constant Pixel Size

UI表示をピクセル単位にするモード

UIのサイズと位置が変化しないモードなので場所によってはUIが、画面外になることもある

Scale Factorでピクセルに対する比率が変更可能

・Constant Pysical Size

こちらはピクセルではなく「cm」や「inch」などの単位でUIを表示するモード

物理単位なため位置やサイズが正確になる

その下のDPIは（dots per inch）の略で、FallBack Screen DPIはスクリーンのdpiがわからない時のための仮設定です

値を変えて、ImageのSet Native Sizeを押せば適用される

ちなみに１にした時の大きさです(1inchに１dot)

真ん中のちっこいのがCanvas

・Scale With Screen Size

Refelence Resolutionで設定した解像度に応じてサイズや比率を変更するモード

縦と横の解像度比率が同じなら同じ場所にUIが出現します

ここでそれぞれのモードを比較してみました

768x1024(3:4)の画面比率から1080x1920(9:16)の比率の画面に変更してみました

Screen Sizeの設定は以下の通りです

pixel SizeやPhysical Sizeでは大きさや位置が変わらないためゲーム画面からはみ出ます

上画像の場合画面比率が違うためScreen Match Modeが適用される

Screen Match Modeは画面比率が違う場合の対応について設定できる

-Match Width Or Height

   widthにすると横、heightにすると縦に調節します

   基本的に横画面ならwidth、縦画面ならheigthに設定しておきます

-Expand(拡大)

   Canvasが設定した解像度より小さくならない

-Shrink(縮小)

   Canvasが設定した解像度より大きくならない

※CanvasコンポーネントのRender ModeがWorldの場合はUI Scale Modeは変更不可

Referenece Pixels Unit

1unit(unityの単位で1unit=1m)がどれだけのピクセル数にするか決めることが出来る

基準が100なので小さくすれば画像が小さくなるし、大きくすれば大きくなる

200にすれば単純に2倍

こちらも値を変化させた後で、ImageのSet Native Sizeを押さなくては変化はみられない

↑Spriteをアタッチしたら出てくる設定

Canvas以下のImageの大きさをいっぺんに変えられる機能かと思いきや、一つずつだし

変化させても普通に拡大縮小できて、例えば４の時に元の画像サイズまで伸ばすと今度はその値が基準値になったりとガバガバでどこで使うのかはよくわからない

◆Graphic Raycaster

これは透明な線、レイを飛ばしてCanvas上にある全てのオブジェクトを監視しているコンポーネント

このコンポーネントがないCanvasのあらゆるUIは反応しなくなります

例えばこんな感じでCanvasを２つ重ね、Imageの後ろに隠れたボタンが押せるかどうか検証する

Graphic Raycasterを有効にしている場合は「前面のImage」に隠れている場所の

「背面Buttonは押せない」もちろんない場所は押せるd

次に前面のGraphic Raycasterを無効にした場合

重なっていても背面にあるButtonが押せるようになる

・Ignore Reversed Graphic 

ON/OFFで反対方向のUIを検出する←？

・Blocking Objects

レイキャストをブロックするオブジェクトを選択する

・Blocking Mask

レイキャストをブロックするレイヤーを選択する 

この３つは一応説明は書きましたが

うまく検証することができませんでした

そもそもレイについてよくわかっていない・・・

どこから飛んでどうUIに当たって反応しているのかさっぱりわからない

けどとりあえず一番肝心なところは理解できたから・・・いっか笑

◆まとめ

CanvasのRender Modeを簡単にいうと

・Overlayモードは絶対前面に表示する

・CameraモードのUIは遠近感が出せるし、扱いやすい

・World Space１つのオブジェクトとして表現できる

ということ

今までCameraモードしか使ったことがなかったけど

他のモードもメリットがあるんだねd

Canvasに触っていて発見したことは、わざわざCanvasをカメラの子にする必要はなかったことと、Graphic RaycasterでUIを貫通させることができたこと！

あとはAddtional Shader Channelを扱うことができればさらに表現の幅が広がるということで、頑張って勉強します泣

ではまた

3DでUIを配置する 操作方法を表示してみた #11

どうもラブヘイトです

最近コマンド多すぎて操作がわからなくなってきたので

今回は操作方法を左上に表示させていきます

合わせて３Dでの２DUIの使い方も紹介していきます

完成したらこんな感じ

視点を動かしてもずっと左上に操作方法が表示されています

◆Canvasの設定

3Dで2DのUIを使うにはまずCanvasが必要です

①カメラの子としてUI>Canvasを作成する

②Canvasのインスペクター設定はこんな感じ

＜RenderMode＞

・ScreenSpace - Cmera

　カメラのサイズに合わせた大きさになります

　下のRender Cameraに合わせたいカメラをセットすると使えます

　基本的に2Dでも3Dでもこのモードを使います

・Plane Distance

　これはカメラとCanvasとの距離です小さいほどカメラに近くなります

　見え方は変わりませんが3Dの場合カメラとCanvasとの間にオブジェクトがあると

　Canvasが見えなくなるのでいいくらいに調節してください

※じゃあカメラに近い方がいいじゃんと思うかもしれませんが

カメラに近すぎるとpositionなんたらとエラーが出ます

もし出ていたらカメラのNearという項目の値を0.3以上にしてください

解決できる時もあります

＜Canvas Scaler＞

・UI Scale Mode

デフォルトでは違うものになっているため「Scale With Screen Size」にしてください

このモードにしておくことで表示デバイスなど画面の大きさが変わってもそれに合わせてUIも拡大縮小される

・Mach

ここはHeightにします

横画面ならWidth,縦画面ならHeightに設定する

あとは自分が思うままにUIを配置していくだけ！

◆他にも

下の図のようにタイトル画面のようなものも作れます

可能性が広がりますね！

私もCanvasについてはまだまだわからないことが多いので次回で各項目をまとめていきます！

あと何気に初めてTextMeshProに触りました笑

こちらも興味が出てきたのでまた、色々いじってみようかな

ではまた

--------------------------------------------------------------------------------

当ブログは記事にナンバーが振ってありますが特に意味はありません

私の成長記のようなものです。

【定期まとめ】今後の方針や感想など #10

どうもラブへです！

前々から記事１０回ごとにまとめをしたいと考えていて、

とうとうその時が来ました！

今回は技術というより私の成長を綴っていきながら、過去の記事にも一つ一つ

触れていくので気になるものがあれば、是非みていってください！

◆Unity2018のProBilderで家建ててみた #1

tubakihimelovehate.hatenablog.com

私が３D開発をしようと思ったきっかけはProBilderが無料化したことです

元々２Dでばかりアプリ開発をやっていて、3Dもやってみたいとは思ってました

まだProBilderが無料になっていない頃に階段を自分で作る作業の多さに嫌気がさして３Dは面倒だというイメージがあり、なかなか手が出せずにいましたが

ProBilderがUnity2018から無料になるという記事を見つけ、実際に使い、

なんて便利な機能なんだ！と感動したため、3Dを始めました

それと同時期くらいに卒業後働く職場も決定して、Unityの３Dを使うと言われたものですから勉強しなくては！と思い、ブログを開始することに

ブログを書いているとノートみたいで、忘れずに定着するのし、色々なことに挑戦しようと思えるので、始めて正解でした！

◆UnityChanを歩かせてみる 前編 #2

tubakihimelovehate.hatenablog.com

私はこういうブログは何かコンセプト？目標的なものがないと続かないなと思ったので

「Unityちゃんを生活させてみよう」というコンセプトで始めました

そういうちょっとしたストーリー性がある方が見てもらいやすいし、いろんな技術記事に発展していけると踏んだからです

だって、みなさん街づくりとか、文明発展みたいなゲーム好きでしょ？

私もそういったゲームが好きで、自分自身楽しんでできるから今でも続けられています

◆Unitychanを歩かせる 後編 #3

tubakihimelovehate.hatenablog.com

ここら辺からやっとgif画像を載せることができて、技術勉強と並行してブログ自体も進化させいるのでだいぶ見やすくなったかと、(拙い文章は変わりないですが)

最初はやり方とか説明するつもりはなく、ただ成果物を発表する場にするつもりでした

でも私がやることなどまだ小さなことです

それだけで記事を書くと画像＋３行くらいで終わりそうだなと思いやり方も書くことにしました

◆カメラ追従＋カメラ操作 #4

tubakihimelovehate.hatenablog.com

私は作成物は全てオリジナルにしたかったので、他のブログはヒントくらいにしかしておらずほとんど自分で考えてアレンジしています

この記事でもLookAtでオブジェクトのど真ん中を向いてしまう違和感のあるカメラを

どうやって少し上を向かすかなど、かなり試行錯誤しました

◆マイクラみたいな1日を表現する　#5

tubakihimelovehate.hatenablog.com

これも前々からやりたいと思っていた記事の１つです

太陽はずっと動かしていると影の処理が大変なので工夫しまくった記事でした

ここでうにty生活に朝と夜の概念が生まれた！

将来、季節の移り変わりなんかも表現していきたい！

 ◆AssetStoreからダウンロード・インポート　#6

tubakihimelovehate.hatenablog.com

これは元々自分自身がAssetStoreという存在が苦手で、

同じ人がいるのではないかと思い書いた記事です

最初にUnityを始めた頃はマテリアルやテクスチャなど知らなかったので

インポートしたAsset内にファイルがたくさんあるのがとても怖かったのです笑

「何を使えばいいんだ？」「Sceneはどうやったら読み込めるんだ？」

「このMaterialファイルってなんだ？」

など、アセットを使う以前にUnityに慣れていなかった私はその時AssetStoreを敬遠していてよかったのかもしれません

アセットはとても便利ですがそればかりに頼ってできた作品を自分のものだと誤認してはいけません、どういう風に動いているかしっかりと理解することが大切です

勉強するためのアセットでもあるのです

そういうメッセージ性も込めて書いた記事です

◆タンスを開く仕様にする方法 #7

tubakihimelovehate.hatenablog.com

これは個人的に一番好きな記事です

まさかこんなに早くBlenderに発展していけるとは思ってもなかったのですが、

他のプロジェクトで脱出ゲームを作ることがあり、タンスが開かないのはもったいないと思って、どうにかガバガバ開くようにはできないかと考えた結果できた記事です笑

こんなことをしているブログは見たことありませんし、

Google先生に「Blender タンス　開く　方法」なんて検索しても出てきませんでした

私はこういったオリジナリティあふれる一見バカみたいな記事をこれからも書いていきたいです

◆アニメーションレイヤーを自分で設定してみた #8

tubakihimelovehate.hatenablog.com

ブログに目次ができて、見出しのCSSを変更することもできてかなり読みやすくなった気がします

ですが過去の記事にはつけないことにしました、その方が成長が感じられるからです

この記事は

「Unityちゃんを生活させよう」というコンセプトなのに、Lightingや家具のことばかり気になりすぎ、Unityちゃんを放置しすぎてかわいそうになったので書いた記事です笑

◆ProBilderで色を塗る #9

tubakihimelovehate.hatenablog.com

正直この記事は家に色をつけるきっかけにはなりましたが、結局ProBilderの色塗り機能は使う場面が少ないなという印象になった記事です

（実際に色塗りはほとんどしていなくて、マテリアルを設定しただけです）

私は技術者ではないため、まず記事を書こと思うと

勉強して実際に手を動かしてみなければいけません

それに並行して記事を書いていくのですが、勉強した先にある「結果」が使えるものかそうでないか、あたりかハズレかというのは勉強し終えて見ないとわからないことなのです

だからこういった自分が思い描いていた記事とは違った記事になることはこれからも度々出てくるかもしれません・・・

◆今後の方針

将来的にはこのうにty生活にクラフト機能を追加していきたいと考えていて、その基盤を作っていくつもりです（かなり先の話ですが）

あとは自分でキャラクターをモデリングして、住民として配置したり、喋れるようにしたり敵を作って見たり、ネタはいくらでも出てきます笑

あとは季節的な行事に合わせたイベントみたいなこともしてみたい！

もちろん自分で考えていることもありますが、「こんなことして欲しい！」など要望があればブログか、Twitterもやっているのでそちらにコメントしていただければ実現させていくのもいいかなと考えています

どんどんコメントお願いします！

長い記事に付き合っていただいてありがとうございます

これからも「うにty生活」をよろしくお願いします

ProBilderで家に色をつけてみる #9

タイトルにナンバリングしていますがあんまり関係ありません(汗)

気になる記事を見ていってくださいね！

どうもラブへです！

いつまでも家が真っ白なのはつまらないので今回は色をつけていきます

◆ProBilderで色塗り

普通にテクスチャ貼っていってもいいのですがProBilderにペイント機能があったので

折角なので使ってみよう！

とりあえず適当に塗ってみます↓こんな感じ

使い方がよくわからないので色々まとめてみました 

◆Vertex Color Editor

このアイコンの歯車をクリックするとColorの設定画面が開きます

まず各項目を確認していきます

＜Enabled＞

おそらくモード変更？

ペイントモードを有効か無効にできる項目で有効の時だけ色が塗れるっぽい

＜Brush Size＞

これは単純にブラシの大きさですね

＜Opacity＞

透明度

小さくするほど透ける

＜Strength＞

濃度

小さくするほど薄くなる

これが小さい値のまま塗っているととても塗りにくいです

＜Channel Mask＞

今選択中の色からRGBの要素を抜いた色にできます

例えば青色を選択いているのにBの要素をなくすと黄色になったりします

そのためRGB全てのチェックを外すともちろん色が塗れなくなります

どんな場面で使うんだろう・・・

次に下半分です

＜カラーバー＞

現在の色

＜白いボタン＞

ブラシの色を登録した色に変更する

ショートカット的な？

◆使ってみた感じ

オブジェクトを選択した状態で色を塗るとはみ出ないみたい

Texturesの項目は正直何も触れませんでした

現在のつけられているマテリアルが見られるだけで変更も何もできません

◆Material Editor

マテリアルエディターではQuick Materialに設定したマテリアルに変更してくれます

まあ普通にマテリアルをオブジェクトにアタッチする方が早いです・・・

ですが次にいい機能がありました！

Material Paletteです！

これはマテリアルを保存していつでも簡単に呼び出すことができるので便利でした

よく使うマテリアルをここに登録しておけば探す必要もなくなります

ProBilderのウィンドウを開いてなくても使えるため優秀です！

◆まとめ

正直Vertex Colorの方はちょっと使いづらいです

ブラシの種類もないし、透明度や濃度の変化も微妙なので細やかな表現はできないので使い所も少ないかと思われます

そしてテクスチャをDefault以外にすると塗れなくなります

マテリアルをいじる方が早いですね！

マテリアルエディターもパレットくらいしか使うことがないかと・・・

あまり収穫がありませんでしたが

一応マテリアルパレットを使って家にマテリアルを設定できました！

ついでなので屋根もつけてみました！

外壁と屋根の三角は同じマテリアルですが面積が異なるため、粗さが違ったり

外壁と内壁が同じ素材になってしまうなのが気に入らないですが、ここら辺はまたシェーダーをもう少し勉強してから直していきます！

それではまた

アニメーションレイヤーを自分で設定してみた #8

# 2020/8/16 更新 

どうもラブへです！

このブログは「Unityちゃんを生活させよう」のコンセプトでやっているのに

Unityちゃんの記事が少ないという・・

だから今回はUnityちゃんに表情をつけてにっこり笑顔にしていきたいと思います！

◆自分でAnimetorを設定する

Unityちゃんアセットに元々付属されているAnimetorをアタッチすれば、すぐにUnityちゃんの表情を変化させることが可能です

が、今回はそのAnimetorを自分で作っていきたいと思います！

その前に以前にもAnimetorには触れたことが有りますのでわからないことがあればそちらから読んでいただくことをお勧めします（説明も重複してしまうので・・・）

tubakihimelovehate.hatenablog.com

①まずはプロジェクトビュー＞Create＞Animetor Controllerで

Animetor Controllerを作成していきます名前は「UnitychanAnime」にして、そのAnimetor Controllerを開きましょう

②Animetor編集画面が出てきたと思います

Layersタブを押して+でレイヤー（レイヤーの説明は後ほど）を追加していきます

名前は「face」とします

③faceを選択した状態で、ステートを３つ作成します

④最初に作ったStateがオレンジ色だと思うので名前を「normal」に変更します

そのほかの二つどっちがどっちでも良いので「angry」と「smile」に変更します

それぞれのステートを選択するとInspectorにMotionという項目があるので

waitステート　＝　default@unitychan

smileステート　＝　smile１＠unitychan

angryステート　＝　angry1@unitychan

のMotionをそれぞれ探してアタッチしましょう

⑤「normal」ステートを右クリック>Make Transitionで矢印をsmileに伸ばしていきます

そのあと同じように続けてこの状態にします

⑥パラメーター作成

Parameterタブに切り替えて+でパラメーターを３つ作成していきます

全てBoolで作成して順番はなんでも良いので先ほどの３つステートと名前を一緒にします

⑦⑤で伸ばした矢印のInspectorからConditions項目があるので＋で⑥のパラメーターを追加していきます

例えばnormalからsmileに伸びる矢印ではsmile = trueを設定し、反対はnormal = trueにします

そのほかも例のように設定していきます

⑧新たにC#スクリプトを作成して下のコードを打ち込んでください

using System.Collections;

using System.Collections.Generic;

using UnityEngine;

public class UnityChanControl : MonoBehaviour {

 

    private Animator animator;

　　void Start()

    {

        animator = GetComponent<Animator>();

    }

　　void FixedUpdate()

{

　　　　　if(Input.GetKey(KeyCode.J)){

　　　　　　　animator.SetBool("happy",true);

　　　　　　　animator.SetBool("face_wait",false);

　　　　　　　animator.SetBool("angry",false);

}else if(Input.GetKey(KeyCode.F)){

　　　　　　　animator.SetBool("angry",true);

　　　　　　　animator.SetBool("face_wait",false);

　　　　　　　animator.SetBool("happy",false);

}else{

　　　　　　　animator.SetBool("face_wait",true);

　　　　　　　animator.SetBool("happy",false);

　　　　　　　animator.SetBool("angry",false);

}

    }

}

これをUnityちゃんにアタッチすれば完成！

・・・ではありません！

実は今回の記事はここからが本番なのです

◆アニメーションレイヤー

docs.unity3d.com

アニメーションレイヤーとは部分ごとにアニメーションを設定できたり、

さらに同時に2つ以上のアニメーションを実行できる機能です

先ほど②で記述していたレイヤーとはこのことです

今回設定したMotionのangryやsmileは顔用に作成されたもので、そのままUnityちゃんにアタッチしても動きません

アニメーションレイヤーの機能を使ってUnityちゃんの顔(face)だけに作用するよう、設定しましょう

アニメーションレイヤーの設定は②で追加したレイヤー「face」のイガイガボール笑

みたいなところから設定できます

とりあえず一番重要なMask項目から説明していきます

◆Maskの作成・設定

maskでそのレイヤーがどこに作用するものか設定できます

そのためにAvatar Maskが必要になります。もちろんUnitychanには最初から付属されていますが、これも自分で設定してみましょう

①プロジェクトビュー＞Create＞Avatar MaskでAvatar Maskを作成し、名前を「face_Avatar」にします

Inspectorを見るとHumanoidとTransformが存在します

※今回はTransformで設定していきますがHumanoidものぞいてみましょう

これはオブジェクトを人型に設定していればこのように感覚的に選択することもできる

という機能です

ではTransformに戻りましょう

②Transform項目を開くと

「Use skeletion from」という項目がありますので「unitychanAvator」を探して選択して、その下のImport skeletionを押すとこんな感じになります

これを一つずつ選択していくのか・・・と私も思いましたがTransformなので

親のチェックが外れると子のチェックも全て外れます一度全て外しましょう

チェックをつけるのはたったこれだけです

末尾に「_DEF」と付いているものだけチェックしてください

これをfaceレイヤーのMaskに設定すれば完了です

◆weight項目

レイヤーの重みづけをします

他のレイヤーに対してどのくらいアニメーションを実行するか設定します

この項目は１にしておきましょう

そうすることで例えばBase Layerに歩くアニメーションが設定されていれば

歩きながら表情を変化させることが可能です

※ここを０にすると全く動きません

0.５にしてUnityちゃんのsmile1など実行すると半笑いみたいになります笑

その他の項目は今回使わないのでそのままにしておきます 

◆完成

「UnitychanAnime」をUnitychanのAnimetorに設定すれば完成です！

お疲れ様でした

前の記事と合わせるとこんな風に歩きながら笑顔にしてあげることができました！

tubakihimelovehate.hatenablog.com

こんな感じでUnityちゃんをどんどん可愛くしていこうと思ってます！

 今回はそんなに文字打った気がしないけどまた3000くらいなってました・・・

できれば短い記事で投稿頻度をあげていきたいけどいつになることやら

ではまた

【Blender】誰でも簡単にタンスを開く仕様にできる #7【脱出ゲーム】

# 2020/8/16 更新  

どうもラブヘイトです！

今回は初のBlender記事になります

Blenderもまだまだ勉強中でショートカットとか覚えるの大変ですが頑張ります！

◆やりたいこと

皆さんは脱出ゲームをしたことがありますか？

今回は脱出ゲームでよくあるタンスを開けるイベントを作成して行きます

完成したらこんな感じ

有料のアセットなら最初から開ける仕様になっているものが多いですが、無料アセットだとオブジェクトが一つになっているアセットが多いイメージです

前回の記事で取り扱った「Pack Gesta Furniture」の家具もその一つです

tubakihimelovehate.hatenablog.com

assetstore.unity.com

今回このタンスをガバガバ開けるようにしていきます！

◆Unity側の準備

①まずは「Pack Gesta Furniture」アセットをダウンロード・インポートしてください

わからない方は前回の記事をチェック！

tubakihimelovehate.hatenablog.com

 これだけ！

◆Blender側の準備

①FBXファイルがインポート可能か確かめる

ファイル＞ユーザー設定＞アドオン＞インポート/エクスポート

・「Import-Export:FBX format」にチェックが入っていればOK

②Blenderの単位をm(メートルに直す)

Unityはメートル法を採用しているためです

Blenderも準備OK

◆Blenderで今回使う操作

＜モード変更＞

今回使うのはオブジェクトモードと編集モードだけです

＜選択操作＞

①オブジェクトモードにする

②「右クリック」でオブジェクト選択(Blender2.8からは左クリック)

③「Aキー」で選択・解除

（Blender2.8から解除はオブジェクト以外の場所を左クリック）

※複数選択はShiftを押しながら選択する

＜輪選択＞

①編集モードに変更

②Control + 左クリック移動で選択

＜陰面処理＞

陰面処理ではオブジェクトの背後にある面や頂点も一度に選択することができます

①編集モードにします

②上画像の一番右端にあるボタンを選択（Zキーで同様の操作が可能です）

（陰面処理モードではオブジェクトが透けているように見えます）

一つ前のgif画像と比べてみてください見えないところも選択されているのがわかります

＜オブジェクト作成＞

左側にあるタブから作成を選んで

様々な形のオブジェクトを作成できます（Shift + Aからも選択可能）

大きさは次で調節します

＜トランスフォーム関係＞

矢印：座標移動

カーブ線：回転

四角線：大きさ調整

＜頂点/辺/面切り替え＞

＜削除&一つ前に戻る＞

オブジェクトの削除は「Xキー」

あとどのソフトでも同じですが

一つ前に戻るが「ctrl + Z」です

＜結合＞

２つ以上のオブジェクトを一つにします

①オブジェクトモードにする（面や辺を結合するときは編集モード）

②２つ以上のオブジェクトを選択する

③「ctrl + Jキー」で結合されます

＜分割＞

一つのオブジェクトを分解することができます

 

① 編集モードに変更

②分割したい面を選択

③「Pキー」＞「選択物」　で分割されます

その後オブジェクトモードに切り替えることで分割したオブジェクトを移動させたり

削除したりできます。編集モードのままで編集もできます

これらはすぐに覚える必要はないので 見ながらやっていきましょう

◆タンス系のオブジェクトを開く仕様にする

開く仕様というのは一緒になっている部品を分割させることです

今回はタンスを開きたいので外枠と引き出しを分けていきます

◆外枠を作成

全て作成するのは時間がかかるため、あるものはそのまま使用します

①キューブを削除する

②ファイル＞インポート＞FBXから

Pack Gesta Furnitureアセットファイルの中の「tumba_fur.FBX」ファイルをインポート

③タンスを編集モードにして陰面処理をonにします

この状態になっていますか？

ここからはタンスのオペに入ります笑

④まずタンスの背面が作業上邪魔なので取り外します

（面選択に切り替えてください）

ここから少しわかりにくいのですが、面６箇所を複数選択（Shift＋選択）していきます

※面の真ん中にある、黒い点をクリックしないと選択されないので注意！

⑤６面以外が選択されていないことを確認して「Pキー」で分割しましょう

うまく外すことができればこの状態になります

背面は後で必要なので遠くにおいておきます

⑥次に引き出しを全て取り外していきます

取っ手の部分は多くの面で構成されているので、輪っか選択を使いましょう

細かいところは一つずつ選択して、

余計な面が選択されていないか確認して分割していきます

⑦背面をもとに戻す

オブジェクトモードに切り替えて背面を元の位置に移動します

そしてタンスの外枠と背面の2つを選択して「ctrl+Jキー」で結合させます

⑧この状態で一度プロジェクトの保存をします

ファイル＞別名で保存＞「tumbaParts1」で保存します

⑨取っ手を削除します

⑩外枠だけの状態になったらファイル＞エクスポート＞FBX＞UnityのAssetsファイル以下の場所にエクスポートしましょう

エクスポートする際に設定があるので下の画像の通りしてください

◆引き出し作成

外枠をエクスポートできたら、次は引き出しの作成に取り掛かります

こちらは取っ手だけで中身がないので自分で作成していきます

①外枠のエクスポートが終わったら保存せずにBlenderを閉じて<外枠>の⑧で保存していたファイルを開きます

②引き出しは１段しか必要ないので２段目から以下は分割して削除します

この時まだ外枠は残しておきます

③作成＞立方体からオブジェクトを作成して引き出しの部品を作成します

下の画像を目指して板を作っていきましょう

底板のサイズは下の画像を直接設定して、必要があれば微調整してください

他の板のサイズも記載しておきますね

側面(2枚) X:0.１　Y:8.492   Z:4.670 

奥(1枚) X:23.59   Y:0.1  Z:4.670

④作成したパーツを組み立てて結合すると

引き出し完成です！！

⑤後は外枠を削除して先ほどと同じ設定でエクスポートすれば

開くタンスの準備完了です

名前は「tumbaParts2」に変えておきましょう

◆Blenderで作成したオブジェクトをUnityにインポート

実はもうUnityへのインポートは完了しています

早速Unityを開いて作成したオブジェクトを出してみましょう

①ヒエラルスキービューで空のGameObjectを作成して、名前を「parts1」に変更しましょう

② 「parts1」に「tumbaParts1.fbx」をアタッチしてください

サイズが巨大だったりするのでScaleを調節しましょう

③同じく今度は引き出しです。ヒエラルスキービューで空のGameObjectを作成して、名前を「parts2」にしましょう

④「parts2」に「tumbaParts2.fbx」をアタッチして大きさを調節したら

コピーして４つに増やしてparts1の子に加えます

⑤組み立てたら完成！

 長い道のりお疲れ様です

初めてのBlender記事

できるだけ読みやすくするために目次をつけてみましたが、無駄が多かったのか今までで一番長い記事になってしまい申し訳ないです

こんな感じでブログデザインも成長しているのでどうか暖かく見守ってください

ではまた

Assetに抵抗があるあなたへ！AssetStoreからダウンロード・インポート方法！#6

今回は初めてUnity触ってるって方向けに、AssetSroreからAssetのダウンロード方法などを書いていきたいと思います

Assetをダウンロードするために必要なもの

・Unity

・Unityアカウント（Unityをダウンロードする時に作成しなければならない）

たったこれだけ、

つまりUnityをダウンロードしている人はもう準備OKということです

ログインする

AssetStoreには２通りのログイン方法があります

・Webページからログインする方法

・UnityからAssetStoreにアクセスする方法

①Webページからログイン

ブラウザで「AssetStore」と検索する

一番上位に英語版AssetStoreがでてくるのでそのページに遷移する

https://assetstore.unity.com

そしてAssetstoreのページ右上からログイン画面へ

Unityをダウンロードする時に作成したアカウントを入力

ログイン成功！

ちなみに言語選択は現状（ 2018/8/22）トップページの一番左下で選択できます

現在（2019/12/2）はフッターの左側に変更されています

※Webページの仕様が変わった場合変更される可能性もあります

②UnityからAssetStoreへ

Unityを開いた時ログイン画面がでてくる人とプロジェクト選択画面がでてくる人で

分かれています

ログイン要求をされている場合はUnityIDを入力してログインしてください

ちなみにログインできている状態だと右上に「My Account」と表示されます。

そしたら何かしらプロジェクトを作成してください

Unityのプロジェクトが開いたらシーンビューの上の「AssetStore」タブをクリック

Unity上でAssetstoreを開くことができました！

こちらはもうすでにログインされている状態になっています

AssetStoreで検索

試しに今開いたアセットストアで「家具」と打って検索してみてください

たくさんでてきますが有料のアセットが多いです...魅力的だけどお金が(泣)

無料のものだけ検索結果に表示したいときは

検索バー下にある価格スライダーを一番左にすればFree(無料)のアセットだけ

でてくるようになります

しかし上の画像の通り「家具」の無料アセットは存在しないようです

ここで「なんだ、ないのか...」と肩を落とさないでください！

検索単語を英語に変えてみたら、

無料アセットがたくさんでてきた！

自分が思った検索結果が出ないときは単語を英語にしてみると

また違った結果が出てくるので覚えておきましょう

アセットのダウンロード・インポート

気になるアセットを見つけたらダウンロードしてみましょう

今回は「Pack Gesta Furniture #1」をダウンロードしてみます

有名なので最初のページにあるかと思いますが...一応

assetstore.unity.com

ダウンロードしただけではまだUnityには入っていません

ダウンロードしたアセットは全てAssetstoreの「MyAssets」というところに追加されます

MyAssetsはアセットストア左上のファイルアイコンです

Pck Gasta Furniture #1のインポートを押すと上の画面がでてきますので右下のimport

をクリック

するとインポート完了です

Unityのマークアイコンのものはデモシーンで、ほとんどのアセットには必ず存在しています

importしたアセットの使用例がわかります

容量が気になる方はデモの項目のチェックを外して必要なオブジェクトだけを手に入れることもできますが最初のうちはデモSceneをイジるだけでもかなり勉強になるので

インポートしときましょう！

アセットは便利ですが、入れて使うだけでなく

しっかり仕組みも理解しましょう！

今回はここまで！

家具が増えてUnityちゃんも喜んでいるはず笑

 

Lightコンポーネント設定+Haloコンポーネント 勉強会#5.2

最近のベストショット

今回も引続きLightに関して基礎的な内容を勉強していきます！

前回のLighting勉強会はこちら

Lighting 設定 勉強会 #5.1 - うにty生活

Lightコンポーネント

Lightコンポーネントは主にLightを生成した時付いて来るコンポーネントで、

Lightの種類や光の強さやなどを調節できます

 

Type 

　Lightのタイプを変更できます

・Directional

　　３Dプロジェクトを立ち上げると必ず最初に存在しているLightで、

　　全方位から均一に光が当てられる、まるで「太陽」みたいな役割をする

　　このLightは「位置」は関係なく、「向き」(Rotation.x)を変更したとき明暗が変わっていく

・Point

　　小さい光の玉で「電球」のような役割をする

　　PointライトにはRangeという項目が存在していて光の範囲を調節可能です

　※Pointライトは建物の中ではRange項目を大きくしてInsensity(光の強さ)は小さく設定すれば自然な光になりますよ

・Spot

　　名前の通り「スポットライト」のように円錐状に照らします

・Area

　　イメージは壁一面が光っているようなLightです

　　このLightは置いてすぐは、光が反映されませんので

       Window>Rendering>LightSettingの一番下にあるGenerate Lightingを押して

　　ベイクしてください。時間がかかる場合もありますが光が反映されます

AreaLightだと光を当てようと思っているオブジェクトもオブジェクト右上のStaticをLighting Staticにしなければ光が反映されません

Color 

　光の色

Mode 

　ここは私自身、未熟であまり理解できておりません

・Realtime 

　　動的な(動く)Lightを使用するときはRealtimeを使用することで

　　Lightが動くたびに光や影が反映されます

・Baked 

　　Lightに対しての影をあらかじめ焼き付けておく（Bake）

　　Bakeすることで処理が重くならないがその代わり動かしても変化が見られない

　　そのほかにも色々メリットはありそう

・Mixed :

　　RealtimeとBakedの中間？

とりあえず動きが見たい！って方はRealtimeで大丈夫です

Indirect Multiplier 

　　間接光の強度つまり、跳ね返った光の強さです

　　１：跳ね返っても光の強さは変わらず

　　1以下：だんだん暗くなっていく

　　1以上：だんだん強くなっていく

ShadowType 

　　影の有無や形を設定できる

・NoShadow

　　影が落ちない

・HardShadow

　　くっきりとした影が落ちる

・SoftShadow

　　輪郭がぼやけた影が落ちる。よりリアルだがHardShadowより処理が重たい

上がHard  下がSoft

・Strength

　　影の濃さ

・Resolution

　　影のクオリティ

・Bias

　　リファレンス通りだと影が現れなくなる光の距離を設定できると書いてあります。

　    影を落とす処理は、ライト・物体(オブジェクト)・カメラとの位置を計測したりす

　　るためその調節かと思われる

　　実際に触ってみてわかったことは

　　0~2の間で、０の時影が大きくなります。２の時には小さくなり太陽が真下を

　　向いている時には影がなくなります

・Normal Bias

　　Biasの微調整？Biasよりも変化が小さい

・NearPlane

　　レンダリングを止めるライトとの距離間を設定する

　　・・・と書いてありました(笑)

　　値をいじって見ましたが変化は見られませんでした

※手っ取り早く簡単にリアルにしたい場合はDirectionl LightのShadowをつけるだけ！

あと影をつけるときはShadowdistanceの設定を見直した方がいいです

Edit>ProjetSetting>Quality>ShadowDistance

この値はカメラからどのくらいの位置まで影を描画するか設定できます

これを低く設定することで処理を軽くすることができます

５０〜７０くらいでいいとかと、、ちなみに私はデフォルトで１５０になってました笑

Cookie

　　影が落ちる時にテクスチャを設定できる

　　本来とは違う影を落としたい時に使います

Drow Halo

　　チェックを入れるとそのLightにHaloコンポーネントが加えて描画される

　　（実際に追加されるわけではなくLightのRangeに基づいてサイズが変更します）

　　Haloというのはオーラ？粒子？のようなものでLightと一緒に使うと

　　光がぼやけているように演出できます。が、

　　Haloはオブジェクトを貫通するため室内で使うのには向いてないかもしれません

Flare

　　フレアをライトの中心に描画したい時に使う

Render Mode

　　選択中のライトの描画のパフォーマンスを決める

Auto：描画方法が近くのライトの明るさと現在の画質設定に応じてランタイムで決定

Important：ライトが常にピクセル単位のクオリティーで描画される

Not Important:常により高速なライトモード

Culling Mask 

　　特定のオブジェクト一式をライトの影響を受けないように選択的に除外できる

　　これはStaticごとに選択することができます

 コードで変更する

Lightコンポーネントの要素はコードからも変更可能です

    public Light pointlight;

    // Use this for initialization

    void Start () {

        pointlight = GetComponent<Light>();

        pointlight.intensity = 0.0f;

        pointlight.range = 15.0f;

        pointlight.color = Color.white;

    }

簡潔にしたつもりですが長くなっちゃいました...

次からは本編に戻ります！

お楽しみに！

Lighting 設定 勉強会 #5.1

どうも！ラブへです

違うプロジェクトで家具のAsset使うことがあったので

追加しておきました！↓

またAssetについては後日記事を出そうかと思います

せっか前回の記事で夜という概念が生まれたので、真っ暗闇を照らしていくのと、昼間も影などもう少しリアルさが欲しいなと思いましたので、

今回はLightingについて勉強していきます！

Lightingとは

Lightingとは環境光作りのことで光の強さや、反射光、拡散光などのことです。

UnityのLight設定は２つあって、シーン全体の環境光に影響がある

「Lighting設定」

もう一つは個々の「Lightコンポーネト」です。

それぞれ記事を分けて説明していきます！

今回はLighting設定の中の

Environmentを紹介していきます(ほかは今特に必要に感じないので...)

Lighting設定<Environment> 

環境設定

こちらはWindow>Lighting>Settingで開くことができます

・Skybox Material

    Skybox MaterialではSkyboxを変更することができます 

    最初に設定されているSkyboxはデフォルトのものなので変えてみましょう

　（アセットストアで検索するとたくさん出てきます）

 ↓デフォルト

↓アセットストアにあったSkybox

めちゃめちゃ綺麗になった！

アセットには抵抗があったのですが最近便利だなと感じつつあります

・SunSource

太陽の方向を表すオブジェクトを設定できます

ここに設定したライトの方角によって日没表現をしますが

Unityでは一番明るいライトが自動的に太陽と認識されるみたいなので

Direcional Light一つの状態では設定してもしなくても変化はありません

例えば同じ明るさのDirectionl Lightが２つあって、こっちを太陽にしたい！って時に使うのかと...

思いましたが実際に太陽を二つ用意するとどちらも角度を変化させると日没表現がありました..一体なんのためにあるんだ！テストの仕方が悪かったみたいです

(2019/2/24更新)

それぞれ違う角度のDirectional Lightを入れ替えてみたときの結果です↓

ここに設定しているDirectional Lightのみ角度変更が反映されます

・Environment Lighting

    -Source :Skybox/Gradient/Colorの3項目あり,ライトの色が変化します。

          -Skybox：Skyboxの色が反射します。基本的にはこれでいいかと

          -Gradient：３色のグラデーションで表現します

それぞれの間の色は勝手にいい感じにしてくれます

         -Color：グラデーションと違い単色表現です

・Intensity Multiplie

シーンの拡散環境光の明るさ調節できます。

変化した感想を言えばだんだん白とびしていくような感覚です

・Amnient Mode

RealtimeかBakedを選択できます

　　-Realtime：動的なライト変化に対応

　　-Baked:元々影を焼き付けておく、部屋の中などライトもオブジェクトも動かない

　　　　　場面で処理が短縮できます

　　この項目はとても難しいので今はこのくらいしかわかりません

 ・Envaironmental Refletions

　　-Source ：鏡など反射するオブジェクトに映り込むものをEnvironmental Lightの

            Sourceとの違いは色ではなく設定したものをそのまま映しこむことができます

           -Skybox デフォルトのSkyboxが反射します 

           -Custom 自分で設定できます。ためしに↓同じskyboxアセットに入っていたものを使ってみました

           

※Sphereに反射させるためにはSphereのマテリアル設定でReflectionsをonにしておく必要があります

この図↑のように部屋の中でも空が映ってしまうこともありますがこちらの対策はまた後日紹介します

・Compression

圧縮方法を変更します

       -Auto 圧縮形式が適切な場合はリフレクションテクスチャを圧縮する

       -Uncompressed  リフレクションテクスチャを圧縮しないで保存する

       -Compressed  テクスチャを圧縮します

はい、すいませんリファレンス通りです

とりあえずAutoでok

・Bounces

光の反射回数です１なら１回,4なら４回反射します

正直あまり変化が感じられないです...

今回はこんな感じでしょうか、Lightingを変えただけでうにty生活の雰囲気も

ガラッと変わってきたんじゃないでしょうか！

正直次の項目であるRealTimeGIやBakedGIはよくわかりませんが

必要だと感じられるよう頑張ります！

マイクラみたいな１日を表現する＋α ＃５

# 2020/8/16に更新

今回は太陽の動きをシミュレーションしていきます

太陽を表現する

さて、Unitychanを３６０度観察できるようになったということで

次は太陽を動かして１日を表現していきたいと思います

と言ったもののもちろんやっている人はいるわけでして・・

gametukurikata.com

参考にさせていただきました。

Lightについては次回の記事で詳しく書いていきます。

じゃあ今日は終わり〜というのはもったいないので

せっかくなので応用して色々試そうと思います

マイクラみたいにベットに入ったら時間進めたい

マインクラフトというゲームではキャラクターが布団に入ると外が明るくなります

急にパッと明るくなるのではなく、太陽が高速で動いている感じです

とりあえず何もしないで太陽を動かす

コードはこんな感じ

using System.Collections;

using System.Collections.Generic;

using UnityEngine;

public class LigthController : MonoBehaviour {

    private Vector3 sun = new Vector3(360f,330f,0f);

    [SerializeField]

    //1日の時間 単位：second

    private float oneDayTime = 1800;//３０分で1日を表現

    private float rotationPerSecond;

    void Start () {

        transform.localRotation = Quaternion.Euler(sun);

        //０．１/s = １秒間に0.1動く

        rotationPerSecond = 360 / oneDayTime;

    }

    

    void Update () {

        transform.Rotate(Vector3.right*rotationPerSecond*Time.deltaTime);

 

    }

}

 

Updateに↓こちらを追加するだけ！

if(Input.GetKey(KeyCode.H)){

            transform.Rotate(Vector3.right*rotationPerSecond*2);

       }

ベットが用意できなかったためHキーで代用します笑

少しずつ動いている太陽ですが

Hキーを押している間だけ太陽が早く動き、もちろん離せば元のスピードに戻ります

UnityChanが止まっている時だけ時間を進める

太陽を動かした場合、今の所リアルタイムで影が生成されます。その処理が結構重たく、UnityChanの動作がもったりしてしまうので対策していきたい

 

先ほどの太陽を完全に手動だけで動かすというのも一つの対策で

もう一つがUnitychanが止まっている時だけ時間を動かせばいいんじゃない？

と思い、やってみました

 

UnityChanの動きをどうやって判断するの？

→Animator.GetBoolを使用します

tubakihimelovehate.hatenablog.com

 過去の記事でも登場したAnimator

その中でモーションとモーションの

ステートを切り替える判断はパラメーターを使用するということでした

そのパラメーターの状態を取得してみました

前回から追加したコードは赤くしています

public class LigthController : MonoBehaviour {

    private Vector3 sun = new Vector3(360f,330f,0f);

    public GameObject player;

    public Animator animator;

    [SerializeField]

    //1日の時間 単位：second

    private float oneDayTime = 1800;//３０分で1日

    private float rotationPerSecond;

    void Start () {

        transform.localRotation = Quaternion.Euler(sun);

        //０．１/s = １秒間に0.1動く

        rotationPerSecond = 360 / oneDayTime;

        animator = player.GetComponent<Animator>();

    }

    

    void Update () {

        //transform.Rotate(Vector3.right*rotationPerSecond*Time.deltaTime);

        if(!animator.GetBool("walking")){

            transform.Rotate(Vector3.right*rotationPerSecond*Time.deltaTime);

        }

        if(Input.GetKey(KeyCode.H)){

            transform.Rotate(Vector3.right*rotationPerSecond*2);

        }

    }

}

右上のRotation xに注目

これでUnityChanのモーションと太陽の動きが別々にできました！

歩かせる時もそうだったけど

何にでもメリットデメリットってあるんだなぁ・・・

では今日はこの辺で

カメラ追従＋カメラ操作したい #4

#2022/1に更新

三日坊主にならなくてよかった！どうもラブヘイトです
普段は三日坊主なこと多いけど、やっぱりUnityは楽しいから続けられる！

というわけで今回は今まで初期位置で固定だったカメラを追従させたり、
Unitychanの周りをカメラで回ってみたりしていきます

カメラ追従

カメラ追従は何かの記事で「一番手っ取り早いのはキャラクターにカメラをアタッチするだけだよ」、と・・・

早速やってみました

んーーこれはちょっと笑
確かに追従しているけど後ろからずっとつけているみたいで変態チックですね

これじゃあ一生UnityChanの顔が見えないじゃないか・・・
ということで調べたらなんとUnityの学習ページに追従のやり方が書いてありました

unity3d.com

英語でしたが日本語訳があって助かりました
そしてきちんと追従しているし、カメラをアタッチしないほうが後々いろいろ変更ができそう！

でもやっぱりいろんな方向からUnityChanを見たいですよね

UnityChanを中心にカメラを操作する

数学はあまり得意ではないですが、試行錯誤の結果作成することができました
今回は、
中心点（x１,z２）座標から円周上の点（x２,z２）を求める式を使います

yの値は変化しないため今回はx軸とz軸だけ考えていきます

x2 = x1 + r * cosθ
z2 = z1 + r * sinθ

この式をUnityに当てはめた場合

・(x1,z1) = Unitychanの座標x,z
・r　　 =　カメラとプレイヤーの差　つまりoffset
・θが変化量となります

ただ私はここから時間がかかってしまいました。
offsetをそのまま使っていたことと「度」とラジアンの区別がついていなかったことが原因です。

offsetから半径を求めるには
r（２乗）　＝　x（２乗）　＋z（２乗）
r(2乗)を関数 Mathf.Sqrt(r)で半径rがわかります

高校生で習いましたね笑
なんでこんなことに気がつかなかったのだろう・・・

やっと半径が求められたところですが、Updateで毎回計算しているのはパソコンが忙しそうなので
rは自分で決めてしまいました笑

//半径
private float r=5;

次にMathf.Sqrt関数を探しているうちに度をラジアンに直さなければ使えないことに気がつきまして
Mathf.Deg2Radを使用しました
これは変数なので　(Mathf.Deg2Rad*度)　でラジアンの値が求まります

では実際にできたコードがこちらです
引き続きカメラにアタッチするスクリプトに記述していきます

public GameObject player;

private Vector3 offset; 
private Vector3 setPosition;


//半径
private float r=5;
//度
private float deg = 0;
	

// Use this for initialization
void Start () {
	offset = transform.position - player.transform.position;
}
	
// Update is called once per frame
void LateUpdate () {
	if(Input.GetKey(KeyCode.U)){
		deg += 3f;

	}else if(Input.GetKey(KeyCode.T)){
		deg -=3f;

	}

//カメラ座標x計算
setPosition.x = player.transform.position.x +r*  Mathf.Cos(Mathf.Deg2Rad*deg);
//カメラ座標yは計算
setPosition.y = player.transform.position.y + offset.y;
//カメラ座標z計算
setPosition.z = player.transform.position.z +r* Mathf.Sin(Mathf.Deg2Rad*deg);

transform.position = setPosition;
//指定したオブジェクトの方向を向く
transform.LookAt(player.transform);

}
}

気をつけなくてはいけない点
Updateではなく、LateUpdateを使っているというところです
他のUpdate関数が全て終わった後に初めて実行されます
そのため順序がプレイヤー移動→カメラ移動となり、移動したのにカメラが付いていかないということがなくなります

できたのがこちら

回るようになった〜〜！

ですが自分はまだ納得できていません
TPS視点はカメラの中央ではなく若干下にキャラクターが写っている方が操作しやすいです(カメラが近づけばこの気持ちがわかるはずです)

Lookat関数では指定したオブジェクトの中心を向くため必ずキャラクターが中心になってしまいます。

そこでUnitychanオブジェクトの子に空のGameObjectを作成し、UnityChanの頭の上くらいに置いてこのオブジェクトにLookatするように設定しました

いい感じです♪

盛りだくさんの記事になってしまいましたがなんとか追従＋キャラクターを中心としたカメラ移動ができるようになりました

今回はてな表記で書いてみましたが、自分的にはコードに色が付いてないのは見づらいので見たまま編集に戻します笑

ではまた

Unityちゃんを実際に歩かせてみる 後編 ＃３

今回は実際にUnityちゃんを歩かせるコードやアニメーションの設定について書いていこうと思います

#2022/1に更新

どうも、やっとブログにGif画像を載せることができたラブヘイトです

前回の検証によってUnitychanを歩かせる方法は

RigidBody+Collider＋transform移動方法になりました！

アニメーションをつける部分は以下のブログを参考にさせていただきました。

【Unity講座】3D人型モデルの動かし方をユニティちゃんで学ぶ【Animator】 – Unity初心者向け講座<C#>

Unityをしていて初めてキャラクターが動くという感動をあたえてくれる、そんな記事です。 

＜動作手順簡まとめ＞

１,Animator Controllerを作成、

　動かしたいキャラクターにアタッチ

ごめんなさい操作ミスが目立ちますね・・・

２,Animatorで空のステートを作成

　一つ一つにアニメーションをつけていく

↓下の図のオレンジやグレーのヤツがステートと呼ばれていて、モーションや遷移方法などの設定することができます（この先様々な記事で使用しますので重要です）

ステートを選択した時のInspectorです↓

Motionの場所にUnityChanアセットに付属されている、もしくはAnimatorで作成したモーションをアタッチしましょう

※今回はUnityChanAssetに含まれているモーションを使います

　いつか自分自身で作ってみたい

３,パラメーターを作成・ステート間の矢印に

　 パラメーターを設定

パラメーターとはいわゆるフラグのようなもので

ステートから他のステートに遷移するために設定します+ボタンから作成可能です

下の図だとcoldからwalkステートに矢印が伸びています

その矢印のInstector>Conditionsにパラメーターを設定できます

つまりwalkingがtrueの時に「cold」から「walk」ステートのアニメーションに遷移します

ではwalkingをどのようにtrueやfalseに変更するのかというと

次になります

４,スクリプトを記述

新しいスクリプトファイルを作成して以下のようにします。

最初に紹介させていただいた記事ではジャンプのモーションも入っていますが、

僕はいらないかなぁ、と思いつけませんでした笑

public class UnityChanControl : MonoBehaviour {

 

    private Animator animator;

void Start()

    {

        animator = GetComponent<Animator>();

    }

void FixedUpdate()

{

float h = Input.GetAxis("Horizontal");

float v = Input.GetAxis("Vertical");

 

//上矢印キーが押されている間walkingをtrueにする

        if(v > 0){

                    animator.SetBool("walking",true);

                }else if(v < 0){

                    animator.SetBool("walking",true);

                }else{

                    animator.SetBool("walking",false);

                }

    }

}

 これをUnitychanにアタッチします。

ただ、これで実行して矢印キーを押してもその場で歩くモーションを取るだけで実際には移動しません

次のコードを追加しましょう

public class UnityChanControl : MonoBehaviour {

　　//速さ

   public float speed = 3f;

　　//方向転換スピード

　　public float rotateSpeed = 200f;

 

   private Animator animator;

void Start()

    {

        animator = GetComponent<Animator>();

    }

void FixedUpdate()

{

　float h = Input.GetAxis("Horizontal");

　float v = Input.GetAxis("Vertical");

        

　Vector3 velocity = new Vector3(0, 0, v);

  // キャラクターのローカル空間での方向に変換

  velocity = transform.TransformDirection(velocity);

  // transformで移動

  transform.localPosition += velocity * speed * Time.fixedDeltaTime;

  // キャラクターの回転

  transform.Rotate(0, h * rotateSpeed * Time.fixedDeltaTime, 0);

        if(v > 0){

                    animator.SetBool("walking",true);

                }else if(v < 0){

                    animator.SetBool("walking",true);

                }else{

                    animator.SetBool("walking",false);

                }

    }

}

UnityChanにやっと命を吹き込むことができました！

家の中をヌルヌル動かすことができて楽しい！ 

まとめ

自分が思っていたよりもアニメーション設定は簡単で、スクリプトでの細かい制御もできてとても満足のいく結果です。

これを基本として他のモーションもつけることが可能なので、UnityChanパッケージに用意されているモーションをいろいろ試して動かしてみるのもいいですね♪

では次の記事でお会いしましょう