トマシープが学ぶ

Unity/VR/AR/デザイン好きのミーハー 記事内容は自分用のメモです

Unityデザイナーズバイブルを読んだメモ①【エディタ/uGUI】

こちらの本をやっていく

www.borndigital.co.jp

Unity2019.4.5f1使用

エディタ

PackageManager

アセットストアで購入済みのアセットが表示できる!

f:id:bibinbaleo:20200814105904p:plain

githubからもpackageを読み込めるらしいが、jsonファイルが必要だって。よくわからない

f:id:bibinbaleo:20200814104640p:plain

light11.hatenadiary.com

オブジェクト操作

Ctrlを押しながら操作するとスナップする

(これUnityの本とか読むたびに出てくるけど、なぜか全然身に付かない・・・)

UI操作(RectTransform)

 Shiftをおしながらドラッグで大きさが一定になるのは知っていたが、ドラッグしながらAltだと点対称な動きをする?

Shiftだけのときは選んだ点の反対側が固定されて大きさが変わるが、Shift+Altだと中心を固定して大きさが変わる。

おまけ)UIScaling

Preference>UIScalingでエディタの文字サイズが変わる!!!

知らなかった~

f:id:bibinbaleo:20200814105537p:plain

再起動したら適用される

f:id:bibinbaleo:20200814105457p:plainf:id:bibinbaleo:20200814105541p:plain

目悪いので見やすくなった。あと遠隔でUnity画面を画面共有するときとかも、こうしてあると見やすい。

レイアウト

ずっとデフォルトのレイアウトで使っているけど、みんな違うレイアウトで操作している気がする。

f:id:bibinbaleo:20200814111548p:plain

VR開発的にはなにがいいんだろう

SceneとGameビューは同時に見れるとうれしい。2by3は見える。でもコンソールがない

f:id:bibinbaleo:20200814111543p:plain

2by3からdefaultに戻したら2by3消えたんだが・・・

再起動したら戻った

uGUI

9スライス

ボタン素材を作るときは、26*26の小さいものを用意して、9スライスする

f:id:bibinbaleo:20200814112358p:plain

f:id:bibinbaleo:20200814112401p:plain

 以前角丸をきれいにしたくていろいろ試したときに使った

bibinbaleo.hatenablog.com

FillCenter

SliceしたspriteをセットしたImageコンポーネントの、Fill Centerのチェック外したら中抜きになるとか知らなかった!!

f:id:bibinbaleo:20200814143149p:plain

f:id:bibinbaleo:20200814143146p:plain

画像サイズ

2のべき乗のピクセル数にするとメモリ負荷を抑えられる.

2,4,8,16,32,64,128,256,512,1024 ,2048,4096・・・

2のべき乗じゃない場合NPOTって表示される

f:id:bibinbaleo:20200814130018p:plain

縦と横、両方とも2のべき乗じゃないと効果ないのかな?

f:id:bibinbaleo:20200814141656p:plain

f:id:bibinbaleo:20200814141826p:plain

light11.hatenadiary.com

こちらの記事とても勉強になる

note.com

AspectRatioFitter

これをつけると、比率を保ったままWidthかHeightどちらかだけを操作して大きさを変えられる!

f:id:bibinbaleo:20200814143409p:plain

f:id:bibinbaleo:20200814143405p:plain

知らなかったー

Outline2重付け

TextにつけれるOutlineがきれいではないという理由で、2重につけていた!

f:id:bibinbaleo:20200814144055p:plain

2つめは1つ目のアウトラインに対してもアウトラインかかっているのかな?

f:id:bibinbaleo:20200814144204p:plain

 

このスクリプトだときれいらしい

https://gist.github.com/FreelyApps/e9f3f4a4d89882bcb50c#file-circleoutline-cs

f:id:bibinbaleo:20200814144649p:plain

おおー。NEffectNumberを大きくするといい感じに角っこを補完してくれる

f:id:bibinbaleo:20200814144652p:plain

もと

f:id:bibinbaleo:20200814144807p:plain

グラデーション

このアセット入れるとグラデーションかけれる

github.com

f:id:bibinbaleo:20200814150020p:plain

ボタンアニメーション

AnimationにしてAuto~で生成

f:id:bibinbaleo:20200814151134p:plain

空の?アニメーションファイルが生成される

f:id:bibinbaleo:20200814151317p:plain

Animationウィンドウを開いて、Buttonを選択した状態でPressed

f:id:bibinbaleo:20200814151315p:plain

そこでアニメーションを付けると、押したときにアニメーションがつく

(本にPressedを選ぶって書いてなかった)

アニメーションでポップアップ

ポップアップの大きさを変化させることで、表示非表示をしている

f:id:bibinbaleo:20200814162233g:plain

なんかアニメーション間違っている気がするけど、どこが違うかよくわからない・・・

引っ掛かりポイントはボタンにAnimatorのTriggerをセットするときSetTrigger(string)を選ぶこと。最初intを選んでて「文字が入らなーい」って困ってた

f:id:bibinbaleo:20200814162244p:plain

Loadingスライダー

f:id:bibinbaleo:20200814163415p:plain

昔こういうスライダーを私も作ったけど、値が0のときも少し↑みたいに少し残るのどうしたらいいんだろう。

スクロール

ここでやった。

bibinbaleo.hatenablog.com

最後に

 

乱丁あったしUnity完全初心者には難しそう。中級編だった

でもいろいろ学びがあった!わたしもまだまだだ~

Unity2019.4を深く触ったの初めてだけどかなりUI変わってるんだな~