hakowork/rojo
3
0
Fork 0
mirror of https://github.com/rojo-rbx/rojo.git synced 2026-10-25 04:54:07 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

update rules

Browse source
This commit is contained in:
Joe 2026-02-02 14:05:11 -06:00
parent 4c390fdd37
commit d5522b2fef
8549 changed files with 11783 additions and 1888 deletions
Download patch file Download diff file Expand all files Collapse all files

145
.cursor/rules/roblox/en-us/education/build-it-play-it-island-of-move/adding-animations.md Normal file
View file

@ -0,0 +1,145 @@
---
title: Add animations
description: Learn how to make animations in Roblox Studio with step by step tutorials in this one hour challenge. Use scripts to add animations into an experience.
prev: /education/build-it-play-it-island-of-move/designing-poses
---
To implement animations in-game, use scripts. For this tutorial, you'll implement the previously made victory animation using a pre-made script. Once finished, this animation can be used to celebrate a player's accomplishment, like reaching the end of an obby or finding a secret.
## Script animations
Animations are triggered using **scripts**. One approach is to use events to play animations in a variety of situations, like a player finishing a level, defeating an enemy, or even making an in-game purchase.
### Set up the project
For this project, you'll create parts that when touched, trigger an animation for that player.
1. To organize all parts that will play the animation, add a folder in Workspace (hover over Workspace and click +) named TouchPartFolder.
2. In TouchPartFolder, add a part.
<img src="../../assets/education/build-it-play-it-island-of-move-intermediate/bipi_t2_showPartsFolder.png" />
Make sure the part is placed where playing the animation would make sense, such as the end of a level or near an object players collect.
<GridContainer numColumns="2">
<figure>
<img src="../../assets/education/build-it-play-it-island-of-move-intermediate/bipi_t2_touchedPartExamples_obby.jpg" />
<figcaption>Example Victory Part</figcaption>
</figure>
<figure>
<img src="../../assets/education/build-it-play-it-island-of-move-intermediate/bipi_t2_touchedPartExamples_treasure.jpg" />
<figcaption>Example Interaction Part</figcaption>
</figure>
</GridContainer>
3. In StarterPlayer > StarterCharacterScripts, create a LocalScript named TouchPartRegister. Then copy and paste the code below.
```lua
-- Used with "PlayerAnimationFeedback" script to play animations on part touches
-- Services
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local Players = game:GetService("Players")
local player = Players.LocalPlayer
local character = player.Character or player.CharacterAdded:Wait()
local humanoid = character:WaitForChild("Humanoid")
local canTouch = false
-- Include feedback animation module
local PlayerAnimationFeedback = require(ReplicatedStorage:WaitForChild("PlayerAnimationFeedback"))
-- Function called when a part is touched
local function onPartTouch(otherPart)
if humanoid and canTouch == false then
canTouch = true
PlayerAnimationFeedback:PlayAnimation()
canTouch = false
end
end
-- On startup, call animation module load function
PlayerAnimationFeedback:LoadAnimation(humanoid)
-- Also bind a folder of parts to the "Touched" event to run "onPartTouch()"
local touchPartFolder = workspace:WaitForChild("TouchPartFolder")
local touchParts = touchPartFolder:GetChildren()
for _, touchPart in touchParts do
touchPart.Touched:Connect(onPartTouch)
end
```
This script finds all parts in the TouchPartFolder and gives them `Touched()` events. When fired, the event runs a function that plays an animation for a player.
<Alert severity="info">
While this script uses `Touched()`, different events like `MouseClick()` or `Changed()` can also be used. Additionally, your own game events, like awarding a player points can be fired from the TouchPartRegister script. To see an example that can be added, check out the article on Health Pickups for code.
</Alert>
4. The next script triggers animations for a player. In ReplicatedStorage, create a new ModuleScript named PlayerAnimationFeedback. Then, copy and paste the code below.
```lua
-- Used with "TouchPartRegister" script to play animations for a player
local PlayerAnimationFeedback = {}
local feedbackAnimationTrack
local ANIMATION_FADE = 0.3
local ANIMATION_ID = "rbxassetid://YOUR_ANIMATION"
-- Function to load animation onto player's character
function PlayerAnimationFeedback:LoadAnimation(humanoid)
local feedbackAnimation = Instance.new("Animation")
feedbackAnimation.AnimationId = ANIMATION_ID
feedbackAnimationTrack = humanoid.Animator:LoadAnimation(feedbackAnimation)
feedbackAnimationTrack.Priority = Enum.AnimationPriority.Action
feedbackAnimationTrack.Looped = false
end
-- Function to play the animation
function PlayerAnimationFeedback:PlayAnimation()
feedbackAnimationTrack:Play(ANIMATION_FADE)
task.wait(feedbackAnimationTrack.Length)
end
return PlayerAnimationFeedback
```
## Play animations
Animations must be identified in a script, loaded, and played.
### Set the animation
The script needs to know which animation to play. To use an exported animation, find its **asset ID** through a web browser. That ID will then allow that animation to be loaded in the script.
1. Open the <a href="https://www.roblox.com/develop?View=24" target="_blank" rel="noopener">Animations</a> section of the Create page.
2. Locate and click an exported animation.
3. Copy its ID from the URL in your browser.
<img src="../../assets/education/build-it-play-it-island-of-move-intermediate/ccs2020_t2_exportedAnimationWeb_alt.png" />
4. In the script, PlayerAnimationFeedback, replace the placeholder, `YOUR_ANIMATION` (Line 8), with the **ID** you copied.
<img src="../../assets/education/build-it-play-it-island-of-move-intermediate/showAnimationIDScript.gif" />
5. Run the project and test that once a player hits the part, you see the animation.
<video controls src="../../assets/education/build-it-play-it-island-of-move-intermediate/victoryPose_finalSingleObbyExample_web.mp4" width="100%"></video>
## Next steps
Below are a few ways to continue learning
### Learn about animation
So far, you've learned how to create animations and add them into experiences. To continue learning, we recommend visiting the [Animation](../../animation/index.md) overview.
On that page, you'll find useful links to improving animations, such as using the curve editor for smooth movement, or tips in refining animations.
### Animate parts
Additionally, start the optional lesson [Animating Parts](../../education/build-it-play-it-island-of-move/animating-parts.md) to learn how to code tweens, a feature that lets you scale, rotate, and move parts. A sample of the final project is below.
<video controls src="../../assets/education/build-it-play-it-island-of-move-intermediate/exampleProject_tweeningButtonDoor.mp4" width="100%"></video>

44
.cursor/rules/roblox/en-us/education/build-it-play-it-island-of-move/adding-new-models.md Normal file
View file

@ -0,0 +1,44 @@
---
title: Add new models
description: Part of the Roblox Build It, Play It Challenge - Island of Move. Decorate the template.
prev: /education/build-it-play-it-island-of-move/go-beyond-the-challenge
---
Create new buildings or expand the current ruins with this kit of extra parts. Once you finish designing a more visually impressive world, get a new avatar item.
## Add to your inventory
Get extra parts to work with by importing an asset. **Assets** are parts of a Roblox game, like a 3D model or sound, that are stored online.
1. Open the link to the kit below in your web browser.
<a href="https://www.roblox.com/library/5621418584/">
<Button variant="contained">Extra Props</Button>
</a>
2. On the page for the asset, click the **Get** button to add it into your inventory.
## Import into the game
All assets can be found in your **Inventory**. This stores any models you've added and lets you add them into a game.
1. In Studio, find the **Toolbox**. If it's not visible, open it from the **Window** menu.
2. Select the **Inventory** tab.
<img src="../../assets/education/general/Toolbox-Inventory.png" width="360" />
3. Make sure the left dropdown is set to **My Models**. Then, find and click on **Island of Move Extra Props**. This will add the parts into your game.
<img src="../../assets/education/build-it-play-it-island-of-move/adding-new-models/show-new-assets.jpeg" width="100%" />
## Challenge checkpoint
You've customized your game, now claim your free prize! Celebrate your new skills by getting the **Crystalline Companion** and **Bringing the World Alive** badge. Copy the code below.
`WorldAlive`
Click the button to open a Roblox game, find the in-game character, and click **REDEEM CODE** to get your prize.
<a href="https://www.roblox.com/games/5306359293/">
<Button variant="contained">Enter World</Button>
</a>

45
.cursor/rules/roblox/en-us/education/build-it-play-it-island-of-move/adding-the-second-pose.md Normal file
View file

@ -0,0 +1,45 @@
---
title: Add the second pose
description: Part of the Roblox Build It, Play It Challenge - Island of Move. Create the second pose.
next: /education/build-it-play-it-island-of-move/challenge-checkpoint-2
prev: /education/build-it-play-it-island-of-move/looping-animations
---
Next move to the middle of the timeline and start working on the second pose. After designing the pose, Roblox Studio will connect everything to create a looping animation.
1. To place the second pose in the middle, set the current time to `0:15`.
<img src="../../assets/education/build-it-play-it-island-of-move/adding-the-second-pose/set-timeline-middle.png" width="100%" />
2. Use **Rotate** to create the second pose. Remember to move the camera around while working.
<video controls src="../../assets/education/build-it-play-it-island-of-move/adding-the-second-pose/show-middle-timelapse.mp4" width="80%"></video>
<Alert severity="info">
<AlertTitle>Posing Faster</AlertTitle>
Speed up posing by rotating body parts connected to the torso first, like the upper arm and thigh. Then, work outwards to pose the hands and feet.
</Alert>
<Alert severity="warning">
<AlertTitle>Start a Pose from Scratch</AlertTitle>
Don't like a pose and want to just start from the beginning? You can reset any pose to the starting default.
1. Right click on the top white diamond of the pose you want to reset.
2. Select **Reset Selected**.
</Alert>
## Play the animation
Time to see the animation in action! You'll want to turn on looping so that the animation doesn't stop right away and you can get a better idea of how it will look in-game.
1. To turn on looping, click the **Loop** icon.
<img src="../../assets/education/build-it-play-it-island-of-move/adding-the-second-pose/press-loop-button.png" width="75%" />
2. To play the animation, press <kbd>Space</kbd>.
<video controls src="../../assets/education/build-it-play-it-island-of-move/adding-the-second-pose/show-full-swim-animation.mp4" width="80%"></video>
3. To stop testing, press <kbd>Space</kbd> again.

327
.cursor/rules/roblox/en-us/education/build-it-play-it-island-of-move/animating-parts.md Normal file
View file

@ -0,0 +1,327 @@
---
title: Animate parts
description: Learn how to move parts in Roblox Studio by coding tweens. Rotate, scale, and change the colors of objects.
prev: /education/build-it-play-it-island-of-move/adding-animations
---
Players can get feedback to whether or not their actions are doing anything with animations. This can be a tree shaking when hit, or a pet cheerfully bouncing when fed. In this case, we'll show you how to make a button that moves when the player clicks it.
<video controls src="../../assets/education/build-it-play-it-island-of-move-intermediate/exampleProject_tweeningButtonDoor.mp4" width="100%"></video>
## Tween with animations
One way of animating objects is using tweens. A **tween**, short for in-between, is the process of changing a starting value to an ending value over a certain amount of time. Tweens can be used to change properties such as position, color, or rotation.
<video controls src="../../assets/education/build-it-play-it-island-of-move-intermediate/example_allTweens.mp4
" width="100%"></video>
### Project setup
For this project, a tween will move an object from a starting position to a goal position.
1. Determine what part you'll be animating. In the example below, `1` is the button and `2` is the wall.
<img src="../../assets/education/build-it-play-it-island-of-move-intermediate/bipi_tier2_extension_partSetup.jpg"/>
2. In the part that will move, add a ClickDetector and a script named TweenMove. Do not rename the ClickDetector.
<img src="../../assets/education/build-it-play-it-island-of-move-intermediate/bipi-tier2-showButtonSetup.png"/>
<Alert severity='warning'>
If you're using a model with many parts, pick one part to move (such as the button in this example), and put the MoveTween script as its child.
</Alert>
3. Open the TweenMove script. Then, copy and paste the script below.
```lua
-- Tweens a part back and forth based on a chosen axis
-- The button has an on/off state which moves the part forwards or backwards
local TweenService = game:GetService("TweenService")
local button = script.Parent
local clickDetector = button:FindFirstChildWhichIsA("ClickDetector")
local buttonState = -1 -- Determines button direction; -1 means it will press in, 1 means it will pop out
local inTween = false
-- Customizable variables
local TWEEN_TIME = 0.15
local TWEEN_MOVE_DISTANCE = 1.5
-- Tween variables
local buttonTweenInfo = TweenInfo.new(
TWEEN_TIME, -- Time
Enum.EasingStyle.Quad, -- EasingStyle
Enum.EasingDirection.Out -- EasingDirection
)
local function buttonPress()
-- If the button is tweening, prevent it from being used again
if inTween == true then
return
end
-- Calculate new CFrame for button position
local offsetCFrame = CFrame.new(0, TWEEN_MOVE_DISTANCE * buttonState, 0)
local newCFrame = button.CFrame:ToWorldSpace(offsetCFrame)
-- Create a tween and play it
local tweenButton = TweenService:Create(button, buttonTweenInfo, {CFrame = newCFrame})
tweenButton:Play()
inTween = true
-- On tween completion, make button usable again
tweenButton.Completed:Connect(function()
inTween = false
-- Invert the button state
buttonState *= -1
end)
end
clickDetector.MouseClick:Connect(buttonPress)
```
4. Playtest and click the object. While testing, you may notice the object moves the wrong direction or distance. That can be customized in the next section.
<GridContainer numColumns="2">
<figure>
<img src="../../assets/education/build-it-play-it-island-of-move-intermediate/showTweenMove_Wrong.gif" />
<figcaption>Wrong direction; needs adjustment</figcaption>
</figure>
<figure>
<img src="../../assets/education/build-it-play-it-island-of-move-intermediate/showTweenMove_correct.gif" />
<figcaption>Moves correctly; no adjustment needed</figcaption>
</figure>
</GridContainer>
## Adjust the move tween
With the script added, you can customize it to suit the needs of your game. The button can be tweened to move in directions like forward and back, or up and down.
### Change position
Remember, tweens transition from a starting value to a goal value. This script uses [CFrames](../../workspace/cframes.md) to move the button in a direction relative to its current position. That direction is controlled in **Line 28** of the script.
On that line, a new CFrame is created using X, Y, and Z coordinates. In this example, the button moves relative to its Y axis.
```lua
-- Calculate new CFrame for button position
local offsetCFrame = CFrame.new(0, TWEEN_MOVE_DISTANCE * buttonState, 0)
local newCFrame = button.CFrame:ToWorldSpace(offsetCFrame)
```
To have the button move in a **different** direction, simply replace one of the desired coordinates with the line: `TWEEN_MOVE_DISTANCE * buttonState`. Set all other coordinates to 0.
For example, this line will move it relative to its X axis instead.
```lua
-- Calculate new CFrame for button position
local offsetCFrame = CFrame.new( TWEEN_MOVE_DISTANCE * buttonState, 0, 0)
local newCFrame = button.CFrame:ToWorldSpace(offsetCFrame)
```
### Tween time and distance
The script includes the following variables that affect the tween's movement. Capitalized names like `TWEEN_TIME` are written specifically for this script to be modified.
Try changing the value of one variable below:
- Line 11 - `TWEEN_TIME`: The time in seconds it takes for a tween to happen.
- Line 12 - `TWEEN_MOVE_DISTANCE`: The distance the button moves in studs.
## Tween other properties
Most properties with a numerical data type can be tweened. This section includes some common properties, like rotation, that can be used to bring more player feedback into your game. Keep in mind, you can also tween multiple properties at once.
For a full list of properties, see the `Class.TweenService` API page.
### Rotate
For rotation, combine tweening and CFrames instead of just using Vector3. Rotation tweens can be used to make creatures wiggle when pet, or coins twirl as they're picked up.
In the next script example, the creature's position and rotation are both tweened when clicked to show how happy it is when being pet.
<video controls src="../../assets/education/build-it-play-it-island-of-move-intermediate/exampleProject_tweeningPetRotate.mp4" width="100%"></video>
The code below will rotate an object based off the number of degrees in `TWEEN_ROT_ANGLES`.
```lua
-- Uses tween to make object rotate up and bounce
local TweenService = game:GetService("TweenService")
local partToTween = script.Parent
local clickDetector = partToTween:FindFirstChildWhichIsA("ClickDetector")
local inTween = false
-- Customizable variables
local TWEEN_TIME = 0.25
local TWEEN_ROT_ANGLES = -45
local TWEEN_MOVE_DISTANCE = 3
-- Tween variables
local tweenInfo = TweenInfo.new(
TWEEN_TIME, -- Time
Enum.EasingStyle.Quad, -- EasingStyle
Enum.EasingDirection.Out, -- EasingDirection
1, -- RepeatCount (when less than zero the tween will loop indefinitely)
true -- Reverses (tween will reverse once reaching its goal)
)
local function activateAction()
-- If the object is tweening, prevent it from being tweened again
if inTween == true then
return
end
-- Calculate new CFrame for object position and rotation
local offsetCFrame = CFrame.new(0, TWEEN_MOVE_DISTANCE, 0)
local rotatedCFrame = CFrame.Angles(math.rad(TWEEN_ROT_ANGLES), 0, 0)
offsetCFrame = offsetCFrame:ToWorldSpace(rotatedCFrame)
local newCFrame = partToTween.CFrame:ToWorldSpace(offsetCFrame)
-- Create a tween and play it
local tweenObject = TweenService:Create(partToTween, tweenInfo, {CFrame = newCFrame})
tweenObject:Play()
inTween = true
-- On tween completion, make object clickable again
tweenObject.Completed:Connect(function()
inTween = false
end)
end
clickDetector.MouseClick:Connect(activateAction)
```
### Scale
Changing the size of in-game objects can also show that a player interacted with them. For instance, pickups like health packs or gemstones can shrink when touched. To scale parts, change the tween goal to a new Vector3 of the desired size.
<video controls src="../../assets/education/build-it-play-it-island-of-move-intermediate/showScaleTween.mp4" width="100%"></video>
```lua
-- Tween the scale of a part when it's touched, then destroy it
local TweenService = game:GetService("TweenService")
local partToScale = script.Parent
local inTween = false
-- Customizable variables
local TWEEN_TIME = 1
local TWEEN_SCALE = Vector3.zero
-- Tween variables
local tweenInfo = TweenInfo.new(
TWEEN_TIME, -- Time
Enum.EasingStyle.Exponential, -- EasingStyle
Enum.EasingDirection.Out -- EasingDirection
)
local function onPartTouch(otherPart)
-- If the object is tweening, prevent it from being tweened again
if inTween == true then
return
end
local partParent = otherPart.Parent
local humanoid = partParent:FindFirstChildWhichIsA("Humanoid")
if humanoid then
-- Prevent further collisions on object since it has been picked up
partToScale.CanCollide = false
-- Create a tween and play it
local tweenObject = TweenService:Create(partToScale, tweenInfo, {Size = TWEEN_SCALE})
tweenObject:Play()
inTween = true
-- On tween completion, destroy object
tweenObject.Completed:Connect(function()
partToScale:Destroy()
end)
end
end
partToScale.Touched:Connect(onPartTouch)
```
### Color change
Parts can transition colors by tweening with Color3 values. For instance, enemies or destructible objects can flash colors to give feedback that they've been hit or clicked.
<video controls src="../../assets/education/build-it-play-it-island-of-move-intermediate/showTweenColor.mp4" width="100%"></video>
```lua
-- Tween an object's color upon click and destroy it after 3 clicks
local TweenService = game:GetService("TweenService")
local partToTween = script.Parent
local clickDetector = partToTween:FindFirstChildWhichIsA("ClickDetector")
local inTween = false
-- Customizeable variables
local TWEEN_TIME = 0.2
local COLOR_ON_HIT = Color3.fromRGB(255, 0, 50)
local hitCount = 0
-- Tween variables
local tweenInfo = TweenInfo.new(
TWEEN_TIME, -- Time
Enum.EasingStyle.Exponential, -- EasingStyle
Enum.EasingDirection.InOut, -- EasingDirection
0, -- RepeatCount (when less than zero the tween will loop indefinitely)
true -- Reverses (tween will reverse once reaching its goal)
)
local function activateAction()
-- If the object is tweening, prevent it from being tweened again
if inTween == true then
return
end
-- Create a tween and play it
local tweenObject = TweenService:Create(partToTween, tweenInfo, {Color = COLOR_ON_HIT})
tweenObject:Play()
inTween = true
-- On tween completion, make object clickable again
tweenObject.Completed:Connect(function()
inTween = false
-- Increment hit count
hitCount += 1
-- After 3 hits, destroy the object
if hitCount == 3 then
partToTween:Destroy()
end
end)
end
clickDetector.MouseClick:Connect(activateAction)
```
While this script uses a normal Part to change color, it's also possible to use this on MeshParts with an applied texture. MeshParts are often imported 3D models, rather than parts build directly in Roblox Studio.
If you are working with a fully textured MeshPart, we advise the following:
1. Use a SpecialMesh instead of a MeshPart. This is because a MeshPart's texture overrides the color being tinted by the script.
2. Change the script to modify the VertexColor of the SpecialMesh instead of the Color property.
## Project sample
View all the script examples in this non-copylocked place. Get all the scripts to modify as well.
<table>
<tbody>
<tr>
<td><img src="../../assets/education/build-it-play-it-island-of-move-intermediate/bipi_tier2_extension_gameThubmanil.jpg"/></td>
<td>
Includes scripts for rotation, scaling, and color change tweens.
<a href="https://www.roblox.com/games/5598816550/Tween-Animation-Showcase">
<Button variant="contained">View</Button>
</a>
</td>
</tr>
</tbody>
</table>

62
.cursor/rules/roblox/en-us/education/build-it-play-it-island-of-move/animations-and-feedback.md Normal file
View file

@ -0,0 +1,62 @@
---
title: Animations and feedback
description: Learn how to make animations in Roblox Studio with step by step tutorials in this one hour challenge. Start by creating an animation.
next: /education/build-it-play-it-island-of-move/designing-poses
prev: /education/build-it-play-it-island-of-move/landing
---
Established developer? Just getting started? Create and code a victory animation to celebrate player achievements in this Build It, Play It Challenge! When finished, add this animation into any experience, making your work more engaging and attractive to players. These types of animations are perfect for giving feedback when a player wins a match, reaches a checkpoint, or levels up.
Below is an example of the animation you can expect to produce by the end of this series.
<video controls src="../../assets/education/build-it-play-it-island-of-move-intermediate/victoryPose_finalSingleObbyExample_web.mp4" width="100%"></video>
## Animations and feedback
Before learning to create an animation, take a moment to think about how animations and feedback are connected. Imagine an adventure game where you fight monsters. After hitting a monster, nothing happens - it doesn't react and there's no sound effect. You might think that the game is broken, but after a few more hits, the monster just disappears.
<video controls src="../../assets/education/build-it-play-it-island-of-move-intermediate/showNPCAnimationsFeedback_noFeedback.mp4" width="100%"></video>
This scenario is frustrating since the monster fails to give the user any **feedback**. Like real life, whenever players take **action** in-game, they expect a **reaction**. Designing informative and visually appealing feedback is critical for designing successful experiences that engage players.
One way of giving feedback is with animations. Whenever a player performs an action, like hitting an enemy, animations can show a reaction, like the opponent being struck. The reaction tells the player their action did something, making them feel a part of the world and reducing the chance of confusion.
<video controls src="../../assets/education/build-it-play-it-island-of-move-intermediate/showNPCAnimationsFeedback_withFeedback.mp4" width="100%"></video>
## Project setup
The first step in making a victory animation is to create an animation using the Animation Editor. Later, you'll hook it up with code to celebrate a player's in-game accomplishment. That code will work in any experience you've created.
<video controls src="../../assets/education/build-it-play-it-island-of-move-intermediate/showFinalAnimation_singleAlt.mp4" width="100%"></video>
## Set up for animation
Roblox Studio features a powerful, built-in **Animation Editor** that allows you to design and publish custom animations.
1. Start or open a project in Roblox Studio.
2. To animate, you'll need to freely manipulate parts. From the toolbar, make sure **Move** and **Rotate** snapping are turned off.
<img src="../../assets/education/general/Snap-Settings-C.png" width="510" />
3. To open the Animation Editor, select **Animation** from the **Avatar** tab.
4. To create player animations, a character rig is needed. In the **Avatar** tab, click on **Character**. In the popup, select any rig.
<img src="../../assets/education/build-it-play-it-island-of-move-intermediate/bipi_t2_createRig_showRig.jpg" />
### Create a new animation
Individual animations, such as walking or jumping, need to be created and saved.
1. In the Animation Editor, type in a new animation name and click Create.
<img src="../../assets/education/build-it-play-it-island-of-move-intermediate/ccs2020_t2_createAnimationName.png" />
2. To animate, parts of the rig need to be added to the Animation Editor. Click the **(+)** icon and pick **Add All**.
<img src="../../assets/education/build-it-play-it-island-of-move-intermediate/ccs2020_t2_clickAEPlus.png" />
<Alert severity="info">
By default, the length of all new animations is set to one second (shown as 1:00). To get a different length, change the second box in the position indicator.
<img src="../../assets/education/build-it-play-it-island-of-move-intermediate/ccs2020_t2_changeLength.png" />
</Alert>

60
.cursor/rules/roblox/en-us/education/build-it-play-it-island-of-move/beginner-landing-page.md Normal file
View file

@ -0,0 +1,60 @@
---
title: Island of Move
description: Learn how to use Roblox Studio to make games and experiences. This lesson shows you how to animate to make your own simulator.
next: /education/build-it-play-it-island-of-move/opening-the-template
---
Welcome to the **Island of Move**, an ancient, far-away land where Roblox players are always in motion. Using Roblox Studio, learn how to create your own simulator game where people move to gain points. The way players move will be up to you, whether it's swimming through the air or dancing along the track.
<video controls src="../../assets/education/build-it-play-it-island-of-move/beginner-landing-page/overview.mp4" width="100%"></video>
After completing this **Build It, Play It** challenge, you'll have a finished game to share with friends. Players can even join on a mobile device and gain points by walking and moving in real-life.
Now, time to get moving!
## Download Roblox Studio
To start, you'll need **Roblox Studio**. This program is used to create every game on Roblox and is available free for **PC** and **Mac**. If you've played Roblox games on your computer, you already have Studio installed. While creating, we strongly recommend using a **2-button mouse** with a **scroll wheel**.
<Alert severity="info">
<AlertTitle>Create a New Account and Get Studio</AlertTitle>
If you're completely new to Roblox, follow these instructions to get started:
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!
</Alert>
## Three lessons, three prizes
To design an animation for your own simulator game, follow along with each of the three step-by-step tutorials.
<GridContainer numColumns="3">
<figure>
<img src="../../assets/education/build-it-play-it-island-of-move/beginner-landing-page/lesson-1.jpeg" />
<figcaption>1: Getting Started</figcaption>
</figure>
<figure>
<img src="../../assets/education/build-it-play-it-island-of-move/beginner-landing-page/lesson-2.jpeg" />
<figcaption>2: Creating Animations</figcaption>
</figure>
<figure>
<img src="../../assets/education/build-it-play-it-island-of-move/beginner-landing-page/lesson-3.jpeg" />
<figcaption>3: Export and Play</figcaption>
</figure>
</GridContainer>
After each lesson, you'll get a code that can be redeemed for exclusive Roblox avatar prizes. By the end, you'll have a cool animation and some swag to go along with it!
<img
src="../../assets/education/build-it-play-it-island-of-move/beginner-landing-page/show-game-hub.jpeg"
width="100%" />

20
.cursor/rules/roblox/en-us/education/build-it-play-it-island-of-move/challenge-checkpoint-2.md Normal file
View file

@ -0,0 +1,20 @@
---
title: Challenge checkpoint
description: Complete the second Island of Move challenge to earn free Roblox avatar items.
next: /education/build-it-play-it-island-of-move/exporting-animations
prev: /education/build-it-play-it-island-of-move/adding-the-second-pose
---
You got your animation ready! Celebrate your new skills by getting the **Hustle Hat** and the **Strike a Pose** badge.
1. **Copy** the following code: `StrikeAPose`
2. Click the **Enter World** button below to open the **Island of Move** experience. This game includes a finished example of what you're working on.
<a href="https://www.roblox.com/games/5306359293/Island-of-Move">
<Button variant="contained">Enter World</Button>
</a>
3. When you are playing game, interact with the golem character, then click **REDEEM CODE**. Use the code from step 1 to get your item.
<img src="../../assets/education/build-it-play-it-island-of-move/challenge-checkpoint/game-redeem-npc.jpeg" width="60%" />

20
.cursor/rules/roblox/en-us/education/build-it-play-it-island-of-move/challenge-checkpoint-3.md Normal file
View file

@ -0,0 +1,20 @@
---
title: Challenge checkpoint
description: Complete the third Island of Move challenge to earn free Roblox avatar items.
next: /education/build-it-play-it-island-of-move/go-beyond-the-challenge
prev: /education/build-it-play-it-island-of-move/invite-friends-to-play
---
You got your animation ready! Celebrate your new skills by getting the **Speedy Shades** and **Get Moving** badge.
1. **Copy** the following code: `GetMoving`
2. Click the **Enter World** button below to open the **Island of Move** experience. This game includes a finished example of what you're working on.
<a href="https://www.roblox.com/games/5306359293/Island-of-Move">
<Button variant="contained">Enter World</Button>
</a>
3. When you are playing game, interact with the golem character, then click **REDEEM CODE**. Use the code from step 1 to get your item.
<img src="../../assets/education/build-it-play-it-island-of-move/challenge-checkpoint/game-redeem-npc.jpeg" width="60%" />

20
.cursor/rules/roblox/en-us/education/build-it-play-it-island-of-move/challenge-checkpoint.md Normal file
View file

@ -0,0 +1,20 @@
---
title: Challenge checkpoint
description: Complete the first Island of Move challenge to earn free Roblox avatar items.
next: /education/build-it-play-it-island-of-move/looping-animations
prev: /education/build-it-play-it-island-of-move/save-and-publish
---
You got your animation ready! Celebrate your new skills by getting the **Build It Backpack** and **Setting the Stage** badge.
1. **Copy** the following code: `SettingTheStage`
2. Click the **Enter World** button below to open the **Island of Move** experience. This game includes a finished example of what you're working on.
<a href="https://www.roblox.com/games/5306359293/Island-of-Move">
<Button variant="contained">Enter World</Button>
</a>
3. When you are playing game, interact with the golem character, then click **REDEEM CODE**. Use the code from step 1 to get your item.
<img src="../../assets/education/build-it-play-it-island-of-move/challenge-checkpoint/game-redeem-npc.jpeg" width="60%" />

73
.cursor/rules/roblox/en-us/education/build-it-play-it-island-of-move/change-the-animation.md Normal file
View file

@ -0,0 +1,73 @@
---
title: Change the animation
description: Part of the Roblox Build It, Play It Challenge - Island of Move. Swap the default walk animation with your own.
next: /education/build-it-play-it-island-of-move/invite-friends-to-play
prev: /education/build-it-play-it-island-of-move/exporting-animations
---
The template has a pre-built setting for what animation to use when players run. To change the animation, you'll need to replace the default animation with yours.
## Change the animation ID
Now that you have the animation ID, you can enter it in your game. Then, Studio will know what animation to play.
1. Make sure the **Explorer** and **Properties** windows are open.
<img src="../../assets/education/general/Studio-Setup-Island-Of-Move.jpg" width="960" />
<Alert severity="warning">
If you don't see the windows on the right, open them from Studio's **Window** menu.
</Alert>
1. To find the walk setting,
1. Go to the **Explorer** window, then in the **search bar**, type "walk".
1. Click on **WalkAnimationID**.
<img src="../../assets/education/build-it-play-it-island-of-move/change-the-animation/search-walk-select.png" width="40%" />
1. In the **Properties** window, click the **Value** field and paste the animation ID by pressing <kbd>Ctrl</kbd><kbd>V</kbd> or <kbd>⌘</kbd><kbd>V</kbd>.
<img src="../../assets/education/build-it-play-it-island-of-move/change-the-animation/set-animation-value.png" width="40%" />
<Alert severity="warning">
<AlertTitle>Need to Get the Animation ID?</AlertTitle>
If nothing was pasted, or another line of text was used, you'll need to get the animation ID again.
1. Go to the [Creator Dashboard](https://create.roblox.com/dashboard/creations).
1. In the horizontal navigation, select **Development Items**, then click the **Animations** button. All animations you have ever published display here.
<img src="../../assets/education/build-it-play-it-island-of-move/change-the-animation/Animations-Button.png" width="100%" />
1. Select your animation. The animation's **Configure** page displays.
1. In the left-hand navigation, click the vertical three dots icon, then select **Copy Asset ID** from the contextual menu.
<img src="../../assets/education/build-it-play-it-island-of-move/change-the-animation/CopyAssetID.png" width="50%" />
</Alert>
## Test and check
After swapping the animation, play the game to see your creation.
1. Press the **Play** Button.
2. Use the <kbd>WASD</kbd> keys to walk around and see the animation play.
<video controls src="../../assets/education/build-it-play-it-island-of-move/change-the-animation/finished-animation.mp4" width="80%"></video>
<Alert severity="warning">
If you make updates to the animation, remember to **Save** it in the **Animation Editor**.
</Alert>
## Troubleshooting tips
**Issue:** Animation is spotty, skips, or looks glitchy.
- Make sure that the first and last poses are the same. Right-click on the diamond for the first pose and copy it. Then, paste that pose at the end of the timeline.
- Check that the figure stays inside the white grid when selected. If not, it may go through walls or the ground.
**Issue:** Animation isn't the one that you were working on.
- Check that you've published the animation through the Animation Editor.
- Find in the Explorer an object named WalkAnimationID. Make sure its Value is only a number.

50
.cursor/rules/roblox/en-us/education/build-it-play-it-island-of-move/create-the-first-pose.md Normal file
View file

@ -0,0 +1,50 @@
---
title: Create the first pose
description: Part of the Roblox Build It, Play It Challenge - Island of Move. Start the first pose of the animation.
next: /education/build-it-play-it-island-of-move/save-and-publish
prev: /education/build-it-play-it-island-of-move/creating-animations
---
Start by creating the first pose of your animation. This tutorial shows a swimming animation, but yours can be whatever you envision. Depending on the animation you want to create, your first pose may be very different.
<GridContainer numColumns="3">
<figure>
<img src="../../assets/education/build-it-play-it-island-of-move/create-the-first-pose/example-swim.jpeg" />
<figcaption>Swimming</figcaption>
</figure>
<figure>
<img src="../../assets/education/build-it-play-it-island-of-move/create-the-first-pose/example-crouch.jpeg" />
<figcaption>Crouching</figcaption>
</figure>
<figure>
<img src="../../assets/education/build-it-play-it-island-of-move/create-the-first-pose/example-dance.jpeg" />
<figcaption>Dancing</figcaption>
</figure>
</GridContainer>
## Pose the figure
Posing figures is done by rotating individual parts and joints, like the head or elbow.
1. To rotate, click on a body part. A set of handles will appear.
<video controls src="../../assets/education/build-it-play-it-island-of-move/create-the-first-pose/click-upper-arm.mp4" width="80%"></video>
<Alert severity="warning">
**Troubleshooting Rotation**
- **Issue:** Can't click on Rotation Handles
Another part may be blocking your click. Try rotating around your camera until you see a blue box whenever you hover over the part you want to click.
- **Issue:** Can't See Rotation Handles
If you see a set of arrows instead of the circles, you'll need to turn the **Rotate** tool on by pressing <kbd>R</kbd>.
</Alert>
2. Rotate by **dragging** the handles. Each handle rotates in a different direction. **Undo** any change with (<kbd>Ctrl</kbd><kbd>Z</kbd> or <kbd>⌘</kbd><kbd>Z</kbd>).
<video controls src="../../assets/education/build-it-play-it-island-of-move/create-the-first-pose/rotate-upper-arm.mp4" width="80%"></video>
3. Continue to rotate different parts until the first pose is complete. While working, change the camera to see the pose from multiple angles.
<video controls src="../../assets/education/build-it-play-it-island-of-move/create-the-first-pose/timelapse-first-pose.mp4" width="80%"></video>

71
.cursor/rules/roblox/en-us/education/build-it-play-it-island-of-move/creating-animations.md Normal file
View file

@ -0,0 +1,71 @@
---
title: Create animations
description: Part of the Roblox Build It, Play It Challenge - Island of Move. Learn how to start creating animations.
next: /education/build-it-play-it-island-of-move/create-the-first-pose
prev: /education/build-it-play-it-island-of-move/test-the-game
---
Creating animations is like posing an action figure. For this tutorial, you'll create two poses. When the game runs, Roblox Studio will connect the poses together to create an animation.
<video controls src="../../assets/education/build-it-play-it-island-of-move/creating-animations/show-animation-breakdown.mp4" width="100%"></video>
## Set up the Animation Editor
The poses and the final animation will be created using the Animation Editor.
1. To find the Animation Editor, click **Animation** from the **Avatar** tab. The Animation Editor will open at the bottom of your screen.
2. Next, you need a character to animate. On the pedestal, one has already been set up for you. Select the **figure** on top.
<img src="../../assets/education/build-it-play-it-island-of-move/creating-animations/highlight-figure.jpg" width="100%" />
The part names that make up the figure will appear in the animation editor.
<img src="../../assets/education/build-it-play-it-island-of-move/creating-animations/rig-selected.jpg" width="100%" />
## Prepare to pose
Before creating the poses, make it easier to pose figures by changing a program setting and then position the camera.
1. In the toolbar, find the snapping tools and make sure **Rotate** and **Move** are not checked.
<img src="../../assets/education/general/Snap-Settings-C.png" width="510" />
2. Using the camera controls, move the camera to get a good view of the part you want to animate. When moving, hold <kbd>Shift</kbd> to slow down camera movements.
<video controls src="../../assets/education/build-it-play-it-island-of-move/creating-animations/show-move-camera.mp4" width="100%"></video>
<Alert severity="info">
**Camera Controls**
<table>
<thead>
<tr>
<th>**Action**</th>
<th>**Control**</th>
</tr>
</thead>
<tbody>
<tr>
<td>**Move**</td>
<td><kbd>W</kbd> <kbd>A</kbd> <kbd>S</kbd> <kbd>D</kbd></td>
</tr>
<tr>
<td>**Rotate**</td>
<td>Hold the right mouse button to look around</td>
</tr>
<tr>
<td>**Zoom**</td>
<td>Use the scroll wheel</td>
</tr>
<tr>
<td>**Focus**</td>
<td>Press <kbd>F</kbd> to focus the camera on a specific part</td>
</tr>
</tbody>
</table>
</Alert>
<Alert severity="warning">
<AlertTitle>Can't move the camera?</AlertTitle>
If the camera doesn't move when you press <kbd>W</kbd> <kbd>A</kbd> <kbd>S</kbd> <kbd>D</kbd>, click somewhere inside the game world.
</Alert>

177
.cursor/rules/roblox/en-us/education/build-it-play-it-island-of-move/designing-poses.md Normal file
View file

@ -0,0 +1,177 @@
---
title: Design poses
description: Learn how to make animations in Roblox Studio with step by step tutorials in this one hour challenge. Design a pose for an animation.
next: /education/build-it-play-it-island-of-move/adding-animations
prev: /education/build-it-play-it-island-of-move/animations-and-feedback
---
Now that the animation is set up, it's time to start creating poses. A key pose is an important point of motion, such as the moment a player jumps or begins to swing a tool. Animations can have one or more key poses.
When thinking of your own animation, imagine breaking it down into a set of key poses. For this example, we'll guide you how to create a celebration jump with these poses. Your own animation may have more or less.
<GridContainer numColumns="3">
<figure>
<img src="../../assets/education/build-it-play-it-island-of-move-intermediate/ccs2020_t2_jumpAnimationStills_01.jpg" />
<figcaption>Neutral</figcaption>
</figure>
<figure>
<img src="../../assets/education/build-it-play-it-island-of-move-intermediate/ccs2020_t2_jumpAnimationStills_2.jpg" />
<figcaption>Crouch</figcaption>
</figure>
<figure>
<img src="../../assets/education/build-it-play-it-island-of-move-intermediate/ccs2020_t2_jumpAnimationStills_3.jpg" />
<figcaption>Leap</figcaption>
</figure>
</GridContainer>
The process of animating involves moving and rotating avatar parts to create key poses. When the animation runs, Studio connects the poses into a smooth motion.
<video controls src="../../assets/education/build-it-play-it-island-of-move-intermediate/showOverallAnimationTimelapse_optimized.mp4" width="100%"></video>
## Set a neutral pose
Used at the start and end of this animation, the **neutral** pose shows the player at rest. So that the animation begins with the player at rest, add a keyframe at the start. In the process of animating, keyframes store information on how parts are positioned.
1. In the Animation Editor timeline, right click on the first track and select Add Keyframe Here. This creates keyframes for each part of the player.
<img src="../../assets/education/build-it-play-it-island-of-move-intermediate/addKeyframes.gif" />
## Create the second pose
The second pose shows anticipation as the player crouches before leaping. Depending on your animation, the second pose may be different.
1. Make sure the rig is selected. Then, click on the top bar to set the animation time to a third of the length (e.g. 0:09).
<img src="../../assets/education/build-it-play-it-island-of-move-intermediate/bipi_t2_clickFrame2.png" />
2. Use the **Rotate** tool to start posing the rig. One way animators pose is to start with parts connected to the torso, like the shoulder. Then, move out to parts like the hand.
<video controls src="../../assets/education/build-it-play-it-island-of-move-intermediate/showRotateArms_web.mp4" width="100%"></video>
<Alert severity="info">
Instead of clicking parts on the model, you may find it helpful to select them in the Animation Editor hierarchy. This is especially true for smaller parts like hands.
<img src="../../assets/education/build-it-play-it-island-of-move-intermediate/bipi_t2_selectPartHierarchy.png" />
</Alert>
3. For this animation, the player will crouch before jumping. If you're doing a different pose, your rig may need to be moved differently. To move the rig:
- Switch to the Move tool by pressing <kbd>R</kbd>.
- Click the LowerTorso part (either in the rig or animation hierarchy) and position the body slightly down. Moving this part moves the entire rig.
<video controls src="../../assets/education/build-it-play-it-island-of-move-intermediate/showMoveBody.mp4" width="100%"></video>
<Alert severity="warning">
**Only** move the lower torso. Moving any part other than the LowerTorso will cause body parts to become disconnected from the rig.
</Alert>
4. Continue to pose the rig, switching between Move and Rotate by pressing <kbd>R</kbd>.
<video controls src="../../assets/education/build-it-play-it-island-of-move-intermediate/showPose2TimeLapse_optimized.mp4" width="100%"></video>
## Create the third pose
The next set of keyframes will be near the middle, showing the most extreme motion of the animation. In this animation, the avatar will be at the highest point of their jump.
1. Set the animation time to the middle by clicking on the top bar.
<img src="../../assets/education/build-it-play-it-island-of-move-intermediate/bipi_t2_clickFrame3.png" />
<Alert severity="info">
Exact times can be typed in the first box in the position indicator.
<img src="../../assets/education/build-it-play-it-island-of-move-intermediate/ccs2020_t2_showDurationCurrent.png" />
</Alert>
2. Animate the pose using Rotate and Move like below. As you work, exaggerate movement (spread arms out wider, twist the head, etc) to make the animation more clear and exciting.
<GridContainer numColumns="2">
<figure>
<img src="../../assets/education/build-it-play-it-island-of-move-intermediate/bipi_t2_showFrame3_front.jpg" />
<figcaption>Front View</figcaption>
</figure>
<figure>
<img src="../../assets/education/build-it-play-it-island-of-move-intermediate/bipi_t2_showFrame3_side.jpg" />
<figcaption>Side Angle View</figcaption>
</figure>
</GridContainer>
## Add the last pose
For the last pose, copy the first pose and paste it at the end. While you could customize the last neutral pose, this is a quick way of returning the animation to its starting point so it loops smoothly.
1. Select the top keyframe in the timeline for the first pose. Be sure to select all keyframes at that point, then copy them (<kbd>Ctrl</kbd><kbd>C</kbd> or <kbd>⌘</kbd><kbd>C</kbd>).
<img src="../../assets/education/build-it-play-it-island-of-move-intermediate/bipi_t2_selectFirstFrame.png" />
2. Move to the end of the animation (1:00 in the example) by clicking on the timeline or entering that value in the first box of the position indicator.
3. Paste the keyframes (<kbd>Ctrl</kbd><kbd>V</kbd> or <kbd>⌘</kbd><kbd>V</kbd>).
<img src="../../assets/education/build-it-play-it-island-of-move-intermediate/bipi_t2_showLastFrames.png" />
## Test the animation
Seeing an animation play more than once can make it easier to spot changes you want to make.
1. Toggle **Looping** on to ensure the animation playback loops.
<img src="../../assets/education/build-it-play-it-island-of-move-intermediate/bipi_t2_clickLooping.png" />
2. Press **Play**.
<img src="../../assets/education/build-it-play-it-island-of-move-intermediate/bipi_t2_clickPlay.png" />
<video controls src="../../assets/education/build-it-play-it-island-of-move-intermediate/showFinalVictoryPose_simple.mp4" width="100%"></video>
## Improve and export
With the keyframes created, take time to make the animation more satisfying by adding or fine-tuning frames. Below are some optional ways to improve animations.
### Add more poses
Extra poses can add subtle details that make an animation go from "just okay" to "looking great." Incorporate extra poses to exaggerate a motion, show anticipation, or communicate a character's personality.
For example, carefully watch the video below a few times. Notice how the animation on the right has more poses, which leads to a greater range of expression.
<video controls src="../../assets/education/build-it-play-it-island-of-move-intermediate/showImprovedAnimationMoreFrames_improved_optimized.mp4" width="100%"></video>
### Move keyframes
Smooth out actions or make them feel more realistic by adjusting when keyframes happen.
1. Click a keyframe. You can either select an entire pose or individual parts.
<GridContainer numColumns="2">
<figure>
<img src="../../assets/education/build-it-play-it-island-of-move-intermediate/ccs2020_t2_selectKeyframeExamples_single.png" />
<figcaption>Selecting individual parts</figcaption>
</figure>
<figure>
<img src="../../assets/education/build-it-play-it-island-of-move-intermediate/ccs2020_t2_selectKeyframeExamples_selectAll.png" />
<figcaption>Selecting an entire pose</figcaption>
</figure>
</GridContainer>
2. Drag the keyframe(s) left or right into a new position. In the video below, notice how moving the animation allows it to feel more "snappy".
<video controls src="../../assets/education/build-it-play-it-island-of-move-intermediate/showChangeFrameDifference_opt.mp4" width="100%"></video>
## Export the animation
Once finished, export the animation so it can be added in-game.
1. Click the <code>...</code> button in the upper-left section of the animation editor window.
<img src="../../assets/education/build-it-play-it-island-of-move-intermediate/ccs2020_t2_clickOptions.png" />
2. Then, select **Export**. Follow the dialog boxes.
<img src="../../assets/education/build-it-play-it-island-of-move-intermediate/bipi_t2_showExportedAnimation.png" />
<Alert severity="info">
If you make any further changes to your animation, remember to Export it again to see the most up to date version.
</Alert>
You've made your first animation! Time to get that in-game.

37
.cursor/rules/roblox/en-us/education/build-it-play-it-island-of-move/exporting-animations.md Normal file
View file

@ -0,0 +1,37 @@
---
title: Export animations
description: Part of the Roblox Build It, Play It Challenge - Island of Move. Export the animation to use in Roblox.
next: /education/build-it-play-it-island-of-move/change-the-animation
prev: /education/build-it-play-it-island-of-move/challenge-checkpoint-2
---
<img src="../../assets/education/build-it-play-it-island-of-move/exporting-animations/hero-banner.jpeg" width="100%" />
You have an animation but now it needs to go into your game. To use the animation, it will need to be exported from the animation editor to the Roblox platform.
1. In the **Animation Editor**, click on the **...** and select **Publish to Roblox**. The **Asset Configuration** window displays.
<img src="../../assets/education/build-it-play-it-island-of-move/publish-animations/Publish-Highlight.png" width="80%" />
<Alert severity="warning">
<AlertTitle>Animation Editor Blank?</AlertTitle>
If you closed Studio, the Animation Editor may be blank or closed.
- To open the **Animation Editor**, go back to the **Avatar** tab, then select the **Animation** button.
- If the Animation Editor is blank, reselect the Figure on the pedestal.
</Alert>
2. In the window, give the animation a **title** and **description**.
3. Click the **Submit** button.
## Get the animation ID
An animation ID lets the game know what animation to play. You'll use the ID of your exported animation for players in your game.
1. Once the animation is exported, **copy** the ID by clicking the icon next to the ID. You should see a green "**ID Copied!_**" text.
<img src="../../assets/education/build-it-play-it-island-of-move/publish-animations/publish-copy-id.png" width="50%" />
2. Press the **Close** button.

87
.cursor/rules/roblox/en-us/education/build-it-play-it-island-of-move/go-beyond-the-challenge.md Normal file
View file

@ -0,0 +1,87 @@
---
title: Go beyond the challenge
comments: |
1. Add link to /education/build-it-play-it-island-of-move/create-better-animations.
description: Part of the Roblox Build It, Play It Challenge - Island of Move. Finish the challenge.
prev: /education/build-it-play-it-island-of-move/challenge-checkpoint-3
---
<img src="../../assets/education/build-it-play-it-island-of-move/go-beyond-the-challenge/hero-banner.jpeg" width="100%" />
So far, you've learned how to animate a character and bring that motion into your own simulator game. Below are a few ways to continue customizing your game.
## Other cool tricks
<table>
<tr>
<td width="50%">
<img src="../../assets/education/build-it-play-it-island-of-move/go-beyond-the-challenge/share-animations.png" width="100%" />
**Share Animations**
Send your animation to friends, or use their own.
</td>
<td width="50%">
<img src="../../assets/education/build-it-play-it-island-of-move/go-beyond-the-challenge/learn-coding.png" width="100%" />
**Learn Coding in Roblox**
Get started coding by creating traps, powerups, and more.
</td>
</tr>
<tr>
<td>
<a href="../../education/build-it-play-it-island-of-move/sharing-animations.md">
<Button variant="contained">View</Button>
</a>
</td>
<td>
<a href="../../tutorials/fundamentals/coding-1/landing.md">
<Button variant="contained">View</Button>
</a>
</td>
</tr>
</table>
## Improve your game
Add a little extra style to your simulator game.
<table>
<tr>
<td>
<img src="../../assets/education/build-it-play-it-island-of-move/go-beyond-the-challenge/personalize-the-game.png" width="100%" />
**Design Your World**
</td>
<td>
<img src="../../assets/education/build-it-play-it-island-of-move/go-beyond-the-challenge/adding-new-models.png" width="100%" />
**Adding New Models**
</td>
</tr>
<tr>
<td>
Customize your game and create new environments.
</td>
<td>
Get a change of scenery by adding in new assets.
</td>
</tr>
<tr>
<td>
<a href="../../education/build-it-play-it-island-of-move/personalize-the-game.md">
<Button variant="contained">View</Button>
</a>
</td>
<td>
<a href="../../education/build-it-play-it-island-of-move/adding-new-models.md">
<Button variant="contained">View</Button>
</a>
</td>
</tr>
</table>

18
.cursor/rules/roblox/en-us/education/build-it-play-it-island-of-move/invite-friends-to-play.md Normal file
View file

@ -0,0 +1,18 @@
---
title: Invite friends to play
description: Part of the Roblox Build It, Play It Challenge - Island of Move. Share the final experience with others.
next: /education/build-it-play-it-island-of-move/challenge-checkpoint-3
prev: /education/build-it-play-it-island-of-move/change-the-animation
---
<img src="../../assets/education/build-it-play-it-island-of-move/invite-friends-to-play/hero-banner.jpeg" />
Moving is always more fun with friends, so let's set up your game for others can play. When a game is first published, it's automatically set to private. Set it instead to public so others can join.
1. **Publish** your game so your friends will get your latest changes.
1. Open **File** ⟩ **Experience Settings**.
1. On the left bar, select **Permissions**, then choose **Public**.
1. Click the **Save** button.

41
.cursor/rules/roblox/en-us/education/build-it-play-it-island-of-move/landing.md Normal file
View file

@ -0,0 +1,41 @@
---
title: Island of move
description: Learn how to make animations in Roblox Studio with step by step tutorials in this one hour challenge.
---
<img src="../../assets/education/build-it-play-it-island-of-move-intermediate/bipi_nav_button.png" width="100%" />
Using Roblox Studio, we'll show you how to make an experience where you players level up by moving in real-life with their mobile device. The way players move is up to you! Whether they're swimming through the air, or dance through the tracks, the only limit is your imagination.
Whether you're new to building in Roblox, or have created before, we have a tutorial for either experience level interested in creating animations.
## What's your skill level?
<table>
<tr>
<td>
**BEGINNER**
Never used Studio? Get started by creating animations for a simulator experience.
<img src="../../assets/education/build-it-play-it-island-of-move-intermediate/bipi_t2_lessonSamples_lesson1.jpg" width="100%" />
<a href="../../education/build-it-play-it-island-of-move/beginner-landing-page.md">
<Button variant="contained">Get Started</Button>
</a>
</td>
<td>
**EXPERIENCED**
Used Studio before? Designs animations to add feedback into your existing experiences.
<img src="../../assets/education/build-it-play-it-island-of-move-intermediate/bipi_t2_lessonSamples_lesson2alt.jpg" width="100%" />
<a href="../../education/build-it-play-it-island-of-move/animations-and-feedback.md">
<Button variant="contained">Get Started</Button>
</a>
</td>
</tr>
</table>

28
.cursor/rules/roblox/en-us/education/build-it-play-it-island-of-move/looping-animations.md Normal file
View file

@ -0,0 +1,28 @@
---
title: Loop animations
description: Part of the Roblox Build It, Play It Challenge - Island of Move. Learn how to loop the animation.
next: /education/build-it-play-it-island-of-move/adding-the-second-pose
prev: /education/build-it-play-it-island-of-move/challenge-checkpoint
---
To make sure the animation repeats smoothly, copy the first pose to the end of the animation before creating the second pose. To move to the end of the animation, you'll need to change your position on the **timeline**. This is the numbered line representing the animation in seconds.
<img src="../../assets/education/build-it-play-it-island-of-move/looping-animations/Timeline.png" />
## Copy the first pose
The first pose is at `0:00` on the timeline.
1. In the **Animation Editor**, click on the **top white diamond** in the timeline. The diamond represents the entire start pose. Make sure the white diamond has a blue border (meaning it's selected)
<img src="../../assets/education/build-it-play-it-island-of-move/looping-animations/select-first-pose-diamond.png" width="100%" />
2. Copy the pose by pressing <kbd>Ctrl</kbd><kbd>C</kbd> or <kbd>⌘</kbd><kbd>C</kbd>.
3. To move to the animation end, find the box for current time, click on it, and **clear** the text inside. In that box, type `1:00` and press <kbd>Enter</kbd>. Notice the blue line will move to the animation's end.
<img src="../../assets/education/build-it-play-it-island-of-move/looping-animations/change-duration-to-end.gif" width="100%" />
4. To paste the first pose at the end, press <kbd>Ctrl</kbd><kbd>V</kbd> or <kbd>⌘</kbd><kbd>V</kbd>. A new set of diamonds will appear at the end.
<img src="../../assets/education/build-it-play-it-island-of-move/looping-animations/added-last-pose.png" width="100%" />

36
.cursor/rules/roblox/en-us/education/build-it-play-it-island-of-move/opening-the-template.md Normal file
View file

@ -0,0 +1,36 @@
---
title: Open the template
description: Part of the Roblox Build It, Play It Challenge - Island of Move. Open the template for the movement simulator.
next: /education/build-it-play-it-island-of-move/test-the-game
prev: /education/build-it-play-it-island-of-move/beginner-landing-page
---
In your movement simulator, players will move around a track to earn stars. After players earn three stars, they'll level up and be able to move faster. The more you move, the faster you'll go.
<video controls src="../../assets/education/build-it-play-it-island-of-move/opening-the-template/overview-game-progress.mp4" width="100%"></video>
## Template overview
A template has been created that includes all the parts to make a simulator-style game. This includes code and a starter world that you can customize later.
<img src="../../assets/education/build-it-play-it-island-of-move/opening-the-template/template-example.png" />
## Open the template
Time to open Roblox Studio! If you need to, download [Studio](https://www.roblox.com/create), then click the following button to open the **Move It Simulator** template.
<UseStudioButton variant="" buttonTextTranslationKey="Action.EditInStudio" placeId="5353920686" universeId="1876281622" />
## Close extra windows
The first time you launch Roblox Studio, 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 **&times;** 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-Island-Of-Move.jpg" width="960" />
<Alert severity="warning">
If you don't see the windows on the right, navigate to the **Window** menu and toggle on **Explorer** and **Properties**.
</Alert>

131
.cursor/rules/roblox/en-us/education/build-it-play-it-island-of-move/personalize-the-game.md Normal file
View file

@ -0,0 +1,131 @@
---
title: Personalize the game
description: Part of the Roblox Build It, Play It Challenge - Island of Move. Customize the template script.
prev: /education/build-it-play-it-island-of-move/go-beyond-the-challenge
---
Make the Move It Simulator into your own unique vision by changing the rewards a player earns, the name of the game, and settings like player speed. Making these changes can change the mood of your game. In a few minutes, go from just a template to a unique game based off your vision.
## Change the game settings
The words you see in-game like "Move It Simulator", and "Roblox Developer" are all changeable. You can even make players move faster. These changes can be done by opening a script called _GameSettings_. That script includes different **variables**, or placeholders, for names and numbers used.
1. To open the script, find **Explorer** on the right side of Studio. If you cannot see Explorer, go into the View tab and click the Explorer button.
<img src="../../assets/education/build-it-play-it-island-of-move/personalize-the-game/show-explorer.jpeg" width="100%" />
2. In Explorer **search bar**, type _GameSettings_.
3. Double-click the _GameSettings_ script.
<img src="../../assets/education/build-it-play-it-island-of-move/personalize-the-game/open-game-settings.png" width="50%" />
### Change words
Inside _GameSettings_, you can change words displayed to players. This can even include the game title or messages shown when players level up.
To start, give the game its own unique name.
1. In the GameSetting script, on the left side are **line numbers**. Find **Line 8**.
```lua
local GameSettings = {}
-- ================================================================================
-- Game Information
-- These settings affect text that you see in game
-- ================================================================================
GameSettings.gameName = "Move It Simulator"
GameSettings.developerName = "RobloxUser"
GameSettings.levelUpMessage = "Level Up!"
```
2. Between the quotation marks, type a new name for your game.
`GameSettings.gameName = "Wizardry School Simulator"`
3. Run your game. Notice how the billboard at the game start changed.
<GridContainer numColumns="2">
<figure>
<img src="../../assets/education/build-it-play-it-island-of-move/personalize-the-game/show-rename-before.jpeg" />
<figcaption>Before</figcaption>
</figure>
<figure>
<img src="../../assets/education/build-it-play-it-island-of-move/personalize-the-game/show-rename-after.jpeg" />
<figcaption>After</figcaption>
</figure>
</GridContainer>
### Change numbers
By modifying different numbers in _GameSettings_, you can create a unique experience for your players. For instance, players can start out moving extra fast or gain levels slowly.
1. In the _GameSetting_ script, find line **28**. This line has the number for the player's starting move speed. Replace the number `7` with a higher number, like `30`.
```lua
-- Multiplier determines how much players need to move before a level; 1 = small amount of movement, 3 much more movement
local growthModifier = 1.2
-- How fast a player starts with 0 levels
local startMoveSpeed = 30
-- The amount of WalkSpeed added per level
local speedBoostPerLevel = 3
```
Run the game and notice that your player begins the game faster than before.
## Challenge checkpoint
You've customized your game, now claim your free prize! Celebrate your new skills by getting the **Kinetic Staff** and **Do-It-Yourself** badge. Copy the code below.
`DIY`
Click the button to open a Roblox game, find the in-game character, and click **REDEEM CODE** to get your prize.
<a href="https://www.roblox.com/games/5306359293/">
<Button variant="contained">Enter World</Button>
</a>
## Continue customizing
You've taken the first steps in making this game your own, now keep going! Below are a few options to change the look and feel of your game.
<table>
<tr>
<td width="33%">
<img src="../../assets/education/build-it-play-it-island-of-move/personalize-the-game/terrain.jpeg" width="100%" />
**Creating Terrain**
Sculpt mountains, rivers, or even cover the world in snow.
<a href="../../studio/terrain-editor.md">
<Button variant="contained">View</Button>
</a>
</td>
<td width="33%">
<img src="../../assets/education/build-it-play-it-island-of-move/personalize-the-game/particle-effects.jpeg" width="100%" />
**Particle Effects**
Add fire, sparks, and other effects to objects in game.
<a href="../../effects/particle-emitters.md">
<Button variant="contained">View</Button>
</a>
</td>
<td width="33%">
<img src="../../assets/education/build-it-play-it-island-of-move/personalize-the-game/atmosphere.jpeg" width="100%" />
**Atmosphere**
Change a game's mood by using environment effects.
<a href="../../environment/atmosphere.md">
<Button variant="contained">View</Button>
</a>
</td>
</tr>
</table>

37
.cursor/rules/roblox/en-us/education/build-it-play-it-island-of-move/save-and-publish.md Normal file
View file

@ -0,0 +1,37 @@
---
title: Save and publish
description: Part of the Roblox Build It, Play It Challenge - Island of Move. Save the project.
next: /education/build-it-play-it-island-of-move/challenge-checkpoint
prev: /education/build-it-play-it-island-of-move/create-the-first-pose
---
<img src="../../assets/education/build-it-play-it-island-of-move/save-and-publish/hero-banner.jpeg" width="100%" />
## Save the animation
With the first pose is finished, save the animation.
1. In the **Animation Editor**, find and click on the three dots icon.
2. From the menu, select **Save**.
<img src="../../assets/education/build-it-play-it-island-of-move/save-and-publish/save-animation.png" width="70%" />
## Save the place
The animation is saved, but it's important to save the whole project by publishing it to Roblox. It's a good idea to **publish** every ten minutes while you're working or after making a big change.
1. Select **File** → **Publish to Roblox** to open the publishing window.
2. Enter a place name and an optional description.
3. When ready, click the **Create** button. Once published, games can be edited from any computer since they're connected to your account.
<Alert severity="info">
<AlertTitle>This game runs on mobile</AlertTitle>
Players can use mobile devices with accelerometers as a way to move characters. Anyone playing on desktop devices will still click a button to move.
</Alert>
<Alert severity="info">
<AlertTitle>Saving after publishing</AlertTitle>
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>/<kbd>⌥</kbd><kbd>P</kbd>).
</Alert>

56
.cursor/rules/roblox/en-us/education/build-it-play-it-island-of-move/sharing-animations.md Normal file
View file

@ -0,0 +1,56 @@
---
title: Export and Import Animations
description: Part of the Roblox Build It, Play It Challenge - Island of Move. Export animations to share with other developers.
prev: /education/build-it-play-it-island-of-move/go-beyond-the-challenge
---
<img src="../../assets/education/build-it-play-it-island-of-move/sharing-animations/hero-banner.png" width="100%" />
Share animations with connections and fellow developers by exporting and importing them through Studio.
<Alert severity="info">
<AlertTitle>Animation Permission Changes</AlertTitle>
You can now share animations with connections, groups, and experiences without re-uploading them. For more information, see [Asset privacy](../../projects/assets/privacy.md).
</Alert>
## Export animations
Make sure to save your animation before exporting it.
1. In **Explorer**, expand the rig that you were animating with. It's likely that rig is named **_Dummy_**.
<img src="../../assets/education/build-it-play-it-island-of-move/sharing-animations/select-animation-saves.png" width="50%" />
2. Expand **_AnimSaves_**. Then, find the name of the animation to share.
<img src="../../assets/education/build-it-play-it-island-of-move/sharing-animations/select-animation.png" width="50%" />
3. Right-click the animation name and select **Save to File**. This saves the animation as an `.RBXM` file on your computer, which can be shared. You can export more than one animation at a time.
## Import animations
Animations saved in an `.RBXM` file can be imported into different rigs by yourself or by friends in any Roblox file.
1. Select the rig you want to use. In the **Explorer**, select **_AnimSaves_**.
<Alert severity="warning">
<AlertTitle>Check The Rig Has Previous Animations</AlertTitle>
If the rig doesn't have any previous animations, it won't have an AnimSaves folder. To make that folder, in the rig, create and save a new animation. Saving an animation automatically creates the needed folder.
</Alert>
2. Right-click on **_AnimSaves_** and select **Insert From File**. Then, pick the `.RBXM` file with the exported animation.
3. To load the animation, in the Animation Editor (see the Plugins tab), click on **&ctdot;**.
<img src="../../assets/education/build-it-play-it-island-of-move/sharing-animations/click-options.png" width="50%" />
Next, in the drop-down menu, go to **Load** and select the name of the `.RBXM` file just imported.
### Troubleshooting tips
**Issue**: Animation Not Loading
In the original `.RBXM` file, make sure there is a saved `Class.KeyframeSequence` object.
<img src="../../assets/education/build-it-play-it-island-of-move/sharing-animations/animation-keyframe.png" width="50%" />
If only a `Class.Keyframe` object was imported, try re-exporting the original animation and importing again. Make sure to export the named `Class.KeyframeSequence` and not just a keyframe object.

24
.cursor/rules/roblox/en-us/education/build-it-play-it-island-of-move/test-the-game.md Normal file
View file

@ -0,0 +1,24 @@
---
title: Test the game
description: Part of the Roblox Build It, Play It Challenge - Island of Move. Test the game experience you'll create.
next: /education/build-it-play-it-island-of-move/creating-animations
prev: /education/build-it-play-it-island-of-move/opening-the-template
---
Before animating, test out the template to see how the game works. In-game, players make progress around the track by clicking the move button, or using a mobile device and moving around in real-life. Players start off slow and then get faster and faster.
1. Click **Play** to test.
<img src="../../assets/education/general/play-button.png" width="360" />
2. In the experience, walk up to the golem character on the stage and press <kbd>E</kbd> to open up a menu. On that screen, click **Play Game**.
<img src="../../assets/education/build-it-play-it-island-of-move/test-the-game/click-npc.png" width="50%" />
3. Once in-game, go forward by repeatedly clicking the **Move** button. Your character will automatically follow the track as you click.
<video controls src="../../assets/education/build-it-play-it-island-of-move/test-the-game/click-game-button.mp4" width="100%"></video>
4. **Stop** playing by clicking the red square.
<img src="../../assets/education/general/stop-button.png" width="360" />