【Unity】GREE Creators' Meetup 第2回「オススメしたい Unity ４大トピック ~Shader / Animation / GUI / Effect~」レポート

# GREE Creators' Meetup 第2回

http://connpass.com/event/12395/

# はじめに

今回はUnity 4.6がメインですが
一部最新のUnity 5のことにも触れています

# アジェンダ

1. Shuriken
2. GUI
3. Mecanim
4. Shader Forge
5. Q&A

# 1. Shuriken

## 本日持ち帰っていただきたいこと

- Shurikenとはなんなのか？
- パーティクルとはなんなのか？
- 少しだけのTips

## Shurikenって何？

- Unityに最初から入っているパーティクルエフェクトです
- とても簡単に使用できます


## どんなことができるの？

- たくさんの粒子を大量発生できる

## 5種類の粒子が使える

- ビルボード
	- 常にカメラを向く
- ストレッチビルボード
	- 進行方向に伸びる&カメラを向く
- ホライゾンタルビルボード
	- 常に平面が真上を向く
	- キャラクターの位置を表すサークルなどに使用できる
- バーティカルビルボード
	- 常に画面を向く
	- 垂直に立っている
	- 草木などに使用できる
- メッシュ
	- 好きなポリゴンが使える

## メッシュが使えるということは？

- 低パフォーマンスの端末でもUVスクロールを工夫すれば多彩な表現ができる？

## メッシュでできないもの

- UVスクロール
- テクスチャパターンアニメーション
- メッシュパターンアニメーション
- Z軸方向以外の回転
- 不均等なスケール

## やれることをやろう！

- 余計な機能がない分、迷いなく作っていくことができるとも言える
- 技術的に可能なことをやる

## 少しだけのTips

- パーティクルの動きの固定化
- Shurikenが増え続ける問題

### パーティクルの動きの固定化

- デフォルトだと同じエフェクトを再生しても毎回違う方向にランダムに動いてしまう
	- ときどきあまりよろしくない見た目になる
- エフェクトのGameObjectを選択してインスペクタのタブをクリックしてDebugモードを選択
	- 切り替わった表示の中からRandom Seedを0以外の値にする
		- 固定化が成功します！
- 例えば爆発エフェクトの煙を3枚など少数テクスチャで表現したい時などに役立ちます

### Shurikenのオブジェクトが増え続ける問題

- Shurikenのオブジェクトは使用済みになっても消滅しません
	- あまり増え続けるとメモリ圧迫になってしまいます
- スクリプトで削除してしまいましょう
	- パーティクルの残存数が0になったらDestroy
	- 任意の時間を指定してその時間になったらDestroy

## 最後に

- Shurikenはほんの少しのスクリプトの追加で可能性がすぐに広がるツールです
- 個人の方はスクリプトを恐れずに
- チームのプログラマはShurikenエフェクトに手を差し伸べてください

# 2. GUI

## はじめに

今回はNGUIに焦点を当てつつuGUIにも共通するお話をします

## GUI作成時の主なワークフロー

1. PhotoshopでUIデザイン作成
2. UIパーツを画像に切り出す
3. テクスチャアトラスとして1枚の画像にまとめる
4. Unityのシーン上にGUIとして配置する
5. テキスト効果を設定する
6. アニメーションを付ける
7. UIパーツをPrefabにして機能実装

- 2から4を自動化しよう！


## インポートの自動化

- PSD2NGUI  
https://www.assetstore.unity3d.com/en/#!/content/11220
- ちなみにPSD2uGUIもあります

## PSD2NGUIについて

- PSDファイル内のレイヤー名をPSD2NGUIに合わせて命名
	- hogehoge@Buttonなど
- 画像切り出し→アトラス化→NGUIとして配置までを一括で実行
- 2～3時間の作業が一瞬で終わります

## テキスト効果を拡張！

1. グラデーション
2. シャドウ
3. アウトライン

- グラデーションやシャドウは無難に使える
- アウトラインは太くすると破綻しやすい


## NGUIのアウトラインの仕組み

- デフォルトでは斜め4方向にズラしてアウトラインを生成している（シャドウ×4）
- 十字に4方向追加することで破綻しにくくなります（シャドウ×8）
- さらにきれいにしたい場合は円周状に配置します（シャドウ×16）

- 良い点
	- 太く設定できるので視認性が向上
	- 透明度を調整すると光彩っぽい表現がも可能
- 悪い点
	- キレイにするほどシャドウの数が増えるので描画の負荷が増える

## アニメーション制作の効率化

1. NGUIのTweenコンポーネントで作る
2. UnityのAnimationエディタで作る
3. コンポーネントで作る（Tweenライブラリ）

## Unityのアニメーションエディタ

- タイムライン上にキーフレームを打ってイージングを設定したりする
- 良い点
	- アニメーションを確認しながら編集できる
- 悪い点
	- ヒエラルキーの階層構造やゲームオブジェクトの名前が変わると作り直しになる
	- 1つのアニメーションを共通で管理する用途には向かない
- ユニークなアニメーション制作に

## コンポーネント（Tweenライブラリ）

- 良い点
	- コンポーネントを共通化しておけば一括で更新できる
	- プロパティで柔軟に対応できる
- 悪い点
	- プログラミングの知識が必要
	- アニメーションを確認しながら編集することは難しい
- 汎用性の高いアニメーションの制作に

## 効率化

- ユニークなアニメーションは作りやすさ重視
- 汎用アニメーションは管理のしやすさを重視
- 自作コンポーネントでの制作を採用
- アニメーションを変更したくなったときに一瞬で変更できる

## まとめ

1. PhotoshopでUIデザイン作成
2. インポートツールでUnityへ（作業時間を短縮）
3. テキスト効果を設定する（拡張しよう）
4. アニメーションを制作する（効率化しよう）
5. UIパーツをPrefabにして、機能実装へ

# 3. Mecanim

## Mecanimとは

- Trigger,bool,int,floatなどの値でモーションのステータスをコントロールできます

## Mecanim + シェアモーション

- MecanimをHumanoidと組み合わせることによって  
キャラクタのモーションシェアができるようになる

## MecanimのAvatar Mask

- 例えば上半身のみ違うモーションを使うといったことが可能です

## Mecanim + Android

- Unity 4で実装したMecanim + HumanoidはAndroid上だと1.5倍から2倍重いので注意

## Mecanim + オブジェクトモーション

- オブジェクトのステータスでモーションを再生

## Mecanim + エフェクト

- エフェクトのStart->Loop->Endのフローをステータスで制御できる
- トリガーなどでエフェクトの状態をコントロールできます

## Mcanim + Unity 5

- さらに面白くなりました！
- アニメーションのパラメータだけではなく、  
ステータスでもっとコントロールしやすくなりました
	- OnStateEnter
	- OnStateUpdate
	- OnStateExit
	- OnStateMove
	- OnStateIK
	- etc.
- スクリプトで乱数を使うことによってランダムにモーションを呼び出すことも可能

# Shader Forge

- https://www.assetstore.unity3d.com/jp/#!/content/14147
- Shaderをノードベースのエディタで作成できるツールです
- MataのHyperShadeのようなもの

# Q&A

- Shurikenに関して
	- Shurikenで使用する画像はアトラス化している？
		- 基本的にはドローコールを減らすために1枚にアトラス化している
	- 2048x2048のような大きなテクスチャになることもある？
		- ある
	- 大きなテクスチャを使用することによる描画の影響はある？
		- 今のところはクリティカルな問題には遭遇していない
	- 拡張する上でおすすめの方法はある？
		- Shuriken自体はスクリプトが公開されておらず手が入れられないが  
Shader Forgeを使うなどして根本的な表現力を上げることができる

- GUIに関して
	- PSD2NGUIで複数の画面に渡って同じ素材を使い回したい場合はどういう形で管理すれば良い？
		- 共通で使う画像は共通のテクスチャアトラスを作っている
		- 共通で使う用のPSDを読み込んでいる
	- 例えばリザルト画面などでいくつかのアニメーションを連続していきたい、  
途中で分岐したいといった場合にどうしているか？
		- 弊社の場合は最初に一連のアニメーションを作って  
エンジニアさんに相談してアニメーションの分割を行っている
	- 画像圧縮はやっているか？
		- テクスチャの設定をインポート時にRGBA16bitに設定している