用FPGA在640x480@60Hz显示器上做个“弹球”：VGA动态图像移动的模块化设计心得

FPGA模块化设计实战：构建可复用的VGA动态图像系统

在嵌入式视觉系统开发中，VGA接口因其简单可靠的特点，仍然是许多FPGA初学者的首选实践项目。但当我们需要实现动态图像效果时，如何设计出既高效又易于维护的代码结构？本文将分享一种模块化设计方法，让您的VGA驱动代码像乐高积木一样灵活组合。

1. VGA显示系统的架构设计

1.1 显示时序的模块化封装

VGA驱动的核心在于精确的时序控制。我们采用参数化设计，将时序参数封装成可配置的模块：

module vga_driver #( parameter H_VALID = 640, // 有效显示区域宽度 parameter V_VALID = 480, // 有效显示区域高度 parameter H_FRONT = 8, // 行前沿 parameter H_SYNC = 96, // 行同步脉冲 parameter H_BACK = 40, // 行后沿 parameter V_FRONT = 2, // 场前沿 parameter V_SYNC = 2, // 场同步脉冲 parameter V_BACK = 25 // 场后沿 )( input wire clk, input wire rst_n, output reg hsync, output reg vsync, output wire [10:0] pixel_x, output wire [10:0] pixel_y );

这种设计允许通过简单修改参数值来适配不同分辨率，如1024x768或1280x720等显示标准。

1.2 显示坐标系统的抽象

我们引入像素坐标计数器作为桥梁，将底层时序与上层图像生成解耦：

// 像素坐标生成逻辑 always @(posedge clk or negedge rst_n) begin if(!rst_n) begin pixel_x <= 0; pixel_y <= 0; end else begin if(pixel_x == H_TOTAL-1) begin pixel_x <= 0; pixel_y <= (pixel_y == V_TOTAL-1) ? 0 : pixel_y + 1; end else begin pixel_x <= pixel_x + 1; end end end

2. 动态图像生成模块设计

2.1 对象位置控制单元

采用独立的位置控制器管理移动对象的坐标：

module object_controller #( parameter MAX_X = 640, parameter MAX_Y = 480, parameter OBJECT_WIDTH = 50, parameter OBJECT_HEIGHT = 50 )( input wire clk, input wire frame_start, // 每帧开始的脉冲信号 output reg [10:0] pos_x, output reg [10:0] pos_y ); // 位置更新逻辑 always @(posedge clk) begin if(frame_start) begin if(pos_x >= MAX_X - OBJECT_WIDTH) pos_x <= 0; else pos_x <= pos_x + 1; if(pos_y >= MAX_Y - OBJECT_HEIGHT) pos_y <= 0; else pos_y <= pos_y + 1; end end

2.2 图像渲染引擎

渲染模块只关心当前像素是否属于显示对象：

module render_engine #( parameter OBJECT_COLOR = 24'hFFFFFF // 默认白色 )( input wire [10:0] pixel_x, input wire [10:0] pixel_y, input wire [10:0] obj_x, input wire [10:0] obj_y, input wire [10:0] obj_width, input wire [10:0] obj_height, output reg [23:0] pixel_data ); always @(*) begin if((pixel_x >= obj_x) && (pixel_x < obj_x + obj_width) && (pixel_y >= obj_y) && (pixel_y < obj_y + obj_height)) pixel_data = OBJECT_COLOR; else pixel_data = 24'h000000; // 黑色背景 end

3. 系统集成与接口设计

3.1 顶层模块的积木式连接

module top_vga_bouncing_ball ( input wire clk_50MHz, input wire rst_n, output wire vga_hsync, output wire vga_vsync, output wire [7:0] vga_red, output wire [7:0] vga_green, output wire [7:0] vga_blue ); // 实例化各功能模块 vga_driver driver_inst( .clk(clk_25MHz), .rst_n(rst_n), .hsync(vga_hsync), .vsync(vga_vsync), .pixel_x(pixel_x), .pixel_y(pixel_y) ); object_controller #( .MAX_X(640), .MAX_Y(480), .OBJECT_WIDTH(50), .OBJECT_HEIGHT(50) ) ball_ctl_inst( .clk(clk_25MHz), .frame_start(frame_start), .pos_x(ball_x), .pos_y(ball_y) ); render_engine #( .OBJECT_COLOR(24'hFFFFFF) ) render_inst( .pixel_x(pixel_x), .pixel_y(pixel_y), .obj_x(ball_x), .obj_y(ball_y), .obj_width(50), .obj_height(50), .pixel_data({vga_red, vga_green, vga_blue}) );

3.2 模块间同步信号设计

关键同步信号的定义与连接：

4. 设计优化与扩展性

4.1 多对象支持架构

通过对象列表管理多个动态元素：

// 对象数据结构定义 typedef struct { logic [10:0] x; logic [10:0] y; logic [10:0] width; logic [10:0] height; logic [23:0] color; } vga_object_t; // 对象数组 vga_object_t objects[7:0]; // 多对象渲染逻辑 always @(*) begin pixel_data = BACKGROUND_COLOR; for(int i=0; i<8; i++) begin if(objects[i].active && (pixel_x >= objects[i].x) && (pixel_x < objects[i].x + objects[i].width) && (pixel_y >= objects[i].y) && (pixel_y < objects[i].y + objects[i].height)) pixel_data = objects[i].color; end end

4.2 碰撞检测扩展

为弹球游戏添加物理特性：

module collision_detector #( parameter SCREEN_WIDTH = 640, parameter SCREEN_HEIGHT = 480 )( input wire clk, input wire frame_start, input wire [10:0] obj1_x, input wire [10:0] obj1_y, input wire [10:0] obj1_width, input wire [10:0] obj1_height, output reg x_dir, // 0=右,1=左 output reg y_dir // 0=下,1=上 ); always @(posedge clk) begin if(frame_start) begin // 水平边界检测 if(obj1_x >= SCREEN_WIDTH - obj1_width) x_dir <= 1'b1; else if(obj1_x <= 0) x_dir <= 1'b0; // 垂直边界检测 if(obj1_y >= SCREEN_HEIGHT - obj1_height) y_dir <= 1'b1; else if(obj1_y <= 0) y_dir <= 1'b0; end end

这种模块化设计方法不仅适用于简单的弹球演示，经过适当扩展后，可以支持更复杂的图形应用，如游戏开发、用户界面显示等。关键在于保持各功能模块的独立性，通过定义清晰的接口来实现灵活组合。