如何在MonoGame/XNA中实现逐像素实时2D绘制？

此前想要了解如何在XNA/MonoGame中实现逐像素实时绘制，搜索到的相关讨论核心多围绕资源管理与内容更新相关内容展开，并未涉及逐像素绘制的具体实现方法。由于一直没有找到简单明了的实现教程，这里分享实测可用的实现代码片段。

注：如果您有更优的实现方案或替代方法，欢迎留言交流。

实现步骤 #

• 首先在游戏类中定义所需的核心变量：

// 存储像素数据的纹理对象
private Texture2D _renderTexture;
// 存储所有像素颜色的数组，大小对应渲染区域宽高
private Color[] _pixelBuffer;
// 渲染区域宽度，可根据实际窗口尺寸调整
private const int RenderWidth = 800;
// 渲染区域高度，可根据实际窗口尺寸调整
private const int RenderHeight = 600;

• 在LoadContent生命周期中完成初始化：

protected override void LoadContent()
{
    _spriteBatch = new SpriteBatch(GraphicsDevice);
    // 初始化纹理，尺寸与渲染区域保持一致
    _renderTexture = new Texture2D(GraphicsDevice, RenderWidth, RenderHeight);
    // 初始化像素数组，长度等于总像素数
    _pixelBuffer = new Color[RenderWidth * RenderHeight];
}

• 在Update生命周期中修改像素颜色数据，这里以动态渐变效果为例：

protected override void Update(GameTime gameTime)
{
    // 遍历所有像素点修改颜色，可替换为自定义的像素生成逻辑
    for (int y = 0; y < RenderHeight; y++)
    {
        for (int x = 0; x < RenderWidth; x++)
        {
            // 计算当前像素在数组中的索引
            int pixelIndex = y * RenderWidth + x;
            // 示例：生成随时间和坐标变化的渐变颜色
            byte r = (byte)(Math.Sin(gameTime.TotalGameTime.TotalSeconds + x * 0.01f) * 127 + 128);
            byte g = (byte)(Math.Sin(gameTime.TotalGameTime.TotalSeconds + y * 0.01f) * 127 + 128);
            byte b = (byte)(Math.Cos(gameTime.TotalGameTime.TotalSeconds + (x + y) * 0.005f) * 127 + 128);
            _pixelBuffer[pixelIndex] = new Color(r, g, b);
        }
    }
    // 将修改后的像素数组数据上传到GPU纹理
    _renderTexture.SetData(_pixelBuffer);
    base.Update(gameTime);
}

• 在Draw生命周期中把最终纹理渲染到屏幕即可：

protected override void Draw(GameTime gameTime)
{
    GraphicsDevice.Clear(Color.Black);
    _spriteBatch.Begin();
    // 绘制包含所有像素修改的纹理
    _spriteBatch.Draw(_renderTexture, Vector2.Zero, Color.White);
    _spriteBatch.End();
    base.Draw(gameTime);
}

性能优化提示 #

如果渲染分辨率较高，全量逐像素遍历的CPU开销会比较大，可根据需求选择优化方案：

• 仅修改需要更新的像素区域，调用SetData时指定更新的矩形范围，避免全量数据上传
• 将像素计算逻辑迁移到Compute Shader中实现，利用GPU并行计算能力大幅提升性能
• 降低渲染纹理的分辨率，放大后绘制到屏幕，平衡画质和性能开销

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