rojo/.cursor/rules/roblox/experiences.md

---
title: Get started with experiences on Roblox
description: Learn how to create Roblox experiences with guides, tutorials, and code samples.
hideInPageNavigation: true
---

Roblox is a 3D creation platform that provides an all-in-one IDE that includes
the Roblox Engine, a client emulator, and all the tools and APIs you need to
start creating Roblox 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, marginBottom: 12}}>
    <img src="/assets/landing/get-started/studio.png" style={{position: "absolute", top: 0, left: 0, width: "100%", height: "100%"}}/>
    </div>
    <Typography variant='h4'>Get Studio and take the tour</Typography>
    <Typography variant='body1' >Get acclimated with Studio by downloading and
    launching the onboarding tour.</Typography>
    <UseStudioButton variant='blueLogoIconButton' color='secondary'/>

  </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, marginBottom: 12}}>
    <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'>Create a simple 3D platformer while learning important Roblox building and scripting concepts.</Typography>
    <div style={{marginTop:16}}>
      <a underline="none" href="./tutorials/curriculums/core/">
      <Button variant="contained" color="secondary" size='large'
      style={{marginRight:16, alignSelf: 'flex-start'}}>Create</Button>
      </a>
      <UseStudioButton variant="link" buttonTextTranslationKey="Action.EditInStudio" placeId="14238807008" universeId="4925394319" />
    </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, marginBottom: 12}}>
    <img src="/assets/misc/blog_evergreen.png" />
  </div>
    <Typography variant='h4'>Learn about the platform</Typography>
    <Typography variant='body1' marginBottom={2}>Roblox is designed for mega-scale, 3D worlds. Learn about how it works!</Typography>
    <a href="creation#experiences"><Typography variant='buttonLarge' style={{marginTop: 16}}>Overview</Typography></a>
    <a href="unity"><Typography variant='buttonLarge' style={{marginBottom: 12}}>For Unity Developers</Typography></a>
    <a href="unreal"><Typography variant='buttonLarge' style={{marginBottom: 12}}>For Unreal Developers</Typography></a>
  </Grid>
  </Grid>
</Grid>

<h2 style={{marginBottom: 24, marginTop: 48}}>Play and create with templates</h2>

Roblox Studio has a variety of templates that you can edit and play without prior
knowledge. Give them a try and add on to them when you're ready!

<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, marginBottom: 12}}>
    <img src="/assets/landing/get-started/Platformer-Template.png" />
    </div>
    <Typography variant='h4'>Platformer</Typography>
    <Typography variant='body1' >Build your own **3D platformer** with customizable platforms, coin pickups, and double-jump, dashing, rolling, and long jump character mechanics!</Typography>
    <div style={{marginTop:16}}>
      <a underline="none" href="roblox://placeId=18636963376">
      <Button variant="contained" color="secondary" size='large'
      style={{marginRight:16, alignSelf: 'flex-start'}}>Play</Button>
      </a>
      <UseStudioButton variant="link" buttonTextTranslationKey="Action.EditInStudio" placeId="18636963376" universeId="6314775459" />
    </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, marginBottom: 12}}>
  <img src="/assets/landing/get-started/Laser-Tag-Template.jpg" />
  </div>
    <Typography variant='h4'>Laser tag</Typography>
    <Typography variant='body1' >Build your own **first-person shooter** with customizable blasters, round systems, and modular building assets to reconfigure a high-quality arena!</Typography>
    <div style={{marginTop:16}}>
      <a underline="none" href="roblox://placeId=17823019220">
      <Button variant="contained" color="secondary" size='large'
      style={{marginRight:16, alignSelf: 'flex-start'}}>Play</Button>
      </a>
      <UseStudioButton variant="link" buttonTextTranslationKey="Action.EditInStudio" placeId="17823019220" universeId="6106389365" />
    </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, marginBottom: 12}}>
    <img src="/assets/landing/get-started/Racing-Detailed.jpg" />
    </div>
    <Typography variant='h4'>Racing</Typography>
    <Typography variant='body1' >Build your own **kart racer** with a customizable driving mechanics, checkpoints, and modular winding track pieces that you can restructure for countless courses!</Typography>
    <div style={{marginTop:16}}>
      <a underline="none" href="roblox://placeId=16078915506">
      <Button variant="contained" color="secondary" size='large'
      style={{marginRight:16, alignSelf: 'flex-start'}}>Play</Button>
      </a>
      <UseStudioButton variant="link" buttonTextTranslationKey="Action.EditInStudio" placeId="16078915506" universeId="5557500170" />
    </div>
  </Grid>
  </Grid>
</Grid>

<h2 style={{marginBottom: 24, marginTop: 48}}>Learn with curriculum paths</h2>

To dive deeper, follow along with guided curriculum
that teaches you the skills you need to create and monetize your 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, marginBottom: 12}}>
  <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' >Environmental Art teaches you how to create a high-quality environment for a laser tag experience.</Typography>
      <div style={{marginTop:16}}>
        <a underline="none" href="./tutorials/curriculums/environmental-art">
        <Button variant="contained" color="secondary" size='large'
        style={{marginRight:16, alignSelf: 'flex-start'}}>Create</Button>
        </a>
        <UseStudioButton variant="link" buttonTextTranslationKey="Action.EditInStudio" placeId="14447845297" universeId="4990775993" />
      </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, marginBottom: 12}}>
  <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' >Gameplay Scripting teaches you how to organize and implement the scripting logic for large, complex project.</Typography>
      <div style={{marginTop:16}}>
        <a underline="none" href="./tutorials/curriculums/gameplay-scripting/">
        <Button variant="contained" color="secondary" size='large'
        style={{marginRight:16, alignSelf: 'flex-start'}}>Create</Button>
        </a>
        <UseStudioButton variant="link" buttonTextTranslationKey="Action.EditInStudio" placeId="14817965191" universeId="5106332772" />
      </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, marginBottom: 12}}>
  <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' >UI Design teaches you how to plan and implement UI components for unique user flows.</Typography>
      <div style={{marginTop:16}}>
        <a underline="none" href="./tutorials/curriculums/user-interface-design/">
        <Button variant="contained" color="secondary" size='large'
        style={{marginRight:16, alignSelf: 'flex-start'}}>Create</Button>
        </a>
        <UseStudioButton variant="link" buttonTextTranslationKey="Action.EditInStudio" placeId="14817965191" universeId="5106332772" />
      </div>
  </Grid>
  </Grid>
</Grid>

<h2 style={{marginBottom: 24, marginTop: 96}}>Connect</h2>
Learn, share, and interact with the Roblox community in the following places.
<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, marginBottom: 12}}>
    <img src="/assets/getting-started/platform-overview/Community.jpg" style={{position: "absolute", top: 0, left: 0, width: "100%", height: "100%"}}/>
  </div>
  <Typography variant='h4'>On forums</Typography>
  <a href="https://devforum.roblox.com/c/updates/announcements/36"><Typography variant='buttonLarge' style={{marginBottom: 12}}>Staff announcements</Typography></a>
  <a href="https://devforum.roblox.com/c/resources/roblox-staff/278"><Typography variant='buttonLarge' style={{marginBottom: 12}}>Staff articles</Typography></a>
    <a href="https://devforum.roblox.com/c/resources/community-tutorials/46"><Typography variant='buttonLarge' style={{marginBottom: 12}}>Community tutorials</Typography></a>
  <a href="https://devforum.roblox.com/c/help-and-feedback/54"><Typography variant='buttonLarge' style={{marginBottom: 12}}>Community help and feedback</Typography></a>
</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, marginBottom: 12}}>
    <img src="/assets/landing/get-started/video-interviews.jpg" style={{position: "absolute", top: 0, left: 0, width: "100%", height: "100%"}}/>
  </div>
  <Typography variant='h4'>On social video channels</Typography>
  <a href="https://www.youtube.com/@RobloxLearn"><Typography variant='buttonLarge' style={{marginBottom: 12}}> YouTube channel</Typography></a>
  <a href="https://events.roblox.com"><Typography variant='buttonLarge' style={{marginBottom: 12}}>Content and events platform</Typography></a>
</Grid>
</Grid>
</Grid>