GameMaker Studio 2: Isometric Game Tutorial (Part 2)

hello everybody and welcome back to where we left off okay so we were able to render an isometric game world we were able to convert from a grid a regular like square grid into an isometric game layout okay and where we can also control the height of these these are all flat but we control the height control what Tyler is and so on so that already really just from these two scripts here that convert a tile position to a screen position gives us most of what we need to make isometric games but the new power we're going to unlock in this part is being able to do the opposite and that's convert an arbitrary screen position so for example most often used if I wanted to I click on something for example how to translate from say the mouse cursor or just any arbitrary point in space back to that that tile grid okay so instead of going from a tile position to a screen position how to go from a screen position to a tile position okay one extra thing before we get started that I need to correct from my previous part I said I didn't really know how to much way you placed your origin but for the sake of what we're doing in this part it's actually quite important for the accuracy of the formulas to make sure your origin on these sprites is in the top center okay it's not really going to affect much in terms of how everything is vision because I think I suggested having in the center before but you're gonna want it in the top center so that we can convert accurately back from this this the render of the isometric game world back to the grid okay so make that top Center the method for this is similar very very similar we're gonna do the same thing in scripts so we're gonna make two scripts so instead of title to screen exit our screen while we're going to make screen to tile X and screen to tile wine so I'm going to go ahead and make those now screen to tile X and make you know on screen to a tile Y and now they're gonna both have the exact same thing in to start with and then a copy and paste it from my script here I'm gonna paste these in and I'll just maximize this one so we can have a little look or what I've got going on here so argument zero an argument one of these scripts of both scripts are gonna be that arbitrary points based so wherever we're clicking on the screen or you know whatever point we're throwing into this for whatever reason okay that's gonna be one argument 0 & 1 are I'm gonna put them in these two bars what I've done on the end here is I've included the adjustment that we make in tile to screen X and piled screen Y let's take both of those up so I can kind of go between them so entire screen axiom remember at the end once we work out where to render this we added a bit of a buffer so instead of everything rendering in the top-left renders kind of in the middle of our room room coordinate wise right by adding half of our screen width to it so I've taken that and added that to subtract that rather from the coordinate that we're supplying here and then the same thing with the buffer that we added in tiled screen Y so we added a score a screen height in tiled screen Y and so in both of these scripts in screen tile accents going to tile why we're subtracting that from the corner just to reverse the effect right so that we can very cleanly just sort of add in reverse that when we need to you don't need to do any of this buffering so I could get rid of both of these and get rid of get rid of it in these scripts as well I'm just using camera as I explained before to show it but if we wanna use the room position to show determine where things are going to appear on the screen then you need to include this lot of things okay and so both those scripts start exactly the same way just like that and then they're both going to have a return function immediately afterwards where we're going to put our formula just on this one line that returns based on a screen X and screen Y returns a a tile X in the case of this script and a tile Y in the case of the other script in all our work out what these formulas should be we actually have to do a little bit of math hi welcome to the math floor this is the floor of my house I've decided that we do maths in [Music] here is what we know okay these formulas are our X and our Y our X I'll go through what these stand for is on our X being screen X as we've used in the product so far so like standing for room X I suppose in this instance so an arbitrary position in the room Rx and ry TX and Tyr tile X entire y accordingly so like kind of position on our actual grid TW and th refer to tire width and tile height so this is just a version of those formulas that were using in those scripts right now so these two formulas to find the room coordinates or kind of the render coordinates of where we're drawing our tiles we were able to work by now I didn't explain it much in the first video but we can work that out just by looking at like how an isometric tile like looks this is a regular tile and like it it's height and and how that kind of translates from a grid of diagonal diamonds into like a regular square grid so we can actually just use logic to kind of work out B's but what we want to work out now is we want to work how how to get back from an arbitrary coordinate room X and room Y to a position in our grid TX and at ey now we can it that we can't really do that through the logic as easily but we can do that just through a little bit of algebra no I'm not very good at maths I didn't do very well at maths in school got pretty bad grade so I apologize if some of the explanations maybe aren't that good or maybe the notation I write here isn't very good sorry she's not very good at it but I hope I can talk through it in a way that helps people like me who aren't that good at maths so here we go so as I said our objective here is to get from we know what are Rx and ry are so let's say that's our mouseka Warner for examples they were hovering over at and we're trying to get from our x9i back to T X and T Y so we're gonna end up hopefully with a formula for T X and he y2 equal something right that's what we're trying to find now the way we do this with algebra is just to basically start rearranging these formulas so what we can do is we can move things from one side to the other because we know if if our x equals this then we could say well our x divided by this thing is gonna equal this thing because those two things times together equal our X right and that's pretty much exactly how we get started so let's start off with um T X so we're gonna cry and get T X to the other side of this formula by itself so what do we know about T X well we know our tile X minus tile Y multiplied by tire width times 1/2 is our X so what that means is our X divided by TW x naught point 5 is going to equal TX minus T Y okay so what we can do is we can write something like T X minus T y equals R X divided by TW x naught point five right because we know if those two things multiplied together equal that then that divided by that is gonna give us that okay now the next step is actually really simple because if we know if T X minus T why is this then if we simply add T Y onto this side we get rid of the minus T Y on this side so T x equals again our X / TW times not 0.5 my handwriting's can get really balanced very quickly plus T okay and now that looks great because we've got to TX equals something right but the problem is we don't we don't know what T Y is so this is still isn't something in fact that's one of the things we're trying to work out we're trying to work out what T Y is so this formula we can't use this in game maker yet but it is one of the pieces of the puzzles we need to find out our truth TX formula what we're going to do is going to do the same thing and try and find a formula that just puts T Y on the left-hand side here because then what we can do is use whatever T Y is made of and stick it here in in place of where we've got T wieck's if we find something that says T y equals and then a bunch of stuff that means we can replace this T Y with those things so what do we know about t y well actually just notice something here we've got one of these things junk that was a plus there sorry about that and just from that something you might have noticed that something might not but yeah that was a plus we haven't used that one yet but we're gonna use it now so it's good thing that we managed to to fix that little mistake so well we know about our we're gonna use our other chord or the formula here to try and basically do the same thing we just did here so we know that T X plus T Y is going to equal our screen y-coordinate that that's something we actually know multiply a divided by sorry th x in or point five so I can say T X plus T y equals R Y divided by T H tile height times 1/2 right and then just as we did above I won't do it on a whole new line we can say that T Y by itself equals that minus T X because if T X plus T why is that then this minus T X is going to equal T Y on its own okay so now we know what ey here is equal to you know what T Y here is this and because this includes something all things that we know it involves our our room Y or screen Y our tile height and our tile X okay dialects we don't know yet but we can all fix that don't work but what we can do is we can substitute now this for T wine that guess that's a little bit closer to the formula we want so if I just erase this here instead of plus T Y that what we can do is simply write this is equal to R Y divided by T H times aha minus T X okay okay and now what's interesting useful about this is that all this minus TX equals TX so what that allows us to then do if I just get rid now we don't need that they're quite anymore we don't even need this one either so if this is something that we know to be true then if all of that minus TX is TX then all of this just equals two of TX right so what we can do is remove the minus TX here and simply turn this into two TX or two x TX right which then leaves us very easily to say that TX equals all of this / - right there's a two x DX was that then TX / - all of that divided by two is TX and that is our formula so because now this just includes things that we know okay involves our screen X of screen y tire width our tile height and 0.5 and 2 right and just by drawing so now we can throw our average very screen coordinates into this formula and gap Bank a exposition in on a tile grip which is what we want now the only thing we need to do now is find the same thing for T y so let's uh let's go back a step a few steps to what we were doing earlier so we worked out our very first thing we worked out was the TX minus T y was equal to room X divided by TW x naught point five right it was equal to that divided by that equals that that was something we knew and therefore we also knew the the X was equal to that plus 2y correct and we also knew that T y plus T X was equal to room Y divided by th x naught point five right and therefore we also knew that this T Y was equal to that minus T X okay so you might see why we're going to this all you might not I don't know but since we know that T X is this we can substitute this T X here for this okay so that's what we're going to do so I'm gonna remove T X here I'm just put in this I'm gonna put it in brackets this time cuz it's kind of important to help you understand this is room X divided by tile width x naught point five oops sorry polite into early plus t why a really dodgy wide every you kept the point right now so now if you think about it because we've got this thing if T Y is equal to this thing subtracting this big pile of stuff over here what we can do is if we were to remove plus T Y from this the overall effect on the formula would be this equaling t y- t y right so we can what we can do is remove it there as plus t y and stick minus t y on the outside of those brackets okay so well our annoying white space in here but what the simplifies down to is because we've got we've got back to basically the same situation we ended up in 40 x over here because we've got this whole thing minus t why is t why we know that 2t y so if i 2t y equals this okay and so if 2t y equals all of that then we know T y equals that divided by 2 and then those I get rid of this middle one are our two final formulas okay so we have our two formulas we can now take an arbitrary position on isometric render and turn it straight back into a tile position and I'll grid that's all we need to do now I'm gonna get off the floor and go back to game maker because my knees are frankly killing me okay so now we know what our two formulas are and should be we know what to put at the end of these return lines so this is again screen to tile X so this is where RT x equals formula is gonna go right obviously math notation looks little bit differently inside of code so I'm just going to type it all out here and hopefully it makes sense so return underscore screen X / open bracket tile with x naught point 5 plus screen Y / own bracket tile and the score H x naught point 5 close bracket close bracket again multiplied all of that by naught point five okay and the other thing I'm gonna do is wrap that entire formula in a floor statement okay because we we want to find it as an exact an exact integer let's turn that down so you can see the whole thing there it is that's our whole formula all that stuff divided by 2 just as before now we do the exact same thing and screen to tile Y big this one up return I'll just put the floor in right away floor open bracket open bracket and the score screen Y divided by open bracket pilum score H times x I'll put both these on the screen in a minute so you can see in copy them both down - Open bracket underscore screen X / open bracket pile and W multiplied by a naught point 5 close bracket close bracket close bracket x naught point 5 close bracket semicolon drink that a little bit - now let's just put them both on side by side so you can see okay so here are your two scripts feel free to pause the video copy them just make sure you've got them exactly correct it can be very tricky just because I've tried to include spacing what I can stuff there's a little bit like can be tricky just because like getting the right number of brackets on or I play small the symbols exactly in the correct order can be hard sometimes I find it personally very difficult to write complex math formula in code so I do not judge you at all if you just copy this very exactly like I like as it is read just be careful with it just make sure you get everything in the right place and so on okay oh I didn't put any white space it's just okay cool so those are two formulas and now I'm just going to demonstrate to you roughly that these work okay so I'm going to go into a render in draw rendering game at the end here I'm gonna copy in a section down here just before where we would normally draw everything that's just maximizers where we would draw the tile you remember that some space and we're gonna paste in this little chunk of code that uses those two functions so if screen to tile X Mouse X minus y equals T XR equals this particular tile that we're drawing and a screen to tar Y minus X minus y as T Y so if taking our mouse coordinates we are currently processing the exact tile that our mouse is hovering over set Thailand x2 2 which will make it the brown tile and tile Z just plus equal to so it will draw 2 units or whatever I to pixels lower all right on the screen I just forgot the unit of space that one has user pixels 2 pixels lower on the screen I guess it'll do that that so now I can demonstrate that in action if I'm you just press f5 the game will compile and now as you can see just hovering over any specific one of these tile very accurately assuming your origin is in the right place we convert so our mouse wherever our mouse is it's finding that tile and it's setting that time to be brown and pushing it down too so we know our formulas are working ok even if I have a relaxed pace actually so now we can do anything because we can convert from an arbitrary screen position back to our tile grid and we convert from the tile grid to render position in the screen ok just using those four scripts so now you've got that um the world's your oyster really and good luck to you on your isometric game like that's really all there is to it in terms of actually building it because now you pretty much just got a tile grid to work with in terms of actually calculating your game stuff and you know how to render stuff and you know how to convert from one to the other if you need to all right so I hope you enjoyed that I look forward to seeing what you guys make with this and I'll catch you guys next time this two-part special is brought to you by my patreon supporters who selected it in a recent poll and also funded as they fund every video I ever make thank you in particular and in no particular order to the following bounces the dog Bertie T dak dunder go Dan Erik Matthew Hibbs Jason McMillan Joseph Wetmore Kim Mustafa Lampe mark Lintz Martin Borisovich matte coat Michael Ward Mike KB Owen Morgan Patrick Duffy relentless Rex Robert churches Rove and Alan run Stephen Hagen and Zinn unmei thank you ever so much thank you to all my patreon spores and thank you for watching catch you all next time

Channel: Shaun Spalding

Views: 18,191

Keywords: Game Maker (Video Game Engine), Tutorial, GameMaker Tutorial, GameMaker, Game Development, Indie Games, Tutorial Series, Game Maker Studio, Making Games, How to make games, GameMaker Studio 2, GMS, GMS2

Id: 1GeYk8EFKMQ

Length: 22min 47sec (1367 seconds)

Published: Fri Jan 11 2019