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
2026-04-06 CMU School of Design "Vision-Driven Design"
ishii_mit
0
150
Claudeもくもく会、はじめませんか?
yusukeiyoda
0
220
デザイナーがいない部署にハーネスを設計する
kenichiota0711
4
3.4k
Decksh keywords
ajstarks
0
130
(2026 FlowCon Keynote) Sociotechnical Architecture Finding Flow
xinyao
0
120
染み出し好きの、 染み出しコントロール論
mukai_takeru
0
460
少人数チームで_使われるプロダクトにたどり着くための_デザインハーネス.pdf
nishame
1
1.5k
The ISO 25964 standard on Information and documentation — Thesauri and interoperability with other vocabularies
accessinnovations
0
120
怖くないアクセシビリティ -カウンターカルチャーとしてのアッカン東京-
securecat
1
270
デザインハーネスをつくるハーネス|誰でも自社らしいデザインをつくれるようにする仕組み
katakai
0
830
富山デザイン勉強会_ブラッシュアップデザイン.pdf
keita_yoshikawa
0
120
Bet AI Day 2026丨デザインハーネス:専門職の判断基準をコードのように運用する
layerx
PRO
4
4.3k
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
72
12k
Groundhog Day: Seeking Process in Gaming for Health
codingconduct
0
350
A Modern Web Designer's Workflow
chriscoyier
699
190k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
aleyda
2
12k
How to build a perfect <img>
jonoalderson
1
6k
Rails Girls Zürich Keynote
gr2m
96
14k
Are puppies a ranking factor?
jonoalderson
2
3.9k
Introduction to Domain-Driven Design and Collaborative software design
baasie
1
990
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
360
30k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
1k
Documentation Writing (for coders)
carmenintech
77
5.5k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
6.1k
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ٗ)