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

20181215 【年末だよ】Unity お・と・なのLT大会 2018

Transcript

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 Profiler を見ると 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実装例 VTJOH
    6OJDFTTJOH
    VTJOH
    6OJUZ&OHJOF
    QVCMJD
    DMBTT
    6OJDFTTJOH4BNQMF
    
    6(SBQIJDT
    \
    
    
    
    
    QSJWBUF
    JOU
    MJOF$PVOU
    
    
    
    
    
    
    QSJWBUF
    7FDUPS<>
    QPTJUJPOT
    
    
    
    
    QSPUFDUFE
    PWFSSJEF
    WPJE
    4FUVQ
    
    
    
    
    \
    
    
    
    
    
    
    
    
    QPTJUJPOT
    
    OFX
    7FDUPS<MJOF$PVOU>
    
    
    
    
    
    
    
    
    GPS
    JOU
    J
    
    
    J
    
    UIJTMJOF$PVOU
    J
    
    
    
    
    
    
    
    
    \
    
    
    
    
    
    
    
    
    
    
    
    
    QPTJUJPOT<J>
    
    OFX
    7FDUPS
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    3BOEPN3BOHF G
    G
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    3BOEPN3BOHF G
    G
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    ^
    
    
    
    
    ^
    
    
    
    
    QSPUFDUFE
    PWFSSJEF
    WPJE
    %SBX
    
    
    
    
    \
    
    
    
    
    
    
    
    
    GPS
    JOU
    J
    
    
    J
    
    UIJTMJOF$PVOU
    J
    
    
    
    
    
    
    
    
    \
    
    
    
    
    
    
    
    
    
    
    
    
    UIJTESBX-JOF QPTJUJPOT<J> 
    
    
    
    
    
    
    
    
    ^
    
    
    
    
    ^
    
    
    
    
    QSJWBUF
    WPJE
    ESBX-JOF 7FDUPS
    QPTJUJPO
    
    
    
    
    \
    
    
    
    
    
    
    
    
    TUSPLF 
    
     
    
    $PMPS
    
    
    
    
    
    
    
    
    MJOF QPTJUJPOY
    QPTJUJPOZ
    NPVTF9
    NPVTF: 
    
    %SBX
    -JOF
    
    
    
    
    ^
    ^
    ランダム座標に生成した10個の点とマウスの座標を直線で結ぶサンプル
17. Unicessing実装例 VTJOH
    6OJDFTTJOH
    VTJOH
    6OJUZ&OHJOF
    QVCMJD
    DMBTT
    6OJDFTTJOH4BNQMF
    
    6(SBQIJDT
    \
    
    
    
    
    QSJWBUF
    JOU
    MJOF$PVOU
    
    
    
    
    
    
    QSJWBUF
    7FDUPS<>
    QPTJUJPOT
    
    
    
    
    QSPUFDUFE
    PWFSSJEF
    WPJE
    4FUVQ
    
    
    
    
    \
    
    
    
    
    
    
    
    
    QPTJUJPOT
    
    OFX
    7FDUPS<MJOF$PVOU>
    
    
    
    
    
    
    
    
    GPS
    JOU
    J
    
    
    J
    
    UIJTMJOF$PVOU
    J
    
    
    
    
    
    
    
    
    \
    
    
    
    
    
    
    
    
    
    
    
    
    QPTJUJPOT<J>
    
    OFX
    7FDUPS
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    3BOEPN3BOHF G
    G
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    3BOEPN3BOHF G
    G
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    ^
    
    
    
    
    ^
    
    
    
    
    QSPUFDUFE
    PWFSSJEF
    WPJE
    %SBX
    
    
    
    
    \
    
    
    
    
    
    
    
    
    GPS
    JOU
    J
    
    
    J
    
    UIJTMJOF$PVOU
    J
    
    
    
    
    
    
    
    
    \
    
    
    
    
    
    
    
    
    
    
    
    
    UIJTESBX-JOF QPTJUJPOT<J> 
    
    
    
    
    
    
    
    
    ^
    
    
    
    
    ^
    
    
    
    
    QSJWBUF
    WPJE
    ESBX-JOF 7FDUPS
    QPTJUJPO
    
    
    
    
    \
    
    
    
    
    
    
    
    
    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. お化粧 PostEffect 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で ษڧձόφʔを作った話