I am very new to Godot and basically learning from scratch, so I'm sorry if this question feels obvious. To teach myself, I've been working on this sort of "evolved" tic tac toe game that takes place on a 7x7 board and has extra features and rules to accommodate. I originally started off by making it in a small window (1450 x 1018), but now before moving onto anything else I want to change it to a 4k resolution or at least a 16:9 aspect ratio. The problem is, currently the way I have it set up is that the grid for the tic tac toe board is just one image, with code that finds the correct spot on the image for an X or O marker to be placed (maybe not optimal but for now I'd like to keep it this way if I can). Currently for the sake of having each player be able to control on one computer, the O player clicks on a square with the mouse to place an O while the X player controls a cursor with the arrow keys. But whenever I try to move or resize the board image, both types of markers and the cursor for the X player can still only be placed where the board once was, as if there is an invisible board still in that spot. I assume this has to do with it wanting to be at the origin and local positions and things like that, but I don't know how to fix it.
Here is code relevant to how the markers are being placed (note for handle_move, there's a lot of logic relating to game rules that I cut out, the code there is what is related to placing a marker):
func _ready() -> void:
boardSize = $Board.get_rect().size.x
cellSize = boardSize/7.0
#Create a Node2D container for Player 2's cursor
cursorMarker = Node2D.new()
cursorMarker.name = "CursorMarker"
add_child(cursorMarker)
#Create a 1x1 yellow image
var img := Image.create(1, 1, false, Image.FORMAT_RGBA8)
img.set_pixel(0, 0, Color(1.0, 1.0, 0.0, 0.471))
#Make a texture from that image
var tex := ImageTexture.create_from_image(img)
#Create a sprite to display it
var spr := Sprite2D.new()
spr.texture = tex
spr.centered = false # top-left corner aligns with cell
spr.scale = Vector2(cellSize, cellSize) # scale 1×1px up to a full cell
cursorMarker.add_child(spr)
updateCursorPosition()
func _input(event):
#Player 1 input with the mouse
if event is InputEventMouseButton:
if event .button_index == MOUSE_BUTTON_LEFT and event.pressed:
#Check if mouse is on the game board
if event.position.x < boardSize:
#Convert mouse position into grid location
gridPos = Vector2i(event.position / cellSize)
handle_move(1, gridPos)
#Player 2 input with arrow keys and Enter
if event is InputEventKey and event.pressed:
match event.keycode:
KEY_UP:
player2Cursor.y = max(player2Cursor.y - 1, 0)
updateCursorPosition()
KEY_DOWN:
player2Cursor.y = min(player2Cursor.y + 1, 6)
updateCursorPosition()
KEY_LEFT:
player2Cursor.x = max(player2Cursor.x - 1, 0)
updateCursorPosition()
KEY_RIGHT:
player2Cursor.x = min(player2Cursor.x + 1, 6)
updateCursorPosition()
KEY_ENTER, KEY_KP_ENTER:
if canPlace2:
handle_move(-1, player2Cursor)
#Runs when Player 1 or 2 tries to make an input
func handle_move(currentPlayer: float, gridPos: Vector2i) -> void:
...
#If the spot is empty, or if it contains the other Player's symbol and the current Player can replace it
gridData[gridPos.y][gridPos.x] = currentPlayer #Put a 1 or -1 in the corresponding 2D array spot
var target = gridPos * cellSize + Vector2i(cellSize / 2, cellSize / 2) #Get the location on the image
#Clear existing markers if replacing
for cross in get_tree().get_nodes_in_group("crosses"):
if cross.position == Vector2(target):
cross.queue_free()
for circle in get_tree().get_nodes_in_group("circles"):
if circle.position == Vector2(target):
circle.queue_free()
createMarker(currentPlayer, target) #Places the marker in the spot
...
func createMarker (player, position, temp=false, gray=false):
#Create marker node and add it as a child
if player == 1:
var circle = circleScene.instantiate()
circle.position = position
if gray: #Gray is an optional indicator which makes the symbol dark
enter image description hereenter image description here circle.modulate = Color(0.5, 0.5, 0.5, 1.0)
add_child(circle)
if temp: tempMarker = circle
elif player == -1:
var cross = crossScene.instantiate()
cross.position = position
if gray:
cross.modulate = Color(0.5, 0.5, 0.5, 1.0)
add_child(cross)
if temp: tempMarker = cross
#Moving Player 2 cursor
func updateCursorPosition() -> void:
if cursorMarker == null:
return
cursorMarker.position = Vector2(player2Cursor) * cellSize