Unityで勉強会バナーを作った話 / Make Banners With Unity

1.

青木とと(ˊᗜˋ*) @lycoris102 Unity おとなのLT大会 2018 Unityで ษڧձόφʔを作った話

2.

だれ？ @lycoris102 青木ととねんれい:28 しごと: 株式会社キッズスターかぞく: 妻と2歳半の息子 #Unity (認定デベロッパー)
#Unity1Week (ゲームジャム/ハッカソン) #ポッドキャスト (とと.fm) #勉強会主催/サポート #ボードゲーム (大喜利系大好き) #音ゲー (ポップンメイン) もし良かったらTwitterなどフォローしてくださると嬉しい！

3.

今年作ったゲーム #Unity1Week 過去に10回開催されたUnity1週間ゲームジャムですが今のところ皆勤賞です

4.

今年携わった勉強会今年は都内でUnity関連の勉強会いっぱい開催された印象あるんじゃ

5.

勉強会のサポートイベントページの作成バナー画像の作成リマインドメッセージの送付会場の設営/撤収受付 …etc Gotanda.unityは主催なのでもう少し色々裏でごにょりごにょりやってます今回はこれの話

6.

作ったバナー Gotanda.unityのロゴデザインは前職のデザイナーさんに作っていただきました

7.

Made with Unity ParticleSystem (Mesh GPU Instancing) Unicessing

8.

UnityECS完全に理解した背景を ECS…ではなく ParticleSystem で実装適当にCubeやローポリの素材を浮かせておけばれっぽく見えるのズルい!!

9.

Meshを描画する ParticleSystem を生成後 [Renderer] -> [RenderMode] を  Mesh にし適応したい Mesh
を設定する

10.

Warnings が表示される 65535頂点までしか描画できない Meshを描画する実行環境は Unity2018.2.16

11.

Mesh GPU Instancing Unity2018.1 から適応可能 [Renderer] -> [Enable Mesh GPU
Instancing] にチェックを付ける正直デフォルトでチェック付いてるのであまり意識せずに使っているはず

12.

Mesh GPU Instancing Proﬁler を見ると Instancing の項目にて Batched Draw Calls
が増えていることが分かる Unity2018.1 から適応可能

13.

詳細はQiitaにて [Unity] ParticleSystemでMeshを描画してバナー等の背景に使うといい感じになる https://qiita.com/lycoris102/items/6bf631b35d2769b2d475

14.

UnityNetwork完全に理解した背景を Unicessing で実装ネットワークっぽい感じをどうやって出そうか悩んでいた……

15.

Unicessing @n_ryotaさんが開発したAsset “Processingっぽく図形を描いて遊べるアセット”

16.

Unicessing実装例 VTJOH6OJDFTTJOH VTJOH6OJUZ&OHJOF QVCMJDDMBTT6OJDFTTJOH4BNQMF6(SBQIJDT \ QSJWBUFJOUMJOF$PVOU QSJWBUF7FDUPS<>QPTJUJPOT QSPUFDUFEPWFSSJEFWPJE4FUVQ \
QPTJUJPOTOFX7FDUPS<MJOF$PVOU> GPS JOUJJUIJTMJOF$PVOUJ \ QPTJUJPOT<J>OFX7FDUPS 3BOEPN3BOHF G G 3BOEPN3BOHF G G ^ ^ QSPUFDUFEPWFSSJEFWPJE%SBX \ GPS JOUJJUIJTMJOF$PVOUJ \ UIJTESBX-JOF QPTJUJPOT<J> ^ ^ QSJWBUFWPJEESBX-JOF 7FDUPSQPTJUJPO \ TUSPLF $PMPS MJOF QPTJUJPOY QPTJUJPOZ NPVTF9 NPVTF: %SBX-JOF ^ ^ ランダム座標に生成した10個の点とマウスの座標を直線で結ぶサンプル

17.

Unicessing実装例 VTJOH6OJDFTTJOH VTJOH6OJUZ&OHJOF QVCMJDDMBTT6OJDFTTJOH4BNQMF6(SBQIJDT \ QSJWBUFJOUMJOF$PVOU QSJWBUF7FDUPS<>QPTJUJPOT QSPUFDUFEPWFSSJEFWPJE4FUVQ \
QPTJUJPOTOFX7FDUPS<MJOF$PVOU> GPS JOUJJUIJTMJOF$PVOUJ \ QPTJUJPOT<J>OFX7FDUPS 3BOEPN3BOHF G G 3BOEPN3BOHF G G ^ ^ QSPUFDUFEPWFSSJEFWPJE%SBX \ GPS JOUJJUIJTMJOF$PVOUJ \ UIJTESBX-JOF QPTJUJPOT<J> ^ ^ QSJWBUFWPJEESBX-JOF 7FDUPSQPTJUJPO \ TUSPLF $PMPS MJOF QPTJUJPOY QPTJUJPOZ NPVTF9 NPVTF: %SBX-JOF ^ ^ Start() 時に呼ばれる Update() 時に呼ばれ基本的に毎フレーム描画しなおす Setup() Draw() Proccesingライクな関数群 (一例) stroke() / line() Using Unicessingし UGraphicsを継承したクラスを作ると以下が提供される Processingの関数リファレンス: https://processing.org/reference/

18.

OpenProcessing Processing で作られたジェネレーティブアートやゲームの投稿サイト基本的な部分は分かるが、それをどう組み合わせたらいい感じに作れるか分からなかったマン

19.

OpenProcessing パーリンノイズを用いたTerrain演出

20.

PerlinNoiseTerrain Unity (Unicessing) に移行し C#に文法に合わせる

21.

PerlinNoiseTerrain 実行！任意のGameObject にアタッチして……

22.

お化粧 PostEﬀect Unity公式の提供する全体の色彩を調整 Post Processing Colorful FX

23.

UnityNetwork完全に理解した TextMeshProで文字を乗せて……  バナー完成！

24.

詳細はQiitaにて [Unity] Uniccesingで作った演出をバナー等の背景に使うといい感じになる https://qiita.com/lycoris102/items/b9e7d2e999ee33e5560b

25.

グラフィックツールに精通してなくても Unityだけでいい感じなバナーを作れる!! みんなもUnityでバナーを作って遊ぼう！

26.

Unity2018.3で入った ParticleSystemForceFieldが楽しい!! 時間があればおまけDEMO

27.

来年の勉強会開催予定 UnityAudio完全に理解した Gotanda.unity #10 Unity Designer’s Cafe☕ 1/29(火) 株式会社ミクシィ 1/23(水)
株式会社アカツキ未定株式会社ワンダープラネット Unity1Week Meetup in Tokyo2019 1/12(土) Unity Technologies Japan 来年もよろしくお願いいたします！

28.

青木とと(ˊᗜˋ*) @lycoris102 Unity おとなのLT大会 2018 Unityで ษڧձόφʔを作った話

Unityで勉強会バナーを作った話 / Make Banners With Unity

Unityで勉強会バナーを作った話 / Make Banners With Unity

lycoris102

Want more?

Transcript

青木とと(ˊᗜˋ*) @lycoris102 Unity おとなのLT大会 2018 Unityで ษڧձόφʔを作った話

だれ？ @lycoris102 青木ととねんれい:28 しごと: 株式会社キッズスターかぞく: 妻と2歳半の息子 #Unity (認定デベロッパー)

今年作ったゲーム #Unity1Week 過去に10回開催されたUnity1週間ゲームジャムですが今のところ皆勤賞です

今年携わった勉強会今年は都内でUnity関連の勉強会いっぱい開催された印象あるんじゃ

勉強会のサポートイベントページの作成バナー画像の作成リマインドメッセージの送付会場の設営/撤収受付 …etc Gotanda.unityは主催なのでもう少し色々裏でごにょりごにょりやってます今回はこれの話

作ったバナー Gotanda.unityのロゴデザインは前職のデザイナーさんに作っていただきました

Made with Unity ParticleSystem (Mesh GPU Instancing) Unicessing

UnityECS完全に理解した背景を ECS…ではなく ParticleSystem で実装適当にCubeやローポリの素材を浮かせておけばれっぽく見えるのズルい!!

Meshを描画する ParticleSystem を生成後 [Renderer] -> [RenderMode] を  Mesh にし適応したい Mesh

Warnings が表示される 65535頂点までしか描画できない Meshを描画する実行環境は Unity2018.2.16

Mesh GPU Instancing Unity2018.1 から適応可能 [Renderer] -> [Enable Mesh GPU

Mesh GPU Instancing Proﬁler を見ると Instancing の項目にて Batched Draw Calls

詳細はQiitaにて [Unity] ParticleSystemでMeshを描画してバナー等の背景に使うといい感じになる https://qiita.com/lycoris102/items/6bf631b35d2769b2d475

UnityNetwork完全に理解した背景を Unicessing で実装ネットワークっぽい感じをどうやって出そうか悩んでいた……

Unicessing @n_ryotaさんが開発したAsset “Processingっぽく図形を描いて遊べるアセット”

Unicessing実装例 VTJOH6OJDFTTJOH VTJOH6OJUZ&OHJOF QVCMJDDMBTT6OJDFTTJOH4BNQMF6(SBQIJDT \ QSJWBUFJOUMJOF$PVOU QSJWBUF7FDUPS<>QPTJUJPOT QSPUFDUFEPWFSSJEFWPJE4FUVQ \

Unicessing実装例 VTJOH6OJDFTTJOH VTJOH6OJUZ&OHJOF QVCMJDDMBTT6OJDFTTJOH4BNQMF6(SBQIJDT \ QSJWBUFJOUMJOF$PVOU QSJWBUF7FDUPS<>QPTJUJPOT QSPUFDUFEPWFSSJEFWPJE4FUVQ \

OpenProcessing Processing で作られたジェネレーティブアートやゲームの投稿サイト基本的な部分は分かるが、それをどう組み合わせたらいい感じに作れるか分からなかったマン

OpenProcessing パーリンノイズを用いたTerrain演出

PerlinNoiseTerrain Unity (Unicessing) に移行し C#に文法に合わせる

PerlinNoiseTerrain 実行！任意のGameObject にアタッチして……

お化粧 PostEﬀect Unity公式の提供する全体の色彩を調整 Post Processing Colorful FX

UnityNetwork完全に理解した TextMeshProで文字を乗せて……  バナー完成！

詳細はQiitaにて [Unity] Uniccesingで作った演出をバナー等の背景に使うといい感じになる https://qiita.com/lycoris102/items/b9e7d2e999ee33e5560b

グラフィックツールに精通してなくても Unityだけでいい感じなバナーを作れる!! みんなもUnityでバナーを作って遊ぼう！

Unity2018.3で入った ParticleSystemForceFieldが楽しい!! 時間があればおまけDEMO

来年の勉強会開催予定 UnityAudio完全に理解した Gotanda.unity #10 Unity Designer’s Cafe☕ 1/29(火) 株式会社ミクシィ 1/23(水)

青木とと(ˊᗜˋ*) @lycoris102 Unity おとなのLT大会 2018 Unityで ษڧձόφʔを作った話