@@ -359,13 +359,13 @@ The following is a list of common 3D art resources ordered by subject, as well a
Environment, Lighting, and Effects
-Environmental Art Curriculum
-Assembling Modular Environments
-Lighting with Props
-In-Game Sounds
-Enhancing Outdoor Environments with Future Lighting
-Basic Particle Effects
-Custom Particle Effects
+Environmental Art Curriculum
+Assembling Modular Environments
+Lighting with Props
+In-Game Sounds
+Enhancing Outdoor Environments with Future Lighting
+Basic Particle Effects
+Custom Particle EffectsCustom Skyboxes 101 (Staff)
diff --git a/content/en-us/reference/engine/classes/CollectionService.yaml b/content/en-us/reference/engine/classes/CollectionService.yaml
index b48bdf060..310197310 100644
--- a/content/en-us/reference/engine/classes/CollectionService.yaml
+++ b/content/en-us/reference/engine/classes/CollectionService.yaml
@@ -128,7 +128,7 @@ methods:
fires under two conditions:
- The tag is assigned to an instance within the `Class.DataModel` (game)
- using `Class.CollectionService:AddTag()`.
+ using `Class.CollectionService:AddTag()` or `Class.Instance:AddTag()`.
- An instance with the given tag is added as a descendant of the
`Class.DataModel`, e.g. by setting `Class.Instance.Parent` or similar.
@@ -165,7 +165,7 @@ methods:
fires under two conditions:
- The tag is removed from an instance within the `Class.DataModel` (game)
- using `Class.CollectionService:RemoveTag()`.
+ using `Class.CollectionService:RemoveTag()` or `Class.Instance:RemoveTag()`.
- An instance with the given tag is removed as a descendant of the
`Class.DataModel`, e.g. by un-setting `Class.Instance.Parent` or
similar.
diff --git a/content/en-us/reference/engine/libraries/string.yaml b/content/en-us/reference/engine/libraries/string.yaml
index f54ac78fc..fd1f34086 100644
--- a/content/en-us/reference/engine/libraries/string.yaml
+++ b/content/en-us/reference/engine/libraries/string.yaml
@@ -676,10 +676,10 @@ functions:
code_samples:
- name: string.sub
summary: |
- Returns the substring of `s` that starts at `i` and continues until j. `i`
+ Returns the substring of `s` that starts at `i` and continues until and including `j`. `i`
and `j` can be negative. `i` defaults to 1 and `j` defaults to `-1`.
description: |
- Returns the substring of `s` that starts at `i` and continues until j. `i`
+ Returns the substring of `s` that starts at `i` and continues until and including `j`. `i`
and `j` can be negative. `i` defaults to 1 and `j` defaults to `-1`.
parameters:
- name: s
diff --git a/content/en-us/reference/engine/libraries/utf8.yaml b/content/en-us/reference/engine/libraries/utf8.yaml
index 9e871c957..5c5f872b3 100644
--- a/content/en-us/reference/engine/libraries/utf8.yaml
+++ b/content/en-us/reference/engine/libraries/utf8.yaml
@@ -161,7 +161,7 @@ functions:
default: 1
summary: ''
returns:
- - type: int
+ - type: int?
summary: ''
tags:
code_samples:
diff --git a/content/en-us/scripting/index.md b/content/en-us/scripting/index.md
index c39bf88be..82d6ddece 100644
--- a/content/en-us/scripting/index.md
+++ b/content/en-us/scripting/index.md
@@ -8,7 +8,7 @@ Scripts are plain text files that let you add custom, dynamic behavior to your e
This section is for creators with some coding experience who want to know the specifics of scripting in Roblox.
-If you've never written code before and want an introduction to programming, see [Coding Fundamentals](../tutorials/fundamentals/coding-1/coding-fundamentals.md), which covers concepts like variables, functions, conditionals, loops, and arrays. For a more guided, step-by-step approach, see the [Basic Gameplay](../tutorials/scripting/basic-scripting/intro-to-scripting.md) tutorial.
+If you've never written code before and want an introduction to programming, see [Coding Fundamentals](../tutorials/fundamentals/coding-1/coding-fundamentals.md), which covers concepts like variables, functions, conditionals, loops, and arrays. For a more guided, step-by-step approach, see the [Basic Gameplay](../tutorials/use-case-tutorials/scripting/basic-scripting/intro-to-scripting.md) tutorial.
## Luau
diff --git a/content/en-us/tutorials/core/building/apply-polished-assets.md b/content/en-us/tutorials/curriculums/core/building/apply-polished-assets.md
similarity index 72%
rename from content/en-us/tutorials/core/building/apply-polished-assets.md
rename to content/en-us/tutorials/curriculums/core/building/apply-polished-assets.md
index da3e5722f..ae939b483 100644
--- a/content/en-us/tutorials/core/building/apply-polished-assets.md
+++ b/content/en-us/tutorials/curriculums/core/building/apply-polished-assets.md
@@ -21,32 +21,32 @@ Asset libraries are collections of assets you can place into a central location
-Each of these 3D assets are either a single `Class.MeshPart` object, or a `Class.Model` object that stores multiple `Class.MeshPart` objects, and they use custom materials or physically-based rendering (PBR) textures that allow you to represent realistic shading and lighting. For more information on this process, see [Materials - Custom Materials](../../../parts/materials.md#custom-materials) and [PBR Textures](../../../art/modeling/surface-appearance.md).
+Each of these 3D assets are either a single `Class.MeshPart` object, or a `Class.Model` object that stores multiple `Class.MeshPart` objects, and they use custom materials or physically-based rendering (PBR) textures that allow you to represent realistic shading and lighting. For more information on this process, see [Materials - Custom Materials](../../../../parts/materials.md#custom-materials) and [PBR Textures](../../../../art/modeling/surface-appearance.md).
You can add the library to your inventory within Studio by clicking the **Add to Inventory** link in the following component. Once assets are within your inventory, you can reuse them in any project on the platform.
@@ -57,21 +57,21 @@ To get the asset library from your inventory into your experience:
1. In the menu bar, select the **View** tab.
2. In the **Show** section, click **Toolbox**. The **Toolbox** window displays.
-
+
3. In the **Toolbox** window, click the **Inventory** tab. The **My Models** sort displays.
-
+
4. Click the **Core Building and Scripting** tile. The library displays in the viewport, but some of the meshes do not display the correct texture. This is because their materials are set to custom variants that are not yet in `Class.MaterialService`.
-
+
5. In the **Explorer** window, select **Moss_Lumpy_A** and **Moss_Strata_Noisy_A** in the sample asset library, then drag them into the **MaterialService** container. The asset library updates to display the correct materials.
-
+
-
+
## Continue Organization Structure
@@ -83,7 +83,7 @@ To add in additional container objects to your organization structure:
2. Rename the folders **Platforms** and **Mountains**, respectively.
3. Insert a new model into the **Platforms** folder for each sea stack platform in your environment, and rename them according to sea stack level naming you created in [Greybox a Playable Area](../../core/building/greybox-a-playable-area.md). For example, the sample experience has 18 individual model containers for every platform in the environment.
-
+
## Apply Asset Library
@@ -95,10 +95,10 @@ Now that you have an organizational structure to contain your new assets, you ca
-
+
-
+
@@ -111,7 +111,7 @@ The sample asset library includes two types of platforms you can use for the top
Both platform types are `Class.Model` objects that include two `Class.MeshPart` objects.
-
+
@@ -124,11 +124,11 @@ To apply the asset library to your platforms:
1. In the **Platforms** folder, paste **PlatformA** into the **Level_1** model.
1. In the **Home** tab, use the **Move** and **Scale** tools to position and scale the model to the size of your first placeholder sea stack platform.
-
+
1. Repeat this process, adding and configuring either a **PlatformA** or **PlatformB** asset to the top of each placeholder sea stack platform.
-
+
@@ -144,7 +144,7 @@ To exactly recreate the sea stack platforms within the sample [Island Jump - Fin
1. Set **Origin.Position** to **-30, 3, 9**.
1. Set **Scale** to **2.2**.
-
+
4. Repeat this process, adding and configuring the following **PlatformA** assets into their respective sea stack platform models:
@@ -180,7 +180,7 @@ To exactly recreate the sea stack platforms within the sample [Island Jump - Fin
-
+
5. Add and configure the following **PlatformB** assets into their respective sea stack platform models:
@@ -266,7 +266,7 @@ To exactly recreate the sea stack platforms within the sample [Island Jump - Fin
-
+
@@ -282,10 +282,10 @@ Both platform types are `Class.MeshPart` objects.
@@ -298,11 +298,11 @@ To apply the asset library to your sea stacks:
1. In the **Platforms** folder, paste **SeaStackMesh** into one of your level models.
1. In the **Home** tab, use the **Move**, **Scale**, and **Rotate** tools to position, scale, and rotate the mesh until it is the length of your placeholder sea stack. If necessary, use more than one instance of the **SeaStackMesh** mesh.
-
+
1. Repeat this process, adding and configuring more **SeaStackMesh** and **SeaStackCaveMesh** meshes for each respective sea stack and tunnel in your experience.
-
+
1. Delete your placeholder greybox sea stack platforms.
@@ -342,7 +342,7 @@ To exactly recreate the sea stacks within the sample [Island Jump - Final](https
-
+
4. Repeat this process, adding and configuring the following **SeaStackMesh** asset into the **Level_3b** model:
@@ -363,7 +363,7 @@ To exactly recreate the sea stacks within the sample [Island Jump - Final](https
-
+
5. Add and configure the following **SeaStackMesh** asset into the **Level_3c** model:
@@ -384,7 +384,7 @@ To exactly recreate the sea stacks within the sample [Island Jump - Final](https
-
+
6. Add and configure the following **SeaStackMesh** assets into the **Level_4a** model:
@@ -410,7 +410,7 @@ To exactly recreate the sea stacks within the sample [Island Jump - Final](https
-
+
7. Add and configure the following assets into the **Level_4b** model:
@@ -445,7 +445,7 @@ To exactly recreate the sea stacks within the sample [Island Jump - Final](https
-
+
8. Add and configure the following **SeaStackMesh** asset into the **Level_4c** model:
@@ -466,7 +466,7 @@ To exactly recreate the sea stacks within the sample [Island Jump - Final](https
-
+
9. Add and configure the following **SeaStackMesh** assets into the **Level_4d** model:
@@ -497,7 +497,7 @@ To exactly recreate the sea stacks within the sample [Island Jump - Final](https
-
+
10. Add and configure the following **SeaStackMesh** assets into the **Level_4e** model:
@@ -523,7 +523,7 @@ To exactly recreate the sea stacks within the sample [Island Jump - Final](https
-
+
11. Add and configure the following **SeaStackMesh** assets into the **Level_5a** model:
@@ -554,7 +554,7 @@ To exactly recreate the sea stacks within the sample [Island Jump - Final](https
-
+
12. Add and configure the following **SeaStackMesh** assets into the **Level_5b** model:
@@ -600,7 +600,7 @@ To exactly recreate the sea stacks within the sample [Island Jump - Final](https
-
+
13. Add and configure the following **SeaStackMesh** assets into the **Level_5c** model:
@@ -646,7 +646,7 @@ To exactly recreate the sea stacks within the sample [Island Jump - Final](https
-
+
14. Add and configure the following **SeaStackMesh** assets into the **Level_5d** model:
@@ -677,7 +677,7 @@ To exactly recreate the sea stacks within the sample [Island Jump - Final](https
-
+
15. Add and configure the following **SeaStackMesh** assets into the **Level_6a** model:
@@ -708,7 +708,7 @@ To exactly recreate the sea stacks within the sample [Island Jump - Final](https
-
+
16. Add and configure the following **SeaStackMesh** assets into the **Level_6b** model:
@@ -759,7 +759,7 @@ To exactly recreate the sea stacks within the sample [Island Jump - Final](https
-
+
17. Add and configure the following **SeaStackMesh** assets into the **Level_6c** model:
@@ -805,7 +805,7 @@ To exactly recreate the sea stacks within the sample [Island Jump - Final](https
-
+
18. Add and configure the following **SeaStackMesh** assets into the **Level_7a** model:
@@ -846,7 +846,7 @@ To exactly recreate the sea stacks within the sample [Island Jump - Final](https
-
+
19. Delete your placeholder greybox sea stack platforms.
@@ -859,7 +859,7 @@ The sample asset library includes a single **Coin** asset that's a `Class.MeshPa
You can place these objects anywhere you set your initial placeholder coins, or modify their position and orientation values where you think they will be more useful to players.
-
+
@@ -871,7 +871,7 @@ To apply the asset library to your coins:
1. In the **Home** tab, use the **Move** and **Rotate** tools to position and rotate the mesh until it's at the same configuration of first your placeholder coin.
1. Repeat this process, adding and configuring **coin** assets wherever you set your initial coin placeholder objects.
-
+
1. Delete your placeholder coins.
@@ -1030,7 +1030,7 @@ To exactly recreate the coins within the sample [Island Jump - Final](https://ww
-
+
5. Delete your placeholder coins.
@@ -1041,7 +1041,7 @@ To exactly recreate the coins within the sample [Island Jump - Final](https://ww
The sample asset library includes a single **MountainMesh** asset you can use to decorate the background of your world, hide the edge of your water terrain, and enclose the environment around your sea stack platforms. By rotating and scaling individual mountains, the asset's material blends together with neighboring mountains. This technique effectively reduces players' ability to detect that the whole mountain range is just one repeating mesh.
-
+
@@ -1053,7 +1053,7 @@ To apply the asset library to your mountains:
1. In the **Home** tab, use the **Move**, **Scale**, and **Rotate** tools to position, scale, and rotate the mesh along the border of your water terrain.
1. Repeat this process, adding and configuring mountains of different sizes and rotations until the border of your water terrain has cover.
-
+
@@ -1155,7 +1155,7 @@ To exactly recreate the mountains within the sample [Island Jump - Final](https:
-
+
@@ -1168,12 +1168,12 @@ To playtest your experience:
1. In the menu bar, click the **Play** button. Studio enters playtest mode.
-
+
1. Play your experience and try to reach the flare at the top of the stacks.
1. When you're done, navigate back to the menu bar, and click the **Stop** button. Studio exits playtest mode.
-
+
Congratulations on completing the Core Curriculum! Now that you have experience creating a simple experience from start to finish, you can extend your project with new gameplay features or additional levels, explore Studio's additional [features](../../../platform.md), or follow additional tutorial curricula, such as the [Environmental Art Curriculum](../../environmental-art/index.md) that teaches you how to create a high-quality laser tag environment. Happy creating!
diff --git a/content/en-us/tutorials/core/building/create-a-project.md b/content/en-us/tutorials/curriculums/core/building/create-a-project.md
similarity index 77%
rename from content/en-us/tutorials/core/building/create-a-project.md
rename to content/en-us/tutorials/curriculums/core/building/create-a-project.md
index 75b35ead5..9549b1a18 100644
--- a/content/en-us/tutorials/core/building/create-a-project.md
+++ b/content/en-us/tutorials/curriculums/core/building/create-a-project.md
@@ -17,11 +17,11 @@ To create a project with the **Baseplate** template:
1. In the vertical navigation bar, select the **New** tab. All templates display.
1. Select the **Baseplate** template. Studio opens a new experience.
-
+
1. In the **Explorer** window, right-click the **Baseplate** object. A contextual menu displays.
1. Select **Delete**. The viewport displays an empty world with a spawn location in the middle.
-
+
In the next section of the tutorial, you will learn how to use the Terrain Editor to create an island environment around the spawn location.
diff --git a/content/en-us/tutorials/core/building/create-an-environment-with-terrain.md b/content/en-us/tutorials/curriculums/core/building/create-an-environment-with-terrain.md
similarity index 68%
rename from content/en-us/tutorials/core/building/create-an-environment-with-terrain.md
rename to content/en-us/tutorials/curriculums/core/building/create-an-environment-with-terrain.md
index 5108635d1..211cd793a 100644
--- a/content/en-us/tutorials/core/building/create-an-environment-with-terrain.md
+++ b/content/en-us/tutorials/curriculums/core/building/create-an-environment-with-terrain.md
@@ -9,7 +9,7 @@ prev: /tutorials/core/building/create-a-project
-**Creating an environment with terrain** allows you to generate and customize organic materials within the 3D space that look and behave like natural materials from the real world. Using tools within the [Terrain Editor](../../../studio/terrain-editor.md), this section of the tutorial teaches you how to generate and sculpt terrain for a small island where players spawn and navigate to the first few platforms of your experience.
+**Creating an environment with terrain** allows you to generate and customize organic materials within the 3D space that look and behave like natural materials from the real world. Using tools within the [Terrain Editor](../../../../studio/terrain-editor.md), this section of the tutorial teaches you how to generate and sculpt terrain for a small island where players spawn and navigate to the first few platforms of your experience.
Before you begin, it's important to note that sculpting terrain is an art form, and it's difficult to exactly recreate brush strokes and subtle material edits. As long as your terrain meets the needs of your own experience, it's normal and expected for your environment to look and feel different from the sample [Island Jump](https://www.roblox.com/games/14239096301/) experience.
@@ -21,17 +21,17 @@ To create the island:
1. In the menu bar, navigate to the **Home** tab, then click the **Terrain Editor** button. The **Terrain Editor** window displays.
-
+
1. In the **Terrain Editor** window, click the **Edit** tab, then the **Draw** button.
-
+
1. In the **Brush Settings** and **Material Settings** sections, keep all default setting except for the following:
-
+
- Set **Base Size** to **32**.
@@ -42,7 +42,7 @@ To create the island:
1. In the viewport, click near the spawn location in the viewport. A sphere of sand material displays.
@@ -57,13 +57,13 @@ To shape the island:
1. In the **Terrain Editor** window, click the **Flatten** button.
-
+
1. In the **Brush Settings** section, keep all default setting except for the following:
-
+
- Set **Base Size** to **18**.
@@ -76,22 +76,22 @@ To shape the island:
top.
1. Navigate back to the **Terrain Editor** window, then click the **Sculpt** button.
-
+
1. In the **Brush Settings** and **Material Settings** sections, set **Material** to **Sand**, otherwise keep all default settings.
-
+
1. In the viewport, click and drag your mouse around the island's edges and below the water line to make
the island look more natural.
@@ -109,7 +109,7 @@ To create the water around the island:
1. In the **Terrain Editor** window, click the **Fill** button.
-
+
1. In the **Selection Settings** section,
1. Set **Position** to **0, -15, 0** to ensure the water fills below the top of the island.
@@ -118,7 +118,7 @@ To create the water around the island:
-
+
- Set **Material Mode** to **Replace**.
@@ -130,7 +130,7 @@ To create the water around the island:
1. Click the **Apply** button. Water generates around the island.
## Apply Materials
@@ -142,13 +142,13 @@ To apply materials to the island:
1. In the **Terrain Editor**, click the **Paint** button.
-
+
1. In the **Brush Settings** and **Material Settings** sections, keep all default setting except for the following:
-
+
- Set **Material Mode** to **Paint**.
@@ -159,7 +159,7 @@ To apply materials to the island:
1. In the viewport, click and drag around the middle of the island to apply the leafy grass material.
1. Navigate back to the **Terrain Editor** window, then in the **Brush Settings** and **Material Settings** sections,
@@ -172,7 +172,7 @@ To apply materials to the island:
1. In the viewport, move the spawn location toward the edge of the island to make space for the first platform. The sample [Island Jump - Building](https://www.roblox.com/games/14239096301/Island-Jump-Building) `.rbxl` file uses a position of **-127, -3, 9**.
@@ -190,14 +190,14 @@ To playtest your experience:
1. In the menu bar, click the **Play** button. Studio enters playtest mode.
-
+
1. Walk around the island and check out how it looks while playing. When you're
done, navigate back to the menu bar and click the **Stop** button. Studio exits playtest mode.
-
+
diff --git a/content/en-us/tutorials/core/building/create-basic-visual-effects.md b/content/en-us/tutorials/curriculums/core/building/create-basic-visual-effects.md
similarity index 84%
rename from content/en-us/tutorials/core/building/create-basic-visual-effects.md
rename to content/en-us/tutorials/curriculums/core/building/create-basic-visual-effects.md
index 7c073f180..4a4aa5c4d 100644
--- a/content/en-us/tutorials/core/building/create-basic-visual-effects.md
+++ b/content/en-us/tutorials/curriculums/core/building/create-basic-visual-effects.md
@@ -56,16 +56,16 @@ To create a flare:
1. From the contextual menu, insert an **Attachment**. An attachment displays in the center of the part in the direction of the positive Y axis.
1. Add a particle emitter to this attachment, and rename the particle emitter to **Emitter_Flare**. The particle emitter immediately emits particles in the direction of the attachment.
-
+
### Configure the Flare
Now that you have a particle emitter in your experience, you can customize its properties so that it emits a glowing flare that
-faces players when they start the experience. To learn more about how each property affects the resulting visual effect, see `Class.ParticleEmitter|ParticleEmitter` and [Customizing Particles](../../../effects/particle-emitters.md#customizing-particles).
+faces players when they start the experience. To learn more about how each property affects the resulting visual effect, see `Class.ParticleEmitter|ParticleEmitter` and [Customizing Particles](../../../../effects/particle-emitters.md#customizing-particles).
#### Particle Image
-Each particle displays an image set by the `Class.ParticleEmitter.Texture|Texture` property. To use your own image, you need to upload the image to Roblox and get an asset ID. See [Assets](../../../projects/assets/index.md) for more on this process and how to do it yourself.
+Each particle displays an image set by the `Class.ParticleEmitter.Texture|Texture` property. To use your own image, you need to upload the image to Roblox and get an asset ID. See [Assets](../../../../projects/assets/index.md) for more on this process and how to do it yourself.
You can use Roblox's pre-made flare image for the `Class.ParticleEmitter.Texture|Texture` of the particle emitter. To use Roblox's pre-made asset:
@@ -104,7 +104,7 @@ To configure the sequences for `Class.ParticleEmitter.Size` and `Class.ParticleE
1. Add points to the sequence by clicking on it, and move them until the window resembles the following example:
@@ -112,11 +112,11 @@ To configure the sequences for `Class.ParticleEmitter.Size` and `Class.ParticleE
1. Add points to the sequence by clicking on it, and move them until the window resembles the following example:
-
+
### Add a PointLight
@@ -133,7 +133,7 @@ A `Class.PointLight` is best for this to emit light spherically from the part at
1. Set **Brightness** to **2** to make the light brighter.
1. Set **Range** to **36** to increase the light's range.
-
+
## Create the Dust Particles
@@ -168,7 +168,7 @@ To create dust particles:
1. Add a particle emitter to this part, then rename the particle emitter to **Emitter_DustMotes**. The particle emitter immediately emits particles within the part's area.
-
+
### Configure the Dust Particles
@@ -187,7 +187,7 @@ Here are the values for all other previously explained properties. Refer back to
1. Set **Size** to the following `Datatype.NumberSequence`:
@@ -195,7 +195,7 @@ Here are the values for all other previously explained properties. Refer back to
1. Set **Transparency** to the following `Datatype.NumberSequence`:
@@ -208,6 +208,6 @@ Here are the values for all other previously explained properties. Refer back to
1. Set **Acceleration** to **1, -1, 1** to make the particles gently float upwards.
diff --git a/content/en-us/tutorials/core/building/customize-global-lighting.md b/content/en-us/tutorials/curriculums/core/building/customize-global-lighting.md
similarity index 79%
rename from content/en-us/tutorials/core/building/customize-global-lighting.md
rename to content/en-us/tutorials/curriculums/core/building/customize-global-lighting.md
index 09cdec675..db0c598bd 100644
--- a/content/en-us/tutorials/core/building/customize-global-lighting.md
+++ b/content/en-us/tutorials/curriculums/core/building/customize-global-lighting.md
@@ -13,7 +13,7 @@ next: /tutorials/core/building/apply-polished-assets
Using only a few modifications to Studio's default lighting settings, this section of the tutorial teaches you how to customize your global lighting in order to change the sun's position and light color, make dramatic shadows, and thicken the atmosphere.
- There are many additional lighting objects you can customize to impact global lighting in your experience. For an overview on all lighting objects available in Studio, see [Lighting and Effects](../../../environment/index.md).
+ There are many additional lighting objects you can customize to impact global lighting in your experience. For an overview on all lighting objects available in Studio, see [Lighting and Effects](../../../../environment/index.md).
## Set Lighting Properties
@@ -29,7 +29,7 @@ The `Class.Lighting` service contains five high-level categories of properties t
The following instructions show you how to adjust properties within almost all of these categories to alter the colors of ambient and reflective lighting, make the edges of shadows sharper, utilize the most advanced lighting technology, and modify the position of the sun and your world to match the sample [Island Jump - Final](https://www.roblox.com/games/14238807008/Island-Jump-Completed-Sample) settings.
- For an overview on the additional properties within the `Class.Lighting` service, see [Global Lighting](../../../environment/lighting.md).
+ For an overview on the additional properties within the `Class.Lighting` service, see [Global Lighting](../../../../environment/lighting.md).
### Adjust the Color of Light
@@ -44,11 +44,11 @@ In addition, the `Class.Lighting.ColorShift_Top` property controls the color of
A comparison between the sample Island Jump experience's default and custom ambient lighting
@@ -68,11 +68,11 @@ The second step in matching the sample **Island Jump - Final** experience's `Cla
A comparison between the sample Island Jump experience's default and custom shadows
@@ -91,11 +91,11 @@ The Future lighting system allows both your global and local lighting to work to
A comparison between the ShadowMap lighting system and the Future lighting system
@@ -122,11 +122,11 @@ The sun's default position is high in the sky, emulating around midday in the re
A comparison between the default and custom sun position
@@ -145,7 +145,7 @@ The `Class.Lighting` service's child `Class.Atmosphere` object allows you to cre
The following instructions show you how to adjust `Class.Atmosphere` properties to create a slightly thicker atmosphere to conceal the edge of the water and create more depth of field, just like the sample [Island Jump - Final](https://www.roblox.com/games/14238807008/Island-Jump-Completed-Sample) experience.
- For an overview on the additional properties within the `Class.Atmosphere`, see [Atmospheric Effects](../../../environment/atmosphere.md).
+ For an overview on the additional properties within the `Class.Atmosphere`, see [Atmospheric Effects](../../../../environment/atmosphere.md).
### Increase Air Particle Density
@@ -155,11 +155,11 @@ The first step in matching the sample **Island Jump - Final** experience's `Clas
A comparison between the default and custom air particle density
@@ -178,11 +178,11 @@ While the sample experience could have set this property to zero to completely h
A comparison between the default and custom Offset values
@@ -196,9 +196,9 @@ Now that your experience's global lighting is set to custom properties, in the n
-
+
-
+
diff --git a/content/en-us/tutorials/core/building/greybox-a-playable-area.md b/content/en-us/tutorials/curriculums/core/building/greybox-a-playable-area.md
similarity index 74%
rename from content/en-us/tutorials/core/building/greybox-a-playable-area.md
rename to content/en-us/tutorials/curriculums/core/building/greybox-a-playable-area.md
index 32a1114e7..280fb1ef3 100644
--- a/content/en-us/tutorials/core/building/greybox-a-playable-area.md
+++ b/content/en-us/tutorials/curriculums/core/building/greybox-a-playable-area.md
@@ -40,7 +40,7 @@ A stud is Studio's primary unit for length, and it's equivalent to 28cm.
-
+
@@ -63,10 +63,10 @@ and because they are similar in shape to the sea stack meshes you will use in th
A comparison between the sample Island Jump experience's greybox and final geometry
@@ -156,11 +156,11 @@ To set players up for success, the sample laser tag experience provides multiple
In-Experience Indicators
diff --git a/content/en-us/tutorials/gameplay-scripting/detecting-hits.md b/content/en-us/tutorials/curriculums/gameplay-scripting/detecting-hits.md
similarity index 98%
rename from content/en-us/tutorials/gameplay-scripting/detecting-hits.md
rename to content/en-us/tutorials/curriculums/gameplay-scripting/detecting-hits.md
index da2a5025f..04226ef85 100644
--- a/content/en-us/tutorials/gameplay-scripting/detecting-hits.md
+++ b/content/en-us/tutorials/curriculums/gameplay-scripting/detecting-hits.md
@@ -87,7 +87,7 @@ local rayResults = castLaserRay(localPlayer, currentCamera.CFrame.Position, rayD
`castLaserRay()`, the second function in **ReplicatedStorage** > **Blaster** > **attemptBlastClient** > **blastClient** > **generateBlastData**, performs the more complex operations within the script. It begins by specifying parameters so that it can make `Class.Workspace:Raycast()` calls for raycasting purposes. Raycasting is the process of sending out an invisible ray from a `Datatype.Vector3` point in a specific direction with a defined length, then checking its path to see where it intersects with other objects.
-This information is particularly useful for first-person shooter experiences because it allows you to see when and where blasts intersect with players or the environment. For example, the following image demonstrates two rays that are casting parallel to each other. According to their point of origin and direction, Ray A misses the wall and continues until it meets its maximum distance, while Ray B collides with the wall. For more information on this process, see [Raycasting](../../workspace/raycasting.md).
+This information is particularly useful for first-person shooter experiences because it allows you to see when and where blasts intersect with players or the environment. For example, the following image demonstrates two rays that are casting parallel to each other. According to their point of origin and direction, Ray A misses the wall and continues until it meets its maximum distance, while Ray B collides with the wall. For more information on this process, see [Raycasting](../../../workspace/raycasting.md).
`Class.Humanoid.Health|Health` doesn't accept negative values, so `onPlayerTagged` has some logic to keep player health at or above zero. After verifying that player health is above zero, it compares health to `damagePerHit` and uses the smaller of the two values. For example, if a player has 10 health and is hit by a 15 damage laser beam, the laser only inflicts 10 points of damage.
@@ -226,7 +226,7 @@ The five chapters in this curriculum cover the experience's core gameplay loop,
- **Audio**: See **ReplicatedStorage** > **SoundHandler**.
- **Custom Modes**: How could you modify this experience to introduce new types of objectives, such as scoring the most points before the time runs out?
-For extended gameplay logic for the laser tag experience, as well as reusable, high-quality environmental assets, review the [Laser Tag](../../resources/templates.md#laser-tag) template.
+For extended gameplay logic for the laser tag experience, as well as reusable, high-quality environmental assets, review the [Laser Tag](../../../resources/templates.md#laser-tag) template.
We're interested in hearing from you about your experience following the Gameplay Scripting Curriculum. If you have any questions, concerns, or additional feedback on the process, please comment on our [Gameplay Scripting Curriculum Q&A](https://devforum.roblox.com/t/gameplay-scripting-curriculum-qa/2731896).
diff --git a/content/en-us/tutorials/gameplay-scripting/implementing-blasters.md b/content/en-us/tutorials/curriculums/gameplay-scripting/implementing-blasters.md
similarity index 98%
rename from content/en-us/tutorials/gameplay-scripting/implementing-blasters.md
rename to content/en-us/tutorials/curriculums/gameplay-scripting/implementing-blasters.md
index 8aed17d1e..026b8e740 100644
--- a/content/en-us/tutorials/gameplay-scripting/implementing-blasters.md
+++ b/content/en-us/tutorials/curriculums/gameplay-scripting/implementing-blasters.md
@@ -55,7 +55,7 @@ end
If you examine **ReplicatedStorage** > **Blaster** > **BlasterState**, you can see that the experience has three blaster states: `Ready`, `Blasting`, and `Disabled`. To see the effect of each of these states, you can playtest the experience, select your player under the **Players** service, then observe the **blasterStateClient** attribute in the **Properties** window. Notice how it displays `Disabled` while you choose your blaster, `Ready` most of the time, and `Blasting` for less than a second after you press the button.
-
+
This slight pause prevents you from being able to blast as quickly as you can click. For example, if you change the function to always return true, you can rapidly blast your blaster without any delay, which is unrealistic for laser tag gameplay.
@@ -65,7 +65,7 @@ local function canLocalPlayerBlast(): boolean
end
```
-
+
## Generate Blast Data
diff --git a/content/en-us/tutorials/gameplay-scripting/index.md b/content/en-us/tutorials/curriculums/gameplay-scripting/index.md
similarity index 96%
rename from content/en-us/tutorials/gameplay-scripting/index.md
rename to content/en-us/tutorials/curriculums/gameplay-scripting/index.md
index c03c079de..78adfd6a0 100644
--- a/content/en-us/tutorials/gameplay-scripting/index.md
+++ b/content/en-us/tutorials/curriculums/gameplay-scripting/index.md
@@ -28,7 +28,7 @@ following the general organization and key implementation details of a large, co
project, including several opportunities to create new behavior with custom values.
This course is intended for readers who are familiar with general coding concepts, Studio's
-data model, and the client-server relationship. If you need help learning how to code, try [coding fundamentals](../fundamentals/coding-1/coding-fundamentals.md).
+data model, and the client-server relationship. If you need help learning how to code, try [coding fundamentals](../../fundamentals/coding-1/coding-fundamentals.md).
diff --git a/content/en-us/tutorials/gameplay-scripting/spawn-respawn.md b/content/en-us/tutorials/curriculums/gameplay-scripting/spawn-respawn.md
similarity index 93%
rename from content/en-us/tutorials/gameplay-scripting/spawn-respawn.md
rename to content/en-us/tutorials/curriculums/gameplay-scripting/spawn-respawn.md
index 64ce3f2da..14117d377 100644
--- a/content/en-us/tutorials/gameplay-scripting/spawn-respawn.md
+++ b/content/en-us/tutorials/curriculums/gameplay-scripting/spawn-respawn.md
@@ -29,11 +29,11 @@ To combat this problem, the sample laser tag experience configures both spawn lo
@@ -78,7 +78,7 @@ If you examine **Workspace** > **World** > **Map** > **Spawns**, you can see tha
For example, if the round is active, the `Class.SpawnLocation.Neutral|Neutral` property sets to **false** so **spawnPlayersInMap** can sort players into teams and spawn them into the arena. However, if the round isn't active, such as the time between one round and the next, the `Class.SpawnLocation.Neutral|Neutral` property sets to **true** so players can spawn there regardless of their team status. This process is what makes the **Neutral** spawn location a functional lobby.
@@ -107,7 +107,7 @@ Luau code in Studio is often event-driven, meaning that scripts listen for event
`Players.PlayerAdded:Connect` is a part of multiple scripts in the experience. If you use the Ctrl/Cmd+Shift+F shortcut and search for `Players.PlayerAdded:Connect`, the results provide a good starting point for understanding the experience's initial setup.
-
+
To demonstrate, open **ServerScriptService** > **SetupHumanoid**. The distinction between `Class.Player` and `Class.Player.Character|Character` is key to understanding this script:
@@ -139,7 +139,7 @@ The important note with this script is that the properties are completely option
If you change the values of these properties, it's important to playtest so that you can see the impact of your new settings. You can recreate what players experience in a multiplayer environment by selecting at least two characters in the **Clients and Servers** section of the **Test** tab.
-
+
Try changing some of these values and playtesting with multiple players to see how they affect the gameplay of the experience. For instance, how might player strategy change if you chose to hide the health display?
@@ -222,11 +222,11 @@ Because the custom force field is a GUI rather than a new `Class.ParticleEmitter
@@ -346,11 +346,11 @@ If you want to test this behavior, you can press Esc, navigate to the
@@ -376,6 +376,6 @@ As part of initial setup, the sample laser tag experience also performs some sma
- The experience uses a first-person camera by setting the `StarterPlayer.CameraMode.LockFirstPerson` property. Note that if you want to let users change between first- and third-person cameras, you must change the property programmatically rather than just setting it once in Studio, and modify the controls and UI to compensate for the change in perspective.
-- The experience uses the built-in Roblox leaderboard with the unit of "points", which players earn each time they tag another player out. You can see the configuration in **ServerScriptService** > **SetupLeaderboard**, but [In-Experience Leaderboards](../../players/leaderboards.md) offers a full overview. Note that `onPlayerTagged` adds points to the leaderboard, which you'll learn about in [Adding Rounds](adding-rounds.md) and [Detecting Hits](detecting-hits.md).
+- The experience uses the built-in Roblox leaderboard with the unit of "points", which players earn each time they tag another player out. You can see the configuration in **ServerScriptService** > **SetupLeaderboard**, but [In-Experience Leaderboards](../../../players/leaderboards.md) offers a full overview. Note that `onPlayerTagged` adds points to the leaderboard, which you'll learn about in [Adding Rounds](adding-rounds.md) and [Detecting Hits](detecting-hits.md).
Now that players can spawn, choose a blaster, and aim it from a first-person point of view, the next section teaches you about the scripts behind creating round-based gameplay.
diff --git a/content/en-us/tutorials/user-interface-design/choose-an-art-style.md b/content/en-us/tutorials/curriculums/user-interface-design/choose-an-art-style.md
similarity index 92%
rename from content/en-us/tutorials/user-interface-design/choose-an-art-style.md
rename to content/en-us/tutorials/curriculums/user-interface-design/choose-an-art-style.md
index d7c184a9d..67fc5ec84 100644
--- a/content/en-us/tutorials/user-interface-design/choose-an-art-style.md
+++ b/content/en-us/tutorials/curriculums/user-interface-design/choose-an-art-style.md
@@ -17,7 +17,7 @@ Using the [sample laser tag experience](https://www.roblox.com/games/14817965191
After you complete this section, you will learn how to design the structure and flow of the information you want to communicate to players through UI within your experience.
-
+
## Identify Your UI Elements
@@ -79,11 +79,11 @@ In the [Environmental Art Curriculum](../environmental-art/index.md), each half
@@ -91,7 +91,7 @@ In the [Environmental Art Curriculum](../environmental-art/index.md), each half
The sample laser tag experience uses this same color theme in its UI to highlight information that pertains to each team, such as each player's team indicator within the 3D space, or the team point tracker that overlays the screen. This consistency assists players in being able to quickly understand information about the experience's objective during the fast-paced gameplay of a first-person shooter experience, especially as players need to make rapid decisions while traversing the environment.
@@ -104,7 +104,7 @@ When selecting a color theme for your own experience, consider the following:
To highlight the guidance in the last point, the sample laser tag experience utilizes the neutral colors of black and white for almost every other UI element that overlays the 2D screen. Black and white contrast each other well, and they are easy to read as the rest of the screen displays an otherwise colorful 3D environment.
## Outline Simple Icons
@@ -115,10 +115,10 @@ Simple icons ideally have a distinct style from your 3D elements while still com
@@ -128,10 +128,10 @@ To demonstrate this concept, see the following two images from the sample laser
@@ -156,7 +156,7 @@ There are typically three types of interactions in a workflow:
Each interaction type must have a different level of visual emphasis depending on the likelihood of a player performing the action. To illustrate this concept, examine the following image of the interaction order for the workflow to select a blaster in the sample laser tag experience, in which A represents the primary interaction, B represents the secondary interaction, and C represents the tertiary interaction.
In this workflow, the action a player is most likely to perform is to select between the two different types of blasters, so the blaster buttons are much larger than any other interactable element in the design. This level of visual emphasis grabs the player's attention, and draws their eye to the middle of the overall UI element. After the player makes their decision, the logical next step in the workflow is to confirm their selection and start the round. For this reason, the SELECT button is directly below the primary interaction.
@@ -166,7 +166,7 @@ While unlikely, the player may not know they are able to select one of the blast
If you were to place these primary, secondary, and tertiary interactions in a different interaction order, such as swapping the SELECT button with the left arrow button, players wouldn't have clear direction on the sequence of choices they need to make. For this reason, in addition to the visual emphasis of a button order, effective workflows follow a **visual hierarchy** that guides players through your ideal order of decisions according to the direction they are likely to scan information, such as top-down and left-to-right.
@@ -191,7 +191,7 @@ While text systems can vary depending on the experience's genre or 3D world requ
For example, the following screen response design of when a player is tagged out scales to a smaller or larger font size according to a player's device, includes enough room on either side of the english text for languages with longer translations, and includes a contrasting background so players can read the text no matter what color is in their background.
When determining a text system for your own experience, consider the following:
diff --git a/content/en-us/tutorials/user-interface-design/implement-designs-in-studio.md b/content/en-us/tutorials/curriculums/user-interface-design/implement-designs-in-studio.md
similarity index 91%
rename from content/en-us/tutorials/user-interface-design/implement-designs-in-studio.md
rename to content/en-us/tutorials/curriculums/user-interface-design/implement-designs-in-studio.md
index 8068f51ff..a225cb5d0 100644
--- a/content/en-us/tutorials/user-interface-design/implement-designs-in-studio.md
+++ b/content/en-us/tutorials/curriculums/user-interface-design/implement-designs-in-studio.md
@@ -20,7 +20,7 @@ After you review the techniques in this section, you can apply them to your own
## Get Asset Library
-Asset libraries are collections of assets you can add into your inventory for easy access and reuse. The asset library you will use for your project from the [Creator Store](../../production/creator-store.md) includes nine 2D individual UI element assets, and the final versions of the objective, blaster selector, and player info components you are creating in this section of the tutorial.
+Asset libraries are collections of assets you can add into your inventory for easy access and reuse. The asset library you will use for your project from the [Creator Store](../../../production/creator-store.md) includes nine 2D individual UI element assets, and the final versions of the objective, blaster selector, and player info components you are creating in this section of the tutorial.
@@ -28,63 +28,63 @@ Asset libraries are collections of assets you can add into your inventory for ea
@@ -106,11 +106,11 @@ To get the asset library from your inventory into your experience:
1. In the menu bar, select the **View** tab.
1. In the **Show** section, click **Toolbox**. The **Toolbox** window displays.
-
+
1. In the **Toolbox** window, click the **Inventory** tab. The **My Models** sort displays.
-
+
1. Click the dropdown menu, then select the **My Packages** sort.
1. Click the **Final Screen UI Components** tile, then in the **Explorer** window, select **Completed Components**, then drag them into the **StarterGui** service. You can now enable any of the final components to reference their design.
@@ -126,15 +126,15 @@ To emulate your screen to the smallest screen size:
1. In the menu bar, select the **Test** tab.
1. In the **Emulation** section, click **Device**. The viewport changes to reflect the aspect ratio of an average laptop.
-
+
1. In the resolution dropdown, select **Actual Resolution**. This allows you to see the true resolution of your UI elements on the device you're emulating.
-
+
1. In the device dropdown, select the device with the smallest screen size that players can use to access your experience. While the best option varies according to the devices your experience supports, the sample laser tag experience tests with an iPhone 4S to verify how the UI looks with limited screen space.
-
+
## Create ScreenGui Objects
@@ -156,25 +156,25 @@ To create a `Class.ScreenGui` object:
1. Insert a **ScreenGui**.
-
+
1. Rename the **ScreenGui** according to the context of its child UI elements.
1. Repeat this process for each grouping of UI elements you need to display on every player's screen.
-
+
### Objective UI
Following the visual hierarchy best practices from [Wireframe Your Layouts](wireframe-your-layouts.md), this section teaches you how to implement all on-screen UI elements relating to the experience's objective. This grouping of UI elements is near the top of the screen because the objective and each team's points have the most significance on how to win the game.
For example, the sample provides an objective UI component that players reference to know what they need to do to be successful in a round. As players tag out enemy team members and earn points, this component keeps track of each team's score against the overall goal within the header's prompt. For a high-level review of all of the client and server scripts that work together to track points, see [Track Points](../gameplay-scripting/adding-rounds.md#track-points) in the Gameplay Scripting Curriculum.
To exactly recreate the objective UI within the sample [Laser Tag](https://www.roblox.com/games/14817965191/Laser-Tag-1A) experience:
@@ -185,7 +185,7 @@ To exactly recreate the objective UI within the sample [Laser Tag](https://www.r
1. Hover over its child **HUDGui** object, then click the ⊕ icon. A contextual menu displays.
1. From the contextual menu, insert a **Frame**.
-
+
1. Select the new **Frame**, then in the **Properties** window,
1. Set **AnchorPoint** to `0.5, 0` to set the frame's origin point in the top-middle of itself (50% from the left to the right of the frame, and 0% from the top to the bottom of the frame).
@@ -194,7 +194,7 @@ To exactly recreate the objective UI within the sample [Laser Tag](https://www.r
1. Set **Size** to `{0.5, 0},{0.13, 0}` so the frame's elements take up a large portion of the top of the screen to grab players' attention (50% horizontally, and 13% vertically).
1. Set **Name** to **Objective**.
-
+
1. **(Optional)** Insert a **UIAspectRatioConstraint** into **Objective** to ensure the label's aspect ratio remains the same no matter the player's screen size. The sample sets its `Class.UIAspectRatioConstraint.AspectRatio` property to `7`.
@@ -207,7 +207,7 @@ To exactly recreate the objective UI within the sample [Laser Tag](https://www.r
1. Set **Size** to `{1, 0},{0.67, 0}` so the selection UI components take up about more than half of the container from top to bottom (100% horizontally and 67% vertically of the parent frame).
1. Set **Name** to **ObjectiveDisplay**.
-
+
1. Create the title elements.
1. Insert an **ImageLabel** into **ObjectiveDisplay**.
@@ -221,7 +221,7 @@ To exactly recreate the objective UI within the sample [Laser Tag](https://www.r
1. Set **Image** to `rbxassetid://14304828123` to display a trapezoid.
1. Set **ImageTransparency** to `0.15` to make the header semi-transparent.
-
+
1. **(Optional)** Insert a **UIAspectRatioConstraint** into the **ImageLabel** to ensure the label's aspect ratio remains the same no matter the player's screen size. The sample sets its `Class.UIAspectRatioConstraint.AspectRatio` property to **13.781**.
1. Insert a **TextLabel** into **Header** to display a title.
@@ -236,7 +236,7 @@ To exactly recreate the objective UI within the sample [Laser Tag](https://www.r
1. Set **Text** to **OBJECTIVE**.
1. Enable **TextScaled**.
-
+
1. Create the prompt elements.
1. Insert an **ImageLabel** into **ObjectiveDisplay**.
@@ -250,7 +250,7 @@ To exactly recreate the objective UI within the sample [Laser Tag](https://www.r
1. Set **ImageColor3** to `0, 0, 0` to tint the image black.
1. Set **ImageTransparency** to `0.3` to make the header semi-transparent.
-
+
1. **(Optional)** Insert a **UIAspectRatioConstraint** into the **ImageLabel** to ensure the label's aspect ratio remains the same no matter the player's screen size. The sample sets its `Class.UIAspectRatioConstraint.AspectRatio` property to `13.781`.
1. Insert a **TextLabel** into **Body** to display a prompt.
@@ -266,7 +266,7 @@ To exactly recreate the objective UI within the sample [Laser Tag](https://www.r
1. Set **Text** to **Tag opposing players to score points! First team to %d points wins.**.
1. Enable **TextScaled**.
-
+
1. Create a container for the objective's team counters.
1. Insert a **Frame** into **Objective**.
@@ -277,7 +277,7 @@ To exactly recreate the objective UI within the sample [Laser Tag](https://www.r
1. Set **Size** to `{0.44, 0},{0.27, 0}` so the selection UI components take up about less than half of the container from left to right (44% horizontally and 27% vertically of the parent frame).
1. Set **Name** to **TeamPointCounter**.
-
+
1. Create padding for the team counters.
1. Insert a **UIListLayout** object into the frame from step 5.
@@ -295,7 +295,7 @@ To exactly recreate the objective UI within the sample [Laser Tag](https://www.r
1. Set **Image** to `rbxassetid://14304826831` to display a directional fade.
1. Set **ImageColor3** to `88, 218, 171` to tint the image mint green.
-
+
1. Configure a custom attribute to track that this label is for the green team.
1. In the **Properties** window, navigate to the **Attributes** section, then click the plus icon. A pop-up dialog displays.
@@ -316,11 +316,11 @@ To exactly recreate the objective UI within the sample [Laser Tag](https://www.r
1. Enable **TextScaled**.
1. Set **TextXAlignment** to **Right**.
-
+
1. Insert a **UIStroke** object into the **TextLabel**, then in the **Properties** window, set **Color** to `8, 78, 52` to outline the dash with a dark green stroke.
-
+
1. Create the pink team counter elements.
1. Duplicate **TeamAICounter** and its children.
@@ -335,7 +335,7 @@ To exactly recreate the objective UI within the sample [Laser Tag](https://www.r
1. Set **TextXAlignment** to **Left**.
1. Select the duplicate **UIStroke** child of **TeamBCounter**, then in the **Properties** window, set **Color** to `158, 18, 94` to outline the dash with a dark pink stroke.
-
+
1. Reference the following `Class.ReplicatedStorage` scripts within the sample [Laser Tag](https://www.roblox.com/games/14817965191/Laser-Tag-1A) place file that programmatically update the objective prompt and track team points.
@@ -453,7 +453,7 @@ Now, after a player selects their blaster, the objective UI displays on the top
Following the visual hierarchy best practices from [Wireframe Your Layouts](wireframe-your-layouts.md), this section teaches you how to implement all on-screen UI elements relating to the player's blaster. This grouping of UI elements takes up the majority of the screen space near the center of the screen because it acts as the focal point to draw players' attention to the action in 3D space, and it has the most significance for playing the game.
#### Crosshair
@@ -463,7 +463,7 @@ A crosshair is a UI element that informs players where they're going to make imp
Like most other experiences in the first-person shooter genre, the sample laser tag experience positions the crosshair in the center of the screen so players have something static to focus on while their avatar moves through the 3D space. In addition to reducing motion sickness, this placement allows the crosshair to be perceptible while also blending into the overall environment.
To exactly recreate the crosshair within the sample [Laser Tag](https://www.roblox.com/games/14817965191/Laser-Tag-1A) experience:
@@ -473,7 +473,7 @@ To exactly recreate the crosshair within the sample [Laser Tag](https://www.robl
1. Hover over its child **HUDGui** object, then click the **⊕** icon. A contextual menu displays.
1. From the contextual menu, insert an **ImageLabel**.
-
+
1. Select the new **ImageLabel**, then in the **Properties** window,
1. Set **Image** to `rbxassetid://14400935446`.
@@ -490,7 +490,7 @@ To exactly recreate the crosshair within the sample [Laser Tag](https://www.robl
A hit marker is a UI element that only displays when a blast makes impact with another player on the enemy team. Like the crosshair, this UI element is a vital gameplay requirement for first-person shooter experiences because it provides visual feedback of when players are successful in tagging out their opponents.
To exactly recreate the hit marker within the sample [Laser Tag](https://www.roblox.com/games/14817965191/Laser-Tag-1A) experience:
@@ -500,7 +500,7 @@ To exactly recreate the hit marker within the sample [Laser Tag](https://www.rob
1. Hover over its child **Crosshair** object, then click the **⊕** icon. A contextual menu displays.
1. From the contextual menu, insert an **ImageLabel**.
-
+
1. Select the new **ImageLabel**, then in the **Properties** window,
1. Set **Image** to `rbxassetid://14401148736` to display the rectangular hit marker icon.
@@ -593,7 +593,7 @@ The following steps detail how to create several containers for the different UI
This setup allows you to create additional `Class.Configuration` instances for more blaster types that automatically display correctly within the blaster selector without needing to create individual buttons within `StarterGui.PickABlasterGui`.
To exactly recreate the blaster selector within the sample [Laser Tag](https://www.roblox.com/games/14817965191/Laser-Tag-1A) experience:
@@ -604,7 +604,7 @@ To exactly recreate the blaster selector within the sample [Laser Tag](https://w
1. Hover over its child **PickABlaster** object, then click the **⊕** icon. A contextual menu displays.
1. From the contextual menu, insert a **Frame**.
-
+
1. Select the new frame, then in the **Properties** window,
1. Set **AnchorPoint** to `0.5, 1` to set the frame's origin point in the bottom-middle of itself (50% from the left to the right of the frame, and 100% from the top to the bottom of the frame).
@@ -613,7 +613,7 @@ To exactly recreate the blaster selector within the sample [Laser Tag](https://w
1. Set **Size** to `{0.8, 0},{0.25, 0}` so the blaster selector's UI components take up a large portion of the screen to grab players' attention (80% horizontally, and 25% vertically).
1. Set **Name** to **Component**.
-
+
1. **(Optional)** Insert a **UIAspectRatioConstraint** into **Component** to ensure the frame and its children UI elements' aspect ratio remains the same no matter the player's screen size. The sample sets its `Class.UIAspectRatioConstraint.AspectRatio` property to **5**.
@@ -626,7 +626,7 @@ To exactly recreate the blaster selector within the sample [Laser Tag](https://w
1. Set **Size** to `{1, 0},{0.75, 0}` so the selection UI components take up 3/4th of the container (100% horizontally and 75% vertically of the parent frame).
1. Set **Name** to **SelectionFrame**.
-
+
1. Create a prompt for the blaster selector.
1. Insert an **ImageLabel** into **SelectionFrame**.
@@ -640,7 +640,7 @@ To exactly recreate the blaster selector within the sample [Laser Tag](https://w
1. Set **Image** to `rbxassetid://14304828123` to display a trapezoid.
1. Set **ImageTransparency** to `0.15` to make the header semi-transparent.
-
+
1. **(Optional)** Insert a **UIAspectRatioConstraint** into the label to ensure the label's aspect ratio remains the same no matter the player's screen size. The sample sets its `Class.UIAspectRatioConstraint.AspectRatio` property to `13.78`.
1. Insert a **TextLabel** into **Header** to display a prompt.
@@ -655,7 +655,7 @@ To exactly recreate the blaster selector within the sample [Laser Tag](https://w
1. Set **Text** to **PICK A BLASTER**.
1. Enable **TextScaled**.
-
+
1. Create the container for your blaster button container and selection arrows.
1. Insert an **ImageLabel** into **SelectionFrame**.
@@ -667,13 +667,13 @@ To exactly recreate the blaster selector within the sample [Laser Tag](https://w
1. Set **Position** to `{0.5, 0},{1, 0}` to set the label to the bottom-middle of the frame (50% from the left to the right of the parent frame, and 100% from the top to the bottom of the parent frame).
1. Set **Size** to `{1, 0},{0.77, 0}` to widen the label area to the space below the prompt (100% horizontally and 77% vertically of the parent frame).
-
+
1. Round the corners of the container.
1. Insert a **UICorner** object into the label.
1. Select the new corner object, then in the **Properties** window, set **CornerRadius** to `0.075, 0` to round the corners.
-
+
1. Create the container for your blaster buttons.
1. Insert a **Frame** into the label from step 4.
@@ -684,7 +684,7 @@ To exactly recreate the blaster selector within the sample [Laser Tag](https://w
1. Set **Size** to `{0.85, 0},{0.77, 0}` to widen the frame area to most of the label (85% horizontally and 77% vertically of the parent label).
1. Set **Name** to **Container**.
-
+
1. Create padding for all future blaster buttons.
1. Insert a **UIListLayout** object into the frame from step 5.
@@ -703,13 +703,13 @@ To exactly recreate the blaster selector within the sample [Laser Tag](https://w
1. Set **Size** to `{0.04, 0},{0.33, 0}` to make the selection button much smaller than the blaster buttons (4% horizontally and 33% vertically of the parent frame).
1. Set **Name** to **NavigationButtonLeft**.
-
+
1. Round the corners of the button.
1. Insert a **UICorner** object into the button.
1. Select the new corner object, then in the **Properties** window, set **CornerRadius** to `0.1, 0` to round the corners.
-
+
1. Insert an **ImageLabel** object into the button.
1. Select the new label, then in the **Properties** window,
@@ -720,7 +720,7 @@ To exactly recreate the blaster selector within the sample [Laser Tag](https://w
1. Set **Image** to `rbxassetid://14309187238`.
1. Set **ScaleType** to **Fit**.
-
+
1. Create the right navigation button.
1. Duplicate **NavigationButtonLeft**.
@@ -732,7 +732,7 @@ To exactly recreate the blaster selector within the sample [Laser Tag](https://w
1. Set **Rotation** to `180` to flip the image.
1. Set **Position** to `{0.55, 0},{0.5, 0}` to set the label near the middle of its parent button (55% from the left to the right of the parent button, and 50% from the top to the bottom of the parent button). This value isn't in the middle because an arrow doesn't _visually_ look like it's in the middle of the button at `{0.5, 0},{0.5, 0}`.
-
+
1. Create the **SELECT** button.
1. Insert an **ImageButton** into **Component**. Notice how this process keeps the select button separate from **SelectionFrame** so that you can add padding between the main part of the component from the select button.
@@ -744,13 +744,13 @@ To exactly recreate the blaster selector within the sample [Laser Tag](https://w
1. Set **Size** to `{0.17, 0},{0.18, 0}` to length the button underneath the blaster buttons (17% horizontally and 18% vertically of the parent frame).
1. Set **Name** to **SelectButton**.
-
+
1. Round the corners of the button.
1. Insert a **UICorner** object into the button.
1. Select the new corner object, then in the **Properties** window, set **CornerRadius** to `0.2, 0` to round the corners.
-
+
1. Insert a **TextLabel** object into the button so you can display a call to action.
1. Select the new label, then in the **Properties** window,
@@ -764,7 +764,7 @@ To exactly recreate the blaster selector within the sample [Laser Tag](https://w
1. Set **Text** to **SELECT**.
1. Enable **TextScaled**.
-
+
1. Create a blaster button prefab.
1. In the **ReplicatedStorage** service, create a folder structure to organize your UI objects. The sample uses an **Instances** folder with a child **Guis** folder.
@@ -825,11 +825,11 @@ Each `Class.Configuration` instance includes properties and attributes that det
@@ -1006,7 +1006,7 @@ Now, whenever a player joins the experience or respawns back into a round after
A blast button is a UI component that players use to blast their blaster if they are accessing the experience through a mobile or tablet device. The sample laser tag experience uses a blaster button with an icon that depicts both a crosshair and a blast to communicate the button's function without text.
To exactly recreate the blast button within the sample [Laser Tag](https://www.roblox.com/games/14817965191/Laser-Tag-1A) experience:
@@ -1016,7 +1016,7 @@ To exactly recreate the blast button within the sample [Laser Tag](https://www.r
1. Hover over its child **HUDGui** object, then click the **⊕** icon. A contextual menu displays.
1. From the contextual menu, insert an **ImageButton**.
-
+
1. In the viewport, move the button to where a player's thumb naturally rests so you can get a visual sense of what the button will look like on a player's device, then in the **Properties** window,
1. Set **Image** to `rbxassetid://18308375035` to display the blast button icon.
@@ -1159,7 +1159,7 @@ Now, when a player joins the experience and uses touch input on a device that ac
Following the visual hierarchy best practices from [Wireframe Your Layouts](wireframe-your-layouts.md), this section teaches you how to implement all on-screen UI elements relating to the state of the player. This grouping of UI elements is near the sides of the screen because players can comprehend this peripheral information without diverting their attention from the gameplay.
#### Player Indicator
@@ -1168,7 +1168,7 @@ A player indicator is a UI component that players reference to quickly decipher