正点原子开拓者FPGA开发板资料连载第二十章 VGA字符显示实验

1）实验平台：正点原子开拓者FPGA 开发板

2）摘自《开拓者FPGA开发指南》关注官方微信号公众号，获取更多资料：正点原子

3）全套实验源码+手册+视频下载地址：http://www.openedv.com/thread-13912-1-1.html

第二十章 VGA字符显示实验

我们在VGA彩条显示实验和VGA方块移动实验中分别在显示器上显示出了静态和动态的图

案。然而彩条和方块都是一些非常简单的图案，本章我们将通过在屏幕上显示汉字，来给大家

演示如何使用VGA接口显示字符。

本章包括以下几个部分：

20.1 VGA简介

20.2 实验任务

20.3 硬件设计

20.4 程序设计

20.5 下载验证

VGA简介

我们在“VGA彩条显示实验”中对VGA视频传输标准作了详细的介绍，包括VGA接口定义、

行场同步时序、以及显示分辨率等。如果大家对这部分内容不是很熟悉的话，请参考“VGA彩

条显示实验”中的VGA简介部分。

实验任务

本章的实验任务是使用开拓者开发板上的VGA接口在显示器的屏幕中心位置显示四个汉字

“正点原子”。显示分辨率为640*480，刷新速率为60hz，每个汉字的大小为16*16。

硬件设计

VGA接口部分的硬件设计原理及本实验中各端口信号的管脚分配与“VGA彩条显示实验”完

全相同，请参考“VGA彩条显示实验”中的硬件设计部分。

程序设计

图 20.4.1是根据本章实验任务画出的系统框图。其中，时钟分频模块负责产生像素时钟，

VGA驱动模块产生行场同步信号及像素点的纵横坐标，VGA显示模块输出图像数据。

图 20.4.1 VGA方块移动实验系统框图

我们在屏幕上显示彩条和方块时，只需要将屏幕上不同的区域分别使用不同的颜色填充即

可。然而在显示字符或其他复杂图案时，同一个区域内不同位置的像素点颜色也可能不同，因

此我们需要在VGA显示模块中指定字符显示区域中各个像素点的颜色值。

字符（包括汉字、字母和符号等）的本质都是点阵，在VGA屏幕上体现为字符显示区域内

像素点的集合。字符的大小决定了字符显示区域内像素点的数目，而字符的样式（字体、颜色

等）则决定了各像素点的颜色值。因此，在显示字符之前，我们需要先指定字符的大小、样式，

然后获取该字符的点阵，这个过程我们称之为“提取字模”，或简称“取模”。

我们一般使用0和1的组合来描述字符的点阵排列：点阵中每个像素点用一位（1 bit）数

据来表示，其中用于表征字符的像素点用数字1来表示，其他的像素点作为背景用数字0来表示，

如图 20.4.2所示。采用这种方式描述的字符是不含有颜色特征的，只能区分点阵中的字符和

背景。

图 20.4.2 汉字“正”及其点阵描述

字模的提取可通过字符取模软件来实现，在这里我们使用取模软件“PCtoLCD2002”来获

取汉字“正点原子”的字模。首先在开发板所随附的资料中“6_软件资料/1_软件/PCtoLCD2002

完美版”目录下找到“PCtoLCD2002”并双击打开。如下图所示：

图 20.4.3 取模软件PCtoLCD2002

打开之后会发现软件中的字体、字宽和字高都是无法设置的，这个时候点击菜单栏的“模

式”，选择“字符模式”，如下图所示。

图 20.4.4 切换到字符模式

切换到字符模式后，就可以设置字体、字宽和字高了。字宽和字高的值越高，显示在LCD

屏上的字符就越大，但是代码也需要做相应的修改。这里将字体选择默认的“宋体”，字宽和

字高设置成“32”，然后在下方文本框中输入汉字“正点原子”，如下图所示：

图 20.4.5 取模软件PCtoLCD2002

在上图取模软件中设置字体为“宋体”，字宽和字高均为“16”，然后在下方文本框中输

入汉字“正点原子”。由于PCtoLCD2002会给每个字符生成一个独立的字模，如果此时点击文

本框右侧的“生成字模”按钮，我们将会得到四个16*16的字模。然而为了方便在VGA上显示，

我们将四个汉字看作一个整体，从而获得一个字宽为64，字高为16的“大字模”。为了达到这

个目的，我们首先将图 20.4.5中四个汉字的点阵保存为.BMP格式的图片。在菜单栏中点击“文

件”并选择“另存为”，在保存界面中指定文件存储路径，并选择保存类型为“BMP图像文件”，

然后输入文件名“正点原子_bmp”，最后点击“保存”。

图 20.4.6 BMP格式图片保存界面

我们在“画图”中打开刚刚保存的BMP格式的图片如下所示：

图 20.4.7 保存的BMP格式图片

接下来我们将取模软件PCtoLCD2002切换至图形模式，在菜单栏中点击“模式”，然后选

择“图形模式”。

图 20.4.8 切换显示模式

然后在菜单栏中点击“文件”并选择“打开”，指定图 20.4.6中存放BMP格式图片的路径

并打开图片“正点原子_bmp”，图片打开后如下所示。

图 20.4.9 PCtoLCD2002图形模式

请大家注意比较图 20.4.9与图 20.4.5的差异，在上图中，四个汉字“正点原子”被看作

一个整体，而不再是四个独立的字符。实际上，这四个汉字也确实是作为一个整体以BMP图片

的形式导入到取模软件中的。

在生成字模之前，我们需要先设置字模的格式。在菜单栏中点击“选项”，并在弹出的配

置界面中按照下图进行配置，配置完成后点击确定。

图 20.4.10 字模格式配置界面

在配置界面中，当鼠标悬浮在各配置选项上时，软件会自动提示当前配置的含义。需要注意的是图 20.4.10左下角“每行显示数据”是以字节（Byte）为单位的，而一个字节的数据为

8个bit，即可以表示一行点阵中的8个像素点。由于图 20.4.9中的点阵每行为64个像素点，所

以需要8个Byte的数据来表示一行，因此将“每行显示数据—点阵”处设置为8。

配置字模选项完成后，点击“生成字模”，即可得到汉字“正点原子”所对应的点阵数据，

如下图所示：

图 20.4.11 生成字模

最后点击保存字模，可将生成的点阵数据保存在txt格式的文本文档中，如图 20.4.12所

示。数据以十六进制显示，每行有8个Byte，对应每行四个汉字共64个像素点；共有16行，对

应每个汉字的高度为16。

图 20.4.12 “正点原子”字模

到这里提取字模的过程已经完成了，接下来我们需要在VGA显示模块中将获取的点阵数据

映射到屏幕中心16*64个的像素点的字符显示区域，从而实现字符的显示。

程序中各模块端口及信号连接如图 20.4.13所示：

图 20.4.13 顶层模块原理图

图 20.4.13中的顶层模块（vga_blockmove）、时钟分频模块（vga_pll）以及VGA驱动模

块（vga_driver）均与“VGA彩条显示实验”完全相同，只对VGA显示模块（vga_display）作

了修改。因此，这里我们重点讲解VGA显示模块，其他部分大家可以参考“VGA彩条显示实验”。

VGA显示模块的代码如下：

1 module vga_display(

2 input vga_clk, //VGA驱动时钟

3 input sys_rst_n, //复位信号

4

5 input [ 9:0] pixel_xpos, //像素点横坐标

6 input [ 9:0] pixel_ypos, //像素点纵坐标

7 output reg [15:0] pixel_data //像素点数据,

8 );

9

10 //parameter define

11 parameter H_DISP = 10'd640; //分辨率——行

12 parameter V_DISP = 10'd480; //分辨率——列

13

14 localparam POS_X = 10'd288; //字符区域起始点横坐标

15 localparam POS_Y = 10'd232; //字符区域起始点纵坐标

16 localparam WIDTH = 10'd64; //字符区域宽度

17 localparam HEIGHT = 10'd16; //字符区域高度

18 localparam RED = 16'b11111_000000_00000; //字符颜色

19 localparam BLUE = 16'b00000_000000_11111; //字符区域背景色

20 localparam BLACK = 16'b00000_000000_00000; //屏幕背景色

21

22 //reg define

23 reg [63:0] char[15:0]; //二维字符数组

24

25 //wire define

26 wire [ 9:0] x_cnt;

27 wire [ 9:0] y_cnt;

28

29 //*****************************************************

30 //** main code

31 //*****************************************************

32 assign x_cnt = pixel_xpos - POS_X; //像素点相对于字符区域起始点水平坐标

33 assign y_cnt = pixel_ypos - POS_Y; //像素点相对于字符区域起始点竖直坐标

34

35 //给字符数组赋值，显示汉字“正点原子”，汉字大小为16*16

36 always @(posedge vga_clk) begin

37 char[0] <= 64'h0000020000000000;

38 char[1] <= 64'h7FFC02003FFE7FF8;

39 char[2] <= 64'h0100020020800010;

40 char[3] <= 64'h010003FC21000020;

41 char[4] <= 64'h0100020027F00040;

42 char[5] <= 64'h0100020024100180;

43 char[6] <= 64'h11003FF024100100;

44 char[7] <= 64'h11F8201027F0FFFE;

45 char[8] <= 64'h1100201024100100;

46 char[9] <= 64'h1100201024100100;

47 char[10] <= 64'h11003FF027F00100;

48 char[11] <= 64'h1100000020800100;

49 char[12] <= 64'h1100248824900100;

50 char[13] <= 64'h1100224448880100;

51 char[14] <= 64'hFFFE424452840500;

52 char[15] <= 64'h0000800481000200;

53 end

54

55 //给不同的区域绘制不同的颜色

56 always @(posedge vga_clk or negedge sys_rst_n) begin

57 if (!sys_rst_n)

58 pixel_data <= BLACK;

59 else begin

60 if((pixel_xpos >= POS_X) && (pixel_xpos < POS_X + WIDTH)

61 && (pixel_ypos >= POS_Y) && (pixel_ypos < POS_Y + HEIGHT)) begin

62 if(char[y_cnt][10'd63 - x_cnt])

63 pixel_data <= RED; //绘制字符为红色

64 else

65 pixel_data <= BLUE; //绘制字符区域背景为蓝色

66 end

67 else

68 pixel_data <= BLACK; //绘制屏幕背景为黑色

69 end

70 end

71

72 endmodule

代码中14至20行声明了一系列的变量，方便大家修改字符大小、颜色、以及字符在屏幕上

显示的位置等，其中字符显示的位置由字符显示区域左上角的纵横坐标来指定。

程序的第23行定义了一个大小为16*64 bit的二维数组char，用于存储对汉字“正点原子”

取模得到的点阵数据。二维数组char共16行，每一行有64位数据，在程序的第35至53行完成了

对该二维数组的赋值。赋值后数组中每一行数据从高位到低位分别对应点阵中该行从左向右的

每一个像素点。

程序第55至70行完成了字符的绘制。当字符显示区域的尺寸（WIDTH、 HEIGHT）已知时，

根据左上角的纵横坐标，我们就可以在屏幕上确定字符的显示区域，如60、61行所示。程序第

62行根据字符显示区域中像素点相对于起始点（左上角）的距离，将屏幕上字符显示区域内的

像素点与字符数组char中的点阵数据一一映射。当点阵数据为1时，将像素点颜色赋值为红色，

用来显示字符；当点阵数据为0时，将像素点颜色赋值为蓝色，用来作为字符显示区域的背景。

屏幕上除字符显示区域之外的其他区域内的像素点均赋值为黑色。

图 20.4.14为VGA显示模块显示汉字“正点原子”第7行时SignalTap抓取的波形图。对照

取模得到的点阵数据第7行（11003FF024100100）可以看出，当点阵数据为0时，像素点被赋值

为蓝色（001F）；当点阵数据为1时，像素点被赋值为红色（F800）。各区域中的像素点能够

被赋以正确的颜色值。

图 20.4.14 SignalTap波形图

下载验证

VGA字符显示实验的工程位于vga_char文件夹中，请大家参考VGA彩条显示实验中的下载验

证方法，将vga_char/par/output_files目录下的“vga_char.sof”文件下载至开发板。下载

完成后在VGA显示器上观察显示的汉字如图 20.5.1所示，说明VGA字符显示程序下载验证成功。

图 20.5.1 VGA字符显示效果图