mirror of
https://github.com/rojo-rbx/rojo.git
synced 2026-10-24 06:34:09 +00:00
update rules
This commit is contained in:
Joe
parent
4c390fdd37
commit
d5522b2fef
8549 changed files with 11783 additions and 1888 deletions
292
.cursor/rules/roblox/en-us/tutorials/index.md
Normal file
292
.cursor/rules/roblox/en-us/tutorials/index.md
Normal file
|
|
@ -0,0 +1,292 @@
|
|||
---
|
||||
title: Start learning with tutorials
|
||||
description: Learn how to create Roblox experiences, avatars, and avatar items with use case tutorials, curriculum paths, and videos.
|
||||
hideInPageNavigation: true
|
||||
---
|
||||
|
||||
Roblox offers both short and long-form tutorials to help you learn various creation processes and techniques for the platform. There are three common areas of creation:
|
||||
|
||||
- **Experiences** - 3D worlds that you can create and publish using Roblox Studio.
|
||||
- **Avatars** - Character models with many specialized features that allow players to interact with experiences and express themselves.
|
||||
- **Avatar items** - Clothing and accessories that players can use to customize their avatars.
|
||||
|
||||
While many creators focus on a single area, the following tutorials walk you through the fundamentals of each process.
|
||||
|
||||
<br>
|
||||
</br>
|
||||
<Grid container spacing={2} style={{marginBottom: 24}}>
|
||||
<Grid item container Medium={12} Large={6} XLarge={4} direction="row" style={{gap: 24, marginBottom: 12}}>
|
||||
<Grid item container wrap="nowrap" direction="column" style={{gap: 8, flex: 1}}>
|
||||
<div class="container"
|
||||
style={{position: "relative", paddingBottom: "56.25%", height: 0}}>
|
||||
<img src="../assets/landing/core-experience.png" style={{position: "absolute", top: 0, left: 0, width: "100%", height: "100%"}} />
|
||||
</div>
|
||||
<Typography variant='h4'>Create your first experience</Typography>
|
||||
<Typography variant='body1'>Learn about important concepts for developing on Roblox by recreating a simple 3D platformer experience where players collect coins to trade for jump power.</Typography>
|
||||
<div style={{marginTop:16}}>
|
||||
<a underline="none" href="./first-experience/index.md">
|
||||
<Button variant="contained" color="secondary" size='large'
|
||||
style={{marginRight:16, alignSelf: 'flex-start'}}>Get started</Button>
|
||||
</a>
|
||||
</div>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Grid item container Medium={12} Large={6} XLarge={4} direction="row" style={{gap: 24, marginBottom: 12}}>
|
||||
<Grid item container wrap="nowrap" direction="column" style={{gap: 8, flex: 1}}>
|
||||
|
||||
<div class="container"
|
||||
style={{position: "relative", paddingBottom: "56.25%", height: 0}}>
|
||||
<img src="../assets/art/avatar/templates/Round-Concepts.png" />
|
||||
</div>
|
||||
<Typography variant='h4'>Create your first avatar character</Typography>
|
||||
<Typography variant='body1' >Learn how to create your own custom avatar character using Blender and one of Roblox's downloadable template models.</Typography>
|
||||
<div style={{marginTop:16}}>
|
||||
<a underline="none" href="../art/characters/creating/index.md">
|
||||
<Button variant="contained" color="secondary" size='large'
|
||||
style={{marginRight:16, alignSelf: 'flex-start'}}>Get started</Button>
|
||||
</a>
|
||||
</div>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Grid item container Medium={12} Large={6} XLarge={4} direction="row" style={{gap: 24, marginBottom: 12}}>
|
||||
<Grid item container wrap="nowrap" direction="column" style={{gap: 8, flex: 1}}>
|
||||
|
||||
<div class="container"
|
||||
style={{position: "relative", paddingBottom: "56.25%", height: 0}}>
|
||||
<img src="../assets/art/accessories/creating-rigid/Studio-Mask-Preview-Cropped.png" />
|
||||
</div>
|
||||
<Typography variant='h4'>Create your first avatar item</Typography>
|
||||
<Typography variant='body1' >Learn how to convert a mesh object in Blender to either a publishable accessory item or an equipable and layerable clothing item for avatars.</Typography>
|
||||
<div style={{marginTop:16}}>
|
||||
<a underline="none" href="../art/accessories/creating-rigid/index.md">
|
||||
<Button variant="contained" color="secondary" size='large'
|
||||
style={{marginRight:16, alignSelf: 'flex-start'}}>Accessories</Button>
|
||||
</a>
|
||||
<a underline="none" href="../art/accessories/creating/index.md">
|
||||
<Button variant="contained" color="secondary" size='large'
|
||||
style={{marginRight:16, alignSelf: 'flex-start'}}>Clothing</Button>
|
||||
</a>
|
||||
</div>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<h2 style={{marginBottom: 24, marginTop: 96}}>Use case tutorials</h2>
|
||||
|
||||
**Use case tutorials** focus on a specific task that you can complete in order to learn about various aspects of developing in Studio. In addition to teaching you how to use collections of related features to recreate common components for experiences, this short-form type of structured learning highlights techniques you can use to achieve effects for a variety of design requirements.
|
||||
|
||||
<Grid container spacing={2} style={{marginBottom: 24}}>
|
||||
<Grid item container Medium={12} Large={6} XLarge={4} direction="row" style={{gap: 24, marginBottom: 12}}>
|
||||
<Grid item container wrap="nowrap" direction="column" style={{gap: 8, flex: 1}}>
|
||||
|
||||
<div class="container"
|
||||
style={{position: "relative", paddingBottom: "56.25%", height: 0}}>
|
||||
<img src="../assets/modeling/solid-modeling/Negated-Part-To-Union.jpg" style={{position: "absolute", top: 0, left: 0, width: "100%", height: "100%"}} />
|
||||
</div>
|
||||
<Typography variant='h4'>Modeling</Typography>
|
||||
<Typography variant='body1' >
|
||||
<ul>
|
||||
<li>Learn the basics of <a href="./use-case-tutorials/modeling/create-neon-signs.md">solid modeling</a> in Studio</li>
|
||||
<li>Learn how to <a href="../art/modeling/rig-a-simple-mesh.md">rig</a> and <a href="../art/modeling/skin-a-simple-mesh.md">skin</a> a simple mesh in Blender</li>
|
||||
<li>Learn how to <a href="../art/modeling/rig-a-humanoid-model.md">rig</a> and <a href="../art/modeling/skin-a-humanoid-model.md">skin</a> a humanoid model in Blender</li>
|
||||
</ul></Typography>
|
||||
<div style={{marginTop:16}}>
|
||||
</div>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Grid item container Medium={12} Large={6} XLarge={4} direction="row" style={{gap: 24, marginBottom: 12}}>
|
||||
<Grid item container wrap="nowrap" direction="column" style={{gap: 8, flex: 1}}>
|
||||
|
||||
<div class="container"
|
||||
style={{position: "relative", paddingBottom: "56.25%", height: 0}}>
|
||||
<img src="../assets/lighting-and-effects/atmosphere/Showcase.jpg" style={{position: "absolute", top: 0, left: 0, width: "100%", height: "100%"}} />
|
||||
</div>
|
||||
<Typography variant='h4'>Environments</Typography>
|
||||
<Typography variant='body1' >
|
||||
<ul>
|
||||
<li>Learn how to set global and local lighting properties to enhance <a href="./use-case-tutorials/lighting/enhance-indoor-environments.md">indoor</a> and <a href="./use-case-tutorials/lighting/enhance-outdoor-environments.md">outdoor</a> environments</li>
|
||||
<li>Learn how to play <a href="./use-case-tutorials/audio/add-3D-audio.md">positional</a> and <a href="./use-case-tutorials/audio/add-2D-audio.md">non-positional</a> audio for player immersion</li>
|
||||
<li>Learn how to generate <a href="./use-case-tutorials/audio/add-text-to-speech.md">audio from text</a> using an artificial voice</li>
|
||||
<li>Learn how to integrate different <a href="./use-case-tutorials/audio/add-voice-chat.md">voice chat</a> configurations into your gameplay</li>
|
||||
<li>Learn how to <a href="./use-case-tutorials/modeling/assemble-modular-environments.md">assemble modular assets</a> that snap together in numerous configurations</li>
|
||||
</ul></Typography>
|
||||
<div style={{marginTop:16}}>
|
||||
</div>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Grid item container Medium={12} Large={6} XLarge={4} direction="row" style={{gap: 24, marginBottom: 12}}>
|
||||
<Grid item container wrap="nowrap" direction="column" style={{gap: 8, flex: 1}}>
|
||||
|
||||
<div class="container"
|
||||
style={{position: "relative", paddingBottom: "56.25%", height: 0}}>
|
||||
<img src="../assets/tutorials/landing/Effects.png" style={{position: "absolute", top: 0, left: 0, width: "100%", height: "100%"}} />
|
||||
</div>
|
||||
<Typography variant='h4'>Effects</Typography>
|
||||
<Typography variant='body1' >
|
||||
<ul>
|
||||
<li>Learn how to use <a href="./use-case-tutorials/vfx/laser-traps-with-beams.md">beams</a> for player hazards</li>
|
||||
<li>Learn how to customize <a href="./use-case-tutorials/vfx/use-particles-for-explosions.md">particle emitters</a> for explosions</li>
|
||||
<li>Learn how to <a href="./use-case-tutorials/vfx/create-waterfalls.md">combine VFX objects</a> to emulate real-world physical behavior</li>
|
||||
</ul></Typography>
|
||||
<div style={{marginTop:16}}>
|
||||
</div>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Grid item container Medium={12} Large={6} XLarge={4} direction="row" style={{gap: 24, marginBottom: 12}}>
|
||||
<Grid item container wrap="nowrap" direction="column" style={{gap: 8, flex: 1}}>
|
||||
|
||||
<div class="container"
|
||||
style={{position: "relative", paddingBottom: "56.25%", height: 0}}>
|
||||
<img src="../assets/tutorials/landing/UI.png" style={{position: "absolute", top: 0, left: 0, width: "100%", height: "100%"}} />
|
||||
</div>
|
||||
<Typography variant='h4'>UI</Typography>
|
||||
<Typography variant='body1' >
|
||||
<ul>
|
||||
<li>Learn how to combine UI objects with scripts to create a [custom health meter](./use-case-tutorials/ui/create-hud-meters.md)</li>
|
||||
<li>Learn how to make [interactive UI objects](./use-case-tutorials/ui/interactive-ui.md) hooked to in‑experience behavior and state transitions</li>
|
||||
<li>Learn how to create [interactive prompts](./use-case-tutorials/ui/proximity-prompts.md) that only appear as players approach 3D objects</li>
|
||||
</ul></Typography>
|
||||
<div style={{marginTop:16}}>
|
||||
</div>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Grid item container Medium={12} Large={6} XLarge={4} direction="row" style={{gap: 24, marginBottom: 12}}>
|
||||
<Grid item container wrap="nowrap" direction="column" style={{gap: 8, flex: 1}}>
|
||||
|
||||
<div class="container"
|
||||
style={{position: "relative", paddingBottom: "56.25%", height: 0}}>
|
||||
<img src="../assets/tutorials/landing/Physics.png" style={{position: "absolute", top: 0, left: 0, width: "100%", height: "100%"}} />
|
||||
</div>
|
||||
<Typography variant='h4'>Physics</Typography>
|
||||
<Typography variant='body1' >
|
||||
<ul>
|
||||
<li>Learn how to <a href="./use-case-tutorials/physics/create-moving-objects.md">move</a> and <a href="./use-case-tutorials/physics/create-spinning-objects.md">spin</a> objects in a way that emulates real-world physical behavior</li>
|
||||
<li>Learn how to <a href="./use-case-tutorials/physics/create-moving-objects.md">move objects</a> to transport players linearly from point A to B</li>
|
||||
<li>Learn how to use <a href="./use-case-tutorials/physics/build-a-hinged-door.md">constraints</a> for mechanical connections, such as door hinges, rope, and welds</li>
|
||||
</ul></Typography>
|
||||
<div style={{marginTop:16}}>
|
||||
</div>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Grid item container Medium={12} Large={6} XLarge={4} direction="row" style={{gap: 24, marginBottom: 12}}>
|
||||
<Grid item container wrap="nowrap" direction="column" style={{gap: 8, flex: 1}}>
|
||||
|
||||
<div class="container"
|
||||
style={{position: "relative", paddingBottom: "56.25%", height: 0}}>
|
||||
<img src="../assets/tutorials/landing/Animation.png" style={{position: "absolute", top: 0, left: 0, width: "100%", height: "100%"}} />
|
||||
</div>
|
||||
<Typography variant='h4'>Animation</Typography>
|
||||
<Typography variant='body1' >
|
||||
<ul>
|
||||
<li>Learn the basics of <a href="./use-case-tutorials/animation/create-an-animation.md">creating animations</a> using the built-in **Animation Editor**</li>
|
||||
<li>Learn how to <a href="./use-case-tutorials/animation/play-character-animations.md#change-default-animations">swap default avatar animations</a> with your own creations</li>
|
||||
<li>Learn how to <a href="./use-case-tutorials/animation/play-character-animations.md#trigger-animations">trigger avatar animations</a> from gameplay interactions</li>
|
||||
</ul></Typography>
|
||||
<div style={{marginTop:16}}>
|
||||
</div>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Grid item container Medium={12} Large={6} XLarge={4} direction="row" style={{gap: 24, marginBottom: 12}}>
|
||||
<Grid item container wrap="nowrap" direction="column" style={{gap: 8, flex: 1}}>
|
||||
|
||||
<div class="container"
|
||||
style={{position: "relative", paddingBottom: "56.25%", height: 0}}>
|
||||
<img src="../assets/tutorials/landing/Scripting.jpg" style={{position: "absolute", top: 0, left: 0, width: "100%", height: "100%"}} />
|
||||
</div>
|
||||
<Typography variant='h4'>Scripting</Typography>
|
||||
<Typography variant='body1' >
|
||||
<ul>
|
||||
<li>Learn how to script the gameplay logic for player hazards, such as <a href="./use-case-tutorials/scripting/basic-scripting/deadly-lava.md">deadly lava</a> and <a href="./use-case-tutorials/scripting/basic-scripting/fading-trap.md">fading traps</a></li>
|
||||
<li>Learn how to script the gameplay logic for player information, such as their <a href="./use-case-tutorials/scripting/basic-scripting/score-points.md">score</a>, <a href="./use-case-tutorials/scripting/intermediate-scripting/create-a-health-pickup.md">health</a>, and <a href="./use-case-tutorials/scripting/intermediate-scripting/save-data.md">data</a> that needs to persist between sessions</li>
|
||||
</ul></Typography>
|
||||
<div style={{marginTop:16}}>
|
||||
</div>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Grid item container Medium={12} Large={6} XLarge={4} direction="row" style={{gap: 24, marginBottom: 12}}>
|
||||
<Grid item container wrap="nowrap" direction="column" style={{gap: 8, flex: 1}}>
|
||||
|
||||
<div class="container"
|
||||
style={{position: "relative", paddingBottom: "56.25%", height: 0}}>
|
||||
<img src="../assets/tutorials/controlling-the-players-camera/SidescrollingCameraExample.jpg" style={{position: "absolute", top: 0, left: 0, width: "100%", height: "100%"}} />
|
||||
</div>
|
||||
<Typography variant='h4'>Input and camera</Typography>
|
||||
<Typography variant='body1' >
|
||||
<ul>
|
||||
<li>Learn how to create a <a href="./use-case-tutorials/input-and-camera/control-the-users-camera.md#create-a-first-person-camera">first-person camera</a>, <a href="./use-case-tutorials/input-and-camera/control-the-users-camera.md#create-a-side-scrolling-camera">side-scrolling camera</a>, or <a href="./use-case-tutorials/input-and-camera/control-the-users-camera.md#create-an-isometric-camera">isometric camera</a> to suit your specific gameplay</li>
|
||||
<li>Learn how to <a href="./use-case-tutorials/input-and-camera/detect-user-input.md">detect user input</a> to trigger unique actions in your experiences</li>
|
||||
</ul></Typography>
|
||||
<div style={{marginTop:16}}>
|
||||
</div>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<h2 style={{marginBottom: 24}}>Curriculum paths</h2>
|
||||
|
||||
**Curriculum paths** provide a comprehensive overview of the various skills you need for different development areas after you familiarize yourself with Studio's core functionality. In addition to demonstrating how to use Studio features for each creative discipline, this long-form type of structured learning shows you how to examine and solve common design problems within your own experiences.
|
||||
|
||||
<Grid container spacing={2} style={{marginBottom: 24}}>
|
||||
<Grid item container Medium={12} Large={6} XLarge={4} direction="row" style={{gap: 24, marginBottom: 12}}>
|
||||
<Grid item container wrap="nowrap" direction="column" style={{gap: 8, flex: 1}}>
|
||||
|
||||
<div class="container"
|
||||
style={{position: "relative", paddingBottom: "56.25%", height: 0}}>
|
||||
<iframe src="https://www.youtube-nocookie.com/embed/nwShvDmFHWc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen style={{position: "absolute", top: 0, left: 0, width: "100%", height: "100%"}}></iframe>
|
||||
</div>
|
||||
<Typography variant='h4'>Environmental art</Typography>
|
||||
<Typography variant='body1' >Learn how to recreate a high-quality environment for a first-person laser tag experience.</Typography>
|
||||
<div style={{marginTop:16}}>
|
||||
<a underline="none" href="./curriculums/environmental-art/index.md">
|
||||
<Button variant="contained" color="secondary" size='large'
|
||||
style={{marginRight:8, alignSelf: 'flex-start'}}>Get started</Button>
|
||||
</a>
|
||||
</div>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Grid item container Medium={12} Large={6} XLarge={4} direction="row" style={{gap: 24, marginBottom: 12}}>
|
||||
<Grid item container wrap="nowrap" direction="column" style={{gap: 8, flex: 1}}>
|
||||
|
||||
<div class="container"
|
||||
style={{position: "relative", paddingBottom: "56.25%", height: 0}}>
|
||||
<iframe src="https://www.youtube-nocookie.com/embed/7iJKUUiKc0Y" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen style={{position: "absolute", top: 0, left: 0, width: "100%", height: "100%"}}></iframe>
|
||||
</div>
|
||||
<Typography variant='h4'>Gameplay scripting</Typography>
|
||||
<Typography variant='body1' >Learn how to organize and implement the gameplay logic for a large, complex project.</Typography>
|
||||
<div style={{marginTop:16}}>
|
||||
<a underline="none" href="./curriculums/gameplay-scripting/index.md">
|
||||
<Button variant="contained" color="secondary" size='large'
|
||||
style={{marginRight:8, alignSelf: 'flex-start'}}>Get started</Button>
|
||||
</a>
|
||||
</div>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Grid item container Medium={12} Large={6} XLarge={4} direction="row" style={{gap: 24, marginBottom: 12}}>
|
||||
<Grid item container wrap="nowrap" direction="column" style={{gap: 8, flex: 1}}>
|
||||
|
||||
<div class="container"
|
||||
style={{position: "relative", paddingBottom: "56.25%", height: 0}}>
|
||||
<iframe src="https://www.youtube-nocookie.com/embed/eqW9SINYeWg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen style={{position: "absolute", top: 0, left: 0, width: "100%", height: "100%"}}></iframe>
|
||||
</div>
|
||||
<Typography variant='h4'>UI design</Typography>
|
||||
<Typography variant='body1' >Learn how to design and implement UI components for unique user flows.</Typography>
|
||||
<div style={{marginTop:16}}>
|
||||
<a underline="none" href="./curriculums/user-interface-design/index.md">
|
||||
<Button variant="contained" color="secondary" size='large'
|
||||
style={{marginRight:8, alignSelf: 'flex-start'}}>Get started</Button>
|
||||
</a>
|
||||
</div>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
Loading…
Add table
Add a link
Reference in a new issue