UIを使ったデモシーンの実装

第2回clusterワールド制作ゆるゆる勉強会
https://cluster.mu/e/d74953f2-e141-4398-b84b-f03d625a038b

Transcript

1. CCKήʔϜϫʔϧυͷԋग़ޮՌ 2/25
   Ψϧϖϊ
   UIΛ࢖ͬͨσϞγʔϯͷ࣮૷
   ୈ2ճclusterϫʔϧυ੍࡞ΏΔΏΔษڧձ
   

   View Slide

2. Կ͔΍ͬͯΔʢ࠷ۙ͸͋·ΓԿ͔΍ͬͯͳ͍ʣ
   clusterͰ͸ήʔϜϫʔϧυΛ࡞ͬͨΓ͢Δ
   ࡢ೥຤ͷGAMEJAMʹͯʮྗͷ࣢ͱӨͷ੠ʯ
   ͕TSUKUMO৆Λड৆
   ͦ͜Ͱ࣮૷ͨ͠UIσϞγʔϯʢΧοτΠϯʣ
   ʹ͍͓ͭͯ࿩͠͠·͢
   ஻ΔਓɿΨϧϖϊ
   

   View Slide

3. ·ͣσϞγʔϯͷ۠ผʹ͍ͭͯ
   ϓϦϨϯμϦϯάʢࣄલʹσϞγʔϯΛ༻ҙ͢Δʣ

   ௿ෛՙɺϓϨΠϠʔͷૢ࡞΍ϫʔϧυͷมߋঢ়ଶ͸൓ө͞Εͳ͍

   CGιϑτͰͷΞχϝʔγϣϯϨϯμϦϯά΍ɺUnity Recorder
   ͳͲΛ࢖͏
   ϦΞϧλΠϜϨϯμϦϯάʢͦͷ৔ͰσϞγʔϯΛࡱӨ͢Δʣ

   ߴෛՙɺϓϨΠϠʔͷૢ࡞΍ϫʔϧυͷঢ়ଶ͕൓ө͞ΕΔ

   ͜Ε͔Βઆ໌͢Δ಺༰Ͱ࣮૷Ͱ͖Δ
   

   View Slide

4. γʔϯʹඞཁͳ΋ͷ
   Camera

   ϫʔϧυΛࡱӨ͢ΔΧϝϥɻΞχϝʔγϣϯͤ͞ΔࣄͰΧϝϥϫʔΫΛ͚ͭΒΕΔ
   Render Texture

   Cameraʹඥ෇͚ΔϨϯμϦϯάઌςΫενϟɻCamera͕ΞΫςΟϒঢ়ଶͷ࣌ͷ
   ΈϨϯμϦϯάɾ൓ө͞ΕΔɻ
   Player Local UI

   clusterͷϓϨΠϠʔʹಠࣗͷUIΛ౤Ө͢ΔCanvasɻجຊతʹImage΍Textɺ
   AudioͳͲΛදࣔɾ࠶ੜ͢Δ
   Raw Image

   ImageͷܑఋɻImage͸Textureʢ੩ࢭըʣΛ౤Өͤ͞Δͷʹର͠ɺRaw Image͸
   Render TextureΛ౤ӨͰ͖Δ
   

   View Slide

5. ࣮૷ํ๏
   1. γʔϯ্ʹCameraɾPlayer Local UIΛ࡞੒ɻ

   Player Local UI಺ʹRaw ImageΛ࡞੒ɻ

   ϓϩδΣΫτϑΝΠϧ಺ʹRender TextureΛ࡞੒
   2.γʔϯ্ͷCameraʹRender TextureΛׂΓ౰ͯΔ
   3.γʔϯ্ͷRaw ImageʹRender TextureΛׂΓ౰ͯΔ

   

   ׬੒
   

   View Slide

6. 1. CameraɾPlayer Local UIɾ
   Raw ImageɾRender Textureͷ࡞੒
   CameraͱPlayerLocalUIΛγʔϯ্ʹ࡞੒
   Raw ImageΛγʔϯ্ʹ࡞੒

   UIͷ߲໨͔Β࡞੒Ͱ͖Δ Render TextureΛϓϩδΣΫτϑΝΠϧʹ࡞੒

   ϓϩδΣΫτλϒΛӈΫϦοΫͰ࡞ΕΔ
   

   View Slide

7. 2. γʔϯ্ͷCameraʹ
   Render TextureΛׂΓ౰ͯΔ
   CameraͷInspector
   Render Texture
   ϓϩδΣΫτλϒͷRender TextureΛ
   CameraͷίϯϙʔωϯτɿTarget Textureʹυϥοά&υϩοϓͰׂΓ౰ͯΔ
   

   View Slide

8. 3. γʔϯ্ͷRaw Imageʹ
   Render TextureΛׂΓ౰ͯΔ
   Raw ImageͷInspector
   Render Texture
   ϓϩδΣΫτλϒͷRender TextureΛ

   Raw ImageͷίϯϙʔωϯτɿTextureʹυϥοά&υϩοϓͰׂΓ౰ͯΔ
   

   View Slide

9. ؔ܎ੑ
   ϓϩδΣΫτϑΝΠϧ಺
   γʔϯ্
   Camera
   ϫʔϧυ
   Raw Image
   PlayerLocalUI
   ※Ұ࣌తͳඳըͰ
   ࿥ըͰ͸ͳ͍
   Render Texture
   ࡱӨ
   ඳը
   ౤Ө
   ൓ө
   

   View Slide

10. ΋ͬͱͦΕͬΆ͘
    σϞγʔϯͷ࠶ੜத͚ͩCameraͱRaw ImageΛΞΫςΟϒঢ়ଶʹ͢Δ

    ˠ࡞Γͬͺͳͩ͠ͱৗʹσϞγʔϯঢ়ଶɻSet GameObject Active GimmickΛ࢖͏
    ΧϝϥϫʔΫΛ͚ͭΔʢAnimator, Set Animator Value GimmickΛ࢖͏ʣ

    ˠσϞγʔϯΛυϥϚνοΫʹԋग़Ͱ͖Δ
    Set Move Speed Rate΍Set Jump Height Rate Player GimmickͰϓϨΠϠʔͷಈ͖
    Λ੍ݶ͢Δ

    →σϞγʔϯதʹδλόλಈ͍ͯ΄͘͠ͳ͍ͱ͖ɻ
    SE΍BGMΛޮՌతʹ࢖͏

    →ఢͷग़ݱɺຯํͷ૿ԉɺṖղ͖ͷΫϦΞɺࢼ߹ͷܾணͳͲΛΑΓײ৘໘ʹૌ͑Δ͜ͱ͕
    Ͱ͖Δ
    ҙਤͨ͠ϧʔτͰϓϨΠϠʔʹา͍ͯ΄͍͠ͱ͖͸ϧʔϓϫʔϓΛ࢖ͬͨΓ……ʂʁ
    

    View Slide

11. ஫ҙ఺
    ͨ͘͞Μ͋Γ·͢
    

    View Slide

12. ஫ҙ఺
    ͦͷ··ͷCamera, Render Texture, RawImageͷઃఆͩͱɺͳ͔ͥΞ
    ϧϑΝνϟϯωϧ͕ൈ͚ͯ͠·͏ʢಁաॲཧͷׯবʁʣ
    ରࡦͱͯ͠Raw ImageͷԼʹࠇ͍ύωϧΛෑ͍͍ͯΔ͕ɺ΋ͬͱεϚʔτ
    ͳରࡦ͕Ͱ͖ͦ͏
    ΞϧϑΝൈ͚ঢ়ଶ ύωϧෑ͖ঢ়ଶ
    

    View Slide

13. Render Texture͸௿඼࣭ʹ཈͑Α͏
    Render Texture͸ඇৗʹߴෛՙͳॲཧ
    Render Texture͸௨ৗͷclusterΞϓϦέʔγϣϯͷϨϯμϦϯάղ૾౓Λ

    ڧ੍తʹ֦ு͢ΔܗͰɺϩʔΧϧͰϨϯμϦϯά͞ΕΔ
    ྫͱͯ͠σεΫτοϓ൛clusterͷ΢Οϯυ΢αΠζ͕1024x768ͰɺRender
    Texture͕1000x800ͳΒɺ2024x1568αΠζͷϨϯμϦϯάΛຖϑϨʔϜ
    ߦͳ͍ͬͯΔʂ

    ͨͩ͠Render Textureׂ͕Γ౰ͯΒΕͨγʔϯ্ͷCamera͕ඇΞΫςΟϒঢ়
    ଶͷ࣌͸ϨϯμϦϯά͕ετοϓ͢Δ
    ඞཁ࣌Ҏ֎͸Set GameObject ActiveGimmickͰCameraΛ
    ඇΞΫςΟϒԽ͓ͯ͜͠͏
    ஫ҙ఺
    

    View Slide

14. Render Texture͸௿඼࣭ʹ཈͑Α͏
    ߴղ૾౓ × ΞϯνΤΠϦΞεʹߴෛՙॲཧ
    ߴෛՙ ௿ෛՙ
    Render Textureͷղ૾౓͕ߴ͘ɺΞϯνΤΠϦΞε͕Φϯʹͳ͍ͬͯΔ

    ߴ඼࣭ͳ΋ͷ΄ͲɺͦΕ͚ͩΞϓϦέʔγϣϯͷϨϯμϦϯάΛ௥Ճॲཧͤ͞
    Δ͜ͱʹͳΔ
    ϑϨʔϜϨʔτΛ٘ਜ਼ʹΑͬΆͲߴղ૾౓ͰࡱӨ͍ͨ͠΋ͷ͕ͳ͍ݶΓɺ

    Render Textureͷ඼࣭͸௿Ίʹઃఆ͠Α͏

    ʢઓंήʔϜϫʔϧυͷΤΠϜը໘͸256x256ͷඇΞϯνΤΠϦΞγϯάʣ
    ஫ҙ఺
    

    View Slide

15. ࡞ͬͨ··ͷCameraʹ͸

    ϙετϓϩηε͕ద༻͞Εͳ͍
    ϓϨΠϠʔʹରͯ͠༗ޮʹͨ͠ϙετϓ
    ϩηεʢPPʣ͸ɺ࡞ͬͨ··ͷCamera
    ʹ͸ద༻͞Εͳ͍
    CameraͷLayerΛ21: PostProcessing
    ʹ͔ͯ͠ΒɺίϯϙʔωϯτʮPost-
    process LayerʯΛ௥ՃɻVolume
    bending/Layer͕σϑΥϧτͰ͸ۭͳ
    ͷͰɺಉ͘͡21: PostProcessingΛద༻
    ͨͩPP΋Render Textureಉ༷ʹߴෛՙ
    ͳͷͰɺཚ༻͸ආ͚Δ΂͠
    ஫ҙ఺
    

    View Slide

16. ΧϝϥϞʔυΛىಈ͢Δͱ

    PlayerLocalUI͕શͯඇදࣔʹͳΔ
    PlayerLocalUIʹදࣔͨ͠΋ͷΛࣸਅʹऩΊ͍ͨͱࢥͬͯ΋ɺ

    OSͷεΫγϣػೳΛ࢖͏ΑΓଞͳ͍
    PlayerLocalUI಺ͷLayerΛ੾Γସ͑ͯ΋UIͰݻఆ͞ΕΔ
    ҰํͰɺը໘Λ෴͏UIΛڧ੍తʹফ͢खஈͱͯ͠࢖͑Δ

    ྫʣόάൃੜ࣌ͷۓٸղআɺRTAͷσϞԋग़ΧοτͳͲ
    ·ͨը໘҉సԋग़࣌ͷӅ͠ཁૉͱͯ͠ͷ࢖్͍ͳͲΞΠσΞ΋……
    ஫ҙ఺
    

    View Slide

17. VR൛ͱඇVR൛clusterͷ

    PlayerLocalUIͷҧ͍
    VR൛ͷPlayer Local UI͸ϫʔϧυͷΦϒδΣΫτʹΊΓࠐΉՄೳੑ
    ͕͋Δ
    σεΫτοϓʗεϚϗ൛Ͱ͸΢Οϯυ΢Λͬ͢ΆΓ෴ͬͯࢹ఺Λಈ͔
    ͯ͠΋UI͸ϒϨͳ͍ʢը໘ʹͽͬͨΓ͍͍ͬͭͯ͘Δʣ

    VR൛Ͱ͸ࢹ໺ͷ୺ʹUI֎͕ݟ͑Δʴࢹ఺Λಈ͔ͨ͠ΒUI͕͵͵ͬͱ஗
    Ε͍ͯͭͯ͘Δ
    ϓϨΠϠʔͷࢹքΛΛ׬શʹ෴͍ਚ͘͢ɺը໘தԝʹΤΠϜ༻ͷΫϩ
    εϔΞΛஔ͘ͱ͍ͬͨɺVR൛Ͱ͸͏·͍͔͘ͳ͍UIදݱ͕͋Δ
    ஫ҙ఺
    

    View Slide

18. PlayerLocalUI ͸؀ڥʹΑͬͯ

    ඇৗʹݟ͔͕͑ͨҟͳΔ
    UnityͰͷ੍࡞࣌ʹʮVRɾඇVR྆ํͰϓϨϏϡʔ͢Δʯ

    ʮGameϏϡʔͷ΢Οϯυ΢ΞεϖΫτΛ͙Γ͙Γಈ͔ͯ͠ΈΔʯ
    ͳͲͰςετ͢΂͠
    ಛʹUI੍࡞Ͱ͸Anchorͷઃఆ͕ඞਢʂ

    ͜ΕΛઃఆ͠ͳ͍ͱΞεϖΫτൺ΍ղ૾౓ʹΑͬͯUI่͕ΕΔʂ
    ஫ҙ఺
    εϚϗͷ؀ڥ UnityͷϓϨϏϡʔ
    ※ͳ͓͜Ε←͸
    ୯७ʹεϚϗͷ
    ղ૾౓͕௿͍
    ͜ͱʹΑΔ
    

    View Slide

19. CameraͷCulling MaskΛ
    ΧελϚΠζ͠Α͏
    Camera͸σϑΥϧτઃఆͰશͯͷLayer͕Ϩ
    ϯμϦϯά͞ΕΔ
    Ξόλʔͱϫʔϧυ͚ͩඳըͯ͠ɺωʔϜϓ
    Ϩʔτ΍ಛఆͷΦϒδΣΫτͳͲΛඳըͤ͞
    ͳ͍ಛघͳ࢖͍ํ͕Ͱ͖Δ
    Cameraͷઃఆ΍ConstraintͳͲΛ͏·͘࢖
    ͏ͱϛχϚοϓUI͕࡞ΕΔ
    Layerʹ͍ͭͯ͸΄ͼΘΜ͞Μͷهࣄ
    ʮclusterϫʔϧυͰ࢖͑ΔLayerҰཡʯ͕ৄ
    ͍͠ʂ
    TIPS
    

    View Slide

20. ଞʹ΋Կ͔͋ͬͨؾ͕͢Δ͚
    Ͳࢥ͍ग़ͤͳ͍ͷͰ

    ࣭ٙԠ౴ͱ͔λΠϜ
    

    View Slide

21. ϓϦϨϯμϦϯάͰ

    σϞγʔϯ΍PVΛ࡞Δʢߏ૝ஈ֊ʣ
    1. clusterʹΞοϓϩʔυͯ͠ΩϟϓνϟιϑτͰࡱӨ͢Δ

    ΧελϜΞόλʔ͕ՄࢹԽ͞ΕΔͷͰ࠷΋ө͑Δ͠ήʔϜ಺༰Λ100ˋ࠶ݱͰ͖Δ

    ௨ৗϫʔϧυͰΈΜͳͱ߹ྲྀɺΠϕϯτΧϝϥͰΧϝϥϫʔΫʹͩ͜ΘΔͳͲͰ͖Δ
    2. Unity RecorderΛ࢖ͬͯUnity্ͰࡱӨΛ͢Δ

    Ξόλʔ͸දࣔ͞Εͳ͍͕ɺΧϝϥʹΞχϝʔγϣϯ΍ίϯετϨΠϯτΛ͚ͭͯɺ

    ήʔϜ಺༰ʹ͍͕ۙclusterͰ͸೉͍͠දݱΛՃ͑ͨσϞγʔϯ͕࡞੒Ͱ͖Δ
    3. 3DCGιϑτ΍ಈըฤूιϑτͳͲͰ࡞੒͢Δ

    ඇৗʹख͕͔͔ؒΔ͕ɺclsuter΍UnityͰ͸೉͍͠දݱʢΩϟϥͷද৘ɾྲྀମԋࢉʣ΍

    ςϩοϓͳͲ͕ޮՌతʹ࡞੒Ͱ͖Δ
    ͓·͚TIPS
    (ͪΐ͍࠮ٗ)
    (PV࠮ٗ)
    

    View Slide