Raspberlyのブログ

Raspberlyのブログ

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

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

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

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

 

 

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

unity-designers-cafe.connpass.comハッシュタグ : #UniDesCafe 

 

f:id:Raspberly:20190205003145j:plain

 

今回はカフェということでととさんもカフェの店員風にドレスアップ。
BGMもカフェっぽいものになっています。

f:id:Raspberly:20190205003209j:plain

 

 

各スライドは後日Twitterなどで公開されるようです。

 

 

 

タイムスケジュール

  内容 担当
19:00 受付開始 -
19:30 イントロダクション 青木とと@lycoris102
19:40 初Unityはガワ替えから始めてみよう ワンダープラネット 永田さん
19:50 新2DAnimationツール触ってみた ワンダープラネット 永田さん
20:00 UIデザイナーのUnity事情 〜ワークフロー編〜 ワンダープラネット 山口さん
20:10 休憩 -
20:20 デザイナーが知っておくと便利なuGUIの機能と注意点など Hiromasa Suzuki さん
20:30 UIと2D/3D座標と私
～2D/3Dを混在させたUIを作ったら、とてもめんどくさかった話～		 hamazaki さん
20:40 UnityでリアルタイムMVを作ってみる Ganon さん
20:50 Constraint機能を2Dアニメーションで活用してみる やまたく さん
21:00 クロージング -
21:10 懇親会 -
22:00 片付け -

 

 

 

 

イントロダクション

Unity Designer's Cafeは Unityをさわっている。これからさわりたいデザイナー向けの勉強会です。


スポンサー様

ひらきさん(ワンダープラネット)

会場提供と懇親会費用はワンダープラネットさんです。
Wantedlyをフォローしてください。

www.wantedly.com弊社は楽しいねと言い合えるようなサービス・アプリを作ることをミッションとしています。
弊社のデザイナーもUnityもさわっています。
現在デザイナー、エンジニア、プランナーを募集しております。

 

 

 

 

1. 初Unityはガワ替えから始めてみよう

docs.google.com


Unityをはじめてさわる時、何からはじめていいかわからない時は、
ガワ替えから始めてみましょう。

 

勝ったッ！第1部　完！

 

なぜおすすめか

初心者には課題がある

１. モチベが上がらない

Unityとは、インストール、画面の見方などなど

 

２. わからないことが多くてパンクする

Zってなんなの？座標の単位は？
マテリアル？プレハブ？なにそれ

実は現場ではそこまで詳しくなくてもやっていけます。
まずはUnityと知り合いになることから始めましょう。



事例紹介

ガワ替えをするという研修をしました。

どうだったか

簡単に結果が見えるのでモチベアップ。
やりたいことがわいてきて勉強しだす。

結果、Unityと知り合いになれる。


教える側のメリット

その人の得意不得意が見えてきます。

 

ガワ替えにぴったりのプロジェクトはこちらのアカウントで紹介します。

ランディ (@LandyNagata) | Twitter

 

 

 

 

 

2. 新2DAnimationツール触ってみた

docs.google.com


新しい2DAnimationツールを触った話をします。

2Dのボーンアニメーションを作るのにおすすめです。
ぜひ触ってみてください。

 

勝ったッ！第2部　完！


じゃあlive2dみたいなのはできるのか？

弊社のデザイナーにためしてもらいましたが、正直きつい。

なぜかきついか
フリーフォーム変形(FFD)がないため、立体的に見せる機能がない。
SpineもFFDができないが頂点アニメーションができるため、それっぽいことはできている。

 

でもなんとかして頂点アニメーションしたい

f:id:Raspberly:20190205003606j:plain

どうやっているか

ポリゴン分割をし、9つのボーンを連携してFFDっぽいことをしています。


Live2dのrigっぽいこともできないか試しました。
できましたけど。けっこうしんどい。
ここまで頑張るなら他のツールを使った方がいいかと・・・


ただ2danimationのメリットとしてボーンが見れます。
剣を持たせたり、アニメーションの動きと連動させたりできます。


まとめ

メリット

・無料
・機能拡張もできる
・shurikenと相性がいい

デメリット

・FFDができない
・他の便利な機能はあまりない

 

アクションゲームのキャラクターなどに向いていると思います

 

 

 

 

 

3. UIデザイナーのUnity事情 〜ワークフロー編〜

UIデザイナーのUnity事情 〜ワークフロー心得編〜 - Speaker Deck


技術的なtipsではなく、心得の方の話をします。

そもそもUIデザイナーってどのくらいunityをいじるのか

積極的に触っていますし、いじっていったほうがいいと思います。
なぜならエンジニア(クライアント)との連携が重要になるからです。

デザイナーは画面デザインだけが役割ではない。
積極的に絡んでいくことが大事。


ゲームのUIデザインとは

ニュートラルなモーション、シームレスな遷移などインタラクションなものになることが多い。
そのため形式的な分担では効率が悪い。

 

実際に実装するうえで

uguiではできないこと難しいことをエンジニアに相談して、作業が効率化されたり
新しいことができるようになることがあります。
ただ闇雲に相談することはよくない。

 

注意点として

アセット・プレハブの命名規則や構造のルール、独自のコンポーネントの必要を検討するのがよい。
ここらへんは初期段階で決めておきましょう。余計なことを考えなくても済むようになります。
ディレクトリ構造なども大事。

 

f:id:Raspberly:20190205011455j:plain

独自コンポーネントで作業効率を向上させるためのカスタマイズもよい。

 

 

 

 

4. デザイナーが知っておくと便利なuGUIの機能と注意点など

docs.google.com

uguiできること、便利な機能、注意点について紹介します。
※非常に多いです、各項目の詳細は自分で調べるといいと思います。


・Image

Spriteを設定します。imageにはimagetypeという項目があります。

・RawImage
テクスチャを設定でき、UVアニメーションなどできます。

・RenderTexture
カメラの映像をテクスチャとして使うことができます。
・Effect
影やアウトラインなどをつけることができます。

・Position as UV1
あまりつかわれてない機能、uiにuv1を追加する機能です。

・Layout
uiをグループごとに制御する機能。

・Layout group
子オブジェクトを整列させる機能。

・Layout Elements
画像比率を維持しながらいろいろな解像度に対応させることができる。

・Content Size Filter
子のサイズ　下図に応じて大きさを制御する。

・Canvas Render Mode
canvas全体の表示方法を設定します。

・Canvas Scaler
uiのサイズを設定する。

・Ancher
uiをどこを基準として配置するかを決める。

・Pivot
UIの基点を設定する。

 

 

 

 

 

 

5. UIと2D/3D座標と私 ～2D/3Dを混在させたUIを作ったら、とてもめんどくさかった話～

www.slideshare.net

リリースした時の振り返りについて話します。
2dと3dを融合させるのはめんどくさい。

１．座標変換がめんどくさい

ワールド、スクリーン、ビューポート、それぞれの座標系の変換


2. UIに必要なシステムの構築がめんどくさい

3Dなどは自分で実装する必要があります。


3. 端末によって違う画面比の対応がめんどくさい

背景に3Dをおくだけでもめんどくさい。
魅せたいものがどの端末でも見られるか、UIが重なっていないかなどめんどくさい。

 

解決策

基本的に気にしないことにしました。見切れても「こういう絵である」と開き直る。

平行投影カメラを使う、これをメインカメラに加算する。
パースがかからないので考え方が楽になる。

まとめ

空間設計はゲーム制作に役立ちます
気軽に個人開発にトライをしてみましょう

 

 

 

 

 

 

 

機材トラブルにより、順番を入れ替えています。

6. Constraint機能を2Dアニメーションで活用してみる

docs.google.com

Constraintとは何かについて紹介します。
使うしばり　2dで使うボーンなし　変形なし
Constraintは参照元のオブジェクトの位置大きさ角度を自身に影響させる機能です。
つまり親子関係にしなくても、移動や回転の影響を受けるようにできる機能。

 

・position Constraint　移動
・Rotation Constraint　回転
・Scale Constraint　拡大縮小
・Parent Constraint　一見親子関係だがスケールは含んでいない。

Constraintのつけ方

参照させたいオブジェクトに対してconstraintのコンポーネントを入れます。
sourceに参照させたいオブジェクトアタッチしアクティブを押せば確定。

複数のオブジェクトがある場合は平均値をとります。
とても簡単です、簡単なので工夫もできます。

 

使い道

・リグもどきでいい感じにしたい時など。
・しっぽやゆびなど別にコントロールしたほうがいいものに使う。
・描画順を無視して操作する。

・下のものをweightして動かしたい
・アウトラインをつけてみる(アウトライン部分のオブジェクトを後ろにくっつける)
・weightをずらしながらつけることで顔の動きもできる


何かの機会で活用してみてください

 

 

 

 

 

 

 

7. UnityでリアルタイムMVを作ってみる

テーマ
「デザイナーにとってのunity」=エンジニアのためのツールではなく
デザイナーがやりたいことをできるようにするツールとします

ここでデモ

f:id:Raspberly:20190205012954j:plain

ユニティちゃんライブで、スタジオを作って差し替えるという試み。
3Dツールを一切使わず、スクリプトも使わずUnityで作成しました。

どう作ったか

3Dオブジェクトはプリミティブを使っています。多少の変形はProBuilderで。
レンズフレアは無料アセット

assetstore.unity.com
レーザーライトはLineRenderer。

絵作りはpostprocessで作成。

このプロジェクト自体は40時間ほどで完成しました。

 

まとめ

今はunityの機能、Aseetを使えば個人でも簡単に作れるようになってきました。
あなたも始めてみましょう。

 

 

 

 

 

 

感想

デザイナーさんの勉強会は始めてでした。エンジニアだらけの勉強会とはまた違う雰囲気。
デザイナー向けの勉強会とのことでしたが、エンジニアでも楽しめる内容でした。
第2回目は2~3か月後とのことですが、どんどん魔境になっていくのでしょうか。

懇親会はカフェということでサンドイッチなどの軽食です。

f:id:Raspberly:20190205013118j:plain

お酒がないのはカフェだからかな。
あれ？お酒を提供できないのは喫茶店であってカフェなら問題ないのでｈ

 

帰り際に感想や要望を書き込めるホワイトボードです。
今回は付箋で張り付けていく方式になっています。

f:id:Raspberly:20190205013148j:plain

 

 

 

 

タイムライン