#5 World Map and Camera - How to Make a 2D Game in Java

hi guys this is rice no so last time we succeeded to draw these background tiles but this is just a small sample map and the size is only as large as the game screen if single screen is all you need for your game this might be okay but what we are trying to create ultimately in this tutorial is a 2d action rpg so we want to have a larger map so in this video we will create a world map and draw it on the screen and to create a world map i have prepared a few extra tiles tree sand and rs so let's copy these to this tiles package and let's load these new tiles so let's copy this and add three more so three and index four and five so uh three is first and the four three and five is sand now we can use these styles too and this is the wall map i created it's a 50 to 50 tile map of course you can create your own map and if you want to create a larger map you can do that and now before loading and drawing this world map file we need to do some adjustment what we're gonna do is we edit the code in player class so instead of moving around on the screen the player character will always be displayed at the center and two we will expand the boundary of our tile drawing loop so our current tile drawing system is set for drawing tiles as large as our screen size and that's not enough to draw our world map so we change it and when these two steps are done we can display our world map and move around it so let's get to the step one let's go to this entity class and we're gonna rename this x and y to world x and world y how to say just for better understanding because we are going to use two kinds of x and y so the one is world x and the worldwide and this one is screen x and screen y these are different and indicate different coordinates and understanding this difference will be the key to understand the mechanics of game camera okay then let's go to display class and the rename this x and y2 so world x or y wait what oh wow what is this world world why sorry and yeah this one too worldwide for y okay uh we leave this for now uh because we're gonna use a different kind of x and y here so and worldwide and this is also world x so in this player class rename this x and y in set default values and also x and y in this update method and this word x and y is not screen position this is not where we draw on the screen this is players position on the world map and i want to change this default player position so this is going to be the starting point so uh i want to start the game at this point so this is gonna be uh [Music] 22 20 one to 323 instead of this 100 100 we're gonna type gp dot we're gonna use this tile size and times 23 and also gp dot tiles size times 21 this is gonna be the starting position then in this player class we create another x and y variables okay so public final int screen x public final in screen y so now we have world x worldwide and the screen x and screen y and the screen x and y indicate where we draw player on the screen so we place this player character at the center of the screen and scroll the background as he moves that's what we're gonna do so first screen x gp dot screen with divided by two and also screen y equal gp dot screen height divided by two what do it so this returns the the halfway point of the screen so when we draw this player character so instead of this x and y let's replace it with green x and the screen y so this screen x and screen y don't change throughout the game these are final variables so the player character's screen position doesn't change okay so let's check this all right yeah so now players position is fixed at the center of the screen or actually sorry this is not actually the center of the screen these two variables indicate the center of the screen for sure but the problem is these coordinates are used for the top left corner of the image so we need to do a little adjustment from this value we're going to subtract gp that tile size divided by two and these two all right so let's check now you can see the difference yeah yeah now the player character is displayed at the center of the screen so the step one is done let's get to the step two okay so let's go to this game panel and we create some world map parameters world settings a public final int max word full i call 50 public final print max fold low equal 50. and public final print world width equal tile size times max world core hint word height equal tile size max word law yeah as i said you can change these numbers as you like so i think this game panel crosses okay so let's go to tile manager class and we're gonna change the size of this map tile num tool so we're gonna change this from max screen call to max world core and this also marks word law and uh okay let's change this file password so yeah to this one world zero one four zero one and uh in this roadmap method we're gonna change max screen call to max world core and max for the core maxwell core and maxscreen love to max world raw so basically we are doing a larger loop here so in the previous loop the screen size was the boundaries but now the world map is the boundaries now we move on to the draw method and do some arrangement and this is gonna be a little bit complicated because uh we're gonna implement the camera function so first we're gonna delete this x and y so we're not gonna use this x and y in this loop and delete this and these and these two and then we're gonna change this call and allow to world core and world love and so copy this world call and paste here what call here and here and here and here and all the row to here and here and here and also let's change this max screen call to max world core word called word love and now a tricky part so ultimately there are three things that we want to know tile image and where to draw the tile on the screen and we already know what kind of tile image it is going to display so this is okay and to find out this x and y we type like this hint word x equal word call times gp dot tile size and int world y equal word love times gp dot tile size and then screen x equal world x minus gp dot dot world x plus gp dot player dot screen x wait uh this is not public wait why why i'm seeing the error visible player to public oh okay sorry we need to set this as public player class okay then one more variable screen y equal word y minus gp dot player dot world y plus g p dot player dot squaring why why i always type practice world and uh we're gonna paste this screen x and the screen y here yeah so let me explain about this part first we check the tile the word x so that is world core times tile size so if it's uh called zero log zero tile then uh it's uh it's gonna be a zero times forty eight zero times forty eight so x and y are also zero zero and if it's a world called one and the world of zero tiles which means uh this one then uh rolex will be uh 1 times 48 so 1 x will be 48 and worldwide is still 0. then we need to know where on the screen we need to draw it again this screen x is different from world x vertex is the position on the map and the screen axis where on the screen we draw it so imagine if player is at world x 500 and worldwide 500 then player is 500 pixels away from this zero zero tiles let's say it's around here then uh this zero zero zero tiles should be drawn at 500 pixels to the left and 500 pixels to the top from player that's why we subtract the players world x and y from the tiles world x and y and that returns the tiles screen position so if player's position is 500 500 then the style screen position will be x minus 500 and the y minus 500 so basically it's out of our game window then now why we add this player screen x and y so there is a little catch here so remember the player's screen position is always at the center of the screen so for example screen x 0 and screen y 0 means a top left corner here and this way you know it goes minus and minus so 0 0 is here even if players standing at the world x0 and world 0 here but still he is displayed at the center of the screen not here so we need to offset this difference so we add this to the calculation adding this we can offset the difference and we can get correct coordinates for the styles screen x and screen y i hope you understand and uh it's okay even if you still feel ah what it i was like that i i it took a while to you know lock my head around this so it's okay for now just copy and paste this code and uh but i hope you will get it eventually and i think you will and i hope my explanation was enough yeah this is complicated anyways so we found out a tile screen x and y so after drawing tile we increase this world curve by one so we can draw the next time and if all the core hits uh this maxwell record yeah we draw one by one and we hit this tile this number then we increase we reset call and increase row so we move here and draw this line and destroy this one this way yeah okay so this should work now so let's check it i hope this works alright yep so now we are exploring the wall now so this is the world map that i created yeah of course there is no collision yet so this is working but we can add a little more touch to improve our rendering efficiency you can continue as it is but i recommend you to do this to avoid uh like a slow game performance and stuff like that so maybe you have noticed but right now this while loop is drawing all the tiles on the map so that means it is drawing tiles that we cannot see on the screen too and that's not so efficient this is still a relatively a small map but when you have a very large map it can slow the game down so we only need to draw the tiles that we can see we don't need to draw a tile which is 500 pixels away from the player yep so this is the final touch so with this our tile drawing system will be complete so please stick with me so before drawing a tile we add this if statement so if word x is larger than gp dot player x minus gp.player.screen x and word x is smaller than gp dot player dot world x plus gp dot play here dot screen x and worldwide larger than gb dot player dot world y minus gp dot prayer dot y and worldwide is smaller than gb dot player dot worldwide plus gb dot player dot screening y alright and uh we're gonna put this draw image method in this if statement okay that's it so what this if statement means is basically we create a boundary so that is uh from the center of the screen minus player screen x and plus player screen x and minus player y and plus player y so as long as a tile is in this boundary we draw it so let's check this okay like this so let's check yeah yeah yeah yeah so now we can see that the program is only drawing the tiles around the player but i guess we should expand the boundary a bit more since uh you know we are seeing the black background so why don't we expand this boundary by one tile to each direction so to do that we just uh okay i don't like this format for some reason uh okay so to do that we add this vertex and tile size okay and this one is minus gp dot type size and this is plus gp dot tile size and minus gp dot tile size okay this should be okay so let's check this yep yep so now it looks the same as before but actually it's only drawing the tiles around the player so we can cut some extra processing yeah so now the program is drawing the world map and we can move around it but of course there is no collision happening yet so every tile is possible so next time we will implement collision detection thanks for watching and see you again bye [Music] you

Channel: RyiSnow

Views: 2,610

Keywords: java 2d game, java game project, java game tutorial, develop game in java, create game in java, java tile game, java topdown game, make game in java

Id: Ny_YHoTYcxo

Length: 24min 49sec (1489 seconds)

Published: Wed Oct 20 2021