Greybox a Playable Area

Greyboxing an environment, also known as massing out or blocking your environment, is the process of adding simple shapes to the 3D space to figure out how users will experience gameplay before investing time into scripting the gameplay or creating complex assets. This process can save you a lot of time in finding any issues in your layout, and it's much easier to make adjustments to basic parts than it is to adjust any high-quality meshes that you import into Studio.

Using basic parts and solid modeling operations, this section of the tutorial teaches you how to greybox the sea stack platforms that make up the playable area of the experience. Once you complete the environment, you will learn how to create the gameplay for the experience using Luau scripts.

Plan the Playable Area

In the final version of the experience, players need to collect coins on the island and sea stack platforms in order to upgrade their jumping power and reach higher platforms. You will configure scripts to add this behavior in the next section of the tutorial, but it's important while you're starting to greybox your environment to plan for the difference in height between platforms. For example, the difference in height between platforms should slowly increase for each height level in order to encourage players to collect coins to progress through the level.

As a guide, the sample Island Jump - Building .rbxl file includes seven different levels of height, with the first level sunk into the island to expose only a few studs of height. This allows players to only need to collect a few coins at the beginning of the experience in order to progress to the next platform. The subsequent height differences between each level then increase to 8, 20, 35, 55, 81, and 110 studs, providing players a sense of progress as they make their way through your experience.

Add the Platforms

Now that you have a plan for the difference in height between platforms, it's time to add in placeholder Part objects to represent the sea stack platforms. Parts are Roblox's basic building blocks with properties you can modify to customize their physical appearance, such as their shape, size, and color.

While you can use almost any part shape to represent your sea stack platforms, it's recommended to greybox your environment with cylinder parts because they offer a flat surface for you to land on when you playtest jumping from platform to platform, and because they are similar in shape to the sea stack meshes you will use in the final section of the tutorial.

Create an Organization Structure

Before you insert placeholder parts into the 3D space, it's important to create an organization structure for your assets in the Workspace. This process ensures that your Workspace remains organized and easy to scan, especially as you venture into creating experiences with a significant amount of assets that you need to manage.

There are two types of containers you can use to group assets together: Folder and Model objects. Folders are useful for storing many objects of different types, and models are useful for storing geometric groupings of parts. The following instructions teach you how to use both container objects to store all assets for your 3D world.

To create an organization structure:

1. In the Explorer window, hover over the Workspace and click the ⊕ icon. A contextual menu displays.

2. From the contextual menu, insert a Folder object. A folder object displays that you will use to contain all assets for the 3D world.

   

3. Rename the new folder World.

   1. Right-click the folder object. A contextual menu displays.

   2. From the contextual menu, click Rename, and enter World for the folder's name.

      Ensure that the name is spelled correctly with the correct casing. The scripts that you write in Roblox are case-sensitive, and you'll write one later in this course to access this folder.

4. Hover over the World folder and click the ⊕ icon.

5. From the contextual menu, insert a Model.

   

6. Rename the model to Blockout_Parts.

   

Insert Parts

Now that you have an organizational structure to contain your assets, you can now begin inserting parts into the 3D space to represent your sea stack platforms.

To insert a cylinder part for your first platform:

1. In the menu bar, select the Home tab.

2. In the Insert section, click the Part dropdown arrow, then select Cylinder. A cylinder part displays in the viewport.

   

3. In the Explorer window, click and drag the new Part to the Blockout_Parts model. The part becomes a child of the model.

   

4. Navigate back to the Home tab, then use the Move, Scale, and Rotate tools to position, scale, and rotate your cylinder until it's a large, flat surface in the middle of your island. For more information on these tools, see Manipulating Parts.

   

5. Using the same process, add and configure at least seven more sea stack platforms with increasing levels of height into the Blockout_Parts model.

   

6. In the Explorer window, select the Block_Out model.

7. In the Home tab, navigate to the Edit section, and click the Anchor icon. This ensures that the physics system doesn't move your parts when the experience starts.

   

Align Parts

As you add more sea stack placeholder parts off the island, it's easier to manage the height differences between levels if you use varying sizes for these parts instead of different positions. You can achieve this by aligning the base of each platform so that all vertical size differences are reflected in differing heights, and parts of the same size are on the same level.

The Align Tool aligns parts on either the minimum, center, or maximum edge according to a specific axis. For the purposes of this experience, you need to align the bottom edge in the Y axis so that all of the parts are partially submerged in the water.

To align parts:

1. In the Explorer window, select all of your platforms.

2. In the menu bar, navigate to the Model tab, then click the Align Tool. The Align Tool window displays.

   

3. In the Align Tool window,

   1. Set Mode to Min.
   2. Set Align In to World, Y.
   3. Keep Relative To on Selection Bounds.

4. Click the Align button. All parts align on the Y axis according to the part with the lowest Y Part.Position value.

   

Create a Hollow Tunnel

Aside from using parts as-is to block out your playable areas, you can also apply solid modeling operations to join parts in unique ways to form more complex shapes, such as a hollow tunnel within one of the sea stacks. This technique provides more visual interest and variation in how players interact with your environments.

There are four solid modeling tools:

• Union – Joins two or more parts together to form a single solid union.
• Intersect – Intersects overlapping parts into a single solid intersection.
• Negate – Negates parts, which is useful for making holes and indentations.
• Separate – Separates the union or intersection back into its individual parts.

For the purposes of creating a hollow tunnel, you only need to use the Union and Negate tools. For a full breakdown of all of the tools, see Solid Modeling.

To create a hollow tunnel:

1. Insert and position a cylinder part above one of your sea stack platforms. The sample Island Jump - Building experience positions this part above the Level_4b platform with the following values:

   Name	Size	CFrame.Position	CFrame.Orientation
   Tunnel	24, 65, 69	137, 77, 69	0, 0, 90

2. Insert and position a block part to represent the hollow portion of your tunnel that's at least as tall as the cylinder part, and a suitable width for players to walk through. The sample Island Jump - Building experience positions this part within the previous cylinder with the following values:

   Name	Size	CFrame.Position	CFrame.Orientation
   Hollow_Part	24.5, 72, 22	134.5, 77, 71	0, 135, 90

   

3. In the Explorer window, select the block part.

4. In the Model tab, navigate to the Solid Modeling section, then click the Negate button. The part turns translucent.

   

5. In the Explorer window, select both the negated part and the cylinder tunnel part.

6. In the Model tab, navigate back to the Solid Modeling section, then click the Union button. The negated part is cut out from the overlapping tunnel cylinder.

   

7. Rename the new union to something that reflects its height level and position, such as Level_4b_Union.

8. Duplicate the sea stack platform underneath your new union, and position it so that it's on top of the tunnel. The sample Island Jump - Building experience positions the duplicate Level_4b platform above the union with the following values:

   Name	Size	CFrame.Position	CFrame.Orientation
   Level_4b_Top	74, 65, 69	137, 126, 69	0, 0, 90

   

Playtest

After you finish greyboxing your playable areas, you must playtest the layout of your environment to ensure the experience is both fun and functional, and so that you can catch small issues before they turn into much larger projects the further you are in the development process. For example, your experience's gameplay needs players to steadily upgrade their jumping power according to the amount of coins they collect, so it's important to verify that players are able to jump between platforms in relation to the Humanoid.JumpPower you expect players to have at varying platform height levels.

The following step-by-step instructions teach you how to playtest your experience with different Humanoid.JumpPower values. As you playtest, ask yourself the following questions:

• Are players able to successfully jump to each platform?
• Does the difference in height between platforms slowly increase for each height level in order to encourage players to progress?
• What am I enjoying or getting frustrated about the layout or gameplay?

To playtest your experience:

1. In the menu bar, click the Play button. Studio enters playtest mode.

   

2. In the Explorer window, select the arrow next to your character model that displays your Roblox username. All of your character model's children objects display.

3. Select Humanoid.

   

4. In the Properties window, navigate to the Jump Settings section, then enable UseJumpPower. The JumpPower property displays with a default value of 50.

5. Set JumpPower to 0. This ensures your character is unable to jump, emulating the same starting state for players after you script the gameplay.

   

   If you can't see the Properties window, open the View tab and ensure Properties is selected in the Show section.

6. As you reach new levels, set JumpPower to multiples of 30 to simulate jumping upgrades.

In the next section of the tutorial, you will learn how to script the overall gameplay of the experience.