Godot Tilemap | Interactive Tiles + Change Tiles at RunTime

in this Godot tutorial I will teach you how you can make single towels on your time app interactive and at the bonus at the end of the video I'll teach you how you can replace single towels at runtime while you're playing your game let's get started now on our map we got a couple of chests five of them are closed two of them are open at the end of this tutorial we'll have made sure that these towels which are in a towel set in a region with closed and open images that the ones that are open number one and number three are interactable and that you'll have the trainer in your code to make a loop panel appear or to have golden items pop out drop on the floor for the player to pick up and that once they have been loaded their towels are replaced with the towel images that represent a open chest to give the player the visual feedback that this chest has already been loaded and that he doesn't have to go there anymore now to get started we first need to trigger so that the code knows when the player is close to the chest we cannot do that here in the town set editor as a towel set combined with the town map are basically just a lot of textures stitched together and nothing else so we're gonna build this in a separate scene so that we can add that to our map so we're gonna go over to scene we're gonna get a new scene it's going to be a new 2d scene out change the time from no 2d into a area 2d now this area 2d will require also a coalition shape so that it knows what area it needs to be detecting things this coalition shape is going to be a circle shape as we want to have an even circle around our chests for detection and when you click on circle shape here a little extra option pops out and you can change this to whatever radius fits with your town set if you have a biggest Attell set bigger images you might need a bigger circle 50 works pretty well I experimented a little bit before we started I'm also going to be renaming our notes to loot area I'm just gonna give it a little area one because we'll be adding all of them and that will be maybe a little area 1 to 25 in the game and also I'll be adding this note to a group and I'll call that group loot areas now with that group I'll be able to connect all the areas we'll be adding to the map we'll be able to connect all their signals up pretty quickly and pretty easily so with that done we're now going to go over to some functions that you can use on your tile map that are actually necessary to add this region at the right location on the map so let's get into that do you want to learn how to design and make games or maybe you just want to learn more about go to subscribe to this channel I don't forget to hit that little belt like and to make sure you don't miss out on any videos personally I'm working on a new title called soul whisper it's gonna be a multiplayer strategic squat bellow RPG and I'm live-streaming the game development sessions every Tuesday and Thursday on Twitch we also though new discord server up so check out those links down in that description below now let's continue for this tutorial I'll be adding the script where we put those functions in only specific time app that is contained currently containing my chest this tile map is basically only containing the Chester to the game so I've made a specific town map for that you can add this code to the main map node as well that might even be a better place but to separate the code from the previous tutorials in this series from this tutorial I'm gonna be adding it to this interactable so I'll be adding a script here and I've prepared this sort of a demo a little bit to teach you three important functions on your town map that you're probably want to be using a lot and they're very important to learn and they're all si they're intermediate level Gowda so first up we have to get used cells by ID and we have to add an ID number to that now to know which I need number your specific towels are when you open a town set you click your tile sheet you actually have ID numbers right here there's 0 till 9 those are the ID numbers now this region of for towels in a Atlas tile that is ID number 6 so that means that not every one of these four tiles has their own ID no this entire Atlas style that has an ID so that's important to note going back to the to the script we're gonna print that so you can see that how what that's going to be retrieving or what it will retrieve it is going to return an array of all the cells with the given tile ID and that cells that is the grid I the grid cell so when you are on your tile map and you go to an inspector that's gonna be based on this 64 by 32 these are not gonna be global coordinates now because they are not global coordinates that is where you got the map to world for basically what this takes this returns the global position corresponding to the given time at grid based coordinates so this is going to be retrieving grid based coordinates and with the map to world you can then turn that into world coordinates this is going to be taking a vector two and that is exactly what's being pushed by this function right here is retrieves a vector two now then you also have of course you want to know which specific tile within my Atlas tile we got remember we got four chests there's four images in there we want to know which of these four is being used because we want to determine whether the chest was already opened yes or no when we load the game you know remember we only want to be able to make those chests lootable which are currently have the closed texture so we need to know which texture is specifically used in that ID for that we can use to get cell also tell coordinates now I know that has the word also tau in there but basically what this function does is any tile that has a region in the town set editor so that's both Auto tiles and Atlas tile so that's a little bit confusing but you can use this function just fine what this does it requires an x and a y and it requires a auto tell a cell coordinate so it's realized this the the grid based coordinate and not a global position coordinate so we have the use cell house we're going to get retrieve index one because this is going to retrieve an array so it's going to retrieve all seven chests so we're going to get the first chest in that array and now we're going to get these are vector two so then we're going to get the eggs out of the vector two and we do exactly exactly the same here but what this one we retrieve the I now what this actually does let's give you a quick demo because this is another already function so let's go back to the as closest make this smaller so we got the output right here we got the code right there and we will put this one right here so what this does is first it's going to be retrieving all the all the chests so we got seven chests in total so you see we get an array here at the top with the grid-based coordinates so there's 64 by four means if you go with to the zero which is way up there somewhere you go 64 towels down remember this is 45 degrees turned as we're working in isometric if you're working straight down it will just be a straight line horizontally now its diagonal so we go 64 towels let's say to the bottom right and then we go four tiles down so basically they'll be here and then it will go there and that's how that grid-based works then we on the second formula take the map to world we take that vector two we turn into coordinates so apparently this is 1920 by thousand eighty eight so it's the exact coordinate where that tells located and we also can see that the get cell autotelic coordinate is free point zero so what that means is in that image you can see with the grain backs to the left side it's an open chest and this is the first one because this has the highest y-coordinate you can see these are ordered by their y-coordinates we go from four all the way up to 21 their mid 21 will be dis just right there so with that free zero what that means is when we go back to our tile set you make this a little bit bigger so this chess is going to be 0 0 this is 1 0 2 0 3 0 so here you can see that that image is the same as the image we had on our map so that that coordinate is basically the x coordinate and the y coordinate just like a position but then based on region so if this were to be a region of 8 then this would be 0 1 this would be 1 1 this would be 2 1 and this would be free one so that's how you can determine which of the towels is actually of the in your towel region is actually currently being used and that is what we're going to be using in all those functions together to add our area to these that we've created earlier to our map to add those areas to our map I've created a little bit of code based on this demo that we have just been going over so let's paste that in here so what happens is first we determine the loot area basically gonna be pre loading the loot area one scene that we've created earlier in the tutorial that's gonna be right there I basically just copied basis that path in there and then other already functions we're gonna get that use just tells all the IDS so that's going to be giving us the same array as we just had in a demo but now we're putting it in a for loop so we can go over every single one of them so for every towel that's being used in that but that is being retrieved by is array and remember it's an array of vector - based on the grid cells we're gonna be inputting that first in a if statement that if the Tau the Y quot x coordinate and y coordinate is equal to either vector 0 0 or vector 2 0 basically which means that this these two vector twos based on our grid map that we retrieved the coordinate form these are the two close to chest remember that the 0 1 and the sorry B 1 0 and the 3 0 already opened yet so we first determine is this cell a closed chest if so then we're gonna be creating a new variable called glute area instance and that will be the loop area that will be this scene that we loaded earlier and we're gonna make an instance of that then we set the position of that instance equal to map to world and then we input the vector to tau that is currently in this loop so that will be also based on this use chest house so that's how we use the third function and then we add the child to the scene in the loop area and the child we have is a loop area in sense of which we have determined the position so with debug visible collision shapes on if we now play this game we should see all our area to these now to the world so now all our chests have an area to do and you can fine-tune this our area 2d a little bit to maybe a little bit offset maybe you can bring it a little bit lower in the loop area one scene itself to make them picture perfect we don't have to do this for this tutorial I now just want to teach you how to make sure all these triggers are working so let's get into that next so to connect all those triggers we first have to wonder where do we want to connect those triggers to I personally prefer to split the mechanics of the game the code of the mechanics from the player input to that end I usually add my code for player input on the graphical user interface node now a graphical user interface node is a canvas layer as that will always stay within the camera area and therefore it's perfect to put things like health bars of the player and stuff like that I'll be renaming this to graphical user interface and I'll add a script to it on that script I'll add two very basic functions and these are going to be the two functions that we're connecting the signals of the area up to these are going to be very basically two prints basically a prints for looting and it prints for leanin so we can test if it works now under the interactable what we need to do is we need to connect to that graphical user interface for our signals so we're gonna go with an unready function is gonna be executing the moment the node has finished loading unready we're gonna go create a new variable that the variable is going to be the map scene graphical user interface and that is equal to get note and then we need to go up as we're on the interactive else we need to go up one to the parent so that's a double dot and then down to graphical user interface now what's now that we have a reference to the graphical user interface and as you can see I've already added some code here now this code is now working as we have now got this map scene graphical user interface what this code does as you remember in the Aleut area we added the loop area into this group into the loop areas group now by doing so we can now go over every area in the node groups loop areas and remem we've add all those little areas with this piece of code so we're connecting all those loot areas and we're connecting the body entered and the body exited functions now I've never explained that in a tutorial before but these signals that you usually connect through right-clicking and connect you can also use exactly these signals that are standard signals you can connect those two up through the code but just naming their exact function names the body entered all non capitalized body and all non capitalized you can simply use that and that will connect this signal up through the code and that gives you that body back as well so you don't necessarily have to have the notes available you can just as ooh do it through the code we're going to be connecting those towards maps in GUI and we're going to be linking up those two very basic functions we've created now these standard signals body ends at and body exit they give us a variable and as the body denote the variable therefore under the graphical user interface script that we just made I've also added that body reference as something that this note is going to be receiving now with this very basic print looting and leaving we can run the game it's not going to be perfect yet we'll make that but you can now see that when we enter this area 2d you'll see down here in the area that you got a looting and leaving but this whole bunch of looting five times is actually the area 2d detecting the correlation shape of the Tau so the collision shape of the town which makes the player bump into the chest is also being detected by the area 2d so we need to fix that up to do that we're going to go back to the loot area back to the inspector and we're gonna be fiddling around the collision layers here we don't want it to be in collision layer number one because that's where the collisions of the map are already in and basically this doesn't need to live in any layer because this is not something that's actually an element on the map it's only been detecting other elements on the map so we only need to activate the mask now we need to make sure that the player lives in layer number two so that this mask can detect the player in that specific layer so we're going to go to Claire and there we have already add the player into layer number two so you gotta make sure you check that box else this won't be working now when we play the game you'll see that those five stars loading is not printed and we're only printing looting and leaving as we enter a area 2d and we can still bunk into this chests as that is in lane number one so with that our signals are connected to the graphical user interface and now in the graphical user interface we can program the player input to start a looting sequence or half gold or swords whatever pop out and fall onto the floor and we can start making sure that that image changes based on player input so let's do that next now for this tutorial I'll be making an action button so we're gonna be assuming WASD movement and we'll assume that button number F is going to be an action button an action button that when you're close to an enemy see you initiate a dialogue you're close to a door you load a new area or when you're close to a chest you're actually going to loot it so that's what we're going to be assuming as player input to do that we're going to go to project project settings we're going to go over to the tab input map and we'll create a new button which is gonna be called action so there's gonna be a generic button we had this little plus we add the key we press the F and so we program the F key to be the action now with that done we save that we go over the graphical user interface I've prepared some code for us what we're going to be doing is that at the start of the game the action state we're gonna create a state machine the action state is going to be off now that's same off or let's copy little larger we're gonna go that the moment we leave a loop area we need that same state to also go back to off and of course when we enter a looting area we want that stage or that state to be equal to Lieut now what happens on a new process delta function that the game is constantly going to be listening to the input is action just pressed action the action that's the name of the key we just programmed if you have named that differently then of course you need to change this name we're first gonna do a print I press action this is for testing purposes so I can demonstrate to you how it works and we're gonna match the state of that button we basically give it a state machine when it's off you're not gonna do anything but print I got nothing to do here and when it's a state Lieut this would be where your function would come to load a loop panel like I've created in the inventory series or it's gonna be a function that makes gold or items pop up on the ground that could be a function itself you could put it in here but it's more logically to make the function reference here and build a function underneath or even to make it a signal here that's gonna be signaling to somewhere else in the code for now we're just gonna print I'm going to be rich now with that done if we go and play you can now see that when the game loads we enter this this area today when I press F now you can see down here in the editor I press action and I'm going to be rich if I'm down here it's leaving is now I got nothing to do here you can see it right down here in the editor so now we have a way that the plate can interact with that and now we can put code here or function references to make sure that now actually something that that that's gonna loop that actual chess you know in how you're gonna be rich so of course once you have Blewett we also want to make sure that that texture changes that's what I've promised you at the end of this episode so let's now learn how you can change tiles at runtime while you're in the game right changing towns at runtime for this will have to be making a couple of changes everywhere in the code we've been going over so far - in order to keep this tutorial in a pace that your line can at you don't lose your concentration I've changed all the code already and we'll be going over step by step from the start to the end what changes I've made to make sure that is all worked so the start off the first thing that we make is area 2d I've given this area to be a script to temporarily hold two variables there's going to be the towel that's the grid based coordinate of the Tama and a towel region that is the specific region within the Atlas towel so this is going to be the texture within the at last I'll that's currently being loaded so what we do on the D interactable z-- in the cold where we add the area to the to the map is we have added two new lines of code and those are going to be filling up those variables they're going to be pushing information to those two variables within the top of the loop area one script so the loot area instance Tao is going to be equal to the town that we're currently gurgle going over so that's the grid based location where the area 2d was added and we're going to be saving the actual Auto tau region that we have been as basically exactly the same functions here here we're comparing it to a vector 0 0 and a vector 2 0 to determine this is a foreclosed loot chest texture and now we're just pushing so that information to the area 2d so now that area to the has that information this loot area 1 has that information now we can retrieve that information when we're connecting the signals up so when we're connecting to the map scene graphical user interface we're going to be pushing the specific town and the specific town region of the area in the current loop so when we're looping over all those areas that means that those signals are now going to or that signal is going to be received by the graphical user interface so on the loot area entered and I've closed all these functions so we can go over one by one you're not distracted by everything else now we have a tower import and a tell region import I've added the word import to it because I've also added to various on a top here tau Intel region and that's just to differentiate between the two you it would work without the word import but I like to have these two different they'll sell so the code looks weird so when you receive the signal you can change how the variables are called by defining different names in between the brackets here what we're actually doing with the towel import and that our region import is that we set the towel equal to the towel import and a towel region we set equal to the town region plus very important vector 1o you can sum up two vectors so whenever we get a chest which is going to be zero zero or two zero this is now going to make that either 1 0 or 3 0 and those are regions that of course represent the empty chests so that's very important for what we do next because what we do next is right here this is the function and this is the actual description of the function from the documentation and I've added that because this function is a little bit more complex so the first thing we do when we're on the town sheet here Oh what we first we are under the graphical user interface so first we have to get the town map where we want to change a towel off so we go up to the parent double dot and then we go into the interactable this of course where our chests are then we're going to set the cell and first one thing the set cell requires is an X and a y-coordinate and those are the grid-based coordinates so that is the Tau that we have imported and the Tau we have saved into this variable right here we can now take the X which is of course this is a vector 2 still we take the zero and the one that represents the X and the eye of that tau grid-based coordinate so this is going to be covering x and y then the Tau is actually the tau ID of the tile set so we know that our chests are stored until number six that's pretty much where we started this tutorial with then we can set the flip extra flip Y and B transpose well in this case we need none of this so we set that to false false and false and then we can set the auto coordinate the Auto tile coordinates so that's of course now the new texture which we have not saved on a towel region by adding vector 1.02 it's that's going to be the town region that we saved in that variable so now when we play the game I'm just gonna course it was the error we need to delete this documentation sentence now when we run the game and we walk up to one of these chests we can now look these chests and as you can see the chest now opens up the problem is when we open these chests this area to D are still interactable so if I keep pressing F I would be able to keep looting this chest so we have to change one main thing we have to make sure that this area to D D activates the moment it's loaded so let's do that next then we'll do another demo without this blue circle so you can really see how this works and how it looks good so to turn all that area to D we first need to know which area to D of all those area to these we need to deactivate so to do that we're going to go back to the interactable x' and in the signal that we connect here we're not only going to be pushing this tau in this tower region will also be pushing the area and the area is a reference to the simple note reference that is in this group so we're going to be pushing the note reference to this area to be now of course it means that the graphical user interface is going to receive an extra signal that's going to be our area import now we've I've created an extra variable on the top here called loot area and onion in this function we're now going to say that the loot we got to do it correctly the loot area is going to be equal to the area import now with that done we can create a new function that I've pre created so we're gonna get the note I'm gonna get the string towards the loot area and I'm gonna get the path so we get that path to the loot area and we turn it into a string because under this loot area we need to get into this coalition shape and we want to disable it right here so we need to go in to grab user interface we're gonna get the string towards that loot area note then we're gonna add four slash collision shape to D to it so we get into that coalition shape of that specific loot area and then with the function set the third this makes sure that this area to D is gonna be turned off the collision shape is gonna be turned off on the next frame that makes sure that you don't run into a couple of errors especially on mobile devices I believe Android is very sensitive for this so we're gonna set the third that means we're gonna change this variable on the next frame the variable we'll be changing is the disabled variable and we set that disabled to true so that disabled refers to this disabled right here and if you hover over it you see that the property is called disabled that's the property we're calling there now when you play the game you'll see that once we are at this area and when we press F the not only the chest opens up but also the area becomes grey that means that is no longer available as you see I've pressed F so I was in looting range right here in the editor i press the action I'm going to be rich and as the coalition shape has turned off now it's leaving if I now press the action again I say I got nothing to do here in other words our state machine has recognized hey we have alluded to chest now and we cannot load it again now we can also do this in the debug vision Coalition shapes off we can play it right here and now this all looks as you would expect it with the right textures being replaced for every chest and we cannot add chest twice and the empty chest of course didn't have an area too deep in the first place that's it guys and I hope you enjoyed this video like I said guys if you enjoyed this video smash that like button hit subscribe don't forget that Belle Lincoln and again if you're curious about that title that I'm producing myself soul whisper check it out on the twitch stream join a discord talk about tutorials talk about the live streams talk without a game that's share all Indies is it just a new discord server so don't expect this busy yet but hey be one of the first to join a community and I'll see you there

Channel: Game Development Center

Views: 10,998

Keywords: Godot Tilemap tutorial, Godot tilemap, Godot interactive tiles, Godot how to click tiles, Godot how to use tiles, Godot make tiles, Godot change tiles, Godot change tiles at runtime, Godot replace tile, Godot map tutorial, Godot map, interactive tiles, how to click tiles, how to use tiles, Godot tutorial, Godot beginner tutorial, Godot 2d tutorial, Godot engine, Godot game engine, Godot 3.1, Godot 3.2, Godot 3.2 tutorial, GDC, Godot, Game development

Id: W4c0MGl1eyE

Length: 27min 47sec (1667 seconds)

Published: Mon Mar 30 2020

Reddit Comments

[u/Stefan_GameDev]

You can't directly add triggers to specific tiles in your tileset, but you can add them to your map by code. In this tutorial, I will teach you everything you need to know to make your tileset interactive + I will teach you how to change your tiles during the game to give the player visual feedback!!