One Easy Way to Manipulate Instanced Meshes (HexGrid Devlog)

this episode we're going to learn how to manipulate the individual tiles what I want is to choose any tile in the grid and make adjustments today we'll just adjust the height but in the future we might want to adjust the biome buildings tile resource data so we need a way to pull that desired instance out and manipulate it instances are a bit more difficult to work with because they sit within the parent mesh in our group together you don't have individual variables you can adjust like an actor you do have custom data that you can manipulate but it's not as easy to adjust so we're going to grab our instance and swap it out with a live actor that could be manipulated more easily and give us more flexibility in the future then pass that edited information back to our instance when done by the way the source files for this project can be found on the Discord server in case you want to compare code or just use the files themselves in fact you guys are showing off some really cool implementation of our hex grid on Discord I love to see it keep it coming and if you are using our system or have an idea for the hex that we're working on I want to know about it so go ahead and leave a comment below or leave a like And subscribe the engagement really helps the video and helps grow the channel as well as the community so the first thing that I need to figure out is how to click on an instance and find out what the instance ID is once we have that number then swapping out of the tile will be pretty easy thankfully unreal has a node just for this purpose the get hit result under cursor by channel the idea is to take our player controller and use the left Mouse button to fire an event that will use the get hit results under cursor by Channel node to detect and hit what item or in this case the instance index ID was at that point I used this initial code here to detect a click on the instance mesh and then get a hit result to determine what item was under the cursor during the click this gives me the instance ID that I need but I'm having an issue with the tiles under the water the water mesh is interfering with the cursor hit detection so I need to use another Channel other than visibility and disable the Collision on the water mesh and after that clicking the tiles under the water works just fine so we now have a reliable way to click and detect our individual instances so we're ready to use that information and then swap it out for our static mesh actor for this process my plan is to take the instance ID from my click store any important information like the ID number and the instance transform then remove the instance and spawn a static mesh actor in its place with the same transform and a nice little emission glow now when creating that logic I ran into a couple of issues one I wanted to be able to select only one instance at a time and two I needed to be able to click a tile off once I selected it and after a little bit of trial and error I figured out exactly what I needed to do but I've run into another problem simply removing the instance made the grid rebuild itself which was not what I wanted and removing it also lost that instances custom data now I could store all the custom data in an array and then recall those if I needed them and that may be useful in the future but for now we're just going to scale the instance to zero to hide it and then back to one when we need it again so I'm feeling pretty good about the setup so far but I feel I need a way to manage this ability to edit any tile so I want to create an edit mode that I can toggle with a Tab Key so we have our edit mode set up that gives us the ability to click on and off tiles by selecting one instance at a time and can click off tiles but I feel the user experience is a little bit off I think the way we were switching can look a lot better so I decided to add a camera shift to the center of the screen on the selected tile and zoom it to a specific height I also want to freeze the camera when a tile is selected so the user cannot zoom or move away okay so I'm liking the feel of our tile selection and of our edit mode I think we're ready to start manipulating our tiles what we'll need is a widget to pop up when we select a tile this widget will contain the tile ID for reference and a slider where we can adjust the height of the tile and a save feature to save our changes foreign [Music] okay so let's jump in the code a little bit and see how this is all working we'll start in the BP hex grid blueprint up here in the top left and we'll start right here in the click tile event area so what I'm doing is I'm taking the left Mouse button and whenever it's pressed I'm checking whether or not the edit mode which is set within the player controller is on or off and you can see that setup right here I've just put it right before our set actor location and we have a Boolean to say hey if this is an edit mode then I want you to skip the set actor location and rotation and just go to our camera now I've done this because I don't want to completely disable the camera if we're in edit mode I want to have a little bit more flexibility in terms of what aspects of the camera are working and not working so that's why we have this little bypass going right here and if edit mode is false then everything is going to be working exactly as it should so let's go back to the hex grid and again we're checking whether or not the edit mode is on and I'm turning that on up here in the edit mode toggle area so every time you press tab it flip-flops between edit mode being on and edit mode being off within our player controller if edit mode is on we're going to create our edit mode widget which is right here and it's just a really basic text nothing fancy there and it's going to show up in the top middle part of the screen so we create that widget we set that widget and then we add that to the viewport now if we turn off edit mode we're going to remove that widget from the parent and then disable edit mode now that disable edit mode is an event that I'll get to in just a second so let's go back down to our click tile event area so now that we've checked if we have edit mode on or off we're also going to check whether or not we have an existing tile that has been selected and I've done this through an actor active Boolean which we set all the way at the end of our process over here so whenever we create our actor I set that to true and if it is true then we want to make sure that we remove that tile actor before adding another one so we pass through that branch and then we head up into this branch and then we're using the get hit result under cursor that we talked about earlier we take the player controller use our get hit result node tracing in the hex Trace Channel and then checking for the item id which is going to be our instance ID and then also we're taking our hit component to check whether or not it's an instant static mesh that we're hitting or if we're hitting the actor that we've added and this is important because if we're hitting the actor we still want to be able to remove that switch it out and we can't do that if we're only checking for the instance mesh after that we have another branch and if you are clicking on an actor and it's not the instant static mesh that we want it to be true so we can remove that tile actor null our swapped actor variable that we set later on and then remove the widget from the parent if we're in edit mode and again we have our disable edit mode event and we're checking if our swapped actor is valid and if it's not null we have that same process down here with removing a tile actor clearing our swapped actor variable and then removing the widget from a parent and now for the bulk of our swapping so whenever we click on a tile we want to first get that ID and store it in this variable right here the current instance hit after that we're going to grab the transform of that ID index then we're going to set our current instance transform and then we're going to update the instance transform so we can hide it now initially I wanted to remove it but this does some weird things with the material and the way I have it set up so what we're going to do is we're just going to take that instance and we're going to set that scale to zero and that's going to hide it not only does it hide it but it makes it that we can't click it which is also important and then I'm running the add tile actor function well I'll show you what's going on there it's very simple all we're doing is we're spawning an actor responding our BP tile blueprint and all that blueprint is currently is just a static mesh and we're making sure that that static mesh is the same mesh that we're using as an instance mesh so after we spawn that we set that actor into our swapped actor variable and then as I said earlier we're setting the actor active to true so now that we've spawned our actor added a shift camera function within the player controller because I want the camera to move whenever you click on a tile and all we need for that is to take the location of our current instance transform to know where to go and then the shift camera event which is right here takes that information gets the actor location for the pawn and then interpolates that sets the actor location and rotation from that and then sets our camera zoom to point two this is just to give it a little bit of a zoom whenever we click on a tile after we've shifted our camera we're going to create our tile pop-up widgets which is right here we set the pop-up widget variable to that widget and then we do a create tile widget function so all that function does is it basically takes the information from our instance and sets some variables within our widget blueprint so we have that show up within the widget now what I'm taking is the instance ID I'm also setting the initial slider value to the current Z location of the instance we're making sure that we're passing our hex grid actor so we can communicate with it we're adding the widget to the viewport and then we're setting a desired size in the viewport to a 500 to 350 this can be whatever you would like it to be and then we're setting the position in the viewport and I'm doing this by getting the viewport size and then doing some Division and some offset right there now within the tile pop-up widget we have a couple of things going on within the graph first the widget is made up of basically a box there's a title that title will be adjusted to show the index ID and then the tile height slider which will be adjusting the height of our instance tile if we go into the graph we'll first take a look at the event construct so whenever this widget is constructed we're getting the tile number that again is being set within the hex grid and we're appending that to the tile and then setting the card title to that value that will give us a tile and then the number of the instance ID and then after that we're also setting the initial value of our slider to the current Z value of our tile and we're doing that right here then down below whenever the slider value is changed we're running the update tile function and this is the reason that we had to grab the hex grid actor and passing along the instance ID so we'll take a quick look at that as well so over here is our update tile event so this is run every time that that slider changes within the widget so whenever that slider is adjusted we want to get the the value of that slider and adjust the actor location and also the instance location even though it's hidden so when we do that it sets a new location for the actor so the actor goes up and down with the slider we maintain that within the instance we reset our current instance transform so we can store that information because we also need to update the custom data value because that is what is determining the material look for our tiles the only other additional function that we created was the remove tile actor function back when we were swapping out the actor and instance meshes all that's doing is destroying the actor resetting our actor active Boolean to false and then updating our instance again taking the transform that we've stored but restoring it to a one one scale all of that together gives us an edit mode that we can turn on and off if the edit mode is off clicking on the tiles does absolutely nothing and if the edit mode is on we can click a tile the camera moves to that tile and we can adjust the height of that tile on the Fly we can also save that tile and the changes to the tile remain the same we can move about entire map adjust tiles underwater foreign [Music] ly manipulate all the tile Heights with a click of a button so our next step is to design a more detailed information system for our tiles that we can then use to bring a lot more Visual and gameplay detail to our map you'll find that video here when it drops or you can check out the other hex grid videos in the playlist right here until next time on the stay at home Dev thanks for watching and go create something awesome

Channel: StayAtHomeDev

Views: 8,536

Keywords: unreal engine, ue4, ue5, hexgrid, hexagonal map, hexagon, tile based system, stayathomedev, hex grid, hex tile grid, hexagonal grid, devlog, dev log, ue devlog, gamedev, game development, instanced mesh, instanced meshes, swap instance mesh, manipulate instance

Id: vR_SFvSPXYw

Length: 12min 57sec (777 seconds)

Published: Wed Oct 19 2022