Raspberlyのブログ

Raspberlyのブログ

Unityネタをメインとした技術系ブログです。にゃんこ大戦争や日常なども。そろそろブログタイトル決めたい

トップ > 勉強会/イベントレポ > 勉強会レポ : Unity Designer's Cafe #2

勉強会レポ : Unity Designer's Cafe #2

勉強会/イベントレポ 勉強会/イベント-その他Unity関係

勉強会のレポート(メモ)です。
参加したのはこちら、「Unity Designer's Cafe #2」

unity-designers-cafe.connpass.com

ハッシュタグ : #UniDesCafe 

 

f:id:Raspberly:20190529002827j:plain

 

前回 #1はこちら

raspberly.hateblo.jp

 

 

 

 

タイムスケジュール

  内容 担当
19:00 受付開始 -
19:30 イントロダクション 青木とと@lycoris102
19:40 プログラマに相談したらデザイナーの仕事が楽になった話 @LandyNagata さん
19:50 シェーダーによる炎と水の作り方紹介 @GaryuTown さん
20:00 プログラマーとデザイナーの効率化/設計の話 ＠dsgarage さん
20:10 休憩 -
20:20 背景を作る際のUnityの便利機能 @hatalakk2さん
20:30 お手軽!? PSD Importerで2D IK Animation @TIFONSTUDIO さん
20:40 UIデザイナーさんもShader Graphを使ってみよう @ivoryfunc さん
20:55 バッファ -
21:05 クロージング -
21:10 懇親会 -
22:00 片付け -

 

 

イントロダクション

これはどういうイベントなのか
Unity Designer's CafeはUnityをさわっているorこれからさわりたいデザイナーさん向けの勉強会です。
気軽に触れる空間作りを目指しています。
デザイナーといってもいろいろあるので、あまり関心がない話題もあるかもしれませんがきっかけやとっかかりにしていただければ。

 

スポンサー様

ワンダープラネット(山本さん)

楽しいねをミッションとしています。
WANTEDLYをフォローしてください。

www.wantedly.com


講演内容はUnity Learning Materialsに乗ります。

 

 

 

 

 

 


#1 プログラマに相談したらデザイナーの仕事が楽になった話

docs.google.com

お刺身たんぽぽ

お刺身たんぽぽをご存知ですか？
つまらない単調な作業のことを指しますが、
この「お刺身たんぽぽ」からデザイナーを救った「プログラマが作った機能」を5つ紹介します

5位. ImportSettingの自動設定

サムネイルとか、毎回何十個も設定するわけですがこれを自動設定する機能

4位　ディザ加工

Unityでそのままやるとグラデーションのところが美しくない
ここをうまい具合にやってもらう機能

3位　スプライトを指定すると、使ってるプレハブをリストアップする機能

ローカライズの際に活躍する神ツール

2位　オブジェクト透過キャプチャー機能

バナー素材などに使いました。
今まではスクショして、フォトショで修正したりしていたが非常に手間だった
バナーを作る工数がぐっと縮まりました

1位　アセットバンドルとマスターが絡むオブジェクトのビューアー

アセットバンドルのデータとマスターにあるデータを組み合わせたオブジェクトのビューアー
今までは非常に手間だった

 

 

こうしてデザイナーはお刺身タンポポから解放された

 

 

 

デザイナーさんは、「この作業お刺身タンポポでは？」と疑うことから始めましょう
エンジニアから見ると自動化できることもあります

 

 

 

 

 

 

#2 シェーダーによる炎と水の作り方紹介

docs.google.com

今回はShader Forgeで作成しています

炎シェーダー

フォトショップでよく使われる雲模様とパラメータで作られます

炎の概要

１炎は下から上にいく

UVスクロールで動きを作る

２下の方が丸い

マスクで簡単できるが、UVマップのUV値と指定座標でグラデーションを作る
そこからコンストラクとを調整する

３上に行くほどちぎれる

上の炎を隠すマスクを作る

 

1~3を調整して火を作ります
ここにカラーをつけるだけ

水シェーダー

シェーダーでモデルをクリッピングするシェーダー

波の動きを作る

・sin関数に時間を使う
・コンストラクトをつけてはっきりさせる

外部からの動きで波を揺らすのはシェーダーだけだと困難
ここはスクリプトでやりました

 

 

 

 

 

#3 プログラマーとデザイナーの効率化/設計の話

今回はUIに特化したお話になります

デザインの制限

UIデザイナーと作業することの課題はいろいろある
デザインの再現性、ブラッシュアップのコストダウン、ドメイン層との疎結合・・・

一番なのは、フォトショで作成したものをUnityにもってきて、そのまま差し替えなどを行うのが理想

Psd 2Unity uGUI Pro

PSDファイルをUnityに持っていくアセット
すんごい便利
詳しくはQittaを見てください

qiita.com

 

ブラッシュアップ

PSD上でやりましょう
ただしメタ情報が変わってしまうので画像ファイルだけ更新しましょう
アニメーションやエフェクトなどは別

MV(R)P

設計方式
ViewControllerを設置することで更新が必要なUIなど設計が楽になります

ViewAdapter

最近のトレンド
これを入れることでドメイン層と疎結合化できます
なきゃなくていい

 



 

 

 

#4 背景を作る際のUnityの便利機能

スライドと動画を用意しましたのでこちらをどうぞ

1.ウィンドウのロック

鍵のマークでロックしておきましょう

2. Tabから目的のWindowを増やす

マテリアルとテクスチャーを同時に表示するなど

3. Find Refarence is Scene

シーンの中から使っているか使っていないかチェックできる

4. プロファイラー

メモリを見て、テクスチャの展開時などをチェックしています

 

ここから動画タイム

 

Houdiniについて

パラメータをいじるだけで背景をいじることができます

 

 

 

 

 

 

#5 お手軽!? PSD Importerで2D IK Animation

2D IK Animation

簡単にいうとIKの2D版
UnityBlogさんやテラシュールブログさんを見てください

tsubakit1.hateblo.jp

使う際の注意点

実際はPSBファイルを使います(PSDのでっかい版)
レイヤー単位でプレハブ生成してくれる便利な機能がありますが、
名前が被らないようにしましょう、同じものがあるとパーツが吹っ飛んだりします。
PSDは名前順に出力されるので、名前の先頭に数字をつけるのをおすすめします。

設定方法

アニメーションにしろ、タイムラインにしろIKしてくれます。
ボーンと他オブジェクト(エフェクトなど)は簡単に連動できます。
マテリアルの方も自由に変えることができます。


便利シェーダーの紹介

・Sprite Glow

github.com

 

他コガネブログさんの方で多く紹介しています

baba-s.hatenablog.com

おすすめ有料アセット

・Shader Weaver

www.asset-sale.net


・Shadero Sprite

www.asset-sale.net

両方とも2Dに特化したシェーダー作成ツールです。

まとめ

かなりお手軽に2D IKができます
ぜひ試してください

 

 

 

 

 

 


#6 UIデザイナーさんもShader Graphを使ってみよう

電光掲示板のような流れるシェーダーをパッと作る再現をしていきます。

工程

別の作り方でも以下の工程のようになると思われます。
・文字をつくる
・モザイクをかけて2階調化
・アニメーションをさせて
・マスクをかぶせる

これをシェーダーを使わないのであれば
フォトショップで文字やモザイクをかけ、
アニメーションはスクリプトで設定、マスク用のグラフィックをかぶせる。
といった手段を作ります。

シェーダーの場合
文字の用意以外はShader Graphでできます


ここからデモ
動画が公開されたらそちらを見てください

 

 

Shader Graphで手軽に作れるので、ぜひみなさんも触ってみてください。

 

 

 

 

懇親会

f:id:Raspberly:20190529002927j:plain

前回はサンドイッチでしたが、今回は可愛らしいピザ。
BGMもカフェっぽい曲でした。

 

 

タイムライン

 

 

 

感想

デザイナーさん向けの勉強会の特徴としてデザイナーの参加者が多いです(当たり前)
勉強会でメモを取ってる方はエンジニア向けデザイナー向け問わずいらっしゃいますが、
デザイナーの方はタブレットにペンでメモしている方がちらほらいらっしゃいました。
絵で視覚的に内容をメモできるのは結構よさそう。

 

#5 お手軽!? PSD Importerで2D IK Animationで紹介されていたSprite Glowですが、類似した「MK Glow Free」というアセットの紹介記事を過去に投稿しているので気になる方はどうぞ。

raspberly.hateblo.jp

 

ちなみにですが、インスペクターのロックの件。
Unity始めたての方が意図せずにロックしてしまい、戻し方がわからないという事態がありますので注意しましょう。

 

 

他の方の感想ブログ

ryu-rand.hatenablog.com

 

 

 間違っている箇所、消してほしいツイートがありましたらコメントにお願いします。