Multiplayer Game Series (Pt 1 -character)

Part 3 - Create/Join Session


Basic concept in graph:
image.png
Rename all menu BP from previous tutorials, make it less confusing:
image.png

Ensure Save and load player function properly


Open GameInstance graph Load Profile function
Add a wire below (to store save game object and load correctly each time):
image.png
In Check for saved Profile function, add SG player profile set node
image.png

Create Multiplayer (MP) menu widget:


Open WB mainmenu widget, add newborder to create a main menu:
image.png
Duplicate the widget, name as WB_MpMenu
Revise the Mpmenu widget as follow:
image.png
Rename text block 3 as Text_Connectype, Tick the text LAN is variable
image.png

Back to MainMenu Widget (I maintain the old mainmenu widget, duplicate a new one)
Change to multiplayer button in text, rename the host button as Btn_MPGame
image.png

In Gameinstance, duplicate UIShowmainmenu function, name as UIShowMpMenu
revise as follow by create WB_MpMenu variable, and replace back:
image.png

Back to revised mainmenu widget, add click on MPGame button(to show Mp menu and remove mainmenu)
image.png

Open MpMenu widget
Change the MainMenu node as follow (same as above)
image.png

Connection Type button (to make Connection button work):


Go to Game instance, add variable IsLanConnection
Add function called ChangeConnectionType
image.png

Back to MpMenu widget, graph, add new function called SetConnectiontype_Text
Add input variable Is lan connection
image.png
image.png

Back to Mpmenu event graph, extend event construct nodes ending:
image.png


Setup create and join session:


To create multiplayer session:
Go to GameInstance event graph, create custom event name CreateMPSession:
Create session node set 4 max players
image.png

To create join session:
Add another custom event called JoinMPSession, add input variable
image.png
Node connection (if sucess to join session, will load into lobby menu map)
image.png

Set things up in Multiplayer menu:


go to MPMenu widget
For hostGame button:
image.png

To disaply finding sever, add new border (Serverlist) in design page, rename both border and scrollbox and make as variables:
image.png
image.png

Create a new widget called ServerRow,
image.png
Set those text as variable, the button makes different color tint pm normal, hovered, and pressed
Go to graph, add 2 variables
image.png
Create custom event, add input variable Session Result
(Split node type “-” In Str (i.e. dash), mean search from left side of dash )
image.png
Continue for Text Num Players:
(Format Text node need to type {a} / {b} for input a, b options)
image.png
For Text Ping:
(Drag from reroute node for “Get Ping in Ms” node)
image.png
Add on click on button 34
image.png

Back to MpMenu widget, rename the 1st border as border menubutton, set as variable
image.png
Back to ServerRow widget graph, finish as
image.png

Set Search Game function:


Go to MpMenu widget, add on clicked on Btn_searchGame
Choose border serverlist, set visibility as hidden
image.png
Now make a graph to let serverlist only visible when it works, also clear stuffs left in scroll server list when open menu again:
image.png
Add variable All server info WB:
image.png
Change Search Game text to variable and rename as follow:
image.png
drag in graph and continue the graph to clear server info, show searching... text, disable border menu all buttons, etc
image.png
Continue to find session (if fail to find):
image.png

Go to ServerRow WB, choose WB_MpMenu variable
tick instance editable and expose to spawn
image.png
Back to WB Mpmenu graph,
Now the server row widget node can choose asset in WB mp menu section (choose self as reference)
image.png
continue
image.png

Reset event construct/begin in Mpmenu, to let ppl know the menu is fresh when open up:

Strat from ending of Event Construct node graph in MpMenu
image.png

Test the game, go to main menu, set player 2, net mode :standalone game
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.