如何在Libgdx中用Shape Renderer绘制配对游戏的动态连线？

核心思路 #

通过Libgdx的ShapeRenderer绘制连线，或自定义LineActor集成到Actor体系中，实现随Actor位置变化自动更新的动态连线效果。

方案一：直接用ShapeRenderer绘制 #

1. 初始化ShapeRenderer实例：

private ShapeRenderer shapeRenderer;

// 在create()或构造方法中初始化
shapeRenderer = new ShapeRenderer();
shapeRenderer.setAutoShapeType(true);

2. 在Stage/Screen的绘制流程中添加连线逻辑：

@Override
public void draw() {
    super.draw(); // 优先绘制所有Actor

    // 假设已获取两个选中的目标Actor：selectedActor1、selectedActor2
    if (selectedActor1 != null && selectedActor2 != null) {
        shapeRenderer.begin(ShapeRenderer.ShapeType.Line);
        shapeRenderer.setColor(Color.RED); // 设置连线颜色

        // 计算两个Actor的全局中心坐标
        Vector2 center1 = new Vector2(
            selectedActor1.getX() + selectedActor1.getWidth()/2,
            selectedActor1.getY() + selectedActor1.getHeight()/2
        );
        Vector2 center2 = new Vector2(
            selectedActor2.getX() + selectedActor2.getWidth()/2,
            selectedActor2.getY() + selectedActor2.getHeight()/2
        );

        shapeRenderer.line(center1, center2);
        shapeRenderer.end();
    }
}

3. 资源释放：

@Override
public void dispose() {
    super.dispose();
    shapeRenderer.dispose();
}

方案二：自定义LineActor管理连线 #

更贴合Libgdx Actor体系，便于复用和动画扩展：

1. 实现LineActor类：

public class LineActor extends Actor {
    private Actor actorA;
    private Actor actorB;
    private Color lineColor = Color.RED;

    public LineActor(Actor a, Actor b) {
        this.actorA = a;
        this.actorB = b;
    }

    @Override
    public void draw(Batch batch, float parentAlpha) {
        batch.end(); // 切换渲染模式前结束Batch

        ShapeRenderer shapeRenderer = new ShapeRenderer();
        shapeRenderer.setProjectionMatrix(batch.getProjectionMatrix());
        shapeRenderer.begin(ShapeRenderer.ShapeType.Line);
        shapeRenderer.setColor(lineColor);

        // 转换为舞台全局坐标
        Vector2 posA = actorA.localToStageCoordinates(
            new Vector2(actorA.getWidth()/2, actorA.getHeight()/2)
        );
        Vector2 posB = actorB.localToStageCoordinates(
            new Vector2(actorB.getWidth()/2, actorB.getHeight()/2)
        );

        shapeRenderer.line(posA, posB);
        shapeRenderer.end();

        batch.begin(); // 重新开启Batch
    }

    public void setLineColor(Color color) {
        this.lineColor = color;
    }
}

2. 使用方式：

// 选中两个Actor后创建连线并添加到舞台
if (selectedActor1 != null && selectedActor2 != null) {
    LineActor connectLine = new LineActor(selectedActor1, selectedActor2);
    stage.addActor(connectLine);
}

进阶：添加连线动画 #

实现平滑的显隐动画，贴合目标游戏效果：

// 连线渐显
connectLine.addAction(Actions.alpha(0));
connectLine.addAction(Actions.fadeIn(0.3f));

// 配对成功后渐隐并移除
connectLine.addAction(Actions.sequence(
    Actions.fadeOut(0.3f),
    Actions.removeActor()
));

注意事项 #

• 使用ShapeRenderer时需严格遵循Batch生命周期，避免渲染冲突。
• Actor位置/尺寸变化时，连线会自动重新计算坐标，无需额外监听。
• 大量连线场景下，建议复用ShapeRenderer实例，减少性能损耗。

内容的提问来源于stack exchange，提问作者Md Humza