Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Galupeno
February 25, 2021

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

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

Galupeno

February 25, 2021
Tweet

More Decks by Galupeno

Other Decks in Design

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