Unity实时绘制线条（附加物理效果）

FeastSC · 发表于 2021-12-29 13:35

最近参加了taptap 5th独立营比赛，团队想法是在传统横板平台游戏的基础上，加上绘制物理线条的操作，实现绘制、擦除、填色等功能，进而提供铺设道路、触碰开关、困住移动物体、改变线条样式、受重力浮动/下落等玩法。

0. 思路
一开始想到的有两种实现思路：

绘制线条对象：容易实现，容易交互，但是线条精度低，难以精确擦除。
绘制像素图像：接近传统绘图软件的效果，但是难于实现各种交互功能。

最后考虑玩法侧重（以及自己很菜），还是选择了绘制线条对象，具体使用的是unity自带的LineRenderer

绘制线条

要绘制线条首先要确立坐标，需要将鼠标的屏幕空间转换为摄像机的世界空间坐标，如果是正交投影Orthographic只需要这样就足够了，但是如果想要做立体场景，例如2d项目实现前景后景分层，使用透视投影Perspective则需要额外加上z轴位置的转换。
/// <summary>
/// 使用3d视角镜头时，需要指定z值为画布所处平面与摄像机之间的偏移距离
/// </summary>
private Vector3 getMouseWorldPosition()
{
      var mp = Input.mousePosition;
      var i = new Vector3(mp.x, mp.y, gd.zLevel - Camera.main.transform.position.z);
      return Camera.main.ScreenToWorldPoint(i);
}
LineRenderer（后面简称LR）是通过一系列坐标点来绘制线条的，在update中连续使用LR的SetPosition记录鼠标坐标转换的世界坐标即可。（注意要同步增加positionCount）
LR的useWorldSpace选项需要关闭（设为false），否则线条会永远固定在绘制的位置，不能实现移动线条的功能。
至此应该就能愉快地在屏幕上绘制线条了（如果看不见线条请检查镜头距离、线条粗细、材质使用2d还是2dlit等问题）

2. 添加物理效果
为了避免在绘制的过程中线条就移动偏移，影响操作和记录数据，我选择在绘制结束抬笔（放开鼠标按键）的时候再添加Rigidbody2D到线条对象上。

使用RigidbodyType2D.Dynamic实现可自由受力移动的线
使用RigidbodyType2D.Kinematic实现固定不动但是可以检测碰撞的线
（如果使用RigidbodyType2D.Static则不会有任何交互）

至此绘制出的线条在提笔时开始下落了，然而线条还是幽灵会穿透一切，为此我们需要再添加上碰撞体积，这里使用PolygonCollider2D（后面简称PC）获得精准匹配的碰撞体积。
PC一般会自动生成匹配物体形状的碰撞体积，但是好像只对SpriteRenderer的sprite形状奏效，我们这里使用的LR则需要手动产生匹配的形状。
和绘制线条的过程类似，我们需要在PC中使用SetPath方法指定一组坐标来包围线条，使用之前绘制线条的LR positions坐标，这个坐标是在线条的中心，需要加上一个偏移量，每个坐标产生4个偏移点，形成一个包围盒，整体就近似贴合曲线形状了。

计算偏移量的方法是从网上找的一个实现，这里宽度直接使用了startWidth，如果LR配置过宽度曲线，可能无法完美匹配形状，不过在要求不高的场景已经足够准确了。
private List<Vector2> CalculateColliderPoints(List<Vector2> positions)
{
      var lr = GetComponent<LineRenderer>();
      //Get The Width of the Line
      float width = lr.startWidth;

      // m = (y2 - y1) / (x2 - x1)
      float m = (positions[1].y - positions[0].y) / (positions[1].x - positions[0].x);
      float deltaX = (width / 2f) * (m / Mathf.Pow(m * m + 1, 0.5f));
      float deltaY = (width / 2f) * (1 / Mathf.Pow(1 + m * m, 0.5f));

      //Calculate Vertex Offset from Line Point
      Vector2[] offsets = new Vector2[2];
      offsets[0] = new Vector2(-deltaX, deltaY);
      offsets[1] = new Vector2(deltaX, -deltaY);

      List<Vector2> colliderPoints = new List<Vector2> {
         positions[0] + offsets[0],
         positions[1] + offsets[0],
         positions[1] + offsets[1],
         positions[0] + offsets[1]
      };

      return colliderPoints;
}

3. 擦除/切断线条
这个功能使用了非常原始的笨办法实现，但是实际玩下来感觉并没有产生太大的性能问题（其实已经需要限制线条长度了……）
写一个简单步骤吧：

使用RaycastHit2D检测鼠标位置碰到的线条
跟之前一样获得转换坐标，遍历线条的positions找到最接近的坐标点
将positions根据这个点分成两半
创建两条新线条，把positions存入新线条
删除旧线条

至此我们获得了需要的大部分能力，剩下的功能跟画线的核心逻辑关系不大，就不再赘述了。

		自动登录	找回密码
密码			立即注册

Unity实时绘制线条（附加物理效果）

本帖子中包含更多资源