Unity中方形组件Tilemap实现2D游戏像素画绘制功能求助

1. 先明确：Tilemap完全支持局部区域使用 #

Tilemap本身没有必须全屏的限制，你可以通过以下两种方式快速实现菜单内的局部绘制区域：

方式一：UI层嵌入Tilemap（推荐）

• 新建一个Canvas，将Render Mode设为World Space，调整Canvas的大小和位置适配菜单界面
• 在Canvas下创建空GameObject，命名为DrawTilemap，添加Tilemap和Tilemap Renderer组件
• 调整DrawTilemap的Transform：设置Scale为合适的像素大小（比如0.1x0.1，对应10px/单元格），移动Position让它刚好落在菜单的指定绘制区域内
• 给DrawTilemap设置独立的图层（比如DrawLayer），避免和其他UI元素冲突

方式二：用RenderTexture将Tilemap渲染到UI控件

• 新建Camera（命名为DrawCam），设置Culling Mask仅包含DrawLayer，Orthographic Size调整为刚好覆盖你的绘制区域
• 创建RenderTexture（右键>Create>Render Texture），分辨率设为你需要的像素画尺寸（比如256x256），赋值给DrawCam的Target Texture
• 在菜单UI中添加RawImage，将RenderTexture拖入RawImage的Texture字段，RawImage的RectTransform就是你的局部绘制区域

2. 核心绘制逻辑实现 #

• 坐标转换：将鼠标屏幕坐标转为Tilemap的单元格坐标：

  Vector3 worldPos = Camera.main.ScreenToWorldPoint(Input.mousePosition);
  worldPos.z = 0; // 2D场景确保Z轴一致
  Vector3Int cellPos = tilemap.WorldToCell(worldPos);
  

• 绘制瓦片：提前准备纯色Tile（或动态生成），根据选中颜色设置并绘制：

  // 动态生成纯色Tile
  Tile drawTile = Tile.CreateInstance<Tile>();
  drawTile.color = selectedColor; // selectedColor是用户选择的颜色
  tilemap.SetTile(cellPos, drawTile);
  
  // 或者如果用同一Tile改颜色（更高效）
  tilemap.SetColor(cellPos, selectedColor);
  

• 限制绘制范围：如果需要限定只能在指定方形区域内绘制，可在代码里判断cellPos是否在预设的坐标范围内：

  if (cellPos.x >= minX && cellPos.x <= maxX && cellPos.y >= minY && cellPos.y <= maxY) {
      // 执行绘制逻辑
  }
  

3. 关闭菜单后将画作放到墙上 #

• 保存Tilemap数据：遍历Tilemap的所有有效单元格，记录位置和颜色：

  List<(Vector3Int pos, Color color)> drawData = new List<(Vector3Int, Color)>();
  BoundsInt bounds = tilemap.cellBounds;
  foreach (Vector3Int pos in bounds.allPositionsWithin) {
      if (tilemap.HasTile(pos)) {
          drawData.Add((pos, tilemap.GetColor(pos)));
      }
  }
  

• 在墙上重建画作：
  • 在墙上位置创建新的Tilemap（或复用原有Tilemap），调整Transform到墙面位置
  • 遍历保存的drawData，用SetTile或SetColor重新绘制瓦片
  • 或者更简单：直接将原DrawTilemap的GameObject复制一份，修改Transform位置到墙上，然后隐藏菜单内的Tilemap

额外小技巧 #

• 如果是小尺寸像素画（比如16x16），可以用GridLayoutGroup配合Image组件模拟Tilemap，性能更优
• 给Tilemap添加Tilemap Collider 2D可以方便检测点击区域，避免误触菜单其他控件

内容的提问来源于stack exchange，提问作者Emily Miller