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.2k
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
200
ロボのダイエット
galupeno
0
160
クラスター・カンバセイション・クラブ#8パブリック文化防衛のための緊急会議
galupeno
0
140
CCKにちょい足し!Constraintを使ってみよう スライド資料
galupeno
0
1.3k
CCKでできる!NPCのAIロジック
galupeno
0
1.3k
みんなアバターどないしとぉ?スライド
galupeno
0
88
BULLUET RUNNERS!!! presentation slide
galupeno
0
270
Other Decks in Design
See All in Design
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
920
Installing and Running decksh/pdfdeck
ajstarks
1
860
大きな変化の中で、わたしが向き合ったこと #もがく中堅デザイナー
bengo4com
1
1.3k
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
700
ユーザー像を「みてね」らしく可視化する 家族アルバムみてねUXリサーチチームの取り組み
mixi_design
PRO
1
240
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
t_east
1
1.4k
企業にデザインが融けたとき、デザイナーにできること。事業会社12年間の探究と葛藤 / Designship2025
visional_engineering_and_design
0
720
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
270
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
4k
SAMSUL KAMAR ABDUL RAHMAN
samsulrahman32
0
170
Marpで推しCSSスライドを作ろう! / marp-with-favorite-css
fujiemon
0
670
ブランドパーソナリティ言語化における生成AI活用の実際
h0sa
0
320
Featured
See All Featured
The Invisible Side of Design
smashingmag
302
51k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
600
Measuring & Analyzing Core Web Vitals
bluesmoon
9
620
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
The Language of Interfaces
destraynor
162
25k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
115
20k
Six Lessons from altMBA
skipperchong
29
4k
GitHub's CSS Performance
jonrohan
1032
470k
Rails Girls Zürich Keynote
gr2m
95
14k
Embracing the Ebb and Flow
colly
88
4.9k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
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ٗ)