Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
UIを使ったデモシーンの実装
Search
Galupeno
February 25, 2021
Design
1.3k
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
UIを使ったデモシーンの実装
第2回clusterワールド制作ゆるゆる勉強会
https://cluster.mu/e/d74953f2-e141-4398-b84b-f03d625a038b
Galupeno
February 25, 2021
More Decks by Galupeno
See All by Galupeno
クラスターゲームラボ #1ゲームの仕様を考える
galupeno
0
250
ロボのダイエット
galupeno
0
170
クラスター・カンバセイション・クラブ#8パブリック文化防衛のための緊急会議
galupeno
0
160
CCKにちょい足し!Constraintを使ってみよう スライド資料
galupeno
0
1.4k
CCKでできる!NPCのAIロジック
galupeno
0
1.5k
みんなアバターどないしとぉ?スライド
galupeno
0
110
BULLUET RUNNERS!!! presentation slide
galupeno
0
290
Other Decks in Design
See All in Design
Build for the Web, Build on the Web, Build With the Web
csswizardry
0
560
【CEDEC2026】アートとゲームデザインをつなぐVFX設計『GRANBLUE FANTASY: Relink - Endless Ragnarok』における表現と可読性の両立
cygames
PRO
1
1.3k
UI生成の鍵は要件整理 -デザインプロセスのエッセンスを プロンプト作成に取り入れよう-
abokadotyann
4
1.1k
ボタンUIの冪等性の話をしたらVimmerに刺さっちゃった
ottatto
3
1.8k
【CEDEC2026】『Shadowverse: Worlds Beyond』続編開発におけるUIデザイン・アニメーション演出の「超進化」 ~継承と挑戦を両立するデザイン手法~
cygames
PRO
3
5.2k
凡庸を落とすハーネス
hiromimaeo
2
840
Webデザイナー中田美穂_ポートフォリオ
omy
0
120
root COMPANY DECK / We are hiring!
root_recruit
4
30k
AI-Slopなデザインを生まないためのデザインプロセス戦略
takanorip
10
5.9k
Where Imagination Ends AI Begins
r5ni4
0
380
個人理念(自分の言葉)の言語化ワークショップ
kakukoki
1
210
組織で働く大人が「知らないままにやってみる」を取り戻す方法とその意味〜企業で働く実務家による実践知の言語化を事例とした考察〜
chiemitaki
1
380
Featured
See All Featured
Building Adaptive Systems
keathley
44
3.2k
AI: The stuff that nobody shows you
jnunemaker
PRO
9
990
Are puppies a ranking factor?
jonoalderson
2
3.9k
SEO Brein meetup: CTRL+C is not how to scale international SEO
lindahogenes
1
2.9k
Statistics for Hackers
jakevdp
799
230k
A designer walks into a library…
pauljervisheath
211
25k
What does AI have to do with Human Rights?
axbom
PRO
1
2.4k
Collaborative Software Design: How to facilitate domain modelling decisions
baasie
1
320
Practical Orchestrator
shlominoach
191
12k
Tips & Tricks on How to Get Your First Job In Tech
honzajavorek
1
730
Fireside Chat
paigeccino
43
4k
The Power of CSS Pseudo Elements
geoffreycrofte
82
6.6k
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ٗ)