トマシープが学ぶ

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

ゲームUIの本をやる【UnityのuGUI】

最近Inputばっかりですが、まあそういう時期もある。

UnityゲームUI実践ガイド 開発者が知っておきたいGUI構築の新スタンダード

この本をやります。

2015年と少し古いですが、全然問題ありませんでした!

めちゃくちゃ役に立ちました!uGUIのデフォルトの機能で知らない機能いっぱいでした

Canvas

UI Scale Modeを変更できる

f:id:bibinbaleo:20180309171445p:plain

スライス

Sprite Editorを押すと分割(スライス)ができる

docs.unity3d.com

f:id:bibinbaleo:20180309220346p:plain

Set Native Sizeで元の画像の大きさになる。

f:id:bibinbaleo:20180309220349p:plain

Mask

Maskコンポーネントをつけたものの下に置くとマスクされる

f:id:bibinbaleo:20180309224833p:plain

文字でもマスクできる。

f:id:bibinbaleo:20180313094804p:plain

スクロール

MaskをつけたオブジェクトにScroll Rectをつけて、Contentに下のカエルをセットするとスクロールできる。

f:id:bibinbaleo:20180310110253p:plain

ついでにScrollbarUIを作って、

f:id:bibinbaleo:20180310110255p:plain

Scroll Rectにセットすると

f:id:bibinbaleo:20180310110802p:plain

バーができた!簡単!!Unityすごい

f:id:bibinbaleo:20180310110258p:plain

入力フィールド

Input Fieldをつけると入力できる!知らなかった!!

f:id:bibinbaleo:20180309225625p:plainf:id:bibinbaleo:20180309225627p:plain

入力するときはリッチテキストは使わない

Unity - マニュアル: リッチテキスト

Content Typeを選べる。

f:id:bibinbaleo:20180313102536p:plain

PasswordとかPinだと****になる

f:id:bibinbaleo:20180313102712p:plain

Toggle

Toggle Groupをからのオブジェクトにつけて、トグルに設置する。

f:id:bibinbaleo:20180310115155p:plain

f:id:bibinbaleo:20180310115323p:plain

f:id:bibinbaleo:20180310115255p:plain

f:id:bibinbaleo:20180310115157p:plain

アンカー

optionキーを押しながらアンカーを設定すると位置が変わる

f:id:bibinbaleo:20180310211629p:plain

文字効果

テキストにアウトラインやドロップシャドウをつけられる!!!

f:id:bibinbaleo:20180313094827p:plain

f:id:bibinbaleo:20180313094802p:plain

UIの遷移

 

ボタンなどのUIについているTransition。AnimationにしてAutomativボタンを押すと

f:id:bibinbaleo:20180313095519p:plain

自動でAnimatorで遷移が作られる。

f:id:bibinbaleo:20180313095521p:plain

またnavigationをVisualizeボタンを押すと、このように左右キーなどでボタン選択する際の遷移が表示される。

f:id:bibinbaleo:20180313100049p:plain

Layout Group

f:id:bibinbaleo:20180313170312p:plain

親オブジェクトにつけると、こオブジェクトが整列する

f:id:bibinbaleo:20180313170315p:plain

Spacingをつけたら隙間が空く

f:id:bibinbaleo:20180313170316p:plain

こんな機能あったんだ!UnityのUI構成もやりやすそう

f:id:bibinbaleo:20180313170318p:plain

Raycast

Raycastを無視してほしいUIにはCanvasGroupをつけて、Blocks~のチェックを外す

f:id:bibinbaleo:20180316203127p:plain

Physics Raycasterをカメラにつけると3DオブジェクトにRaycastを飛ばせる

f:id:bibinbaleo:20180316203659p:plain

こちらの通りにやったら、クリックしたらキューブが消えるという動作をノンプログラミングでできました。

qiita.com

消したいものにこんな感じでEventTriggerを設定したら消えました。

f:id:bibinbaleo:20180316205657p:plain

docs.unity3d.com

Content Size Fitter

文字の長さに合わせてrectの大きさを変える

f:id:bibinbaleo:20180317112218p:plain

docs.unity3d.com


スクリプト

[SerializeField]

private Image Player;

qiita.com

 

Dynamic boolとStatic Parametersに分かれてる

f:id:bibinbaleo:20180311120812p:plain

 

GameManager.csってするとアイコンが変わる?

f:id:bibinbaleo:20180311121043p:plain

qiita.com

 

enum関数?はswitch使う時に役立つ?

hiyotama.hatenablog.com

インターフェイス

ドラッグとかを実装する時スクリプトのmonobehaviorの後にIBeginDragHandler, IDragHandler, IEndDragHandler,ICanvasRaycastFilterをつける

qiita.com

itween

揺れも表現できる

nopitech.com

        float degree = isCritical? 0.06f : 0.02f;
        iTween.ShakePosition(gameObject, iTween.Hash(
            "x", degree,
            "y", degree,
            "islocal", true, 
            "time", 0.5f
        ));

Animation curve

Animation curveはインスペクタで簡単に使える

f:id:bibinbaleo:20180317115358p:plain

nn-hokuson.hatenablog.com

感想

古いからパラパラ見るぐらいかな〜って思ってたら、めちゃくちゃ役に立って全部きっちり読みきりました。

サンプルプロジェクトもダウンロードできるので、再現しながら3つの小プロジェクトと1つの大プロジェクトを通して理解が深められます。

f:id:bibinbaleo:20180313230554p:plain

大プロジェクト. UIがめちゃくちゃかっこいい

小プロジェクトと大プロジェクトの章の間にリファレンスページ?みたいな、uGUI関連の機能を全部説明した章があるのですが、すごくよくまとまってました。

あとuGUIって本当に全く変更がないんですね。

この本のプロジェクトはunity4.6〜5ぐらいの時に作られたようですが、uniyu2017.3でも全く問題なく動いたし、その他記述も全部今のバージョンと同じでした。