Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
UIを使ったデモシーンの実装
Search
Galupeno
February 25, 2021
Design
0
1.1k
UIを使ったデモシーンの実装
第2回clusterワールド制作ゆるゆる勉強会
https://cluster.mu/e/d74953f2-e141-4398-b84b-f03d625a038b
Galupeno
February 25, 2021
Tweet
Share
More Decks by Galupeno
See All by Galupeno
クラスターゲームラボ #1ゲームの仕様を考える
galupeno
0
170
ロボのダイエット
galupeno
0
140
クラスター・カンバセイション・クラブ#8パブリック文化防衛のための緊急会議
galupeno
0
110
CCKにちょい足し!Constraintを使ってみよう スライド資料
galupeno
0
1.2k
CCKでできる!NPCのAIロジック
galupeno
0
1.2k
みんなアバターどないしとぉ?スライド
galupeno
0
66
BULLUET RUNNERS!!! presentation slide
galupeno
0
240
Other Decks in Design
See All in Design
ENEOS社事例|アプリ事業を加速させるデザイナーの取り組み / dx-eneos-design
cyberagentdevelopers
PRO
1
820
マンガで分かるサービスデザインガイドライン
senryakuka
1
550
利用者が離れないUX/UIデザイン 長く使われる業務アプリデザインのポイント
ncdc
5
430
(第1回) アーキテクト・テックリード育成講座
masakaya
0
160
もうひとつのアーキテクチャ #kichijojipm
kondoyuko
0
180
Designship2024 Panel Discussion インハウスデザイナーは 何をデザインしているか、するべきか で使用したスライドを公開します。
kiyoshifuwa
0
2.4k
241214_StackNagoya_プレイングマネージャーのプレイングの時間の使い方
kiyoshifuwa
0
210
パンくずリストかわいい(breadcrumb so cute)
ysuda
0
160
デザイナーのお仕事(UI/UX GRAPHIC GROUP)
mirrativ
0
110
共創するのはモノではなく価値 ── 日本の「はたらく」を変える挑戦 / Designship2024 MainStage
visional_engineering_and_design
1
720
政策広報実践講座_講演資料ダイジェスト2
capitolthink
0
120
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 組織横断のデザインの 取り組みについて
sig
1
270
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Docker and Python
trallard
44
3.3k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Rails Girls Zürich Keynote
gr2m
94
13k
A designer walks into a library…
pauljervisheath
205
24k
Visualization
eitanlees
146
15k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
Speed Design
sergeychernyshev
25
780
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
8
270
Transcript
CCKήʔϜϫʔϧυͷԋग़ޮՌ 2/25 Ψϧϖϊ UIΛͬͨσϞγʔϯͷ࣮ ୈ2ճclusterϫʔϧυ੍࡞ΏΔΏΔษڧձ
Կ͔ͬͯΔʢ࠷ۙ͋·ΓԿ͔ͬͯͳ͍ʣ clusterͰήʔϜϫʔϧυΛ࡞ͬͨΓ͢Δ ࡢͷGAMEJAMʹͯʮྗͷͱӨͷʯ ͕TSUKUMOΛड ͦ͜Ͱ࣮ͨ͠UIσϞγʔϯʢΧοτΠϯʣ ʹ͍͓ͭͯ͠͠·͢ ΔਓɿΨϧϖϊ
·ͣσϞγʔϯͷ۠ผʹ͍ͭͯ ϓϦϨϯμϦϯάʢࣄલʹσϞγʔϯΛ༻ҙ͢Δʣ ෛՙɺϓϨΠϠʔͷૢ࡞ϫʔϧυͷมߋঢ়ଶө͞Εͳ͍ CGιϑτͰͷΞχϝʔγϣϯϨϯμϦϯάɺUnity Recorder ͳͲΛ͏ ϦΞϧλΠϜϨϯμϦϯάʢͦͷͰσϞγʔϯΛࡱӨ͢Δʣ ߴෛՙɺϓϨΠϠʔͷૢ࡞ϫʔϧυͷঢ়ଶ͕ө͞ΕΔ ͜Ε͔Βઆ໌͢Δ༰Ͱ࣮Ͱ͖Δ
γʔϯʹඞཁͳͷ Camera ϫʔϧυΛࡱӨ͢ΔΧϝϥɻΞχϝʔγϣϯͤ͞ΔࣄͰΧϝϥϫʔΫΛ͚ͭΒΕΔ Render Texture Cameraʹඥ͚ΔϨϯμϦϯάઌςΫενϟɻCamera͕ΞΫςΟϒঢ়ଶͷ࣌ͷ ΈϨϯμϦϯάɾө͞ΕΔɻ Player Local UI
clusterͷϓϨΠϠʔʹಠࣗͷUIΛӨ͢ΔCanvasɻجຊతʹImageTextɺ AudioͳͲΛදࣔɾ࠶ੜ͢Δ Raw Image ImageͷܑఋɻImageTextureʢ੩ࢭըʣΛӨͤ͞Δͷʹର͠ɺRaw Image Render TextureΛӨͰ͖Δ
࣮ํ๏ 1. γʔϯ্ʹCameraɾPlayer Local UIΛ࡞ɻ Player Local UIʹRaw ImageΛ࡞ɻ ϓϩδΣΫτϑΝΠϧʹRender
TextureΛ࡞ 2.γʔϯ্ͷCameraʹRender TextureΛׂΓͯΔ 3.γʔϯ্ͷRaw ImageʹRender TextureΛׂΓͯΔ
1. CameraɾPlayer Local UIɾ Raw ImageɾRender Textureͷ࡞ CameraͱPlayerLocalUIΛγʔϯ্ʹ࡞ Raw ImageΛγʔϯ্ʹ࡞
UIͷ߲͔Β࡞Ͱ͖Δ Render TextureΛϓϩδΣΫτϑΝΠϧʹ࡞ ϓϩδΣΫτλϒΛӈΫϦοΫͰ࡞ΕΔ
2. γʔϯ্ͷCameraʹ Render TextureΛׂΓͯΔ CameraͷInspector Render Texture ϓϩδΣΫτλϒͷRender TextureΛ CameraͷίϯϙʔωϯτɿTarget
Textureʹυϥοά&υϩοϓͰׂΓͯΔ
3. γʔϯ্ͷRaw Imageʹ Render TextureΛׂΓͯΔ Raw ImageͷInspector Render Texture ϓϩδΣΫτλϒͷRender
TextureΛ Raw ImageͷίϯϙʔωϯτɿTextureʹυϥοά&υϩοϓͰׂΓͯΔ
ؔੑ ϓϩδΣΫτϑΝΠϧ γʔϯ্ Camera ϫʔϧυ Raw Image PlayerLocalUI ※Ұ࣌తͳඳըͰ ըͰͳ͍
Render Texture ࡱӨ ඳը Ө ө
ͬͱͦΕͬΆ͘ σϞγʔϯͷ࠶ੜத͚ͩCameraͱRaw ImageΛΞΫςΟϒঢ়ଶʹ͢Δ ˠ࡞Γͬͺͳͩ͠ͱৗʹσϞγʔϯঢ়ଶɻSet GameObject Active GimmickΛ͏ ΧϝϥϫʔΫΛ͚ͭΔʢAnimator, Set Animator
Value GimmickΛ͏ʣ ˠσϞγʔϯΛυϥϚνοΫʹԋग़Ͱ͖Δ Set Move Speed RateSet Jump Height Rate Player GimmickͰϓϨΠϠʔͷಈ͖ Λ੍ݶ͢Δ →σϞγʔϯதʹδλόλಈ͍ͯ΄͘͠ͳ͍ͱ͖ɻ SEBGMΛޮՌతʹ͏ →ఢͷग़ݱɺຯํͷ૿ԉɺṖղ͖ͷΫϦΞɺࢼ߹ͷܾணͳͲΛΑΓײ໘ʹૌ͑Δ͜ͱ͕ Ͱ͖Δ ҙਤͨ͠ϧʔτͰϓϨΠϠʔʹา͍ͯ΄͍͠ͱ͖ϧʔϓϫʔϓΛͬͨΓ……ʂʁ
ҙ ͨ͘͞Μ͋Γ·͢
ҙ ͦͷ··ͷCamera, Render Texture, RawImageͷઃఆͩͱɺͳ͔ͥΞ ϧϑΝνϟϯωϧ͕ൈ͚ͯ͠·͏ʢಁաॲཧͷׯবʁʣ ରࡦͱͯ͠Raw ImageͷԼʹࠇ͍ύωϧΛෑ͍͍ͯΔ͕ɺͬͱεϚʔτ ͳରࡦ͕Ͱ͖ͦ͏ ΞϧϑΝൈ͚ঢ়ଶ
ύωϧෑ͖ঢ়ଶ
Render Texture࣭ʹ͑Α͏ Render Textureඇৗʹߴෛՙͳॲཧ Render Texture௨ৗͷclusterΞϓϦέʔγϣϯͷϨϯμϦϯάղ૾Λ ڧ੍తʹ֦ு͢ΔܗͰɺϩʔΧϧͰϨϯμϦϯά͞ΕΔ ྫͱͯ͠σεΫτοϓ൛clusterͷΟϯυαΠζ͕1024x768ͰɺRender Texture͕1000x800ͳΒɺ2024x1568αΠζͷϨϯμϦϯάΛຖϑϨʔϜ ߦͳ͍ͬͯΔʂ
ͨͩ͠Render Textureׂ͕ΓͯΒΕͨγʔϯ্ͷCamera͕ඇΞΫςΟϒঢ় ଶͷ࣌ϨϯμϦϯά͕ετοϓ͢Δ ඞཁ࣌Ҏ֎Set GameObject ActiveGimmickͰCameraΛ ඇΞΫςΟϒԽ͓ͯ͜͠͏ ҙ
Render Texture࣭ʹ͑Α͏ ߴղ૾ × ΞϯνΤΠϦΞεʹߴෛՙॲཧ ߴෛՙ ෛՙ Render Textureͷղ૾͕ߴ͘ɺΞϯνΤΠϦΞε͕Φϯʹͳ͍ͬͯΔ ߴ࣭ͳͷ΄ͲɺͦΕ͚ͩΞϓϦέʔγϣϯͷϨϯμϦϯάΛՃॲཧͤ͞
Δ͜ͱʹͳΔ ϑϨʔϜϨʔτΛ٘ਜ਼ʹΑͬΆͲߴղ૾ͰࡱӨ͍ͨ͠ͷ͕ͳ͍ݶΓɺ Render Textureͷ࣭Ίʹઃఆ͠Α͏ ʢઓंήʔϜϫʔϧυͷΤΠϜը໘256x256ͷඇΞϯνΤΠϦΞγϯάʣ ҙ
࡞ͬͨ··ͷCameraʹ ϙετϓϩηε͕ద༻͞Εͳ͍ ϓϨΠϠʔʹରͯ͠༗ޮʹͨ͠ϙετϓ ϩηεʢPPʣɺ࡞ͬͨ··ͷCamera ʹద༻͞Εͳ͍ CameraͷLayerΛ21: PostProcessing ʹ͔ͯ͠ΒɺίϯϙʔωϯτʮPost- process LayerʯΛՃɻVolume
bending/Layer͕σϑΥϧτͰۭͳ ͷͰɺಉ͘͡21: PostProcessingΛద༻ ͨͩPPRender Textureಉ༷ʹߴෛՙ ͳͷͰɺཚ༻ආ͚Δ͠ ҙ
ΧϝϥϞʔυΛىಈ͢Δͱ PlayerLocalUI͕શͯඇදࣔʹͳΔ PlayerLocalUIʹදࣔͨ͠ͷΛࣸਅʹऩΊ͍ͨͱࢥͬͯɺ OSͷεΫγϣػೳΛ͏ΑΓଞͳ͍ PlayerLocalUIͷLayerΛΓସ͑ͯUIͰݻఆ͞ΕΔ ҰํͰɺը໘Λ෴͏UIΛڧ੍తʹফ͢खஈͱͯ͑͠Δ ྫʣόάൃੜ࣌ͷۓٸղআɺRTAͷσϞԋग़ΧοτͳͲ ·ͨը໘҉సԋग़࣌ͷӅ͠ཁૉͱͯ͠ͷ్͍ͳͲΞΠσΞ…… ҙ
VR൛ͱඇVR൛clusterͷ PlayerLocalUIͷҧ͍ VR൛ͷPlayer Local UIϫʔϧυͷΦϒδΣΫτʹΊΓࠐΉՄೳੑ ͕͋Δ σεΫτοϓʗεϚϗ൛ͰΟϯυΛͬ͢ΆΓ෴ͬͯࢹΛಈ͔ ͯ͠UIϒϨͳ͍ʢը໘ʹͽͬͨΓ͍͍ͬͭͯ͘Δʣ VR൛ͰࢹͷʹUI֎͕ݟ͑ΔʴࢹΛಈ͔ͨ͠ΒUI͕͵͵ͬͱ Ε͍ͯͭͯ͘Δ
ϓϨΠϠʔͷࢹքΛΛશʹ෴͍ਚ͘͢ɺը໘தԝʹΤΠϜ༻ͷΫϩ εϔΞΛஔ͘ͱ͍ͬͨɺVR൛Ͱ͏·͍͔͘ͳ͍UIදݱ͕͋Δ ҙ
PlayerLocalUI ڥʹΑͬͯ ඇৗʹݟ͔͕͑ͨҟͳΔ UnityͰͷ੍࡞࣌ʹʮVRɾඇVR྆ํͰϓϨϏϡʔ͢Δʯ ʮGameϏϡʔͷΟϯυΞεϖΫτΛ͙Γ͙Γಈ͔ͯ͠ΈΔʯ ͳͲͰςετ͢͠ ಛʹUI੍࡞ͰAnchorͷઃఆ͕ඞਢʂ ͜ΕΛઃఆ͠ͳ͍ͱΞεϖΫτൺղ૾ʹΑͬͯUI่͕ΕΔʂ ҙ εϚϗͷڥ
UnityͷϓϨϏϡʔ ※ͳ͓͜Ε← ୯७ʹεϚϗͷ ղ૾͕͍ ͜ͱʹΑΔ
CameraͷCulling MaskΛ ΧελϚΠζ͠Α͏ CameraσϑΥϧτઃఆͰશͯͷLayer͕Ϩ ϯμϦϯά͞ΕΔ Ξόλʔͱϫʔϧυ͚ͩඳըͯ͠ɺωʔϜϓ ϨʔτಛఆͷΦϒδΣΫτͳͲΛඳըͤ͞ ͳ͍ಛघͳ͍ํ͕Ͱ͖Δ CameraͷઃఆConstraintͳͲΛ͏·͘ ͏ͱϛχϚοϓUI͕࡞ΕΔ
Layerʹ͍ͭͯ΄ͼΘΜ͞Μͷهࣄ ʮclusterϫʔϧυͰ͑ΔLayerҰཡʯ͕ৄ ͍͠ʂ TIPS
ଞʹԿ͔͋ͬͨؾ͕͢Δ͚ Ͳࢥ͍ग़ͤͳ͍ͷͰ ࣭ٙԠͱ͔λΠϜ
ϓϦϨϯμϦϯάͰ σϞγʔϯPVΛ࡞Δʢߏஈ֊ʣ 1. clusterʹΞοϓϩʔυͯ͠ΩϟϓνϟιϑτͰࡱӨ͢Δ ΧελϜΞόλʔ͕ՄࢹԽ͞ΕΔͷͰ࠷ө͑Δ͠ήʔϜ༰Λ100ˋ࠶ݱͰ͖Δ ௨ৗϫʔϧυͰΈΜͳͱ߹ྲྀɺΠϕϯτΧϝϥͰΧϝϥϫʔΫʹͩ͜ΘΔͳͲͰ͖Δ 2. Unity RecorderΛͬͯUnity্ͰࡱӨΛ͢Δ Ξόλʔදࣔ͞Εͳ͍͕ɺΧϝϥʹΞχϝʔγϣϯίϯετϨΠϯτΛ͚ͭͯɺ
ήʔϜ༰ʹ͍͕ۙclusterͰ͍͠දݱΛՃ͑ͨσϞγʔϯ͕࡞Ͱ͖Δ 3. 3DCGιϑτಈըฤूιϑτͳͲͰ࡞͢Δ ඇৗʹख͕͔͔ؒΔ͕ɺclsuterUnityͰ͍͠දݱʢΩϟϥͷදɾྲྀମԋࢉʣ ςϩοϓͳͲ͕ޮՌతʹ࡞Ͱ͖Δ ͓·͚TIPS (ͪΐ͍ٗ) (PVٗ)