Step 3: Build game menu UI

We will build a simple menu UI that will allow players to connect to a server. This will be the first thing players see when they start the game. We will also update the default map to be the menu UI instead of the game world.

Create the menu UI world

1. Create a new level in File -> New Level...
2. Select Empty Level
3. Click File -> Save Current Level or press Ctrl + S. Save in All/Content/Third Person/Maps and name it Entry.
4. Change the game mode by clicking the Blueprint dropdown and then clicking World Override -> Game Mode: Not overridden! -> Select GameModeBase Class -> GameModeBase - This will remove the game mode logic to create a pure menu screen

Create the menu widget

1. Open the Content Drawer
2. Open All/Content/ThirdPerson/UI
   • You may have to create this folder
3. Right-click in the content area and click User Interface -> Widget Blueprint
4. Click User Widget
5. Rename it to EntryWidget

Design menu widget

1. Open the EntryWidget you created
2. Construct the following design:

Write widget blueprint to connect to server when button is clicked

1. Create a development token by running the following command and copying the token. It should look like dev_staging.XXXX. Save this for the next step.

   rivet token dev create
   

   CopyCopied!
2. Open the Blueprint code for the EntryWidget you created by clicking Graph in the top right corner
   • Replace MY_TOKEN with the token you just created.
3. Construct the following Blueprint:
4. Press Compile

This widget can now be used to connect a player to a server.

Add the menu widget to the entry level

1. Open the level Blueprint by clicking the Blueprint dropdown and then clicking Open Level Blueprint
2. Construct the following Blueprint:
3. Press Compile

Update the default map

Now that we have a new Entry map for the UI, we need to make it the default map.

1. Open Edit -> Project Settings...
2. Click on Maps & Modes under Projects in the sidebar
   • You can also search for "map" in the search bar
3. Change Game Default Map to /Game/ThirdPerson/Maps/Entry
4. Change Advanced > Server Default Map to /Game/ThirdPerson/Maps/ThirdPersonMap

Set up play configuration for testing multiplayer

We will configure the play settings to test the game with Rivet locally in your editor.

1. Press the three dots next to the play button and click Advanced Settings to open the Play In settings.

   

2. Scroll down to Multiplayer Options. Update the following settings:

   • Launch Separate Server: False
   • Play Net Mode: Play Standalone
   • Run Under One Process: True

3. Update the number of players to at least 2.

   

Test the game server locally

Run server

This will build & run your game server locally and run on port 7777. You must re-run this command whenever you change your server code.

rivet unreal start-server

Run client

1. Switch to the main editor
2. Validate that the Entry level is open
3. Click Play
4. Click Connect in each of the game instances created
5. You should be able to see each player running around in sync

This is using the Rivet development token to mock production APIs. This lets you test with production APIs while still using your local machine.