Module 1 - Intro to Desktop Editor and TypeScript
Intro to Desktop Editor and TypeScript tutorial world
In this tutorial, you will create a simple platformer-style game where players run and jump through a world as they collect gems.
Key game development areas: This tutorial covers a reusable and flexible, basic co-op game setup, in which all players work together to collect gems. This tutorial walks through the basics of using the Meta Horizon Worlds desktop editor application to build the world and the TypeScript required to power a game that works in VR and on 2D desktop screens.
Game development areas include:
- Keeping track of all players in the world
- Managing game state
- Player and object collision
- Dependency Injection and Direct Reference in scripts
- Events
- Implementing the Observer Pattern using the Meta Horizon Worlds event system
- Displaying dynamic text
- Basics of using the desktop editor
- Basics of building scripts in TypeScript
- Build a basic Game Manager
- Game states
- Initialize game
- Keeping score
- End game and resetting the game
- Events
- Event listeners
- Broadcast events
- Entity (local) events
- Entity collisions
If you haven’t done so, please review the Getting Started section for tutorials, which includes information on:
- Tutorial prerequisites and assumptions
- How to use tutorial worlds and assets in your own worlds
- Developer tools and testing for your worlds
Note: All tutorials are created using TypeScript API version 2.0.0.
To build the world described in this tutorial, make your own copy of the “Intro to Desktop Editor & Typescript” tutorial world, by selecting it from the Tutorials tab in the Create menu (as shown below).
Select tutorial world
You can also create a new world based on a tutorial world from the desktop editor. For more information on this workflow, see
Access Tutorial Worlds.
Explore the complete world If preferred, you can check out the final version of what we are building. Copies of the files from this tutorial are included in the project with the suffix “_COMPLETE”.
To begin, open your new version of the tutorial world in the desktop editor.
- Open the Meta Quest Link application (formerly, Oculus) on your desktop.
- In the Library tab, locate the Meta Horizon Worlds application in which to build your version of the world.
- From the context menu, select Start in Desktop Mode.
- In the Creations Home page, select your copy of the tutorial template.
- Your world should now be opened in the desktop editor, and your project should look something like the following:
World opened in the desktop editor
Build mode and preview mode In the above, the world is in Build mode, which is indicated by the Wrench icon in the toolbar above the main panel.
Build mode
To explore the world and playtest it, click the Preview mode button.
In Preview mode:
- Use the mouse and WASD controls to move in the world.
- In Preview mode, you move at a single speed.
- To jump, press SPACEBAR. It’s a good idea to test any required jumping distances in Preview mode.
- To leave Preview mode and return to Build mode, press ESC.
Tip: You can also explore the world in VR mode from the desktop and through the VR headset itself. More on this later.
Note that exploring the world in Preview mode is not the same thing as playing the game experience. In the toolbar, next to the mode controls, you can see the simulation playback controls.
When you are testing your TypeScript, you must press the Play button to start the simulation, which activates and executes your TypeScript scripts. You can also use the Stop button and Reset button for your playtesting. More on this later.
You will see that a course for your game is provided. You are welcome to change the course to anything you like if desired, for this tutorial, I am going to leave the course as it is.
World layout
Some tips if you change the course: - Get in the habit of building your maps offset from the origin (0,0,0), this makes snapping easier in the editor.
- You can drag and drop assets in the Hierarchy panel to reorganize them as you see fit.
- Use Preview mode to move around the world to see if it feels fun. Things that can make it more fun are jumps and hidden areas. I like doing this in VR and in the desktop editor.
Now, create four duplicates of the green gem asset provided in the template.
Duplicate gem
- In the Hierarchy panel, search for emerald.
- Right-click on the emerald entity in the hierarchy:
- If the emerald gem is not in view, select Focus on selection.
- Select Duplicate.
- The new instance appears at the bottom of the list in the Hierarchy. Select it.
- Repeat the above steps until you have 5 total gems.
Place those 5 gems anywhere around your course using the Move tool, shown below. Gems should be placed about chest high on an avatar, so that we can easily run into them.
Move gems to place them in your world
Here is the course I created:
Course with placed gems
Make sure to drop into Preview mode to check out your course.
Done with Module 1! In this module, you:
- Verified prerequisites
- Opened the tutorial world in the desktop editor
- Built your layout
- Added gems
- Tested your world
- Switched between Build mode and Preview mode
In the next module, you start building scripts in TypeScript.