How to split an image into multiple colliders

vmjcv

I want to make a game like this use godot,
game link1
game link2

I want to know how to divide [picture + background] into multiple colliders to complete this function when the game is running.

Here are a few ways I've thought of

use a shader to show map, But the edges of the map will be rounded.
use light2d and mask. I don't get the effect I expected
use TileMap, but i need change rule image and background color.

I know all the ways to achieve collision, mainly want to know how to achieve such a display effect.
Is there any help you can give me?

cybereality

You can also create new Images using "blend_rect_mask()" which copies a shape from one image to another image.

https://docs.godotengine.org/en/stable/classes/class_image.html#class-image-method-blit-rect-mask

vmjcv

cybereality
I have tried to use this method, but this method has two limitations

Because the background uses ColorRect, there is no texture attribute
Because the size of the role image is inconsistent, I used TextureRect and expand and keep Aspect Centered. But the texture of TextureRect itself is not stretched, so blend_rect_mask cannot be used to create new Images.

Thank you very much for your reply, I will try to use "blend_rect_mask" and same size image again.
Of course I'm still looking forward to other answers

cybereality

If you use a Viewport it will turn everything inside into 1 Texture.

vmjcv

cybereality
thanks, i will try it

vmjcv

cybereality
Thank you very much for your help, this is what I have done,

This is part of the core code

var rule_weight = 40
var rule_height = 40
var base_weight
var base_height
var city_offset = Vector2(5,5)
var city_list = [city_offset,Vector2(rule_weight-city_offset.x,city_offset.y),Vector2(city_offset.x,
rule_height-city_offset.y),Vector2(rule_weight-city_offset.x,rule_height-city_offset.y)]

export(PackedScene) var grid_tscn
onready var viewport_list = [
	$ViewportContainer1/Role,
	$ViewportContainer2/Role,
	$ViewportContainer3/Role,
	$ViewportContainer4/Role,
	$ViewportContainer5/Role,
]

var grid_node_map = {}

func update_base_map():
	base_weight = rect_size.x/rule_weight
	base_height = rect_size.y/rule_height
	for i in range(rule_weight):
		for j in range(rule_height):
			var grid_node = grid_node_map.get("%d+%d"%[i,j])
			if not grid_node:
				grid_node = grid_tscn.instance()
				add_child(grid_node)
				grid_node_map["%d+%d"%[i,j]] = grid_node
				grid_node.name = "%d+%d"%[i,j]
				grid_node.texture = viewport_list[4].get_texture()
			grid_node.region_rect = Rect2(base_weight*i,base_height*j,base_weight,base_height)
			grid_node.position = Vector2(base_weight*i,base_height*j)
			

func update_map(i,j,rule):
	var grid_node = grid_node_map.get("%d+%d"%[i,j])
	grid_node.texture = viewport_list[rule].get_texture()

cybereality

Awesome!