And lastly we have to execute our new event by doing a right click and typing \u201cServer_ApplyMovement\u201d. Add this to the even graph and connect it so it is executed by the True output of the branch node. Connect the Vector and Rotator input of our event with the RotationFromXVector as well as the yellow existing Vector line.<\/span><\/p>\nHere is an image of what this has to look like:<\/p>\n
\u00a0<\/p>\n
Now click on \u201cShipMeshComponent\u201d in the components tab on the top right. Then search for \u201cComponent Replicates\u201d in the details panel on the right. Check this checkbox.<\/span><\/p>\n
The reason why we need this change is as follows: <\/span><\/p>\nIn a server-client constellation, the server is always the one holding all the information like a master. So when a pawn should move, this has to happen on the server, so all the clients (which are only connected to the server and not to each other) can grab this new information and show it on their side to the player.1.3 Keeping Things Clean When it Comes to Networking<\/b><\/span><\/p>\n Another thing you may have noticed is the red colored comment I wrote there for the server-side logic. It\u2019s always best practice to keep your logic organized so it\u2019s easily readable. When I do multiplayer projects I, therefore, work with multiple colors for the comments, depending on where the logic will be executed.Red: Executes on the Server<\/span>Green: Executes on the Client<\/span>Blue: General logic that may get executed on Server and\/or Client<\/span><\/p>\nGive playing a short try to see how well the movement is replicated now.<\/span><\/p>\n1.4 Replicating the Projectile<\/b><\/span>First we have to do a small preparation inside the TwinStickProjectile Blueprint (inside TwinStickBP\/Blueprints).<\/span><\/p>\nClick \u201cClass Defaults\u201d on the top and check the \u201cReplicates\u201d, as well as the “Replicates Movement\u201d checkbox on the right, inside the details panel.<\/span><\/p>\n
Now we take a quick moment to clean up the \u201cEvent Hit\u201d logic (so it is more readable) inside the EventGraph and also add a \u201cHasAuthority\u201d node to it, as you can see in this screenshot:<\/span><\/p>\n
This \u201cHasAuthority\u201d is another way for executing logic on the server side. When it\u2019s getting executed on the server, it is passing the execution to the \u201cAuthority\u201d output pin, otherwise to \u201cRemote\u201d. The difference to having a \u201cRun on Server\u201d replicated custom event is that this node only differentiates between where it is executed. In our case, this means the following logic is only executed on the server, not on any client. The replicated event on the other hand always executes the logic on the server, from wherever it is getting called. So it can probably also get called multiple times, one time for each client calling the event. And we want to avoid that and only handle our projectile hit event on the server since this is what matters \ud83d\ude42<\/span><\/p>\nNow go back to the TwinStickPan Blueprint and look for this logic inside the tick event:
We now have to move this logic now to the server-side, so the project is spawned there and replicated properly to all the clients. Therefore create a custom event and make it execute on the server only (as we did it in step 1.2). Call the event \u201cServer_FireShot\u201d and give it a \u201cDirection\u201d input of type Vector.<\/span><\/p>\nNow move the \u201cFireShot\u201d node to the \u201cServer_FireShot\u201d event and wire it up. Right click and add a \u201cServer_FireShot\u201d execution node and execute it inside the tick event, where the \u201cFireShot\u201d was previously.\u00a0<\/p>\n
This already makes our projectiles replicate properly since they are always spawned on the server.<\/span><\/p>\nNow we have to make the shoot sound also work fine. Since it\u2019s now played on the server, it\u2019s not played properly anymore. Therefore we create a new custom event and call it \u201cMulti_PlayFireSound\u201d. Go to the details panel and set \u201cReplicates\u201d to \u201cMulticast\u201d. What this does is execute the event on all clients. But it, therefore, has to be executed from the server (which is done in our case). Also, add a \u201cLocation\u201d input to the event with type Vector.<\/span><\/p>\n
Now add a \u201cPlay Sound at Location\u201d node and connect it to the new Multicast event. Also connect the location input to our events location. Make a right click and search for \u201cGet Fire Sound\u201d. Add this variable and connect it to the Sound input of our new node. So it looks like this:
Lastly, double-click the “FireShot\u201c node. This brings you into the function where you need to search for this logic:<\/span><\/p>\n
Remove the PlaySoundAtLocation node and replace it by our new \u201eMulti_PlayFireSound\u201c node. So it should look like this:
Alright, now you are also able to shoot with proper replication. Give it a try!<\/span><\/p>\n2. Adding the HUD<\/b><\/span><\/p>\n Now we are adding the HUD to the Character. Therefore we first create a new widget by right-clicking and selecting \u201cUser Interface \/ Widget Blueprint\u201d. Call it \u201cBPW_PawnHUD\u201d and open it.<\/span><\/p>\nNow drag a \u201cProgress Bar\u201d from the palette panel into the viewport and rename it as \u201cProgressBar_Health\u201d inside the Hierarchy tab in the bottom left.<\/p>\n
Now while having the progress bar selected, go to the details panel on the right, click the \u201cAnchors\u201d dropdown and select the center position:
Next, set Position X and Y to 0 to move the bar to the center. Set Size Y to 10 to make it not that high (but that for sure depends on your preference). Also set Alignment X and Y to 0.5. This moves the pivot point of this widget to the center of the bar – so it\u2019s really in the center finally \ud83d\ude42<\/span><\/p>\nNow also change the \u201eFill Color and Opacity\u201c to something more reddish. I used FF0003FF for the color.<\/p>\n
Now we jump into our TwinStickPawn blueprint again. There, add a widget component by clicking the \u201c+ Add Component\u201d button in the top left corner. Rename the new component to \u201cPawnHUD\u201d.<\/span><\/p>\n
Now, while having the PawnHUD selected, go to the details panel on the right. There set the location Z value to 180.0 to move the widget above the pawns \u201chead\u201d. Now set the \u201cSpace\u201d to \u201cScreen\u201d and for \u201cWidgetClass\u201d you select our newly created \u201cBPW_PawnHUD\u201d widget.<\/span><\/p>\n
When you play the game now, you\u2019ll see a nice health bar above your pawn.<\/span><\/p>\n3. Adding and showing the current health<\/b><\/span><\/p>\n Since we have a health bar now, we also want to show the pawns actual health. Therefore we create two new float variables inside the TwinStickPawn: \u201cHealth_Current\u201d and \u201cHealth_Max\u201d
Now compile and save. Then click the \u201cHealth_Max\u201d variable and look at the details panel on the right. Here we can now set a default max health of 100 for our pawn.<\/span><\/p>\n
Next, click the \u201cHealth_Current\u201d variable and again look at the details panel. Here we now do something special. We set \u201cReplication\u201d to \u201cReplicated\u201d. This lets the variable always be replicated (\/synchronized) from the server to the clients. This way we can make sure this value is the same everywhere as long is its changes are written through the server.<\/span><\/p>\n
Now we go into the Event Graph and do a right click. Type \u201cEvent BeginPlay\u201d and hit enter.<\/span><\/p>\nNext, add a sequence node (to be prepared for further logic which may not need to be executed on the server) and a SwitchHasAuthority node. Lastly, we set our \u201cHealth_Current\u201d value to \u201cHealth_Max\u201d. You can get such variable nodes by doing a right click and typing \u201cGet Health_Max\u201d or \u201cSet Health_Current\u201d.<\/span><\/p>\nYour logic should then look like this:<\/span><\/p>\n
It\u2019s setting the current health to our predefined max value. And that\u2019s happening on the server so it\u2019s properly replicated to all clients.<\/span><\/p>\nFor the next step we have to jump quickly to the \u201cBPW_PawnHUD\u201d. There we click on \u201cGraph\u201d in the top right corner and then create a new variable called \u201cPawnRef\u201d. For the variable type use \u201cTwinStickPawn Object Reference\u201d. This will be our reference to the owning pawn so we can access its health. To keep things organized set the \u201cCategory\u201d to \u201cInternal|References\u201d for our new variable inside the details panel in the top left corner. This creates a new variable category called \u201cInternal\u201d and a subcategory, thanks to the \u201c|\u201d character, named \u201cReferences\u201d. Now your variables should look like this:<\/span><\/p>\n
Next, click on \u201cDesigner\u201d in the top right corner and select our progress bar. On the right, inside the details panel, search for \u201cPercent\u201d. Click the little \u201cBind\u201d button and select \u201cCreate Binding\u201d. This brings you back to the graph into a newly created function. Rename this function quick to \u201cGet_ProgressBar_Health_Percent\u201d to have a clean naming. You can do that on the left by right-clicking the function and selecting \u201cRename\u201d.<\/span><\/p>\n
Now we build our logic inside our new function to display the actual pawn health using our progress bar. <\/span><\/p>\nTherefore we drag and drop our recently created PawnRef into the graph. Now click and drag the blue connector from the variable and let it go, which makes a context menu appear. There you type \u201cGet Health_Current\u201d and hit enter. Do the same for \u201cGet Health_Max\u201d.<\/span><\/p>\nNow divide \u201cHealth_Current by Health_Max\u201d. You can create the needed divider node by doing a right click and typing \u201cfloat\/float\u201d and hitting enter. Connect the result of our calculation to the Return Node.<\/span><\/p>\n
You may ask what our calculation is doing there. I\u2019ll give you a few examples:<\/span><\/p>\nMax Health = 100, Current Health = 50.<\/span>\n\n50 \/ 100 = 0.5 -> since the bar expects a value between 0 and 1, this makes it half full = 50%.<\/span>\n\nMax Health = 100, Current Health = 100<\/span>\n\n100 \/ 100 = 1<\/span><\/pre>\nI guess you get now how it\u2019s working \ud83d\ude42<\/p>\n
Lastly, we jump back to our TwinStickPawn Blueprint. There we have to let our HUD know who the actual owner is.\u00a0 <\/span>Therefore we create the following logic:
Drag in the PawnHUD from the top right and then click, drag and let go of the connector pin and type the name of the next node to be able to add it. Connect this new logic to the Sequence node which we prepared earlier inside the BeginPlay event. The reason why we are not doing this only on the server or even replicated is because it has to happen on every client and always pass a different reference to the HUD which exists independently on the clients and is not replicated at all.<\/span><\/p>\nYou are now able to play and see the actual pawn\u2019s health. Give it a try!<\/span><\/p>\n4. The Final Step: Dealing Damage<\/b><\/span><\/p>\n In this step, we make the projectile deal damage. Thanks to our good preparations this is fairly easy now. Open the TwinStickProjectile again, do a right click and type \u201cApplyDamage\u201d. Then hit enter to add the node.<\/span><\/p>\nWe now put this node after the first \u201cIsValid\u201d node. For the \u201cBaseDamage\u201d input we do a small random generation. Add a \u201cRandom Float in Range\u201d node and give it a Min and Max value. As its name is already telling you, it\u2019s generating a random value within the given range. Connect its output to the ApplyDamage node. Connect the DamagedActor input with the \u201cOther\u201d connection from our Event Hit node. The result should look like this:
Lastly get back to the TwinStickPawn Blueprint. There do a right click and type \u201cEvent AnyDamage\u201d and hit enter to create the needed node. Now build the following logic:<\/span><\/p>\n
This first subtracts the damage amount from our current health. Then we use a clamp node to limit it within 0 and the Health_Max to avoid unwanted numbers. After writing the result back to our Health_Current variable, we check if our result is <= 0.0You may also recognize that I commented this logic read again, even though we didn\u2019t call it specifically on the server. The AnyDamage event is always executed on the server, no matter where it is called. So, in that case, it\u2019s already handled for you.<\/span><\/p>\nNow give it a try to play our final result and see how it works \ud83d\ude42<\/span><\/p>\nBonus:<\/strong> I made the files for the project available for download right here<\/a>. Enjoy!<\/p>\n<\/div>\n[ad_2]Source link <\/a><\/p>\n","protected":false},"excerpt":{"rendered":"[ad_1] Add to favorites Making multiplayer games is something most developers are becoming more and more interested in. I remember myself when I was starting to develop games using the Unreal Engine 4, sitting there and thinking about how to make the first basic combat system. In my mind, I would think of how to […]<\/p>\n","protected":false},"author":1,"featured_media":1005,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","jetpack_post_was_ever_published":false},"categories":[18],"tags":[],"class_list":["post-1004","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gamedev"],"blocksy_meta":[],"jetpack_featured_media_url":"https:\/\/e928cfdc7rs.exactdn.com\/info\/uploads\/sites\/3\/2019\/12\/How-to-make-your-game-in-multiplayer-mode-in-Unreal-scaled.jpg?strip=all","jetpack_shortlink":"https:\/\/wp.me\/p2TFCd-gc","jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/www.danielparente.net\/en\/wp-json\/wp\/v2\/posts\/1004","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.danielparente.net\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.danielparente.net\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.danielparente.net\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.danielparente.net\/en\/wp-json\/wp\/v2\/comments?post=1004"}],"version-history":[{"count":0,"href":"https:\/\/www.danielparente.net\/en\/wp-json\/wp\/v2\/posts\/1004\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.danielparente.net\/en\/wp-json\/wp\/v2\/media\/1005"}],"wp:attachment":[{"href":"https:\/\/www.danielparente.net\/en\/wp-json\/wp\/v2\/media?parent=1004"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.danielparente.net\/en\/wp-json\/wp\/v2\/categories?post=1004"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.danielparente.net\/en\/wp-json\/wp\/v2\/tags?post=1004"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"Favorite\"](\"https:\/\/data-jeaegoras.netdna-ssl.com\/wp-content\/plugins\/wp-favorite-posts\/img\/heart.png\" "\\"Favorite\\"")
![\"Loading\"](\"https:\/\/data-jeaegoras.netdna-ssl.com\/wp-content\/plugins\/wp-favorite-posts\/img\/loading.gif\" "\\"Loading\\"")
![\"How](\"https:\/\/data-jeaegoras.netdna-ssl.com\/wp-content\/uploads\/001-1.jpg\" "\\"How")
![\"How](\"https:\/\/data-jeaegoras.netdna-ssl.com\/wp-content\/uploads\/002.jpg\" "\\"How")
![\"How](\"https:\/\/data-jeaegoras.netdna-ssl.com\/wp-content\/uploads\/003.jpg\" "\\"How")
![\"\"](\"https:\/\/data-jeaegoras.netdna-ssl.com\/wp-content\/uploads\/004-1.jpg\")
![\"\"](\"https:\/\/data-jeaegoras.netdna-ssl.com\/wp-content\/uploads\/005.jpg\")
![\"\"](\"https:\/\/data-jeaegoras.netdna-ssl.com\/wp-content\/uploads\/006.jpg\")
![\"\"](\"https:\/\/data-jeaegoras.netdna-ssl.com\/wp-content\/uploads\/007.jpg\")
![\"\"](\"https:\/\/data-jeaegoras.netdna-ssl.com\/wp-content\/uploads\/008.jpg\")
![\"\"](\"https:\/\/data-jeaegoras.netdna-ssl.com\/wp-content\/uploads\/009.jpg\")
![\"\"](\"https:\/\/data-jeaegoras.netdna-ssl.com\/wp-content\/uploads\/010.jpg\")
![\"\"](\"https:\/\/data-jeaegoras.netdna-ssl.com\/wp-content\/uploads\/011.jpg\")
![\"\"](\"https:\/\/data-jeaegoras.netdna-ssl.com\/wp-content\/uploads\/012.jpg\")
![\"\"](\"https:\/\/data-jeaegoras.netdna-ssl.com\/wp-content\/uploads\/013.jpg\")
![\"\"](\"https:\/\/data-jeaegoras.netdna-ssl.com\/wp-content\/uploads\/014.jpg\")
![\"\"](\"https:\/\/data-jeaegoras.netdna-ssl.com\/wp-content\/uploads\/015.jpg\")
![\"\"](\"https:\/\/data-jeaegoras.netdna-ssl.com\/wp-content\/uploads\/016.jpg\")
![\"\"](\"https:\/\/data-jeaegoras.netdna-ssl.com\/wp-content\/uploads\/017.jpg\")
![\"\"](\"https:\/\/data-jeaegoras.netdna-ssl.com\/wp-content\/uploads\/018.jpg\")
![\"\"](\"https:\/\/data-jeaegoras.netdna-ssl.com\/wp-content\/uploads\/019.jpg\")
![\"\"](\"https:\/\/data-jeaegoras.netdna-ssl.com\/wp-content\/uploads\/020.jpg\")
![\"\"](\"https:\/\/data-jeaegoras.netdna-ssl.com\/wp-content\/uploads\/021.jpg\")
![\"\"](\"https:\/\/data-jeaegoras.netdna-ssl.com\/wp-content\/uploads\/022.jpg\")
![\"\"](\"https:\/\/data-jeaegoras.netdna-ssl.com\/wp-content\/uploads\/023.jpg\")
![\"\"](\"https:\/\/data-jeaegoras.netdna-ssl.com\/wp-content\/uploads\/024.jpg\")
![\"\"](\"https:\/\/data-jeaegoras.netdna-ssl.com\/wp-content\/uploads\/025.jpg\")
![\"\"](\"https:\/\/data-jeaegoras.netdna-ssl.com\/wp-content\/uploads\/026.jpg\")
![\"\"](\"https:\/\/data-jeaegoras.netdna-ssl.com\/wp-content\/uploads\/027.jpg\")
![\"\"](\"https:\/\/data-jeaegoras.netdna-ssl.com\/wp-content\/uploads\/028.jpg\")
![\"\"](\"https:\/\/data-jeaegoras.netdna-ssl.com\/wp-content\/uploads\/029.jpg\")
![\"\"](\"https:\/\/data-jeaegoras.netdna-ssl.com\/wp-content\/uploads\/030.jpg\")