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

by lycoris102

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Made with Unity ParticleSystem (Mesh GPU Instancing) Unicessing

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Unicessing実装例 VTJOH6OJDFTTJOH VTJOH6OJUZ&OHJOF QVCMJDDMBTT6OJDFTTJOH4BNQMF6(SBQIJDT \ QSJWBUFJOUMJOF$PVOU QSJWBUF7FDUPS<>QPTJUJPOT QSPUFDUFEPWFSSJEFWPJE4FUVQ \ QPTJUJPOTOFX7FDUPS GPS JOUJJUIJTMJOF$PVOUJ \ QPTJUJPOTOFX7FDUPS 3BOEPN3BOHF G G 3BOEPN3BOHF G G ^ ^ QSPUFDUFEPWFSSJEFWPJE%SBX \ GPS JOUJJUIJTMJOF$PVOUJ \ UIJTESBX-JOF QPTJUJPOT ^ ^ 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/

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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