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

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

1. CCKήʔϜϫʔϧυͷԋग़ޮՌ 2/25 Ψϧϖϊ UIΛ࢖ͬͨσϞγʔϯͷ࣮૷ ୈ2ճclusterϫʔϧυ੍࡞ΏΔΏΔษڧձ
2. Կ͔΍ͬͯΔʢ࠷ۙ͸͋·ΓԿ͔΍ͬͯͳ͍ʣ clusterͰ͸ήʔϜϫʔϧυΛ࡞ͬͨΓ͢Δ ࡢ೥຤ͷGAMEJAMʹͯʮྗͷ࣢ͱӨͷ੠ʯ ͕TSUKUMO৆Λड৆ ͦ͜Ͱ࣮૷ͨ͠UIσϞγʔϯʢΧοτΠϯʣ ʹ͍͓ͭͯ࿩͠͠·͢ ஻ΔਓɿΨϧϖϊ
3. ·ͣσϞγʔϯͷ۠ผʹ͍ͭͯ ϓϦϨϯμϦϯάʢࣄલʹσϞγʔϯΛ༻ҙ͢Δʣ
 ௿ෛՙɺϓϨΠϠʔͷૢ࡞΍ϫʔϧυͷมߋঢ়ଶ͸൓ө͞Εͳ͍
 CGιϑτͰͷΞχϝʔγϣϯϨϯμϦϯά΍ɺUnity Recorder ͳͲΛ࢖͏ ϦΞϧλΠϜϨϯμϦϯάʢͦͷ৔ͰσϞγʔϯΛࡱӨ͢Δʣ
 ߴෛՙɺϓϨΠϠʔͷૢ࡞΍ϫʔϧυͷঢ়ଶ͕൓ө͞ΕΔ
 ͜Ε͔Βઆ໌͢Δ಺༰Ͱ࣮૷Ͱ͖Δ
4. γʔϯʹඞཁͳ΋ͷ Camera
 ϫʔϧυΛࡱӨ͢ΔΧϝϥɻΞχϝʔγϣϯͤ͞ΔࣄͰΧϝϥϫʔΫΛ͚ͭΒΕΔ Render Texture
 Cameraʹඥ෇͚ΔϨϯμϦϯάઌςΫενϟɻCamera͕ΞΫςΟϒঢ়ଶͷ࣌ͷ ΈϨϯμϦϯάɾ൓ө͞ΕΔɻ Player Local UI
 clusterͷϓϨΠϠʔʹಠࣗͷUIΛ౤Ө͢ΔCanvasɻجຊతʹImage΍Textɺ AudioͳͲΛදࣔɾ࠶ੜ͢Δ Raw Image
 ImageͷܑఋɻImage͸Textureʢ੩ࢭըʣΛ౤Өͤ͞Δͷʹର͠ɺRaw Image͸ Render TextureΛ౤ӨͰ͖Δ
5. ࣮૷ํ๏ 1. γʔϯ্ʹCameraɾPlayer Local UIΛ࡞੒ɻ
 Player Local UI಺ʹRaw ImageΛ࡞੒ɻ
 ϓϩδΣΫτϑΝΠϧ಺ʹRender TextureΛ࡞੒ 2.γʔϯ্ͷCameraʹRender TextureΛׂΓ౰ͯΔ 3.γʔϯ্ͷRaw ImageʹRender TextureΛׂΓ౰ͯΔ
 
 ׬੒
6. 1. CameraɾPlayer Local UIɾ Raw ImageɾRender Textureͷ࡞੒ CameraͱPlayerLocalUIΛγʔϯ্ʹ࡞੒ Raw ImageΛγʔϯ্ʹ࡞੒
 UIͷ߲໨͔Β࡞੒Ͱ͖Δ Render TextureΛϓϩδΣΫτϑΝΠϧʹ࡞੒
 ϓϩδΣΫτλϒΛӈΫϦοΫͰ࡞ΕΔ
7. 2. γʔϯ্ͷCameraʹ Render TextureΛׂΓ౰ͯΔ CameraͷInspector Render Texture ϓϩδΣΫτλϒͷRender TextureΛ CameraͷίϯϙʔωϯτɿTarget Textureʹυϥοά&υϩοϓͰׂΓ౰ͯΔ
8. 3. γʔϯ্ͷRaw Imageʹ Render TextureΛׂΓ౰ͯΔ Raw ImageͷInspector Render Texture ϓϩδΣΫτλϒͷRender TextureΛ
 Raw ImageͷίϯϙʔωϯτɿTextureʹυϥοά&υϩοϓͰׂΓ౰ͯΔ
9. ؔ܎ੑ ϓϩδΣΫτϑΝΠϧ಺ γʔϯ্ Camera ϫʔϧυ Raw Image PlayerLocalUI ※Ұ࣌తͳඳըͰ ࿥ըͰ͸ͳ͍ Render Texture ࡱӨ ඳը ౤Ө ൓ө
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ΛޮՌతʹ࢖͏
 →ఢͷग़ݱɺຯํͷ૿ԉɺṖղ͖ͷΫϦΞɺࢼ߹ͷܾணͳͲΛΑΓײ৘໘ʹૌ͑Δ͜ͱ͕ Ͱ͖Δ ҙਤͨ͠ϧʔτͰϓϨΠϠʔʹา͍ͯ΄͍͠ͱ͖͸ϧʔϓϫʔϓΛ࢖ͬͨΓ……ʂʁ
11. ஫ҙ఺ ͨ͘͞Μ͋Γ·͢
12. ஫ҙ఺ ͦͷ··ͷCamera, Render Texture, RawImageͷઃఆͩͱɺͳ͔ͥΞ ϧϑΝνϟϯωϧ͕ൈ͚ͯ͠·͏ʢಁաॲཧͷׯবʁʣ ରࡦͱͯ͠Raw ImageͷԼʹࠇ͍ύωϧΛෑ͍͍ͯΔ͕ɺ΋ͬͱεϚʔτ ͳରࡦ͕Ͱ͖ͦ͏ ΞϧϑΝൈ͚ঢ়ଶ ύωϧෑ͖ঢ়ଶ
13. Render Texture͸௿඼࣭ʹ཈͑Α͏ Render Texture͸ඇৗʹߴෛՙͳॲཧ Render Texture͸௨ৗͷclusterΞϓϦέʔγϣϯͷϨϯμϦϯάղ૾౓Λ
 ڧ੍తʹ֦ு͢ΔܗͰɺϩʔΧϧͰϨϯμϦϯά͞ΕΔ ྫͱͯ͠σεΫτοϓ൛clusterͷ΢Οϯυ΢αΠζ͕1024x768ͰɺRender Texture͕1000x800ͳΒɺ2024x1568αΠζͷϨϯμϦϯάΛຖϑϨʔϜ ߦͳ͍ͬͯΔʂ
 ͨͩ͠Render Textureׂ͕Γ౰ͯΒΕͨγʔϯ্ͷCamera͕ඇΞΫςΟϒঢ় ଶͷ࣌͸ϨϯμϦϯά͕ετοϓ͢Δ ඞཁ࣌Ҏ֎͸Set GameObject ActiveGimmickͰCameraΛ ඇΞΫςΟϒԽ͓ͯ͜͠͏ ஫ҙ఺
14. Render Texture͸௿඼࣭ʹ཈͑Α͏ ߴղ૾౓ × ΞϯνΤΠϦΞεʹߴෛՙॲཧ ߴෛՙ ௿ෛՙ Render Textureͷղ૾౓͕ߴ͘ɺΞϯνΤΠϦΞε͕Φϯʹͳ͍ͬͯΔ
 ߴ඼࣭ͳ΋ͷ΄ͲɺͦΕ͚ͩΞϓϦέʔγϣϯͷϨϯμϦϯάΛ௥Ճॲཧͤ͞ Δ͜ͱʹͳΔ ϑϨʔϜϨʔτΛ٘ਜ਼ʹΑͬΆͲߴղ૾౓ͰࡱӨ͍ͨ͠΋ͷ͕ͳ͍ݶΓɺ
 Render Textureͷ඼࣭͸௿Ίʹઃఆ͠Α͏
 ʢઓंήʔϜϫʔϧυͷΤΠϜը໘͸256x256ͷඇΞϯνΤΠϦΞγϯάʣ ஫ҙ఺
15. ࡞ͬͨ··ͷCameraʹ͸
 ϙετϓϩηε͕ద༻͞Εͳ͍ ϓϨΠϠʔʹରͯ͠༗ޮʹͨ͠ϙετϓ ϩηεʢPPʣ͸ɺ࡞ͬͨ··ͷCamera ʹ͸ద༻͞Εͳ͍ CameraͷLayerΛ21: PostProcessing ʹ͔ͯ͠ΒɺίϯϙʔωϯτʮPost- process LayerʯΛ௥ՃɻVolume bending/Layer͕σϑΥϧτͰ͸ۭͳ ͷͰɺಉ͘͡21: PostProcessingΛద༻ ͨͩPP΋Render Textureಉ༷ʹߴෛՙ ͳͷͰɺཚ༻͸ආ͚Δ΂͠ ஫ҙ఺
16. ΧϝϥϞʔυΛىಈ͢Δͱ
 PlayerLocalUI͕શͯඇදࣔʹͳΔ PlayerLocalUIʹදࣔͨ͠΋ͷΛࣸਅʹऩΊ͍ͨͱࢥͬͯ΋ɺ
 OSͷεΫγϣػೳΛ࢖͏ΑΓଞͳ͍ PlayerLocalUI಺ͷLayerΛ੾Γସ͑ͯ΋UIͰݻఆ͞ΕΔ ҰํͰɺը໘Λ෴͏UIΛڧ੍తʹফ͢खஈͱͯ͠࢖͑Δ
 ྫʣόάൃੜ࣌ͷۓٸղআɺRTAͷσϞԋग़ΧοτͳͲ ·ͨը໘҉సԋग़࣌ͷӅ͠ཁૉͱͯ͠ͷ࢖్͍ͳͲΞΠσΞ΋…… ஫ҙ఺
17. VR൛ͱඇVR൛clusterͷ
 PlayerLocalUIͷҧ͍ VR൛ͷPlayer Local UI͸ϫʔϧυͷΦϒδΣΫτʹΊΓࠐΉՄೳੑ ͕͋Δ σεΫτοϓʗεϚϗ൛Ͱ͸΢Οϯυ΢Λͬ͢ΆΓ෴ͬͯࢹ఺Λಈ͔ ͯ͠΋UI͸ϒϨͳ͍ʢը໘ʹͽͬͨΓ͍͍ͬͭͯ͘Δʣ
 VR൛Ͱ͸ࢹ໺ͷ୺ʹUI֎͕ݟ͑Δʴࢹ఺Λಈ͔ͨ͠ΒUI͕͵͵ͬͱ஗ Ε͍ͯͭͯ͘Δ ϓϨΠϠʔͷࢹքΛΛ׬શʹ෴͍ਚ͘͢ɺը໘தԝʹΤΠϜ༻ͷΫϩ εϔΞΛஔ͘ͱ͍ͬͨɺVR൛Ͱ͸͏·͍͔͘ͳ͍UIදݱ͕͋Δ ஫ҙ఺
18. PlayerLocalUI ͸؀ڥʹΑͬͯ
 ඇৗʹݟ͔͕͑ͨҟͳΔ UnityͰͷ੍࡞࣌ʹʮVRɾඇVR྆ํͰϓϨϏϡʔ͢Δʯ
 ʮGameϏϡʔͷ΢Οϯυ΢ΞεϖΫτΛ͙Γ͙Γಈ͔ͯ͠ΈΔʯ ͳͲͰςετ͢΂͠ ಛʹUI੍࡞Ͱ͸Anchorͷઃఆ͕ඞਢʂ
 ͜ΕΛઃఆ͠ͳ͍ͱΞεϖΫτൺ΍ղ૾౓ʹΑͬͯUI่͕ΕΔʂ ஫ҙ఺ εϚϗͷ؀ڥ UnityͷϓϨϏϡʔ ※ͳ͓͜Ε←͸ ୯७ʹεϚϗͷ ղ૾౓͕௿͍ ͜ͱʹΑΔ
19. CameraͷCulling MaskΛ ΧελϚΠζ͠Α͏ Camera͸σϑΥϧτઃఆͰશͯͷLayer͕Ϩ ϯμϦϯά͞ΕΔ Ξόλʔͱϫʔϧυ͚ͩඳըͯ͠ɺωʔϜϓ Ϩʔτ΍ಛఆͷΦϒδΣΫτͳͲΛඳըͤ͞ ͳ͍ಛघͳ࢖͍ํ͕Ͱ͖Δ Cameraͷઃఆ΍ConstraintͳͲΛ͏·͘࢖ ͏ͱϛχϚοϓUI͕࡞ΕΔ Layerʹ͍ͭͯ͸΄ͼΘΜ͞Μͷهࣄ ʮclusterϫʔϧυͰ࢖͑ΔLayerҰཡʯ͕ৄ ͍͠ʂ TIPS
20. ଞʹ΋Կ͔͋ͬͨؾ͕͢Δ͚ Ͳࢥ͍ग़ͤͳ͍ͷͰ
 ࣭ٙԠ౴ͱ͔λΠϜ
21. ϓϦϨϯμϦϯάͰ
 σϞγʔϯ΍PVΛ࡞Δʢߏ૝ஈ֊ʣ 1. clusterʹΞοϓϩʔυͯ͠ΩϟϓνϟιϑτͰࡱӨ͢Δ
 ΧελϜΞόλʔ͕ՄࢹԽ͞ΕΔͷͰ࠷΋ө͑Δ͠ήʔϜ಺༰Λ100ˋ࠶ݱͰ͖Δ
 ௨ৗϫʔϧυͰΈΜͳͱ߹ྲྀɺΠϕϯτΧϝϥͰΧϝϥϫʔΫʹͩ͜ΘΔͳͲͰ͖Δ 2. Unity RecorderΛ࢖ͬͯUnity্ͰࡱӨΛ͢Δ
 Ξόλʔ͸දࣔ͞Εͳ͍͕ɺΧϝϥʹΞχϝʔγϣϯ΍ίϯετϨΠϯτΛ͚ͭͯɺ
 ήʔϜ಺༰ʹ͍͕ۙclusterͰ͸೉͍͠දݱΛՃ͑ͨσϞγʔϯ͕࡞੒Ͱ͖Δ 3. 3DCGιϑτ΍ಈըฤूιϑτͳͲͰ࡞੒͢Δ
 ඇৗʹख͕͔͔ؒΔ͕ɺclsuter΍UnityͰ͸೉͍͠දݱʢΩϟϥͷද৘ɾྲྀମԋࢉʣ΍
 ςϩοϓͳͲ͕ޮՌతʹ࡞੒Ͱ͖Δ ͓·͚TIPS (ͪΐ͍࠮ٗ) (PV࠮ٗ)