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 on the left, click in the world to place them, use a combination of the various fill tools, and more.

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

Click the "Export" button near the bottom of the screen, you'll be prompted to download a .json file, this is your world map file. For this example, save it as map.json into the assets directory of your HYTOPIA project.

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 your created map!

Some or all of my blocks are missing, or blacked out?

If some or all of your blocks are missing or blocked out, it's likely because you don't have the textures in your assets/blocks folder that the my-map.json file is looking for. Here's a few ways to remedy this.

1. Make sure you have the latest block textures, they will be included by default if you originally initialized your project with bunx hytpia init.

2. Check for what textures you have and don't have. Open your map.json in a text editor. At the top, you'll notice blockTypes - look at all the textureUri values and make sure the texture files they're pointing to exist in your assets directory. For example, a textureUri of blocks/gravel.png should be located in your project at assets/blocks/gravel.png . If you have a textureUri that does not have a file extension, such as blocks/grass this is a path to a cubemapped texture, it means you should have a folder at assets/blocks/grass with 6 files for each of the block's faces - +x.png, +y.png, +z.png, -x.png, -y.png, -z.png.

Next Steps

Enable Multiplayer Testing

Learn how to use ngrok.io to allow others to join and test your local HYTOPIA server.