mirror of
https://github.com/rojo-rbx/rojo.git
synced 2026-10-25 04:54:07 +00:00
rules
This commit is contained in:
Joe
parent
a9b4f8e83b
commit
e6efc04756
8494 changed files with 495610 additions and 0 deletions
|
|
@ -0,0 +1,286 @@
|
|||
---
|
||||
title: Add scripts
|
||||
prev: /education/build-it-play-it-mansion-of-wonder/using-particles-for-actions
|
||||
next: /education/build-it-play-it-mansion-of-wonder/next-steps-advanced
|
||||
description: Learn how to use Luau code to manipulate beams and emitters to add tutorial mechanics to your game in the Roblox Build It Play It Mansion of Wonder.
|
||||
---
|
||||
|
||||
Time to bring all this work together! Now that you've created the beam and particle components, you'll add in three premade scripts. These scripts manage the tutorial by telling components when to do what. For example, the scripts will create beams for new players and emit particles whenever they interact with goals.
|
||||
|
||||
<video controls src="../../assets/education/build-it-play-it-mansion-of-wonder/adding-scripts/final-example.mp4" width="100%"></video>
|
||||
|
||||
<Alert severity="info">
|
||||
While you can follow all these steps even if you haven't coded before, having that knowledge can help you adapt these scripts for your own experience. To learn more, see the [Coding Fundamentals](../../tutorials/fundamentals/coding-1/coding-fundamentals.md) tutorial.
|
||||
|
||||
</Alert>
|
||||
|
||||
## Store beam and particles
|
||||
|
||||
Before adding the scripts, the beam and particles need to be moved to where the scripts will be able to make copies of them as needed.
|
||||
|
||||
<Alert severity="warning">
|
||||
If you're using your own project, you may need to replace the values within some scripted variables to match your objects.
|
||||
</Alert>
|
||||
|
||||
1. In **ReplicatedStorage**, create a new folder named **PlayerTutorial**. Move TutorialBeam out of TestPlayer, and into the new folder.
|
||||
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/adding-scripts/move-tutorial-beam.png" width="40%" />
|
||||
|
||||
2. In **ServerStorage**, create a folder named **TutorialParticles**. Move the **Burst** particle out of TestPlayer into that folder.
|
||||
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/adding-scripts/create-particles-folder.png" width="40%" />
|
||||
|
||||
3. Once the beam and particle emitter are moved, you no longer need **TestPlayer** since the script will work with real players when finished. Delete **TestPlayer**.
|
||||
|
||||
## Create events
|
||||
|
||||
Each time players interact with a goal, the tutorial script will need to know so it can update that player's progress and emit the particle effect. To inform scripts, signals can be sent using **events**.
|
||||
|
||||
1. In **ReplicatedStorage** > **PlayerTutorial**, create two **RemoteEvent** objects. Name them **NextGoal** and **TutorialEnd**.
|
||||
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/adding-scripts/create-events.png" width="40%" />
|
||||
|
||||
## Add the scripts
|
||||
|
||||
The three scripts below will look for the particle emitter and beam objects created earlier and manage the tutorial system.
|
||||
|
||||
1. In **ReplicatedStorage** > **PlayerTutorial** > create a new **ModuleScript** named **TutorialManager**.
|
||||
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/adding-scripts/create-tutorial-manager.png" width="40%" />
|
||||
|
||||
Replace the default code by copying and pasting the entire code below.
|
||||
|
||||
```lua
|
||||
local TutorialManager = {}
|
||||
|
||||
local ReplicatedStorage = game:GetService("ReplicatedStorage")
|
||||
|
||||
local tutorialFolder = ReplicatedStorage:WaitForChild("PlayerTutorial")
|
||||
local TutorialEndEvent = tutorialFolder:WaitForChild("TutorialEnd")
|
||||
local NextGoalEvent = tutorialFolder:WaitForChild("NextGoal")
|
||||
|
||||
-- Note Goal parts must be ordered in the table, or else Goal order may be different in-game
|
||||
local goalParts = {
|
||||
workspace.TutorialGoals.GoalPart1,
|
||||
workspace.TutorialGoals.GoalPart2
|
||||
}
|
||||
|
||||
local function checkTutorialEnd(player, goalParts)
|
||||
local currentIndex = player:WaitForChild("GoalProgress")
|
||||
return currentIndex.Value >= #goalParts
|
||||
end
|
||||
|
||||
local function finishTutorial(player)
|
||||
local playerBeam = player.Character.HumanoidRootPart:FindFirstChildOfClass("Beam")
|
||||
playerBeam:Destroy()
|
||||
|
||||
print(player.Name .. " finished the tutorial")
|
||||
|
||||
-- Placeholder for further code. E.g. if you wanted to send messages to the server to do other tasks
|
||||
|
||||
end
|
||||
|
||||
function TutorialManager.interactGoal(player)
|
||||
NextGoalEvent:FireServer()
|
||||
end
|
||||
|
||||
function TutorialManager.getTutorialGoals()
|
||||
return goalParts
|
||||
end
|
||||
|
||||
function TutorialManager.nextGoal(player, goalParts)
|
||||
if checkTutorialEnd(player, goalParts) then
|
||||
finishTutorial(player)
|
||||
else
|
||||
-- Increment the player's Goal tracker
|
||||
local currentGoalIndex = player:WaitForChild("GoalProgress")
|
||||
currentGoalIndex.Value += 1
|
||||
end
|
||||
end
|
||||
|
||||
-- Creates an int value to locally track player's progress through the tutorial Goals
|
||||
function TutorialManager.setupPlayerProgress(player)
|
||||
local currentGoalProgress = Instance.new("IntValue")
|
||||
currentGoalProgress.Name = "GoalProgress"
|
||||
currentGoalProgress.Value = 1
|
||||
currentGoalProgress.Parent = player
|
||||
end
|
||||
|
||||
return TutorialManager
|
||||
```
|
||||
|
||||
This script runs code for managing a player's progress in the tutorial. This includes tasks like running code for interacting with goals, or what happens when the tutorial is over.
|
||||
|
||||
2. In **ServerScriptService**, create a new **Script** named **TutorialParticles**.
|
||||
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/adding-scripts/create-tutorial-particles.png" width="40%" />
|
||||
|
||||
Paste the code below.
|
||||
|
||||
```lua
|
||||
local Players = game:GetService("Players")
|
||||
local ReplicatedStorage = game:GetService("ReplicatedStorage")
|
||||
local ServerStorage = game:GetService("ServerStorage")
|
||||
|
||||
local tutorialFolder = ReplicatedStorage:WaitForChild("PlayerTutorial")
|
||||
local NextGoalEvent = tutorialFolder:WaitForChild("NextGoal")
|
||||
|
||||
local EMIT_RATE = 50
|
||||
|
||||
local function playParticleBurst(player)
|
||||
local character = player.Character or player.CharacterAdded:Wait()
|
||||
local humanoidRootPart = character:WaitForChild("HumanoidRootPart")
|
||||
local particleAttachment = humanoidRootPart:WaitForChild("ParticleAttachment")
|
||||
|
||||
-- Go through particles on the attachment and play them according to the type of particle
|
||||
for _, particle in particleAttachment:GetChildren() do
|
||||
if particle:IsA("ParticleEmitter") then
|
||||
particle:Emit(EMIT_RATE)
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
local function setupPlayerParticles(player)
|
||||
player.CharacterAdded:Connect(function(character)
|
||||
local humanoidRootPart = character:WaitForChild("HumanoidRootPart")
|
||||
local playerParticleAttachment = Instance.new("Attachment")
|
||||
playerParticleAttachment.Name = "ParticleAttachment"
|
||||
playerParticleAttachment.Parent = humanoidRootPart
|
||||
|
||||
-- Clone particles in the folder, even if there are more than one and attach to player
|
||||
for _, emitter in ServerStorage.TutorialParticles:GetChildren() do
|
||||
emitter:Clone().Parent = playerParticleAttachment
|
||||
end
|
||||
end)
|
||||
end
|
||||
|
||||
Players.PlayerAdded:Connect(setupPlayerParticles)
|
||||
NextGoalEvent.OnServerEvent:Connect(playParticleBurst)
|
||||
```
|
||||
|
||||
This script plays the burst particle whenever players interact with goals. There's also a variable named `EMIT_RATE` that determines how many particles spawn during an interaction.
|
||||
|
||||
3. In **StarterPlayer** > **StarterPlayerScripts**, create a new **LocalScript** named **TutorialScript**.
|
||||
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/adding-scripts/create-tutorial-script.png" width="40%" />
|
||||
|
||||
Then, paste the script below. This script creates and manages the beam used to guide players.
|
||||
|
||||
```lua
|
||||
local Players = game:GetService("Players")
|
||||
local ReplicatedStorage = game:GetService("ReplicatedStorage")
|
||||
|
||||
local tutorialFolder = ReplicatedStorage:WaitForChild("PlayerTutorial")
|
||||
local TutorialManager = require(tutorialFolder:WaitForChild("TutorialManager"))
|
||||
local TutorialEndEvent = tutorialFolder:WaitForChild("TutorialEnd")
|
||||
|
||||
local player = Players.LocalPlayer
|
||||
local goalParts = TutorialManager.getTutorialGoals()
|
||||
local playerBeam = nil
|
||||
local goalIndex = nil
|
||||
|
||||
local function getTargetAttachment()
|
||||
local currentTarget = goalParts[goalIndex.Value]
|
||||
local interactionPart = currentTarget:FindFirstChild("InteractionPart")
|
||||
local attachment = interactionPart and interactionPart:FindFirstChildOfClass("Attachment")
|
||||
|
||||
if not attachment then
|
||||
attachment = Instance.new("Attachment")
|
||||
attachment.Name = "BeamAttachment"
|
||||
attachment.Parent = currentTarget
|
||||
end
|
||||
|
||||
return attachment
|
||||
end
|
||||
|
||||
local function updateBeamTarget()
|
||||
playerBeam = player.Character.HumanoidRootPart:FindFirstChildOfClass("Beam")
|
||||
|
||||
local targetBeamAttachment = getTargetAttachment()
|
||||
|
||||
if targetBeamAttachment then
|
||||
playerBeam.Attachment1 = targetBeamAttachment
|
||||
else
|
||||
warn("Attachment not found in a goal. Check that goals have attachments or they're included under the InteractionPart")
|
||||
end
|
||||
end
|
||||
|
||||
local function setupGoals()
|
||||
for _, part in goalParts do
|
||||
local interactionPart = part:FindFirstChild("InteractionPart")
|
||||
local proximityPrompt = interactionPart and interactionPart:FindFirstChild("ProximityPrompt")
|
||||
|
||||
if proximityPrompt then
|
||||
proximityPrompt.Triggered:Connect(function(player)
|
||||
proximityPrompt.Enabled = false
|
||||
TutorialManager.nextGoal(player, goalParts)
|
||||
TutorialManager.interactGoal(player)
|
||||
end)
|
||||
else
|
||||
warn("Proximity prompt not included in goal. Add one to each goal part under the InteractionPart")
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
local function createBeamForCharacter(character)
|
||||
local humanoidRootPart = character:WaitForChild("HumanoidRootPart")
|
||||
local playerBeamAttachment = Instance.new("Attachment")
|
||||
local beamTemplate = tutorialFolder:WaitForChild("TutorialBeam")
|
||||
|
||||
if not beamTemplate then
|
||||
warn("Tutorial Beam not found in ReplicatedStorage")
|
||||
end
|
||||
|
||||
playerBeamAttachment.Name = "BeamAttachment"
|
||||
playerBeamAttachment.Parent = humanoidRootPart
|
||||
|
||||
local targetBeamAttachment = getTargetAttachment()
|
||||
|
||||
playerBeam = beamTemplate:Clone()
|
||||
playerBeam.Attachment0 = playerBeamAttachment
|
||||
playerBeam.Attachment1 = targetBeamAttachment
|
||||
playerBeam.Enabled = true
|
||||
playerBeam.Parent = humanoidRootPart
|
||||
end
|
||||
|
||||
local function setupPlayer()
|
||||
setupGoals()
|
||||
TutorialManager.setupPlayerProgress(player)
|
||||
goalIndex = player:WaitForChild("GoalProgress")
|
||||
|
||||
player.CharacterAdded:Connect(createBeamForCharacter)
|
||||
if player.Character then
|
||||
createBeamForCharacter(player.Character)
|
||||
end
|
||||
end
|
||||
|
||||
setupPlayer()
|
||||
goalIndex.Changed:Connect(updateBeamTarget)
|
||||
```
|
||||
|
||||
4. Play the project to test the scripts. Move from booth to booth, using the interact feature to see if code works.
|
||||
|
||||
<video controls src="../../assets/education/build-it-play-it-mansion-of-wonder/adding-scripts/final-example-2.mp4" width="100%"></video>
|
||||
|
||||
### Troubleshooting tips
|
||||
|
||||
**Issue**: Particles play when game starts.
|
||||
|
||||
- Go into ServerStorage > Tutorial Particles > Burst. Check Enabled to be off.
|
||||
|
||||
**Issue**: Warnings in the compiler such as an "infinite yield".
|
||||
|
||||
- Because the script is looking for specific objects in certain locations, it's possible that a part is named incorrectly. Double check that the name and location of each part in game matches the tutorial.
|
||||
|
||||
### Script benefits and limitations
|
||||
|
||||
If you're using this tutorial system in your experience, keep in mind the following:
|
||||
|
||||
**Benefits**
|
||||
|
||||
- Events such as TutorialEnd can be used to trigger other scripts. For instance, you can award players a special item when this event fires.
|
||||
- The TutorialParticles script can play multiple particles at once. You can add more particles in ServerStorage/TutorialParticles for more complex effects.
|
||||
|
||||
**Limitations**
|
||||
|
||||
- Player progress in the tutorial is not persistent, meaning you'll have to code some way of saving that progress. For guidance, see the article: Saving Data.
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
---
|
||||
title: Become an artist
|
||||
prev: /education/build-it-play-it-mansion-of-wonder/beginner-landing-page
|
||||
next: /education/build-it-play-it-mansion-of-wonder/test-and-play
|
||||
description: Start learning to become a visual effects artist using Roblox Studio through the Build It Play It Mansion of Wonders challenge.
|
||||
---
|
||||
|
||||
In the **Mansion of Wonder** carnival ride, players hop on a ride and defend their cart from enemies. To help in the fight, everyone wields a magic blaster. You'll become an **FX artist**, designing the special effects used by the blaster, like magical blasts and explosions.
|
||||
|
||||
<video controls src="../../assets/education/build-it-play-it-mansion-of-wonder/become-an-artist/game-example.mp4" width="100%"></video>
|
||||
|
||||
## Template overview
|
||||
|
||||
To start your development journey, a template has been created that includes the starter world and code. You'll be able to customize your experience as much as you'd like once you've finished these basic lessons.
|
||||
|
||||
<img
|
||||
src="../../assets/education/build-it-play-it-mansion-of-wonder/become-an-artist/template-overview.jpeg"
|
||||
width="100%" />
|
||||
|
||||
## Open the template
|
||||
|
||||
Time to open Roblox Studio! If you need, download [Studio](https://www.roblox.com/create), then click the following button to open the **Mansion of Wonder** template.
|
||||
|
||||
<UseStudioButton variant="" buttonTextTranslationKey="Action.EditInStudio" placeId="6936227200" universeId="2653926164" />
|
||||
|
||||
## Close extra windows
|
||||
|
||||
The first time Roblox Studio is launched, extra windows might open up that aren't needed right now. Closing these windows will give you more space to work. You can always open them up again later.
|
||||
|
||||
1. Close each window on the **left** of the 3D view by clicking the **×** in the window's upper-right corner. If you don't see anything to close on the left, go to the next step.
|
||||
|
||||
2. Leave the **Explorer** and **Properties** windows open on the right side of Studio. If you have done each step correctly, Studio looks like the following image.
|
||||
|
||||
<img src="../../assets/education/general/Studio-Setup-Mansion-Of-Wonder.jpg" width="960" />
|
||||
|
||||
<Alert severity="warning">
|
||||
If you don't see the **Explorer** and **Properties** windows on the right, enable them from Studio's **Window** menu.
|
||||
</Alert>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
---
|
||||
title: Welcome to Build It, Play It!
|
||||
prev: /education/build-it-play-it-mansion-of-wonder/landing-page
|
||||
next: /education/build-it-play-it-mansion-of-wonder/become-an-artist
|
||||
description: Start learning how to add particle effects to your Roblox experiences by taking the Build It Play It Mansion of Wonder challenge.
|
||||
---
|
||||
|
||||
Create your own Roblox experience by customizing elements of the **Mansion of Wonder** template in Roblox Studio! Design and personalize the magic blasts that you and your friends will use to defeat sinister slimes and ghastly ghosts as you ride through a spooky carnival experience.
|
||||
|
||||
Will you conquer these creatures with bolts of lightning or piles of angry cats? Only you get to decide: you build it, then play it!
|
||||
|
||||
<video controls src="../../assets/education/build-it-play-it-mansion-of-wonder/beginner-landing-page/trailer.mp4" width="100%"></video>
|
||||
|
||||
## Download Roblox Studio
|
||||
|
||||
Before starting, you'll need **Roblox Studio**. This program is used to create every experience on Roblox and is available for free on a **PC** or **Mac**. If you've played Roblox on your computer, you already have Studio installed. When using Studio, we recommend using a **mouse** if you have one.
|
||||
|
||||
If you already have a Roblox account, skip to the next <a href="../../education/build-it-play-it-mansion-of-wonder/beginner-landing-page.md#series-overview">section</a>.
|
||||
|
||||
1. [Sign up for an account](https://www.roblox.com/account/signupredir).
|
||||
|
||||
2. [Download Roblox Studio](https://www.roblox.com/create).
|
||||
|
||||
3. After installing, double-click the Roblox Studio desktop icon (Windows) or click the dock icon (Mac).
|
||||
|
||||
4. On the login screen, enter your Roblox username and password, then click **Log In**.
|
||||
|
||||
With your new account, remember these safety tips:
|
||||
|
||||
- **Never share your password**, even with a real life friend.
|
||||
- **Make your password hard to guess** — If your username is "bloxcool," your password should not be "bloxcool123."
|
||||
- **Roblox employees will never ask for your password** — Report anyone who asks using the [Report Abuse](https://en.help.roblox.com/hc/articles/203312410) feature.
|
||||
- **There's no such thing as free Robux** — Never trust players or sites who say they have a way to get free Robux!
|
||||
|
||||
## Series overview
|
||||
|
||||
To design your personalized **magic blast**, follow along with these three step-by-step tutorials.
|
||||
|
||||
<GridContainer numColumns="3">
|
||||
<figure>
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/beginner-landing-page/lesson-1-thumbnail.jpeg" />
|
||||
<figcaption>1: Design the blast</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/beginner-landing-page/lesson-2-thumbnail.jpeg" />
|
||||
<figcaption>2: Make it unique</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/beginner-landing-page/lesson-3-thumbnail.jpeg" />
|
||||
<figcaption>3: Make final touches</figcaption>
|
||||
</figure>
|
||||
</GridContainer>
|
||||
|
||||
After each lesson, there's a special code that can be redeemed for a **free** virtual Roblox **avatar item**. Once you've completed all the lessons, you'll have a Roblox experience to play with friends and some cool swag to show off.
|
||||
|
||||
<img
|
||||
src="../../assets/education/build-it-play-it-mansion-of-wonder/beginner-landing-page/beginner-avatar-items.jpeg"
|
||||
width="100%" />
|
||||
|
||||
If you're ready, click the **next arrow** to start.
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
---
|
||||
title: Challenge checkpoint
|
||||
prev: /education/build-it-play-it-mansion-of-wonder/making-an-explosion
|
||||
next: /education/build-it-play-it-mansion-of-wonder/make-final-touches
|
||||
description: Earn the second set of rewards in Roblox's Build It Play It Mansion of Wonders -- the Ghastly Aura avatar item and Alchemical Antics badge.
|
||||
---
|
||||
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/challenge-checkpoint-2/avatar-items.jpeg" width="100%" />
|
||||
|
||||
You got your animation ready! Celebrate your new skills by getting the **Ghastly Aura** and **Alchemical Antics** badge.
|
||||
|
||||
1. **Copy** the following code: `ThingsGoBoom`
|
||||
|
||||
2. Click the **Enter World** button below to open the **Mansion of Wonder** experience.
|
||||
|
||||
<a href="https://www.roblox.com/games/6901029464/">
|
||||
<Button variant="contained">Enter World</Button>
|
||||
</a>
|
||||
|
||||
3. When you are playing game, interact with Freddie the fox character, then click **REDEEM CODE**. Use the code from step 1 to get your item.
|
||||
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/challenge-checkpoint/prize-avatar.png" width="60%" />
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
---
|
||||
title: Challenge checkpoint
|
||||
prev: /education/build-it-play-it-mansion-of-wonder/invite-friends
|
||||
next: /education/build-it-play-it-mansion-of-wonder/next-steps
|
||||
description: Earn the third set of rewards in Roblox's Build It Play It Mansion of Wonders -- the Tomes of the Magus avatar item and Master of the Mansion badge.
|
||||
---
|
||||
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/challenge-checkpoint-3/avatar-items.jpeg" width="100%" />
|
||||
|
||||
You got your animation ready! Celebrate your new skills by getting the **Tomes of the Magus** and **Master of the Mansion** badge.
|
||||
|
||||
1. **Copy** the following code: `ParticleWizard`
|
||||
|
||||
2. Click the **Enter World** button below to open the **Mansion of Wonder** experience.
|
||||
|
||||
<a href="https://www.roblox.com/games/6901029464/">
|
||||
<Button variant="contained">Enter World</Button>
|
||||
</a>
|
||||
|
||||
3. When you are playing game, interact with Freddie the fox character, then click **REDEEM CODE**. Use the code from step 1 to get your item.
|
||||
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/challenge-checkpoint/prize-avatar.png" width="60%" />
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
---
|
||||
title: Challenge checkpoint
|
||||
prev: /education/build-it-play-it-mansion-of-wonder/save-by-publishing
|
||||
next: /education/build-it-play-it-mansion-of-wonder/using-textures
|
||||
description: Earn the first rewards in Roblox's Build It Play It Mansion of Wonders -- the Artist Backpack avatar item and Conjurer of Color badge.
|
||||
---
|
||||
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/challenge-checkpoint/avatar-items-hero.jpeg" width="100%" />
|
||||
|
||||
You got your animation ready! Celebrate your new skills by getting the **Artist Backpack** and **Conjurer of Color** badge.
|
||||
|
||||
1. **Copy** the following code: `FXArtist`
|
||||
|
||||
2. Click the **Enter World** button below to open the **Mansion of Wonder** experience.
|
||||
|
||||
<a href="https://www.roblox.com/games/6901029464/">
|
||||
<Button variant="contained">Enter World</Button>
|
||||
</a>
|
||||
|
||||
3. When you are playing game, interact with Freddie the fox character, then click **REDEEM CODE**. Use the code from step 1 to get your item.
|
||||
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/challenge-checkpoint/prize-avatar.png" width="60%" />
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
---
|
||||
title: Connect the beam
|
||||
prev: /education/build-it-play-it-mansion-of-wonder/creating-engaging-experiences
|
||||
next: /education/build-it-play-it-mansion-of-wonder/using-particles-for-actions
|
||||
description: Learn how to connect a beam effect in Roblox Studio, and to configure it's properties to customize it to your game's needs. Part of the Build It Play It Mansion of Wonders series.
|
||||
---
|
||||
|
||||
Now that you've made the attachments, it's time to connect them to the beam so that a texture can be shown.
|
||||
|
||||
1. Under **TestPlayer**, select the **TutorialBeam**. In the **Properties** window, find **Attachment0**. Click the empty box to the right of the property. Then, in the **Explorer** window, find **TestPlayer** and click on **PlayerAttachment**.
|
||||
|
||||
<video controls src="../../assets/education/build-it-play-it-mansion-of-wonder/connect-the-beam/attachment0-to-player.mp4" ></video>
|
||||
|
||||
2. In the **TutorialBeam** properties, set **Attachment1** to the attachment you created in **GoalPart1**, the **GoalAttachment**.
|
||||
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/connect-the-beam/set-goal-attachment.png" width="35%" />
|
||||
|
||||
## Adjust the beam
|
||||
|
||||
By default, a beam doesn't always face the camera. This may lead to situations where players are unable to see a beam from different angles. This can be fixed by turning on a property called **FaceCamera**.
|
||||
|
||||
<GridContainer numColumns="2">
|
||||
<figure>
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/connect-the-beam/face-camera-off.jpeg" />
|
||||
<figcaption>FaceCamera Off</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/connect-the-beam/face-camera-on.jpeg" />
|
||||
<figcaption>FaceCamera On</figcaption>
|
||||
</figure>
|
||||
</GridContainer>
|
||||
|
||||
1. Make the beam visible at any position by going into the beam's properties and enabling **FaceCamera**.
|
||||
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/connect-the-beam/set-face-camera.png" width="35%" />
|
||||
|
||||
Once finished, you should see a white beam between the player and goal, regardless of camera angle.
|
||||
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/connect-the-beam/default-beam.png" width="80%" />
|
||||
|
||||
## Make the tutorial arrows
|
||||
|
||||
The image displayed along the beam can be customized by changing its 2D texture. In addition, beams have a variety of visual options, such as texture, color, motion that can be modified.
|
||||
|
||||
1. To stream arrows along the beam like in the example, copy `5886559421` and paste it into the beam's **Texture** property.
|
||||
|
||||
<video controls src="../../assets/education/build-it-play-it-mansion-of-wonder/connect-the-beam/beam-texture-change.mp4" ></video>
|
||||
|
||||
<Alert severity="info">
|
||||
Custom textures can be any image that you have. Learn how to upload them in the [Asset Manager](../../projects/assets/manager.md) article.
|
||||
</Alert>
|
||||
|
||||
2. Right now, the arrow's texture is stretched. Set **TextureMode** to **Static** to make the arrow repeat at its original size.
|
||||
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/connect-the-beam/show-static-beam.png" />
|
||||
|
||||
<Alert severity="warning">
|
||||
If the arrow doesn't point the correct direction, attachments may be swapped. Make sure that Attachment0 connects to PlayerAttachment and Attachment1 to GoalAttachment. Alternatively, if you're using a custom texture, you may need to mirror the image in a photo-editing program.
|
||||
</Alert>
|
||||
|
||||
3. Modify beam properties like **Color**, **LightEmission**, and **TextureSpeed** to design something that feels eye-catching and appealing. Below is just one example.
|
||||
|
||||
<video controls src="../../assets/education/build-it-play-it-mansion-of-wonder/connect-the-beam/finished-beam-example.mp4"></video>
|
||||
|
||||
### Tips for color choices
|
||||
|
||||
**Color** is one opportunity for improving a first time user experience. For example, contrasting or saturated colors get more attention, making it easier to inform players where to look on their screen.
|
||||
|
||||
Additionally, as you design, consider [accessibility](../../production/publishing/accessibility.md) for your players. Some players may struggle to see certain color combinations, making it important that colors appeal to the broadest audience.
|
||||
|
|
@ -0,0 +1,168 @@
|
|||
---
|
||||
title: Create a sparkler
|
||||
prev: /education/build-it-play-it-mansion-of-wonder/next-steps
|
||||
description: Learn how to attach a particle emitter to a player-carried tool in Roblox Studio. Once you are finished, Earn the fourth set of rewards in Roblox's Build It Play It Mansion of Wonders -- the Head Slime avatar item and Glimmer and Gumption badge.
|
||||
---
|
||||
|
||||
You've learned the basics of particles, now apply those skills to design a sparkler that can be carried around by people. Just like blasts, the particles can be customized for different effects, like magical stars or raging flames.
|
||||
|
||||
In addition to the properties covered in the Build It, Play It challenge, this tutorial will use color gradients which allows particles to change colors over time, like from blue to yellow as seen in the video. The sparklers can be used with the Mansion of Wonder template or any other experience you've created.
|
||||
|
||||
<video controls src="../../assets/education/build-it-play-it-mansion-of-wonder/creating-a-sparkler/final-example.mp4"></video>
|
||||
|
||||
## Find a tool
|
||||
|
||||
For this tutorial, sparklers are **tools** with attached particle effects. In Roblox, tools are items players equip; if you've played an experience with a sword or gun, it's likely you've used tools before.
|
||||
|
||||
To start, add the pre-made sparkler set into your existing experience. You'll then choose one and customize its particle emitter.
|
||||
|
||||
1. Start by pressing the **Add to Inventory** button in the following component. This adds the set into your Inventory, which is accessed in the Toolbox.
|
||||
|
||||
<BrowseSampleCard href='https://create.roblox.com/store/asset/6971223240' description='Click the button to get a set of sparklers for the tutorial.' title='Sparkler Set' assetId={6971223240} />
|
||||
|
||||
<br> </br>
|
||||
|
||||
1. In Studio, find the **Toolbox**. If it's not visible, open it from the **Window** menu.
|
||||
|
||||
1. Select the **Inventory** tab.
|
||||
|
||||
<img src="../../assets/education/general/Toolbox-Inventory.png" width="360" />
|
||||
|
||||
1. Make sure the left dropdown is set to **My Models**, then find and click on **Sparkler Set**. This will add the parts into your experience.
|
||||
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/creating-a-sparkler/show-sparklers.jpeg" />
|
||||
|
||||
## Create the particle
|
||||
|
||||
Each sparkler comes with a customizable particle emitter. Follow the steps to find the particle, change its texture, and then create the color gradient.
|
||||
|
||||
1. Select one of the pre-made tools. In the **Explorer** window, find the highlighted part. Then, click the **>** arrows to expand until you find **Attachment** and select **SparklerParticle**.
|
||||
|
||||
<video controls src="../../assets/education/build-it-play-it-mansion-of-wonder/creating-a-sparkler/click-sparkler-particles.mp4" width="40%"></video>
|
||||
|
||||
2. Change the **Texture** property. Some texture ID's are included below.
|
||||
|
||||
<GridContainer numColumns="3">
|
||||
<figure>
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/using-textures/star-1.png" />
|
||||
<figcaption>5860841663</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/using-textures/swirl.png" />
|
||||
<figcaption>5857851812</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/using-textures/heart.png" />
|
||||
<figcaption>5857851618</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/using-textures/circle.png" />
|
||||
<figcaption>6711256324</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/using-textures/smoke.png" />
|
||||
<figcaption>5833235272</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/using-textures/star-2.png" />
|
||||
<figcaption>6772783963</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/using-textures/spark.png" />
|
||||
<figcaption>5833323391</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/using-textures/circle-2.png" />
|
||||
<figcaption>5857892330</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/using-textures/scratch.png" />
|
||||
<figcaption>5857892405</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/using-textures/trace.png" />
|
||||
<figcaption>5857931724</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/using-textures/triangle.png" />
|
||||
<figcaption>5857851618</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/using-textures/star-3.png" />
|
||||
<figcaption>5860841737</figcaption>
|
||||
</figure>
|
||||
</GridContainer>
|
||||
|
||||
When finished, a tool may look like the example below.
|
||||
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/creating-a-sparkler/show-texture.jpeg" />
|
||||
|
||||
3. Find the **Color** property and click anywhere in the row next to its name. Then, press the **...** to open the Color Sequence editor. You'll learn how to edit the color in the next section.
|
||||
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/creating-a-sparkler/select-color-property.png" width="40%" />
|
||||
|
||||
## Create a color gradient
|
||||
|
||||
Each **arrow** on the color sequence represents a different color. Colors can be changed, added, removed, or moved around. Use a combination of techniques to create a color gradient, like the example below.
|
||||
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/creating-a-sparkler/final-example.jpeg" />
|
||||
|
||||
### Change a color
|
||||
|
||||
Under the color sequence, select an **arrow**. Then, click the **Color** button to open the color picker and set a new color. Note that arrows are yellow when selected.
|
||||
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/creating-a-sparkler/select-color.png" />
|
||||
|
||||
### Add or remove colors
|
||||
|
||||
To add a color, click on the color sequence. This adds a new arrow that can be clicked. To remove a color, click on an arrow and click the **Delete** button on the screen.
|
||||
|
||||
<video controls src="../../assets/education/build-it-play-it-mansion-of-wonder/creating-a-sparkler/add-delete-colors.mp4"></video>
|
||||
|
||||
### Move colors
|
||||
|
||||
To move a color, click on any arrow other than the start or end arrows and drag it to a new area.
|
||||
|
||||
<video controls src="../../assets/education/build-it-play-it-mansion-of-wonder/creating-a-sparkler/move-colors.mp4"></video>
|
||||
|
||||
### Improve the particle
|
||||
|
||||
After creating a color gradient, use your knowledge from the previous lessons to change properties like **Size** and **Speed** to get the particular effect you want.
|
||||
|
||||
## Finish the sparkler
|
||||
|
||||
So players can have the sparkler when the experience starts, you'll need to move it to the StarterPack. This folder holds all items a player receives when they join.
|
||||
|
||||
1. In the **Explorer** window, find the **tool** of your choice, such as the **Staff Sparkler** or **Torch Sparkler**. Right-click on that tool and select **Cut**. This copies the staff to your clipboard, but also deletes it from the folder.
|
||||
|
||||
<video controls src="../../assets/education/build-it-play-it-mansion-of-wonder/creating-a-sparkler/cut-staff.mp4" width="40%"></video>
|
||||
|
||||
2. Scroll down in the **Explorer** window until you find the **StarterPack**. Right-click on it and select **Paste Into** to add the tool.
|
||||
|
||||
<video controls src="../../assets/education/build-it-play-it-mansion-of-wonder/creating-a-sparkler/paste-staff.mp4" width="40%"></video>
|
||||
|
||||
3. Playtest project, and select the sparkler from your backpack by pressing `1` on your keyboard. Note that you can repeat this process to make more sparklers.
|
||||
|
||||
<video controls src="../../assets/education/build-it-play-it-mansion-of-wonder/creating-a-sparkler/final-staff.mp4"></video>
|
||||
|
||||
<Alert severity="info">
|
||||
Each sparkler has a name that's shown to players in the experience. To rename a sparkler, in the **Explorer** window, right click on the tool and select **Rename**.
|
||||
</Alert>
|
||||
|
||||
## Challenge checkpoint
|
||||
|
||||
You got your animation ready! Celebrate your new skills by getting the **Head Slime** avatar item and **Glimmer and Gumption** badge.
|
||||
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/creating-a-sparkler/avatar-items.jpeg" />
|
||||
|
||||
1. **Copy** the following code: `Glimmer`
|
||||
|
||||
2. Click the **Enter World** button below to open the **Mansion of Wonder** experience.
|
||||
|
||||
<a href="https://www.roblox.com/games/6901029464/">
|
||||
<Button variant="contained">Enter World</Button>
|
||||
</a>
|
||||
|
||||
3. When you are playing game, interact with Freddie the fox character, then click **REDEEM CODE**. Use the code from step 1 to get your item.
|
||||
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/challenge-checkpoint/prize-avatar.png" width="60%" />
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
---
|
||||
title: Create engaging experiences
|
||||
prev: /education/build-it-play-it-mansion-of-wonder/experienced-landing-page
|
||||
next: /education/build-it-play-it-mansion-of-wonder/connect-the-beam
|
||||
description: Start learning how to add a tutorial using beam effects in Roblox Studio as part of the Build It Play It Mansion of Wonder. You can add these to your own game, or use a provided template.
|
||||
---
|
||||
|
||||
Before starting, think about your past experiences opening a new game or smartphone app. In bad experiences, like trying to use a confusing app, you might have given up and closed it. Or maybe a game had too much information up front that was hard to remember.
|
||||
|
||||
In order to build good experiences, creators must engage and inform new users at the same time. There's an entire career devoted to studying this. **User experience (UX)** designers are people who take time to make sure that users can figure out where to go and how to accomplish goals without feeling frustrated.
|
||||
|
||||
For instance, these two pictures compare the impact user experience can have to someone's first impression of a game.
|
||||
|
||||
<GridContainer numColumns="2">
|
||||
<figure>
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/creating-engaging-experiences/ux-example-good.jpeg" />
|
||||
<figcaption>Accessible UX</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/creating-engaging-experiences/ux-example-bad.jpeg" />
|
||||
<figcaption>Overwhelming UX</figcaption>
|
||||
</figure>
|
||||
</GridContainer>
|
||||
|
||||
## Project setup
|
||||
|
||||
This course will walk through designing a guided tutorial using a starter template. Alternatively, you can use your own project since the finished tutorial system can be applied to any experience.
|
||||
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/creating-engaging-experiences/template-overview.jpeg" width="100%" />
|
||||
|
||||
The starter place for this series includes parts of an amusement park themed game where players collect tickets for a prize. New players will be directed to booths to collect their tickets.
|
||||
|
||||
### Open the template
|
||||
|
||||
Time to open Roblox Studio! Click the following button to open the **Boardwalk** template.
|
||||
|
||||
<UseStudioButton variant="" buttonTextTranslationKey="Action.EditInStudio" placeId="6763393969" universeId="2563173896" />
|
||||
|
||||
A new instance of Studio will open with the map. The first thing you'll see is a TestPlayer object that will simulate a player.
|
||||
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/creating-engaging-experiences/open-template.jpg" />
|
||||
|
||||
### Use your own project
|
||||
|
||||
If using your own project, use the main actions your players will do during the experience. For instance, in a farming game, have players collect wheat to sell at a shop booth.
|
||||
|
||||
Additionally, we recommend the following:
|
||||
|
||||
1. **Import Files** - Import the [Boardwalk Starter Objects](https://www.roblox.com/library/6777983114/Boardwalk-Starter-Objects) into the project's Workspace using the Inventory. This includes ticket booths with ProximityPrompts and a TestPlayer.
|
||||
|
||||
2. **Follow the Course and Adapt** - When finished, replace the premade models with your own. Keep in mind, you may need to rename some variable references in scripts.
|
||||
|
||||
## The template
|
||||
|
||||
The place includes two interactive booths with `Class.ProximityPrompt|ProximityPrompts`, which are objects that run scripts when players interact with something in the template. During the tutorial, players will interact with each booth to collect tickets and advance the tutorial. Note that all parts but the booth and test player are locked.
|
||||
|
||||
## Beams and attachments
|
||||
|
||||
To guide players to booths for tickets, you'll create a path using beams like in the video below.
|
||||
|
||||
<video controls src="../../assets/education/build-it-play-it-mansion-of-wonder/creating-engaging-experiences/beam-example.mp4" width="100%" ></video>
|
||||
|
||||
**Beams** are objects also used for effects like lasers or force fields. This object draws a texture between two points with customizable properties like speed, width, and curve size.
|
||||
|
||||
To display the beam, **attachments** are needed to set the beam's start and end points. You'll insert one attachment into the player and the other attachment into the goal object.
|
||||
|
||||
1. In the **Explorer** window, find **TestPlayer** and add an **attachment** named **PlayerAttachment**.
|
||||
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/creating-engaging-experiences/create-player-attachment.png" width="40%" />
|
||||
|
||||
2. Under **TestPlayer**, add a **Beam** named **TutorialBeam**. Keep in mind, the beam won't be visible until its start and end points are set later on.
|
||||
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/creating-engaging-experiences/create-beam.png" width="40%" />
|
||||
|
||||
3. Find the **TutorialGoals** folder and **expand** it. Under both **InteractionPart** objects, add an attachment named **GoalAttachment**.
|
||||
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/creating-engaging-experiences/create-goal-attachments.png" width="40%" />
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
---
|
||||
title: A player's first experience
|
||||
prev: /education/build-it-play-it-mansion-of-wonder/landing-page
|
||||
next: /education/build-it-play-it-mansion-of-wonder/creating-engaging-experiences
|
||||
description: Learn why the first time user experience of a game is so important, and how you can use effects build to help a player learn how to play. This is the beginning of the advanced series in Roblox's Build It Play It Mansion of Wonder.
|
||||
---
|
||||
|
||||
Are you an established game developer? Or just getting started? Either way, the first impression users have of your experiences matter. If they don't like what they see or don't know what to do, they're likely to leave and never come back. One way to create a strong **first time user experience** is to teach new users how to play by designing an interactive tutorial.
|
||||
|
||||
<video controls src="../../assets/education/build-it-play-it-mansion-of-wonder/experienced-landing-page/example-full-game.mp4" width="100%"></video>
|
||||
|
||||
While doing the tutorial, players will learn about key aspects of the experience, whether it's collecting items or knowing where to find the shop. In your tutorial, you'll guide first time players to a goal, let them know when that task has been completed, and then lead them to their next goal
|
||||
|
||||
The concepts and skills in this series can be applied to any experience, whether you're working on your own or want to use the supplied example map.
|
||||
|
||||
When finished, you'll be able to:
|
||||
|
||||
- Use beams to design a trail that guides players to each goal.
|
||||
- Create a particle effect that plays when a player completes their task.
|
||||
- Add scripts to track the player's current goals and progress.
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
---
|
||||
title: Finish the blast
|
||||
prev: /education/build-it-play-it-mansion-of-wonder/using-textures
|
||||
next: /education/build-it-play-it-mansion-of-wonder/making-an-explosion
|
||||
description: Learn how to change the size and movement style of particles from particle emitters in Roblox Studio as part of the Build It Play It Mansion of Wonders.
|
||||
---
|
||||
|
||||
Make final changes to the blast by editing the size and how it moves.
|
||||
|
||||
## Change the size
|
||||
|
||||
1. Find **Size** and click on its row. Type a number from 1 to 10 and then press **Enter**.
|
||||
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/finish-the-blast/change-size.png" />
|
||||
|
||||
You may have a texture that looks like the example below.
|
||||
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/finish-the-blast/change-size-example.jpeg" width="50%" />
|
||||
|
||||
2. Press **Play** to test the project. If needed, make changes to color and size to better fit your vision. When finished, finish testing by clicking the **Stop** button or pressing <kbd>Shift</kbd><kbd>F5</kbd>.
|
||||
|
||||
<video controls src="../../assets/education/build-it-play-it-mansion-of-wonder/finish-the-blast/show-shot-color.mp4" ></video>
|
||||
|
||||
## Change the move style
|
||||
|
||||
A particle can either be a **trail** or a **single blast** by toggling the **LockedToPart** property. The video below shows what a trailing blast vs a single blast looks like. Choose which one you like better, and then continue.
|
||||
|
||||
<video controls src="../../assets/education/build-it-play-it-mansion-of-wonder/finish-the-blast/locked-to-part.mp4" width="100%"></video>
|
||||
|
||||
### Make trailing blasts
|
||||
|
||||
1. [Skip](../../education/build-it-play-it-mansion-of-wonder/making-an-explosion.md) to the next section. To have a trailing blast, don't do anything.
|
||||
|
||||
### Make single blasts
|
||||
|
||||
1. In the particle properties, scroll down to find **LockToPart**. Click the checkbox to turn it on.
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/finish-the-blast/set-locked-to-part.png" />
|
||||
|
||||
2. **Play** the project to check that it's moving as a single part.
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
---
|
||||
title: Invite friends
|
||||
prev: /education/build-it-play-it-mansion-of-wonder/make-final-touches
|
||||
next: /education/build-it-play-it-mansion-of-wonder/challenge-checkpoint-3
|
||||
description: Learn how to invite your friends to play the game you build in Roblox Studio by configuring the game's permissions. Part of the Build It Play It Mansion of Wonder series.
|
||||
---
|
||||
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/invite-friends/hero-image.jpeg" />
|
||||
|
||||
Adventuring is always more fun with friends, so let's set up your experience for others can play. When an experience is first published, it's automatically set to private. Set it instead to public so others can join.
|
||||
|
||||
1. **Publish** your experience so your friends will get your latest changes. Remember you can publish by going to the File menu in the top left.
|
||||
|
||||
2. Select **File** (top left of Studio) and click **Experience Settings**.
|
||||
|
||||
3. On the left bar, select **Permissions**, then choose **Public**.
|
||||
|
||||
4. Click the **Save** button.
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
---
|
||||
title: Mansion of wonder
|
||||
description: Learn how to use special effects in Roblox Studio to give players feedback or help them learn how to play your game in the Build It Play It Mansion of Wonder.
|
||||
---
|
||||
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/landing-page/header.jpeg" width="100%" />
|
||||
|
||||
Using Roblox Studio, you'll learn to create special effects, whether it's a magical blast in an arcade experience, or a beam of arrows that guides new players around a world. These two tutorials take you step-by-step as you learn and earn exclusive prizes.
|
||||
|
||||
## What's your skill level?
|
||||
|
||||
Depending on whether or not you've used Roblox Studio, there are different tutorials for your skill level. Pick the one below that suits your needs.
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
**BEGINNER**
|
||||
|
||||
Never used Studio? Get started by designing special effects for an arcade shooter!
|
||||
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/landing-page/beginner.jpeg" width="100%" />
|
||||
|
||||
Earn these prizes!
|
||||
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/landing-page/prizes-beginner.png" width="100%" />
|
||||
|
||||
<a href="../../education/build-it-play-it-mansion-of-wonder/beginner-landing-page.md">
|
||||
<Button variant="contained">Get Started</Button>
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
**EXPERIENCED**
|
||||
|
||||
Used Studio before? Super-charge your skills by learning particle effects and scripting!
|
||||
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/landing-page/experienced.jpeg" width="100%" />
|
||||
|
||||
Earn this prize!
|
||||
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/landing-page/prizes-experienced.png" width="100%" />
|
||||
|
||||
<a href="../../education/build-it-play-it-mansion-of-wonder/experienced-landing-page.md">
|
||||
<Button variant="contained">Get Started</Button>
|
||||
</a>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
</table>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
---
|
||||
title: Make final touches
|
||||
prev: /education/build-it-play-it-mansion-of-wonder/challenge-checkpoint-2
|
||||
next: /education/build-it-play-it-mansion-of-wonder/invite-friends
|
||||
description: Learn how to fine tune your particle emitters in Roblox Studio by adjusting their size, speed, light emission, rotational speed, and lifetime. Part of the Build It Play It Mansion of Wonder series.
|
||||
---
|
||||
|
||||
Make your explosion feel more unique by customizing more properties.
|
||||
|
||||
## Size and speed
|
||||
|
||||
Start by changing these two properties to achieve your vision.
|
||||
|
||||
1. In the explosion properties, change **Size** to a number between `1` and `10` for best results. Different particle textures may work better with different sizes.
|
||||
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/make-final-touches/change-explode-size.png" width="40%" />
|
||||
|
||||
Some example sizes can be seen in the video below.
|
||||
|
||||
<video controls src="../../assets/education/build-it-play-it-mansion-of-wonder/make-final-touches/size-comparison.mp4"></video>
|
||||
|
||||
2. Particles can burst out quickly, or creep out slowly. To experiment with this speed, scroll down to the **Emission** section and find **Speed**. We recommend trying a number between `10` (slow) and `100` (fast).
|
||||
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/make-final-touches/change-speed.png" width="40%" />
|
||||
|
||||
3. When finished, run the project to test the particle. Make changes to the design until it looks right to you.
|
||||
|
||||
<video controls src="../../assets/education/build-it-play-it-mansion-of-wonder/make-final-touches/explosion-final.mp4"></video>
|
||||
|
||||
## Additional properties
|
||||
|
||||
You've experimented with basic properties of the magic blast and the explosion from your blaster, but there are a few more properties to personalize your work. Try changing the properties below, or experiment with one that isn't listed.
|
||||
|
||||
### LightEmission
|
||||
|
||||
Makes particles glow and can be a range from `0` (opaque) to `1` (glowing).
|
||||
|
||||
<GridContainer numColumns="3">
|
||||
<figure>
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/make-final-touches/light-emission-0.jpeg" />
|
||||
<figcaption>0</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/make-final-touches/light-emission-0.5.jpeg" />
|
||||
<figcaption>0.5</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/make-final-touches/light-emission-1.0.jpeg" />
|
||||
<figcaption>1.0</figcaption>
|
||||
</figure>
|
||||
</GridContainer>
|
||||
|
||||
### RotSpeed
|
||||
|
||||
Makes particles rotate over time. Notice how the rotation of the texture below (straight lines) changes as the RotSpeed changes.
|
||||
|
||||
<video controls src="../../assets/education/build-it-play-it-mansion-of-wonder/make-final-touches/rotation-speed.mp4"></video>
|
||||
|
||||
### Lifetime
|
||||
|
||||
This property is how long particles exist in seconds. Depending on your explosion, you may want a short lifetime (e.g. 0.5 seconds) for a quick, snappy blast, or a longer number (e.g. 2 seconds) for something that lingers.
|
||||
|
||||
<video controls src="../../assets/education/build-it-play-it-mansion-of-wonder/make-final-touches/lifetime.mp4"></video>
|
||||
|
||||
### Randomized numbers
|
||||
|
||||
Randomizing properties can make particles feel less repetitive. You can add randomization to some particles properties, such as **Lifetime** and **Rotation**, by inputting a minimum and maximum value.
|
||||
|
||||
1. To use a randomized property, click the small arrow next to the property name. Once the property expands, you can enter a min and max value.
|
||||
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/make-final-touches/show-random-options.png" width="40%" />
|
||||
|
||||
<Alert severity="info">
|
||||
Using your new knowledge with explosions, take some time to also **improve the blast particle**. Experiment with properties like Lifetime. Remember, the blast emitter can be found by searching for `BlastParticles` in the **Explorer** window.
|
||||
</Alert>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
---
|
||||
title: Make an explosion
|
||||
prev: /education/build-it-play-it-mansion-of-wonder/finish-the-blast
|
||||
next: /education/build-it-play-it-mansion-of-wonder/challenge-checkpoint-2
|
||||
description: Learn how to make and explosion effect from scratch with a custom texture using particle emitters in Roblox Studio as part of the Build It Play It Mansion of Wonder.
|
||||
---
|
||||
|
||||
Now for the explosions! The same skills you learned in making the magic blast also apply to making an explosion, such as changing the color and size.
|
||||
|
||||
<video controls src="../../assets/education/build-it-play-it-mansion-of-wonder/making-an-explosion/final-shot-example.mp4" ></video>
|
||||
|
||||
## Change the look
|
||||
|
||||
Start by changing basic properties of the explosion, such as the color and texture.
|
||||
|
||||
1. In the **Explorer** window's search bar, clear the previous search, then type **ExplosionParticles** and click the found object.
|
||||
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/making-an-explosion/search-explosion.png" width="40%" />
|
||||
|
||||
2. In the **Properties** window, change the **color** of the explosion. Think of a color that will go well with the blast, such as a similar or contrasting color.
|
||||
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/making-an-explosion/explode-color.png" width="40%" />
|
||||
|
||||
<Alert severity="warning">
|
||||
Keep in mind, you can only see what your explosion looks like by testing your experience.
|
||||
</Alert>
|
||||
|
||||
3. Find a texture for your explosion from the options below and then **copy** the **number** below it. The explosion texture can be the same or different than the magic blast.
|
||||
|
||||
<GridContainer numColumns="3">
|
||||
<figure>
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/using-textures/star-1.png" />
|
||||
<figcaption>5860841663</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/using-textures/swirl.png" />
|
||||
<figcaption>5857851812</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/using-textures/heart.png" />
|
||||
<figcaption>5857851618</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/using-textures/circle.png" />
|
||||
<figcaption>6711256324</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/using-textures/smoke.png" />
|
||||
<figcaption>5833235272</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/using-textures/star-2.png" />
|
||||
<figcaption>6772783963</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/using-textures/spark.png" />
|
||||
<figcaption>5833323391</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/using-textures/circle-2.png" />
|
||||
<figcaption>5857892330</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/using-textures/scratch.png" />
|
||||
<figcaption>5857892405</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/using-textures/trace.png" />
|
||||
<figcaption>5857931724</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/using-textures/triangle.png" />
|
||||
<figcaption>5857851618</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/using-textures/star-3.png" />
|
||||
<figcaption>5860841737</figcaption>
|
||||
</figure>
|
||||
</GridContainer>
|
||||
|
||||
4. Find the **Texture** property, then paste the copied number ID in the previous step. The example in the following picture uses the star texture.
|
||||
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/making-an-explosion/explode-texture.png" width="40%" />
|
||||
|
||||
5. To see the new colored texture, press **Play**. Then, walk up to the Play It section and start a new game.
|
||||
|
||||
<video controls src="../../assets/education/build-it-play-it-mansion-of-wonder/making-an-explosion/explosion-color-texture.mp4"></video>
|
||||
|
||||
Right now, the explosions might look a bit small, or you may want to make some other tweaks to them. Keep going to fine-tune the look of explosions.
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
---
|
||||
title: Next steps
|
||||
prev: /education/build-it-play-it-mansion-of-wonder/adding-scripts
|
||||
description: For advanced developers, choose what to learn next in the Roblox Build It Play It Mansion of Wonder.
|
||||
---
|
||||
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/next-steps-advanced/hero-image.jpeg" />
|
||||
|
||||
So far, you've learned how to create beams and particle effects. Now, show off your work or take your skills further!
|
||||
|
||||
## Learn more about user experience
|
||||
|
||||
User experience designers are a common career choice for many in video games and software in general. Learn more about what this profession does in the [design tab](../../production/game-design/ui-ux-design.md).
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
---
|
||||
title: Next steps
|
||||
prev: /education/build-it-play-it-mansion-of-wonder/challenge-checkpoint-3
|
||||
description: For newer developers, choose what to learn next in the Roblox Build It Play It Mansion of Wonder.
|
||||
---
|
||||
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/next-steps/hero-final.jpeg" width="100%" />
|
||||
|
||||
**Congratulations** on taking the first steps to creating experiences. So far, you've learned how to create special effects in your very own Roblox action experience.
|
||||
|
||||
Now, **keep going!**
|
||||
|
||||
## Supercharge your experience
|
||||
|
||||
Learn techniques to customize your particles even further or take a chance to show off your work.
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/next-steps/extension-cards-sparkler.jpeg" width="60%" />
|
||||
|
||||
**Create a Sparkler**
|
||||
|
||||
Add particles onto staves or torches your players wield!
|
||||
|
||||
<a href="../../education/build-it-play-it-mansion-of-wonder/creating-a-sparkler.md">
|
||||
<Button variant="contained">View</Button>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
---
|
||||
title: Add particle emitters
|
||||
prev: /education/build-it-play-it-mansion-of-wonder/test-and-play
|
||||
next: /education/build-it-play-it-mansion-of-wonder/save-by-publishing
|
||||
description: Learn Roblox Studio camera controls and the basics of editing particle emitters in the Build It Play It Mansion of Wonders.
|
||||
---
|
||||
|
||||
While testing, you may have noticed that the magic blasts are a bit bland. The white sparks you see right now are just a starting point; you'll make them much cooler by customizing a `Class.ParticleEmitter` object.
|
||||
|
||||
Particle emitters make special effects in Roblox Studio. If you've seen effects like smoke, fire, or even magic portals in other Roblox experiences, you've definitely seen `Class.ParticleEmitter|ParticleEmitters`.
|
||||
|
||||
<video controls src="../../assets/education/build-it-play-it-mansion-of-wonder/particle-emitters/particle-example.mp4" width="100%"></video>
|
||||
|
||||
## Find the blast
|
||||
|
||||
The template has two customizable particle emitters: one for the **magic blast** that flies through the air and another for the **explosion** when it hits an enemy. Start first with the blast, and in a later tutorial, you'll work on the explosion.
|
||||
|
||||
1. Using the camera controls (see below for instructions), move the camera to get a good view of the magic blast, a ball with white sparkles.
|
||||
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/particle-emitters/particle-holder.png" width="100%" />
|
||||
|
||||
Below are **controls** on using the camera in Studio.
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Action</th>
|
||||
<th>Control</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><b>Move</b></td>
|
||||
<td><kbd>W</kbd> <kbd>A</kbd> <kbd>S</kbd> <kbd>D</kbd> or arrow keys</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b>Rotate</b></td>
|
||||
<td>
|
||||
**Computer Mouse:** Hold the right mouse button and move the mouse to look around.
|
||||
**Laptop Trackpad:** Hold down two fingers and click with another.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b>Zoom</b></td>
|
||||
<td>
|
||||
**Computer Mouse:** Use the mouse scroll wheel.
|
||||
**Laptop Trackpad:** Slide two fingers up or down.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
2. In the top-right box in Roblox Studio, find the **Explorer** window. This has all of the pieces of the project, such as code, decorations, and the blast you'll personalize.
|
||||
|
||||
<Alert severity="info">
|
||||
If you don't see it the **Explorer** window, open it from Studio's **Window** menu.
|
||||
</Alert>
|
||||
|
||||
3. You'll need to find the magic blast's particles in the **Explorer** window to work with it. In the **Explorer** window's **search bar**, type **BlastParticles**, then select the object found.
|
||||
|
||||
<video controls src="../../assets/education/build-it-play-it-mansion-of-wonder/particle-emitters/select-blaster-shot.mp4" width="40%"></video>
|
||||
|
||||
## Change the color
|
||||
|
||||
Start personalizing the magical blast by giving it a new color.
|
||||
|
||||
1. You can make changes to particle emitters in the **Properties** window. Find it on the bottom right of Studio, under the **Explorer** window.
|
||||
|
||||
2. In the **Properties** window, find the **Color** property, then double-click the light grey box to its right. A pop-up **Colors** window displays.
|
||||
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/particle-emitters/select-color.png" />
|
||||
|
||||
3. In the **Colors** window, select a color and then click the **OK** button. For example, if you set the **Color** property to `202, 210, 20`, you will then have a particle that looks like the example below.
|
||||
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/particle-emitters/show-color-change.png" width="40%" />
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
---
|
||||
title: Save by publishing
|
||||
prev: /education/build-it-play-it-mansion-of-wonder/particle-emitters
|
||||
next: /education/build-it-play-it-mansion-of-wonder/challenge-checkpoint
|
||||
description: Learn how to save the projects you make in Roblox Studio for the Build it Play It Mansion of Wonders challenge.
|
||||
---
|
||||
|
||||
Before moving to the next section, take a moment to save the project. It's important to save the whole project by publishing it to Roblox. **Publishing** just saves your project to your Roblox account, it doesn't make it public yet. It's a good idea to publish every ten minutes while you're working or after making a big change.
|
||||
|
||||
1. Select **File** (top left of Studio) and click **Publish to Roblox** to open the publishing window.
|
||||
|
||||
2. Enter a **name** for your experience and an optional **description**.
|
||||
|
||||
3. When you're happy with the name and description of your project (you can always go back and change it), click the **Create** button. Once published, a project can be edited from any computer since all published projects connected to your account.
|
||||
|
||||
<Alert severity="info">
|
||||
Next time you want to save your work, just go to **File** ⟩ **Publish to Roblox** or use the hotkey combo (<kbd>Alt</kbd><kbd>P</kbd> or <kbd>⌥</kbd><kbd>P</kbd>).
|
||||
</Alert>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
---
|
||||
title: Test and play
|
||||
prev: /education/build-it-play-it-mansion-of-wonder/become-an-artist
|
||||
next: /education/build-it-play-it-mansion-of-wonder/particle-emitters
|
||||
description: Learn how to use Roblox Studio to play the Build It Play It Mansion of Wonder template game.
|
||||
---
|
||||
|
||||
To see how the carnival ride works, test it out. When playing, you'll ride on a cart and blast away approaching enemies. Just make sure no enemies touch the ride - too many hits from an enemy and the cart will explode!
|
||||
|
||||
1. Click **Play** to test.
|
||||
|
||||
<img src="../../assets/education/general/play-button.png" width="360" />
|
||||
|
||||
2. In the experience, walk up to the character under the **Play It** sign and press <kbd>E</kbd> to open up a menu. On that screen, click **Join Game**.
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/test-and-play/start-game.png" />
|
||||
|
||||
<Alert severity="warning">
|
||||
During the ride, you can't use your mouse to click parts of Studio. To use the mouse, press <kbd>1</kbd> on the keyboard.
|
||||
</Alert>
|
||||
|
||||
3. When the ride starts, left click to shoot the blaster at enemies. Watch the cart's **health** at the top of the screen and try and make it to the treasure room at the end.
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/test-and-play/game-health.png" width="100%" />
|
||||
|
||||
4. Either finish a round, or press <kbd>1</kbd> to use the mouse. To stop testing, press the **Stop** button or press <kbd>Shift</kbd><kbd>F5</kbd> on the keyboard.
|
||||
|
||||
<img src="../../assets/education/general/stop-button.png" width="360" />
|
||||
|
|
@ -0,0 +1,150 @@
|
|||
---
|
||||
title: Use particles for actions
|
||||
prev: /education/build-it-play-it-mansion-of-wonder/connect-the-beam
|
||||
next: /education/build-it-play-it-mansion-of-wonder/adding-scripts
|
||||
description: Learn how to use particle effects to give players feedback to their actions, and learn several techniques to further customize your particles in Roblox Studio. Part of the Build It Play It Mansion of Wonder series.
|
||||
---
|
||||
|
||||
With arrows finished, first-time players can follow the path to their goal, making their initial introduction clearer and less likely that they get lost and quit. To further enhance the user experience, let players know they've successfully completed their task with an appealing particle effect.
|
||||
|
||||
In the example below, a celebratory burst of ticket-shaped particles emits whenever players interact with the booths.
|
||||
|
||||
<video controls src="../../assets/education/build-it-play-it-mansion-of-wonder/using-particles-for-actions/particle-interaction.mp4" width="100%"></video>
|
||||
|
||||
<Alert severity="info">
|
||||
Giving **multiple forms** of feedback is also another way of improving a player's user experience. A player with the sound down or one who is hearing impaired may rely more on visual cues. Other players may be low vision and paying more attention to sound.
|
||||
</Alert>
|
||||
|
||||
## Create particles
|
||||
|
||||
When creating a particle, it needs to be inserted into a part or attachment. In this example, you'll place particles in the TestPlayer object used earlier.
|
||||
|
||||
1. In **TestPlayer**, create a **ParticleEmitter** named **Burst**. Default particles will start emitting from the TestPlayer object. You'll customize the emitter to create a burst effect.
|
||||
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/using-particles-for-actions/create-particle-emitter.png" width="40%" />
|
||||
|
||||
An example is shown below.
|
||||
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/using-particles-for-actions/default-particle-stream.jpg" width="50%" />
|
||||
|
||||
<Alert severity="warning">
|
||||
Particles must be named exactly since a script will be looking for the name later.
|
||||
</Alert>
|
||||
|
||||
2. With **Burst** selected, go to the **Properties** window and find the **Texture** property. Copy and paste one of the texture IDs supplied below, or use your own, into the texture field and press <kbd>Enter</kbd>.
|
||||
<GridContainer numColumns="3">
|
||||
<figure>
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/using-particles-for-actions/potion.png" />
|
||||
<figcaption>6772766862</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/using-particles-for-actions/energy.png" />
|
||||
<figcaption>6772766551</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/using-particles-for-actions/heart.png" />
|
||||
<figcaption>5857851618</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/using-particles-for-actions/paw.png" />
|
||||
<figcaption>6803084085</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/using-particles-for-actions/star.png" />
|
||||
<figcaption>6772783963</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/using-particles-for-actions/leaf.png" />
|
||||
<figcaption>6703369286</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/using-particles-for-actions/ticket.png" />
|
||||
<figcaption>6749057157</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/using-particles-for-actions/gem.png" />
|
||||
<figcaption>6772766413</figcaption>
|
||||
</figure>
|
||||
</GridContainer>
|
||||
|
||||
If using the ticket texture, it will look like below.
|
||||
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/using-particles-for-actions/show-particle-texture.jpg" width="50%" />
|
||||
|
||||
<Alert severity="info">
|
||||
Custom textures can be any image that you have. Learn to upload them in the [Asset Manager](../../projects/assets/manager.md) article.
|
||||
</Alert>
|
||||
|
||||
3. In the **Explorer** window, select **TestPlayer**, then in the **Properties** window, find and change the **Color** and **Size** properties to something appropriate for your experience. For example, the following image includes particles with the following settings:
|
||||
|
||||
- **Color** = `255, 178, 44`
|
||||
- **Size** = `0.6`
|
||||
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/using-particles-for-actions/show-texture-color-size.jpg" width="50%" />
|
||||
|
||||
## Create a burst effect
|
||||
|
||||
Different properties can be changed so that the particles look more like a quick burst rather than a gentle stream. After designing the particle, you'll disable the emitter so that it only plays when activated by a script.
|
||||
|
||||
## Make particles spread
|
||||
|
||||
The ParticleEmitter sends out particles along two planes controlled by the property, **SpreadAngle**.
|
||||
|
||||
1. To make the particles fly out in all directions like the example, set the **SpreadAngle X** and **Y** to **360**.
|
||||
<video controls src="../../assets/education/build-it-play-it-mansion-of-wonder/using-particles-for-actions/spread-angle.mp4"></video>
|
||||
|
||||
## Different burst properties
|
||||
|
||||
After adding the recommended values under the video, the particles will look like they are quickly bursting from the player like a firework.
|
||||
|
||||
<video controls src="../../assets/education/build-it-play-it-mansion-of-wonder/using-particles-for-actions/before-after-particle-settings.mp4"></video>
|
||||
|
||||
1. To get a burst motion, set the following properties to these values to make the particles explode and then quickly fade out.
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Property</th>
|
||||
<th>Value</th>
|
||||
<th>Rationale</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>**LightEmission**</td>
|
||||
<td>0.4</td>
|
||||
<td>Adds a faint glow. Note the maximum is 1.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>**Drag**</td>
|
||||
<td>8</td>
|
||||
<td>More drag causes the particles to quickly lose speed. </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>**Lifetime**</td>
|
||||
<td>0.6, 1</td>
|
||||
<td>Makes particles exist for between .6 and 1 seconds.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>**Rate**</td>
|
||||
<td>50</td>
|
||||
<td>How many particles are emitted per second. </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>**Speed**</td>
|
||||
<td>40</td>
|
||||
<td>How fast the particles are going when first emitted. </td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<Alert severity="info">
|
||||
Try adding some randomized numbers to make particles feel less repetitive. Some properties, such as **Lifetime** and **Rotation** add randomization by allowing for a minimum and a maximum value.
|
||||
</Alert>
|
||||
|
||||
2. Lastly, the particle should only play when the script (which you'll see in the next lesson) tells it to. Find the **Enabled** property and toggle it **off**.
|
||||
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/using-particles-for-actions/set-enabled-off.png" width="40%" />
|
||||
|
||||
<Alert severity="info">
|
||||
This page only covered a few properties. For more, see the [Particle Emitters](../../effects/particle-emitters.md) reference article.
|
||||
</Alert>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
---
|
||||
title: Use textures
|
||||
prev: /education/build-it-play-it-mansion-of-wonder/challenge-checkpoint
|
||||
next: /education/build-it-play-it-mansion-of-wonder/finish-the-blast
|
||||
description: Learn how to customize and change the texture of particle emitters in Roblox Studio as part of the Build It Play It Mansion of Wonder.
|
||||
---
|
||||
|
||||
Every particle created by a particle emitter, such as white sparks or fire, is actually a picture. In Roblox Studio, these pictures are called **textures**, which can be any 2D visual, like a symbol or even something you've drawn.
|
||||
|
||||
For example, notice in the video below how a single texture is changed and repeated to create an effect.
|
||||
|
||||
<video controls src="../../assets/education/build-it-play-it-mansion-of-wonder/using-textures/particle-texture-example.mp4" width="100%"></video>
|
||||
|
||||
## Change the blast texture
|
||||
|
||||
1. A starter pack of textures has been provided. Pick one you want to use for your blast and **copy** the **number** beneath its image below.
|
||||
|
||||
<Alert severity="info">
|
||||
These textures are used for both your blast and explosion. Before moving on, take a moment to think of you want different textures or the same.
|
||||
</Alert>
|
||||
|
||||
<GridContainer numColumns="3">
|
||||
<figure>
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/using-textures/star-1.png" />
|
||||
<figcaption>5860841663</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/using-textures/swirl.png" />
|
||||
<figcaption>5857851812</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/using-textures/heart.png" />
|
||||
<figcaption>5857851618</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/using-textures/circle.png" />
|
||||
<figcaption>6711256324</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/using-textures/smoke.png" />
|
||||
<figcaption>5833235272</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/using-textures/star-2.png" />
|
||||
<figcaption>6772783963</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/using-textures/spark.png" />
|
||||
<figcaption>5833323391</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/using-textures/circle-2.png" />
|
||||
<figcaption>5857892330</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/using-textures/scratch.png" />
|
||||
<figcaption>5857892405</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/using-textures/trace.png" />
|
||||
<figcaption>5857931724</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/using-textures/triangle.png" />
|
||||
<figcaption>5857851618</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/using-textures/star-3.png" />
|
||||
<figcaption>5860841737</figcaption>
|
||||
</figure>
|
||||
</GridContainer>
|
||||
|
||||
2. Make sure the emitter is selected, then in the **Properties** window, find the **Texture** property.
|
||||
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/using-textures/show-texture-property.png" />
|
||||
|
||||
<Alert severity="warning">
|
||||
|
||||
If you can't see the properties shown in the picture above, you may need to reselect the emitter. To do so, in the Explorer search bar, type BlastParticles and then select the BlastParticles emitter.
|
||||
|
||||
</Alert>
|
||||
|
||||
3. Click in the **Texture** row to highlight the text. Press <kbd>Ctrl</kbd><kbd>V</kbd> (<kbd>⌘</kbd><kbd>V</kbd>) to paste in the previously copied ID and then press Enter. Your particle emitter now emits particles that look like your texture.
|
||||
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/using-textures/paste-texture.png" width="38%" />
|
||||
|
||||
For example, if you use the `5833323391` texture, your particles will look like the example below.
|
||||
|
||||
<img src="../../assets/education/build-it-play-it-mansion-of-wonder/using-textures/texture-changed.png" width="40%" />
|
||||
Loading…
Add table
Add a link
Reference in a new issue