#4 Drawing Tiles - How to Make a 2D Game in Java

okay so last time we loaded the character sprite and implemented a simple animation system so we can control our player character now let's draw some background tiles by the way we don't need these variables anymore since we took care of the player movement in player class so yeah you can delete this okay so background so first we need some background type images so i prepared three tiles we will add more tiles later but for now three tiles should be enough so inside of this resource package let's create another package i'm gonna name this tiles and we're gonna copy these style images to the styles package yeah and then from this source folder we're gonna create a another package tile and inside of this style package create a class called tile and this is a class which represents a single tile and for now we add two elements so the one is a public buffered image image and the other one is boolean called region and they go first import so this class is okay for now so now let's create another class inside of this style package and i'm gonna name this tile manager in this class we're gonna use first we're gonna use game panel gp and also this style class we just created we create this style as an alley and name this style import game panel then let's create a constructor public tile manager and we're gonna get game panel in panel gp so this gp equal gp also we're gonna set the size of this style array so type equal new tile and i'm gonna choose 10 for now so this means we're going to create 10 kinds of tiles so like a glass style a water tile a wall tile you know if we need more then we can always change this number like 15 or 20. i think 10 is enough then create a method public void get tile image and we're gonna call this method from this constructor get style image kind of similar to the player class so we're gonna load these style images in this guitar image method so again try on the catch are your exception e e dot stuck trace and here so we're gonna instantiate this style array tile zero equal new tile then tile 0 dot image equal image i o dot lead get class get resource as stream and then type file path so file path will be so since these are inside of this tiles package so box rush tiles box rush glass dot png so we created uh we created this buffer the image inside of this style glass so we're gonna put this entire file image into this image buffer image so let's copy this and uh paste and so tile one and also tile two oops and the tile one will be wall and the tile three will be auto okay so instantiation is done and we create a public draw method inside of this tile managers too graphics 2d g2 import so let's draw a tile for testing so to draw a tile type like this so first g2 graphics 2d draw image and so first buffered image so okay let's draw this graph style tile 0 dot image and then x and y so 0 and 0 and width and height so again gp tile size and gp tile size and the image observer is null okay and now let's go to this game panel class and uh instantiate this tile manager manager uh tile m or something a new tile manager and uh pass this game panel class i think and import then inside of this paint component we're gonna type tile m dot draw so we're gonna call this draw method inside of the style manager and make sure to type this line before this player dot draw so it's like a layer in this case we draw tiles first then player if it's opposite then background tiles will hide player character so we cannot see player character so make sure to draw tiles before player let's check this yeah okay so our first tile is displayed so let's draw some more tiles so go back to this tile manager class and okay let's copy this the paste draw volatile and also water tile and but we have to change this x and y otherwise you know it's just override so let's add tile size 48 to x here and add tile size again so 48 plus 48 will be 96 okay let's check this all right so like this so we have drawn crystal wall tile and a water tile so like this we can draw tiles on the screen okay so let's check this all right yeah i just created uh five tiles for horizontally and five tiles vertically that's what i typed but uh obviously you know this is not the efficient way of you know typing or drawing it's just too much typing so we need more efficient tile drawing system so let's not do this instead we will create a while loop and kind of uh automate the process so we can avoid a lot of typing okay first create some variables integer and call equal 0 and integer log equals 0 and integer x equals zero and integer y equals zero okay then create a while loop call so this loop continues if call is smaller than gp dot max oh okay ah sorry we need to change these variables to public public public yeah this one to public public okay so yeah screen call and also this integer law is smaller than gp.max screen log so inside of this loop so we're gonna draw type g2 dot draw image so for now let's draw like a grass style so tile 0 dot image and then x and y these are variables gp dot tile size same gp dot type size and norm okay first core is zero and the low is zero and x is zero and y is zero basically so this is zero zero so it's gonna draw a tile at zero zero here after that we're gonna increase this call by one and then also we're going to increase this x as a gp dot tile size and if this call equal g p dot max green call so we increase this call one by one and if this hits this max screen call which is 16 i think then we're gonna reset this call and also reset this x and then increase this low by one and also increase this y position by y plus g p dot tile size uh okay i think yeah let's check this okay so we have succeeded to play styles on the whole screen but we are only using the graph style so to render actual map we create a map data first then let this loop read the data and to store this map data we use a text file it's a simple method but also pretty popular and effective method as well so first open this notepad and then we're gonna type zero one two three four five six seven eight nine ten one two three four five six and we're gonna copy this and paste 11 times so two three four five six seven eight nine ten even twelve so a single line has 16 zeros and it has 12 lines and each number represents a tile so this is a 16-12 tile map which is the same size as our screen and this 0 means tile number so it's a graph style so if you want to place a wall tile you just need to change this to one and if we want to place a water tile change the number to two okay so let me create a sample map real quick okay something like this okay now let's save the file i'm gonna name this just uh like map zero one or something txt all right then inside of this rest folder create another package i'm going to name these maps and uh okay so where's uh that's a file there's a file here okay so we're gonna copy this map file to this maps folder so we got this map file map data file so now let's load this data okay first create a variable integer variable integer map tile number and this is going to be an array and inside of this constructor we're gonna instantiate this map tile num equal new hint and the size is gp.max screen call and gp.max screen law so basically we're gonna put all these numbers to this map tile num array so to do that we're gonna create another method a public void load map okay so another try on the catch this time just exception e and okay input stream we're gonna use this input stream class is called get class and get resource our stream and here we're gonna type a file pass of this text file so uh what is it map maps and map c1 txt and import this input stream and then buffered reader vr equal new buffer reader and the new input stream reader and ies right import this and also this all right so we used this input stream to uh how to say like uh import this text file and we're gonna use this buffered reader to read the content of this text file it's just a format to read this text file so and after this again we're going to create a integer call start from zero and integer log start from zero and while loop again and the call is gp dot max green call so smaller than max screen call and also low is smaller than gp dot max screen log inside of this while loop we're gonna read this text file and uh max call or max law is the limit of this loop because uh it has no data beyond that boundary like like here or here then string line equal br dot read line so this buffered reader can read text file and this read line means uh it's gonna read a single line and put it into this string line and once we let the line we enter another while loop and the call is smaller than gp.max screen call and then string numbers alley equal line dot split and double quotation and space so what what we are doing here is from the line we just let so we're gonna get these numbers one by one so one one zero zero one one one and put them into this alley and then we're gonna create this integer variable and name this num or number equal integer dot parse hint and numbers and indexes call so so basically we are changing this from string to integer you know this lead line only get the data as string and we split this line and all this is also string so we need to change this from string to integer so we can use them as a you know number then we're gonna use this map tile num integer and uh okay call indexescore and low equal num after this we're gonna increase this call by one and then if this call hit gp.max schooling so it hits 16 then call equal 0 and the low plus plus okay and that's it i think okay and then finally we're gonna close this buffalo reader because we're gonna we're not gonna use this yeah so basically we're gonna scan this text file line by line so first this line and divide it to each number and get them to a map tile num and so once finish this line then uh go to next line and the next line next right next right next right until this loop is over so now we should be able to load this map data so let's draw the loaded data map data we just need to arrange this while loop a little bit so instead of this uh fixed image so first we delete this and also i think we're gonna create integer and tile num equal map tile num call and low so again we start from zero a call zero and low zero and so first we gonna extract a number from this map tile num and get this as a tile number and then we're gonna draw image type type num so this is gonna work as an index of this uh tile array tile class dot image okay so if we get the number zero from this it's gonna draw a grass style and if we get the one from this alley then it's gonna draw a wall tile and if it was two then it's gonna draw a water tile so everything is stored inside of this map tile num array so now this should be okay so let's check this oops why ah okay so we haven't we didn't call this load map method uh okay so load them up this should be okay let's check all right okay yeah so we succeeded to uh draw a map file looks nice i think and also i just remembered once one one more thing uh yeah this is just fine but uh probably it would be better if we just pass um string here we're gonna pass this pass information from here and get it as a string like a file path or something and put it here because you know maybe you will create a different map later yeah so map map to map three map fold and uh so whenever you want to load a different map then you just need to call this roadmap and type the file pass here then so you don't have to you know like create another like a load map method to another these lines or something so anyway we have succeeded to load our map file and draw the tiles on the screen but still it's a small map it's only as large as a single screen you know so next time we will create a world map that we will actually use in our game and also implement game camera so the background tiles change according to the player characters movement so thanks for watching and until next time [Music] you

Channel: RyiSnow

Views: 3,116

Keywords: java 2D game, java game tutorial, java for beginners, java game for beginners, java game development, java tile game, java draw graphics

Id: ugzxCcpoSdE

Length: 27min 26sec (1646 seconds)

Published: Sat Oct 16 2021