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

  1. use a shader to show map, But the edges of the map will be rounded.
  2. use light2d and mask. I don't get the effect I expected
  3. 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?

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

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

  1. Because the background uses ColorRect, there is no texture attribute
  2. 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

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

      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()