Build Your First World Map

Nearly all games will require you to build some kind of world map. Unless of course, you're building some space fighter game of sorts, which you can absolutely do with HYTOPIA 😛

Let's get started building our first world map. Head over to our official map building tool at https://build.hytopia.com

1. Create a map at build.hytopia.com

For simplicity sake, we'll use the official HYTOPIA world map builder. Alternatively if you're feeling adventurous, the SDK exposes all of the features necessary to programmatically create your own map as well.

Once you've opened the map builder, you should see something like this:

You can select from a variety of default block types and environmental models on the left. You can then click anywhere in the world to place them. You can also use a combination of the various fill tools, AI structure generators, block texture generators, and much more. Explore and play with it!

Once you're happy with your map, you're ready to export it and use it in your game.

Click the Cloud icon on the right in the bottom toolbar, then click the "Export" button that shows. You'll be prompted to download a .zip file, this is your world map file & all the assets you added to it such as blocks and environmental models.

Once downloaded, unzip the contents. Drag all of the contents within the unzipped folder into the assets folder of your HYTOPIA project. This will include a map.json file, and possibly a blocks and models folder, etc.

2. Load your map in your server

Now you're ready to load your map! We'll do this based on our boilerplate code for demonstration sake.

At the top of your index.ts file in the root of your project directory, import the map.

// ... your other imports
import worldMap from './assets/map.json';

// ... your code

Now, in your startServer init function, we need to load the map into the world.

startServer(world => {
  world.loadMap(worldMap);
  
  // ... your other init code
});

That's it!

Now, start your server, and connect to it like usual through https://hytopia.com/play.

You should be able to see and run around in your created map!