Godot 3.0: Top-down Tank Battle - Part 2

Welcome to a new tutorial series. Many of you have requested a full game tutorial, so I've chosen a top-down tank game. I have no idea how many parts this will be, but as we go we'll cover things like tilemaps, pathfinding, ai/behavior, and many other topics.
Art by Kenney: kenney.nl/assets/topdown-tanks...
Follow the written version of the series here:
kidscancode.org/blog/2018/04/g...
Code for this part can be downloaded here:
github.com/kidscancode/topdow...
Support me on Patreon: / kidscancode

[@michaelthelen5297]

Man... the script to build the tileset was super clever. Ive seen people build them out manually over and over and im like there HAS to be a better way! Great vid as always!

[@Kidscancode]

Sometimes you still have to do it manually. Adding collision shapes can't always be automated. I don't think I'll be able to do the same trick when we add the obstacles to the game.

[@michaelthelen5297]

I was wondering about that... can you read image data? I know its stepping into the realm of just using a tilemap plugin but i wonder if you could add a gap/margin between the tiles and add a color code at a specific location that could have data on if it should be a solid or whatever. You also mentioned other layers... could you just make another layer that was all solids?

[@Kidscancode]

You could. It's definitely getting into the tool/plugin category if you try and make it too broad. If your tiles with collisions are regularly shaped, you can add the collision shape data using the same Rect object. The issue we're going to have with this game is we're not going to want the obstacles to be orthogonal - sandbags, trees, etc - I want to be able to place them at arbitrary places and orientations.

[@MattHuisman]

KidsCanCode If you wanted tank to go faster on road section, I guess you would need to add area 2ds to each tiles road section? Then detect on enter / exit to change speed?

[@Kidscancode]

Probably that's how I'd approach it - or the reverse, grass tiles slow you down. You could also do it by using TileMap.get_cellv() to find out what type of tile you're on. That would be an interesting thing to think about - I've put it on my list of possible features.

[@gravestoner2488]

I find it most useful to watch each of his videos twice. 1st time straight playthrough, paying as much attention as possible, you don't need to worry about remembering everything. Then right away watch for a 2nd time, this time doing it as you go, follow along and make your own adjustments and play with some features you've discovered, print some things you are curious about in the console, as you go through the video. It will be much easier and less foreign hearing it the 2nd time, therefore much easier to follow along.

[@tanmaypatel4152]

Thanks for the advice buddy!!

[@MrTravoltino]

Hotkeys for tilemap: shift + ctrl, than left click - huge cover of tiles. Shift and then left click - line-covering tiles.

[@giggleghost3751]

I love it! Thanks! 💙

[@h.f.v.1428]

One thing that impressed me is how your codes are simple, understandable and your explanation is clear enough. Good work!

[@Erbmon]

The great thing about your videos is I always learn something new even if i think i know the topic.

[@integralyogin]

looking exceptional for part 2

[@juliavanderkris5156]

Awesome tutorial, man! I really appreciate it! :)

[@thatchipmunksings]

Hello, scripty. I love the way youre using scripts for everything. That finally makes me comfortable watching Godot videos, since I am a programmer since the last 10 years.

[@lincolnpepper816]

woohoo! Part two!

[@Stormhatt]

Beautiful to automate tile generation and camera limits in code. Automation comes with a special form of satisfaction :)

[@BrownieX001]

This is fantastic and super helpful.

[@alesiobaca961]

You could use "New Atlas" for the tilemap

[@jdferreira]

On line 14 of that script (around 6:00), it should be var id = x + y * tex_width and not (y * 10) cause otherwise the same id will be assigned to multiple tiles when the size of the atlas is mroe than 10 tiles wide.

[@Kidscancode]

Oops, I forgot to go back and change that one. I'll fix it in the source. Thanks!

[@barellevy6030]

Came here for that :-) My math sense was tingling

[@odddoggo6890]

If anyone is having trouble with the camera that is not following the player and your code is exactly like in the video.. then try deleting your TileMap node (Ground) , and redo the whole map. Make sure you rename your TileMap node to Ground first before start putting in the tiles. Just leaving the comment here incase anyone could find it helpful..

[@mj2carlsbad]

The solution for me was to instead delete the instance of the Player from the Map Scene (after I edited it to have a Camera2D in its .tscn) and reinstance it in the Map01.tscn

[@digitalman2112]

Is there any way to make the camera loop so that going across one edge brings you to opposite edge?

[@etopowertwon]

Interesting automatization. I initially thought you were going with `tool extends` or usning e.g. python script to generate .tres file

[@tachekentya7567]

Excellent videos. Many Thanks!! I don't understand how this works "$Player/Camera2D.limit_left = map_limits.position.x * map_cellsize.x" why do you multiply map_limits.position.x with map_cellsize.x?

[@Kidscancode]

map_limits returns a Rect2 of the size of the map in cells, like (4, 3, 25, 12). This would mean the upper-left cell is (4, 3) and the bottom-right is (29, 15). Rect2 has member variables for "position", the upper-left corner and "end", the lower-right. You multiply by cellsize because the camera limits need to be in pixels. (29, 15) becomes (3712, 1920) with cellsize (128, 128).

[@ThePillowGamer]

Could you use a conventional sprite instead of using tiles because I have a 100% already made sprite and I don’t want to have to split it into like 100ths

[@seewhale8565]

Hello, I see some occasional flipping tiles while moving the tank. Is there a workaround for this issue? Thanks

[@Amil_Developer]

great idea the tileset script :)

[@mj2carlsbad]

Bugged out following this process and the tank wasn't moving. Fix was to delete the instance of the Player from the Map Scene (after I edited it to have a Camera2D in its .tscn) and reinstance it in the Map01.tscn

[@winhtetlu4069]

Im using godot3.1 and theres a problem in Tiles when i start moving around Player, i can see the edges of the tiles in the game, how do i fix this?

[@Goldenfightinglink]

Is this the code they used to make the export tileset feature? Or is this some higher end one?

[@Kidscancode]

Not at all. This script is a quick utility that slices the atlas and outputs a TileSet resource. The built-in functionality requires you to do the slicing, but also does more - producing collision, navigation, and/or occlusion polygons on the tiles if you add them.

[@MegaZumo]

This game could be a great chance to make a tutorial about network multiplayer. Have you thought about it? =)

[@Kidscancode]

I have thought about it - it's on the list!

[@MegaZumo]

That's great!

[@cesarfernandez2368]

I would like to learn about that too :D

[@pol3321]

How do i make the camera zoom in and zoom out with the scroll wheel?

[@Kidscancode]

You need to use the camera's "zoom" property. Something like this: func _input(event): if event.is_action_pressed('scroll_up'): zoom = zoom - Vector2(0.5, 0.5) if event.is_action_pressed('scroll_down'): zoom = zoom + Vector2(0.5, 0.5) You can map the mouseup/down input actions in the project settings.

[@vanja368]

help the camera limit is not working for bottom and im pretty sure i havent placed any tiles under bottom of my map

[@Kidscancode]

Is it only the bottom - top and sides work fine? Did you double-check your code setting the camera limits? It's easy to accidentally swap an "x" with a "y" for example.

[@vanja368]

@@Kidscancode ye i checked its y and yes its only bottom :/

[@rahulc4281]

I have used touch controls. But when camera follows my tank the touch buttons go out of view. How do i make touch buttons to stick to one place on screen and also make them not change position in different screen sizes. I am using godot 3.2.

[@Kidscancode]

UI elements should be in a CanvasLayer so they ignore camera offset. Proper use of anchors and size flags is how you make your UI responsive.

[@rahulc4281]

@@Kidscancode Thank you. Another question i have is about that tile generator script. I dont fully understand how that scripts work. Can you help me maybe?

[@Bananeisafree]

Fantastic series ! The tileset making script is a great example of script used as a game developing tool ! Quick note regarding the tileset : I had some issues involving tiles appearing and disappearing at random : (small video illustrating the problem here : kzbin.info/www/bejne/a2jRdGlshb-qf6M ) After a bit of online research I found that it was something common , that appeared with godot 3 and seemed to be related to Nvidia cards of the generation 900 and above. A proposed fix (that seems to do the trick for me) is to turn on on Ysort on the Cell tab of the TileMap node. Again, great video ! Cheers !

[@jellydevtv]

I found Y-sort alone the issue still presented itself on occasion. I found increasing the quadrant size to match the cellsize in the grounds tilemap to make it at least occur so infrequently that i cant spot it. Hope this helps some others

[@diegomata1062]

hey please i need some help ummm i did not rotate the sprite sheet so my sprites have a -270 degrees offset and the function look at does not how do i change it by code? please any suggestions would help im stuck.

[@Kidscancode]

Apply the extra rotation to the sprite node and it will stay rotated relative to the parent node.

[@damonyotropa4100]

can someone please help on the tilesetmaker script. Im getting an error "Identifier not found: Tileset"... what gives??

[@Kidscancode]

Share your code so we can see what's wrong.

[@damonyotropa4100]

heheh.. tried to do the project from the start again and this time take it slow, might have skipped something (too excited) for it not to work properly, but is now working 100%. Great Videos btw, looking foward to finishing the project and tnx for the prompt reply. Kudos.

[@Knightedskull]

Not sure what I'm doing wrong but whether I type it myself or copy-paste the code I get an error for the tileset script. I already tried making all the files not read-only. Can anyone help? : 0:00:01:0891 - Condition ' err ' is true. returned: ERR_CANT_OPEN ---------- Type:Error Description: Time: 0:00:01:0891 C Error: Condition ' err ' is true. returned: ERR_CANT_OPEN C Source: scene esources\scene_format_text.cpp:1468 C Function: ResourceFormatSaverTextInstance::save

[@Kidscancode]

It certainly sounds like a permission problem.

[@Johannes_DC]

​@@Kidscancode You did not use a node. I am guessing you used something else, like spatial or node2d. this can give such weird errors. Bit late, but hope it helps (or for others with the same problem.

[@antanaspaskauskas9432]

What is end property? Position is self explanatory, but not end

[@Kidscancode]

See docs.godotengine.org/en/latest/classes/class_rect2.html

[@antanaspaskauskas9432]

Thank you, was not sure where to find it! I follow your new tutorials also, great help :)

[@tjtorin3195]

(14:05) In the map.gd I keep getting an error saying: Invalid get index 'end' (on base : 'Vector2'). Anyone know why? Code: extends Node2D func _ready(): set_camera_limits() func set_camera_limits(): var map_limits = $Ground.get_used_rect() var map_cellsize = $Ground.cell_size $Player/Camera2D.limit_left = map_limits.position.x * map_cellsize.x $Player/Camera2D.limit_right = map_limits.end.x * map_cellsize.end.x $Player/Camera2D.limit_top = map_limits.position.y * map_cellsize.y $Player/Camera2D.limit_bottom = map_limits.end.y * map_cellsize.end.y

[@Kidscancode]

You wrote "map_cellsize.end.y". map_cellsize is a Vector2, not a Rect, and so it doesn't have an "end".

[@ezrakornfeld8436]

cant figure out how to move the viewport rect to follow anything yet so im watching this

[@mugenmasters8564]

i am getting weird yellow lines in my map

[@theman3282]

how well this translated to godot 4?

[@Kidscancode]

The concepts and the structure would be just the same, but there are API changes you'll have to account for.

[@Bianchi77]

when the tank hit more than the edge, it's gone, is it a right behaviour ? going to the next map, isn't it ?

[@sonyahale2839]

mine won't save either, Error i get is "Line 17 (RETURN_VALUE_DISCARDED): The function 'save()' returns a value, but this value is never used. (ignore)." here's the script.... extends Node var tile_size = Vector2(128, 128) onready var texture = $Sprite.texture func _ready(): var tex_width = texture.get_width() / tile_size.x var tex_height = texture.get_height() / tile_size.y var ts = TileSet.new() for x in range(tex_width): for y in range(tex_height): var region = Rect2(x * tile_size.x, y * tile_size.y, tile_size.x, tile_size.y) var id = x + y * 10 ts.create_tile(id) ts.tile_set_texture(id, texture) ts.tile_set_region(id, region) ResourceSaver.save("res//Terrain/terrain_tiles.tres", ts) did i do something wrong ?...i don't really want to look at your saved code, but try this on my own. just won't save the tileset no matter how many times i redo the script.

[@Kidscancode]

That's not even an error. It's a warning.

[@sonyahale2839]

@@Kidscancode im new at this, but still point is, it wont save...what version of Godot are you using in these Videos ? might help me better to follow along, i'm using 3.1, or 3.0.6

[@Kidscancode]

Are you sure there's no other error message? It's hard to tell if there's any problem in the code since YT comments don't preserve formatting. It's ok to look at my version and compare - it could be as simple as a non-obvious typo.

[@anark10n]

The function ResourceSaver returns a number that you can use to check if it saved the resource or not. So you can put it in an if statement to catch the output to test if the file was saved. Just replace the last line with the following: if ResourceSaver.save("res://terrain/terrain_tiles.tres", ts) != 0: print("Error occured. File was not saved.")

[@samgeisler7033]

I know it's been months, but I was having this problem too. I hadn't added a sprite as a child to the main node. My brain must of just skipped over the video or something. The specific error I got is: Invalid get index 'texture' (on base: 'null instance'). This was because the program couldn't find the sprite texture in onready var texture = $Sprite.texture This probably won't serve as help, but nobody posted answers here so I thought I might as well. The error could be a wide variety of things, this is just what I came across.

[@godothelp8943]

What is the problem with this script? I'm not finding his problem but when I start the camera, it goes out of bounds, somebody helps extends Node2D func _ready(): set_camera_limits() func set_camera_limits(): var map_limits = $Ground.get_used_rect() var map_cellsize = $Ground.cell_size $Player/Camera2D.limit_left = map_limits.position.x * map_cellsize.x $Player/Camera2D.limit_right = map_limits.end.x * map_cellsize.x $Player/Camera2D.limit_top = map_limits.position.y * map_cellsize.y $Player/Camera2D.limit_bottom = map_limits.end.y * map_cellsize.y

[@Kidscancode]

The code looks fine, so you might need to check the "Ground" tilemap, since that's the object that determines the size. What do you get if you do `print(map_limits)`?

[@TheRealKaiProton]

Great Tutor, but Ive got an issue, for some reason my Camera seems to go the other way, Ive gone over the code a couple of times and appears to be the same.. any ideas?

[@Kidscancode]

Are you saying the camera moves away from the player instead of with it? Did you add it as a child of the Player (not one of the children)?

[@TheRealKaiProton]

Yea, so Camera is a Child of the player tank, and the script is on the Map01, saved as map, and when run, it mirrors what you get on the tutor, so my tank is top right, and I assume because its behind the lower limit, its stops it scrolling too, I also removed it all, and re-wrote it, and still the same results

[@Kidscancode]

Maybe I'm just having trouble picturing what you're describing. Can you post a gif or your project somewhere?

[@TheRealKaiProton]

Hi Again, I put some pix on a WIX web page, to try to show whats going on; kaiproton.wixsite.com/topviewtanks

[@Kidscancode]

Well, something is definitely weird/wrong. Make sure "Scale" is set to (1, 1) on all your player nodes.

[@robbiethepeasant463]

Mine isn't saving as a tres file for some reason. My code is perfect idk if it's how I have my files

[@robbiethepeasant463]

I went to manually save as tileset and it showed the original one but didn't display in the Filesystem. I resaved as tileset as terrain_tiles0.tres and I got it to appear.

[@truthhurts7095]

In the beginning I want say "Great tutorials", but I have few observations that could improve "Tank Battle" game. First, sorry man, but I believe you set tank barrel wrong way. This square looking thing in the and of your barrel should be in the center of the tank and have function as a turret . And tank barrel should be thin pipe. Second, tank's turret is following the mouse cursor, which cause that turret rotates very fast. It would be better if turret could rotate with constant speed, this way game could be little bit demanding and would force player to use little bit of tactic and give excitement during tank battle. Right now in my opinion targeting is easy like point and click.

[@MattHuisman]

Truth Hurts I thought the same with the turret. But if you look at the original art, that's how the turret is on the tank. Also it allows having a larger more visible bullet. I do like the idea of slower rotation. It could move towards the mouse position at a constant speed. Then the speed could be increased as a power up or decreased when damaged.

[@skellious]

the flared turrent end is a feature on some real-world tanks, it's called the muzzle brake and its function is to redirect the hot exhaust gasses to counter recoil from firing the gun. Whilst it's less common in the modern-day, it is nevertheless a real-world thing. - en.wikipedia.org/wiki/Muzzle_brake

[@j.d.waterhouse4197]

I'm actually using a completely different set of tanks and tiles than Chis did, I wanted more realism.