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
エンジニアでも捗る デザイナー的思考入門(bitA Edit 新ver)
tinykitten
1
620
Claudeもくもく会、はじめませんか?
yusukeiyoda
0
250
Typographie et intégration web
goetter
0
150
広い関与の可能性に どう向き合うのか? 私たちは。|Timee MarketingDesign 2026-06-18
bebe
0
1.1k
2026/6/26 第6回韓日リビングラボネットワークフォーラムin世宗 ー未来を作るリビングラボー アジアの社会システム転換に向けたリビングラボの可能性
a2k
2
120
【2026】ポートフォリオ_大坪明日香
tsubo52
0
120
SERVICE PAMPHLET
mhand01
0
4.2k
富山デザイン勉強会_生成AIを使ったデザイン制作2026最新版.pdf
keita_yoshikawa
0
150
明日から真似できる、AIでデザインシステムを活用する方法
vivion
0
800
柔軟性のあるUIで、多くの環境でアプリを活躍させる/iOSDC26
noppefoxwolf
0
1.4k
使いたいときだけ使う 「道具のようなアプリケーション」を考える
fumink7
0
130
[Unity] VAT×VFX Graphがいま個人的にアツイという話
sakiyama
0
110
Featured
See All Featured
The Curse of the Amulet
leimatthew05
3
15k
GraphQLの誤解/rethinking-graphql
sonatard
75
12k
The #1 spot is gone: here's how to win anyway
tamaranovitovic
4
1.2k
Avoiding the “Bad Training, Faster” Trap in the Age of AI
tmiket
0
260
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
aleyda
2
12k
Navigating the moral maze — ethical principles for Al-driven product design
skipperchong
2
610
Designing Dashboards & Data Visualisations in Web Apps
destraynor
232
55k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
What the history of the web can teach us about the future of AI
inesmontani
PRO
2
730
Art, The Web, and Tiny UX
lynnandtonic
304
22k
The Director’s Chair: Orchestrating AI for Truly Effective Learning
tmiket
1
320
AI: The stuff that nobody shows you
jnunemaker
PRO
10
1.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ٗ)