update Open Source Docs from Roblox internal teams

Roblox · Nov 20, 2024 · d76e9dc · d76e9dc
1 parent c4a574a
commit d76e9dc
Show file tree

Hide file tree

Showing 68 changed files with 931 additions and 35 deletions.
diff --git a/content/common/navigation/engine/tutorials.yaml b/content/common/navigation/engine/tutorials.yaml
@@ -30,14 +30,16 @@ navigation:
         path: /tutorials/use-case-tutorials/modeling/assembling-modular-environments
   - title: User Interfaces
     section:
-      - title: Creating Score Bars
-        path: /tutorials/use-case-tutorials/ui/creating-a-score-bar
+      - title: Creating HUD Meters
+        path: /tutorials/use-case-tutorials/ui/creating-hud-meters
       - title: Creating Interactive Buttons
         path: /tutorials/use-case-tutorials/ui/interactive-buttons
       - title: Creating Proximity Prompts
         path: /tutorials/use-case-tutorials/ui/proximity-prompts
       - title: Creating Part Interfaces
         path: /tutorials/use-case-tutorials/ui/interfaces-on-parts
+      - title: Creating Score Bars
+        path: /tutorials/use-case-tutorials/ui/creating-a-score-bar
   - title: Audio
     section:
       - title: Playing Background Music

diff --git a/content/en-us/assets/engine-api/enums/ScreenInsets/CoreUISafeInsets.png b/content/en-us/assets/engine-api/enums/ScreenInsets/CoreUISafeInsets.png
diff --git a/content/en-us/assets/engine-api/enums/ScreenInsets/DeviceSafeInsets.png b/content/en-us/assets/engine-api/enums/ScreenInsets/DeviceSafeInsets.png
diff --git a/content/en-us/assets/engine-api/enums/ScreenInsets/Inset-Regions-All.png b/content/en-us/assets/engine-api/enums/ScreenInsets/Inset-Regions-All.png
diff --git a/content/en-us/assets/engine-api/enums/ScreenInsets/None.png b/content/en-us/assets/engine-api/enums/ScreenInsets/None.png
diff --git a/content/en-us/assets/engine-api/enums/ScreenInsets/Top-Bar-Cutout.png b/content/en-us/assets/engine-api/enums/ScreenInsets/Top-Bar-Cutout.png
diff --git a/content/en-us/assets/engine-api/enums/ScreenInsets/TopbarSafeInsets.png b/content/en-us/assets/engine-api/enums/ScreenInsets/TopbarSafeInsets.png
diff --git a/content/en-us/assets/studio/general/Editor-Window-Emulation-Options.jpg b/content/en-us/assets/studio/general/Editor-Window-Emulation-Options.jpg
diff --git a/content/en-us/assets/studio/general/Editor-Window-Emulation-Options.png b/content/en-us/assets/studio/general/Editor-Window-Emulation-Options.png
diff --git a/content/en-us/assets/studio/general/Test-Tab-Emulation-Device-With-Menu.png b/content/en-us/assets/studio/general/Test-Tab-Emulation-Device-With-Menu.png
diff --git a/content/en-us/assets/studio/general/Test-Tab-Emulation-Device.png b/content/en-us/assets/studio/general/Test-Tab-Emulation-Device.png
diff --git a/content/en-us/assets/studio/properties/ScreenGui-ScreenInsets-DeviceSafeInsets.png b/content/en-us/assets/studio/properties/ScreenGui-ScreenInsets-DeviceSafeInsets.png
diff --git a/content/en-us/assets/tutorials/UCT-Overview/Creating-HUD-Meters.png b/content/en-us/assets/tutorials/UCT-Overview/Creating-HUD-Meters.png
diff --git a/...nt/en-us/assets/tutorials/creating-hud-meters/Default-Health-Meter-Disabled.png b/...nt/en-us/assets/tutorials/creating-hud-meters/Default-Health-Meter-Disabled.png
diff --git a/content/en-us/assets/tutorials/creating-hud-meters/Default-Health-Meter.png b/content/en-us/assets/tutorials/creating-hud-meters/Default-Health-Meter.png
diff --git a/content/en-us/assets/tutorials/creating-hud-meters/Device-Emulator-Phone.png b/content/en-us/assets/tutorials/creating-hud-meters/Device-Emulator-Phone.png
diff --git a/content/en-us/assets/tutorials/creating-hud-meters/Device-Emulator-Tablet.png b/content/en-us/assets/tutorials/creating-hud-meters/Device-Emulator-Tablet.png
diff --git a/content/en-us/assets/tutorials/creating-hud-meters/Emulation-Phone-Constrained.png b/content/en-us/assets/tutorials/creating-hud-meters/Emulation-Phone-Constrained.png
diff --git a/...ent/en-us/assets/tutorials/creating-hud-meters/Emulation-Tablet-Constrained.png b/...ent/en-us/assets/tutorials/creating-hud-meters/Emulation-Tablet-Constrained.png
diff --git a/...t/en-us/assets/tutorials/creating-hud-meters/Emulation-Tablet-Unconstrained.png b/...t/en-us/assets/tutorials/creating-hud-meters/Emulation-Tablet-Unconstrained.png
diff --git a/content/en-us/assets/tutorials/creating-hud-meters/Intro.png b/content/en-us/assets/tutorials/creating-hud-meters/Intro.png
diff --git a/content/en-us/assets/tutorials/creating-hud-meters/Meter-Change-Damage-Effect.mp4 b/content/en-us/assets/tutorials/creating-hud-meters/Meter-Change-Damage-Effect.mp4
diff --git a/content/en-us/assets/tutorials/creating-hud-meters/Meter-Change-Static.mp4 b/content/en-us/assets/tutorials/creating-hud-meters/Meter-Change-Static.mp4
diff --git a/content/en-us/assets/tutorials/creating-hud-meters/Meter-Change-Tweened.mp4 b/content/en-us/assets/tutorials/creating-hud-meters/Meter-Change-Tweened.mp4
diff --git a/content/en-us/assets/tutorials/creating-hud-meters/Meter-CoreUISafeInsets.png b/content/en-us/assets/tutorials/creating-hud-meters/Meter-CoreUISafeInsets.png
diff --git a/content/en-us/assets/tutorials/creating-hud-meters/Meter-Design-Components.png b/content/en-us/assets/tutorials/creating-hud-meters/Meter-Design-Components.png
diff --git a/content/en-us/assets/tutorials/creating-hud-meters/Meter-Design-Icon-Finalized.png b/content/en-us/assets/tutorials/creating-hud-meters/Meter-Design-Icon-Finalized.png
diff --git a/content/en-us/assets/tutorials/creating-hud-meters/Meter-Design-Icon-Large.png b/content/en-us/assets/tutorials/creating-hud-meters/Meter-Design-Icon-Large.png
diff --git a/content/en-us/assets/tutorials/creating-hud-meters/Meter-Design-Icon-Preview.png b/content/en-us/assets/tutorials/creating-hud-meters/Meter-Design-Icon-Preview.png
diff --git a/.../en-us/assets/tutorials/creating-hud-meters/Meter-Design-Inner-Fill-Colored.png b/.../en-us/assets/tutorials/creating-hud-meters/Meter-Design-Inner-Fill-Colored.png
diff --git a/.../en-us/assets/tutorials/creating-hud-meters/Meter-Design-Inner-Fill-Preview.png b/.../en-us/assets/tutorials/creating-hud-meters/Meter-Design-Inner-Fill-Preview.png
diff --git a/.../en-us/assets/tutorials/creating-hud-meters/Meter-Design-Inner-Fill-Resized.png b/.../en-us/assets/tutorials/creating-hud-meters/Meter-Design-Inner-Fill-Resized.png
diff --git a/.../en-us/assets/tutorials/creating-hud-meters/Meter-Design-Inner-Fill-Rounded.png b/.../en-us/assets/tutorials/creating-hud-meters/Meter-Design-Inner-Fill-Rounded.png
diff --git a/...en-us/assets/tutorials/creating-hud-meters/Meter-Design-Parent-Frame-Anchor.png b/...en-us/assets/tutorials/creating-hud-meters/Meter-Design-Parent-Frame-Anchor.png
diff --git a/...en-us/assets/tutorials/creating-hud-meters/Meter-Design-Parent-Frame-Opaque.png b/...en-us/assets/tutorials/creating-hud-meters/Meter-Design-Parent-Frame-Opaque.png
diff --git a/...n-us/assets/tutorials/creating-hud-meters/Meter-Design-Parent-Frame-Preview.png b/...n-us/assets/tutorials/creating-hud-meters/Meter-Design-Parent-Frame-Preview.png
diff --git a/...assets/tutorials/creating-hud-meters/Meter-Design-Parent-Frame-Repositioned.png b/...assets/tutorials/creating-hud-meters/Meter-Design-Parent-Frame-Repositioned.png
diff --git a/...n-us/assets/tutorials/creating-hud-meters/Meter-Design-Parent-Frame-Resized.png b/...n-us/assets/tutorials/creating-hud-meters/Meter-Design-Parent-Frame-Resized.png
diff --git a/...n-us/assets/tutorials/creating-hud-meters/Meter-Design-Parent-Frame-Rounded.png b/...n-us/assets/tutorials/creating-hud-meters/Meter-Design-Parent-Frame-Rounded.png
diff --git a/...n-us/assets/tutorials/creating-hud-meters/Meter-Design-Parent-Frame-Stroked.png b/...n-us/assets/tutorials/creating-hud-meters/Meter-Design-Parent-Frame-Stroked.png
diff --git a/content/en-us/assets/tutorials/creating-hud-meters/Meter-Design-Parent-Frame.png b/content/en-us/assets/tutorials/creating-hud-meters/Meter-Design-Parent-Frame.png
diff --git a/content/en-us/assets/tutorials/creating-hud-meters/Meter-DeviceSafeInsets.png b/content/en-us/assets/tutorials/creating-hud-meters/Meter-DeviceSafeInsets.png
diff --git a/content/en-us/assets/tutorials/creating-hud-meters/ScreenGui-Axis-Ranges.png b/content/en-us/assets/tutorials/creating-hud-meters/ScreenGui-Axis-Ranges.png
diff --git a/content/en-us/assets/tutorials/creating-hud-meters/ScreenGui-With-Padding.png b/content/en-us/assets/tutorials/creating-hud-meters/ScreenGui-With-Padding.png
diff --git a/...ng-hud-meters/StarterGui-HUDContainer-MeterBar-Icon-UIAspectRatioConstraint.png b/...ng-hud-meters/StarterGui-HUDContainer-MeterBar-Icon-UIAspectRatioConstraint.png
diff --git a/.../tutorials/creating-hud-meters/StarterGui-HUDContainer-MeterBar-Icon-Values.png b/.../tutorials/creating-hud-meters/StarterGui-HUDContainer-MeterBar-Icon-Values.png
diff --git a/.../assets/tutorials/creating-hud-meters/StarterGui-HUDContainer-MeterBar-Icon.png b/.../assets/tutorials/creating-hud-meters/StarterGui-HUDContainer-MeterBar-Icon.png
diff --git a/...als/creating-hud-meters/StarterGui-HUDContainer-MeterBar-InnerFill-UICorner.png b/...als/creating-hud-meters/StarterGui-HUDContainer-MeterBar-InnerFill-UICorner.png
diff --git a/...ts/tutorials/creating-hud-meters/StarterGui-HUDContainer-MeterBar-InnerFill.png b/...ts/tutorials/creating-hud-meters/StarterGui-HUDContainer-MeterBar-InnerFill.png
diff --git a/...ets/tutorials/creating-hud-meters/StarterGui-HUDContainer-MeterBar-UICorner.png b/...ets/tutorials/creating-hud-meters/StarterGui-HUDContainer-MeterBar-UICorner.png
diff --git a/...reating-hud-meters/StarterGui-HUDContainer-MeterBar-UISizeConstraint-Values.png b/...reating-hud-meters/StarterGui-HUDContainer-MeterBar-UISizeConstraint-Values.png
diff --git a/...rials/creating-hud-meters/StarterGui-HUDContainer-MeterBar-UISizeConstraint.png b/...rials/creating-hud-meters/StarterGui-HUDContainer-MeterBar-UISizeConstraint.png
diff --git a/...ets/tutorials/creating-hud-meters/StarterGui-HUDContainer-MeterBar-UIStroke.png b/...ets/tutorials/creating-hud-meters/StarterGui-HUDContainer-MeterBar-UIStroke.png
diff --git a/...en-us/assets/tutorials/creating-hud-meters/StarterGui-HUDContainer-MeterBar.png b/...en-us/assets/tutorials/creating-hud-meters/StarterGui-HUDContainer-MeterBar.png
diff --git a/...sets/tutorials/creating-hud-meters/StarterGui-HUDContainer-UIPadding-Values.png b/...sets/tutorials/creating-hud-meters/StarterGui-HUDContainer-UIPadding-Values.png
diff --git a/...n-us/assets/tutorials/creating-hud-meters/StarterGui-HUDContainer-UIPadding.png b/...n-us/assets/tutorials/creating-hud-meters/StarterGui-HUDContainer-UIPadding.png
diff --git a/content/en-us/assets/tutorials/creating-hud-meters/StarterGui-HUDContainer.png b/content/en-us/assets/tutorials/creating-hud-meters/StarterGui-HUDContainer.png
diff --git a/...creating-hud-meters/StarterPlayer-StarterCharacterScripts-UpdateCustomMeter.png b/...creating-hud-meters/StarterPlayer-StarterCharacterScripts-UpdateCustomMeter.png
diff --git a/.../assets/tutorials/creating-hud-meters/StarterPlayer-StarterCharacterScripts.png b/.../assets/tutorials/creating-hud-meters/StarterPlayer-StarterCharacterScripts.png
diff --git a/...eating-hud-meters/StarterPlayer-StarterPlayerScripts-HideDefaultHealthMeter.png b/...eating-hud-meters/StarterPlayer-StarterPlayerScripts-HideDefaultHealthMeter.png
diff --git a/...-us/assets/tutorials/creating-hud-meters/StarterPlayer-StarterPlayerScripts.png b/...-us/assets/tutorials/creating-hud-meters/StarterPlayer-StarterPlayerScripts.png
diff --git a/content/en-us/assets/tutorials/landing/UI.png b/content/en-us/assets/tutorials/landing/UI.png
diff --git a/content/en-us/includes/studio/device-emulator.md b/content/en-us/includes/studio/device-emulator.md
@@ -4,8 +4,8 @@ title: include
 
 The **Device** emulator lets you emulate various devices directly in Studio, providing insight on how controls operate on a mobile device or how [on-screen UI](../../ui/on-screen-containers.md) displays on different screens and aspect ratios.
 
-<img src="../assets/studio/general/Test-Tab-Emulation-Device.png" width="840" alt="Device button indicated in Test tab" />
+<img src="../assets/studio/general/Test-Tab-Emulation-Device.png" width="800" alt="Device button indicated in Test tab" />
 
-In emulation mode, you can select devices from the **Device Selector** dropdown menu above the 3D viewport to emulate less powerful devices and test [streaming-enabled](../../workspace/streaming.md) experiences where 3D content dynamically loads/unloads based on available memory. You can also adjust the **view&nbsp;size** and change the **device orientation** between landscape and portrait modes.
+In emulation mode, you can select devices from the **device selector** dropdown menu above the 3D viewport to emulate less powerful devices and test [streaming-enabled](../../workspace/streaming.md) experiences where 3D content dynamically loads/unloads based on available memory. You can also adjust the **view&nbsp;size** and change the **orientation** between landscape and portrait modes.
 
-<img src="../assets/studio/general/Editor-Window-Emulation-Options.jpg" width="800" alt="Emulation options above the 3D viewport" />
+<img src="../assets/studio/general/Editor-Window-Emulation-Options.png" width="840" alt="Emulation options above the 3D viewport" />
diff --git a/content/en-us/tutorials/index.md b/content/en-us/tutorials/index.md
@@ -196,10 +196,10 @@ While many creators focus on a single area, the following tutorials walk you thr
    <Typography variant='h4'>UI</Typography>
    <Typography variant='body1' >
      <ul>
-     <li>Learn how to display <a href="./use-case-tutorials/ui/interfaces-on-parts.md">informative UI</a> in the 3D space</li>
+		 <li>Learn how to combine UI objects with scripts to create a [custom health meter](./use-case-tutorials/ui/creating-hud-meters.md)</li>
      <li>Learn how to create <a href="./use-case-tutorials/ui/proximity-prompts.md">interactive prompts</a> that only appear as players approach 3D objects</li>
      <li>Learn how to create <a href="./use-case-tutorials/ui/interactive-buttons.md">2D buttons</a> on the player's screen for actions and menus</li>
-     <li>Learn how to combine <a href="./use-case-tutorials/ui/creating-a-score-bar.md">UI objects with scripts</a> to display player information</li>
+		 <li>Learn how to display <a href="./use-case-tutorials/ui/interfaces-on-parts.md">informative UI</a> in the 3D space</li>
      </ul></Typography>
      <div style={{marginTop:16}}>
      </div>