Hex tilemap coords from mouse click event are offset.

Godot Version

Godot 4.4

Question

I’m learning Godot and going through tutorials on youtube, trying to implement different things to work out the engine. While following this tutorial I get an issue that I can’t figure out. At the section “Click to paint” starting from 9:15, if I implement his code I get this offset issue he describes at 14:35. When I hover over a tile in the editor, I see its coordinates i.e. (0,0) like in here
https://imgur.com/C6x2Ojr

However, if i start the game and try to click the (0,0) tile with his click to paint code, I get everything offset by (23,13)
https://imgur.com/1sxfqv5

He does go over this issue in the video, but implementing the solution doesn’t do anything on my end. Everything is still offset the same. Here’s my code

extends Node2D

@onready var tileMapLayer: TileMapLayer = $Layer1
const SOURCE_BASE_GRASS: int = 0
const PLAIN_GRASS: Vector2i = Vector2i(0, 0)

#func _ready() -> void:
	#for y in 8:
		#for x in 8:
			#tileMapLayer.set_cell(Vector2i(-4 + x,-4 + y), SOURCE_BASE_GRASS, Vector2i(2, 0))

func _input(event: InputEvent) -> void:
	if event.is_action_pressed("paint_tile"):
		assert(event is InputEventMouseButton)
		var mousePos: Vector2 = event.position
		var layerCoords: Vector2i = tileMapLayer.local_to_map(tileMapLayer.to_local(mousePos))
		print(layerCoords)
		tileMapLayer.set_cell(layerCoords, SOURCE_BASE_GRASS, Vector2i(0, 0))

In the code you can see my commented out code that paints a few tiles as an autoload. This piece of code does work and places tiles correctly around the (0, 0) coordinate, while the click to paint action does not. I also tried to use the X and Y transforms in the tilemaplayer to fix the offset and while it does move the tiles created by my autoload, it does not seem to fix the coordinate offset I get from mouse clicks.

What if you used the global_position of the mouse event? Does it fix it?

var mousePos: Vector2 = event.global_position

Sadly, not. My code is already using global_position, but I misstyped it here and the forum wont let me edit my post, because it has too many links for a new user. I just get an error trying to save my edits

The issue is being caused by including a camera node in the game scene. By moving the camera around, I can control the offset in the coordinates generated by the click event. If I align the camera so that 0,0 is at the top left corner of the camera, the issue goes away. However, this seems like a very inconvenient way to circumvent the issue.

Where the tutorial I was watching trips up, is that it doesn’t have a camera2d node and there, coordinates are generated relative to the tilemap. As a solution he does translation between global coordinates and the tilemap layer coordinates. However for me, it seems like the click event generates coordinates relative to the camera node, so his solution in the tutorial does not work for me.

A SOLUTION:
You have to take the event position through the camera node and make the transform to local from that. For my _input() code the following worked:

func _input(event: InputEvent) -> void:
	if event.is_action_pressed("click_to_paint"):
		assert(event is InputEventMouseButton)
		var cam: Camera2D = get_viewport().get_camera_2d()
		var mousePos: Vector2 = cam.get_global_mouse_position()
		var localCoords: Vector2i = tileMapLayer.local_to_map(tileMapLayer.to_local(mousePos))
		tileMapLayer.set_cell(localCoords, 1, Vector2i(0,0))