Trying to center the tiles of my TileMapLayer

Help
, ,
1

Godot Version

4.6.1.stable

Question

I have the die faces in my TileMapLayer. It’s done this way, because I coded the script so it “places” random tiles for the rolling animation. I thought about updating the coordinates so it places the dice near the center of the screen but I do plan to implement upgrades that increases the number of rows and columns, which would cause the dice to be off-centered. Updating the coordinates for the tiles would be a solution, but the dice may seem off-centered on different resolutions. Is there a way to ensure the tiles stay centered on the screen despite the resolution?

Below is the screenshot of what I currently see:

image
image1281×309 5.54 KB

Below is how I have the nodes arraigned:

image
image281×431 17.3 KB

2

I would not use TileMapLayer for this.

You already have a control structure. Try using a CenterContainer for placement and TextureRect for the dice. Maybe a GridContainer to handle the extra dice.

3

Understood, thank you for that. Below are the nodes I have so far:

image
image273×239 10.3 KB

This is how I have the AtlasRect set up:

image
image199×475 1.86 KB

The code I have below is the following:

extends Control

var num_of_columns: int = 2
var num_of_rows: int = 2

@onready var grid_container: GridContainer = $CenterContainer/GridContainer
@onready var texture_rect: TextureRect = $CenterContainer/GridContainer/TextureRect

# Called when the node enters the scene tree for the first time.
func _ready():
	for i in range(1, num_of_columns * num_of_rows):
		grid_container.add_child(texture_rect.duplicate())

func _on_roll_dice_pressed() -> void:
	pass # Replace with function body.

My question is this: I’d like to randomize what die face is shown in each TextureRect. The idea is for each die face shown to be replaced with another one, so it looks like the dice are rolling. I can do this with a ‘while’ statement. I’d like to change the ‘x’ coordinate of the atlasrect to change the die face. I would also like to to update the ‘y’ coordinate based on the material and type of die the player has in their “dice bag”. What code do I use to randomize the ‘x’ and ‘y’ coordinates?

4

An AtlasRect has a region. You set the x and y coordinates for the image you want to select in that region.

This post has details and code: Navigating a sprite sheet using regions

5

Thank you, I appreciate it. I followed your advice and although I have made progress, I’m still struggling to write code that displays changing dice faces from the atlas region to give the illusion that the dice are rolling. Below is the code I have so far:

extends Control

var num_of_columns: int = 2
var num_of_rows: int = 2

#Width of image in atlas
var atlas_x:int = 16
#Height of image in atlas
var atlas_y:int = 16

#Atlas coordinates and x_coordinate range
	#1st entry in the array is the max x_coordinate
	#2nd entry in the array is the y_coordinate
var dice_atlas_coordinates = {
	"D2": [1, 14],
	"D3": [2, 13],
	"D4": [3, 12],
	"D5": [4, 11],
	"D6": [5, 10],
	"G2": [1, 9],
	"G3": [2, 8],
	"G4": [3, 7],
	"G5": [4, 6],
	"G6": [5, 5],
	"P2": [1, 4],
	"P3": [2, 3],
	"P4": [3, 2],
	"P5": [4, 1],
	"P6": [5, 0],

}

var ghost_dice_bag
var duration: float = 0

@onready var grid_container: GridContainer = $CenterContainer/GridContainer
@onready var texture_rect: TextureRect = $CenterContainer/GridContainer/TextureRect

# Called when the node enters the scene tree for the first time.
func _ready():
	ghost_dice_bag = Globals.dice_bag.duplicate()	
	for i in range(1, num_of_columns * num_of_rows):
		grid_container.add_child(texture_rect.duplicate())
		place_dice()

func place_dice():
	if ghost_dice_bag.is_empty() == true:
		#Assigns atlas coordinates that are empty
		texture_rect.position.x = 64
		texture_rect.position.y = 64
	else:
		var die = ghost_dice_bag.pick_random()
		texture_rect.position.x = dice_atlas_coordinates[die][0] * atlas_x
		texture_rect.position.y = dice_atlas_coordinates[die][1] * atlas_y
		ghost_dice_bag.erase(die)

func _on_roll_dice_pressed():
	while duration < 1.0:
		for h in range(1, num_of_columns * num_of_rows):
			for i in range(0, Globals.dice_bag.size()):
				texture_rect.position.y = dice_atlas_coordinates[Globals.dice_bag[i]][1] * atlas_y
				var j = randi_range(0, dice_atlas_coordinates[Globals.dice_bag[i]][0])
				texture_rect.position.x = atlas_x * j
		duration += 0.1
	duration = 0

My Globals are as follows:

#Stores dice that are available for rolling
var dice_bag = [
	"P2",
	"P2",
]

Even though there are two dice in the dice bag, I still see 4 dice shown on the screen:

image

6 
func _ready():
	for i in range(1, num_of_columns * num_of_rows):
		grid_container.add_child(texture_rect.duplicate())

You are adding 4 dice to your grid.

7

Are you sure? Because in the func place_dice() function, I have code that places an empty atlas if the dice bag is empty.

Also, the dice faces are still not being randomized and still doesn’t look like they’re rolling.

8

2 x 2 = 4

You’re also just duplicating the same texture 4 times, not rolling a die.