D3D11教程八之FontEngine(字体实现)

这个教程其实的大体实现方法是建立在D3D教程七之2D Rendering这个教程的实现思想之上的,

先看看大体的架构:

第一,这里就说说TexClass,FontClass,FontShaderClass,

在说之前先看点好东西,就是符号纹理图,和对于符号的文字查找表

符号纹理图:

对应的符号纹理查找表:

32   0.0        0.0         033 ! 0.0        0.000976563 134 " 0.00195313 0.00488281  335 # 0.00585938 0.0136719   836 $ 0.0146484  0.0195313   537 % 0.0205078  0.0302734   1038 & 0.03125    0.0390625   839 ' 0.0400391  0.0410156   140 ( 0.0419922  0.0449219   341 ) 0.0458984  0.0488281   342 * 0.0498047  0.0546875   543 + 0.0556641  0.0625      744 , 0.0634766  0.0644531   145 - 0.0654297  0.0683594   346 . 0.0693359  0.0703125   147 / 0.0712891  0.0751953   448 0 0.0761719  0.0820313   649 1 0.0830078  0.0859375   350 2 0.0869141  0.0927734   651 3 0.09375    0.0996094   652 4 0.100586   0.106445    653 5 0.107422   0.113281    654 6 0.114258   0.120117    655 7 0.121094   0.126953    656 8 0.12793    0.133789    657 9 0.134766   0.140625    658 : 0.141602   0.142578    159 ; 0.143555   0.144531    160 < 0.145508   0.151367    661 = 0.152344   0.15918     762 > 0.160156   0.166016    663 ? 0.166992   0.171875    564 @ 0.172852   0.18457     1265 A 0.185547   0.194336    966 B 0.195313   0.202148    767 C 0.203125   0.209961    768 D 0.210938   0.217773    769 E 0.21875    0.225586    770 F 0.226563   0.232422    671 G 0.233398   0.241211    872 H 0.242188   0.249023    773 I 0.25       0.250977    174 J 0.251953   0.256836    575 K 0.257813   0.265625    876 L 0.266602   0.272461    677 M 0.273438   0.282227    978 N 0.283203   0.290039    779 O 0.291016   0.298828    880 P 0.299805   0.306641    781 Q 0.307617   0.31543     882 R 0.316406   0.323242    783 S 0.324219   0.331055    784 T 0.332031   0.338867    785 U 0.339844   0.34668     786 V 0.347656   0.356445    987 W 0.357422   0.370117    1388 X 0.371094   0.37793     789 Y 0.378906   0.385742    790 Z 0.386719   0.393555    791 [ 0.394531   0.396484    292 \ 0.397461   0.401367    493 ] 0.402344   0.404297    294 ^ 0.405273   0.410156    595 _ 0.411133   0.417969    796 ` 0.418945   0.420898    297 a 0.421875   0.426758    598 b 0.427734   0.432617    599 c 0.433594   0.438477    5100 d 0.439453  0.444336    5101 e 0.445313  0.450195    5102 f 0.451172  0.455078    4103 g 0.456055  0.460938    5104 h 0.461914  0.466797    5105 i 0.467773  0.46875     1106 j 0.469727  0.472656    3107 k 0.473633  0.478516    5108 l 0.479492  0.480469    1109 m 0.481445  0.490234    9110 n 0.491211  0.496094    5111 o 0.49707   0.501953    5112 p 0.50293   0.507813    5113 q 0.508789  0.513672    5114 r 0.514648  0.517578    3115 s 0.518555  0.523438    5116 t 0.524414  0.527344    3117 u 0.52832   0.533203    5118 v 0.53418   0.539063    5119 w 0.540039  0.548828    9120 x 0.549805  0.554688    5121 y 0.555664  0.560547    5122 z 0.561523  0.566406    5123 { 0.567383  0.570313    3124 | 0.571289  0.572266    1125 } 0.573242  0.576172    3126 ~ 0.577148  0.583984    7

查找表的每一行为第一个为相应的符号ASCII码,第二个为对应的符号,第三个和第四个为左纹理和右纹理（只需在符号的左右边界纹理就行，后面剔除黑色像素），第五个为符号大小

FontClass有两个作用:

第一是：加载符号纹理图(这个我不细说了，前面教程有)

第二是:构建纹理查找表

struct Font{float left, right;int size;};

Font* mFont;//字体结构数组

        

bool FontClass::LoadFontData(string FontFileName){//创建字体数组，存放字体数据,要读取的文件有95个mFont = new Font[95];if (!mFont){return false;}ifstream in(FontFileName);string line, word;for (int i = 0; i < 95; ++i){getline(in, line);istringstream record(line);record >> word;record >> word;//可直接移位,而无需进行字符串到其他类型的转换在赋值record >> mFont[i].left;record >> mFont[i].right;record >> mFont[i].size;}return true;}

TextClass 包含FontClass指针和FontShader指针,以及句子结构体

//句子类型,type表示结构体struct SentenceType{ID3D11Buffer* vertexBuffer;ID3D11Buffer* indexBuffer;int vertexCount;int indexCount;int maxLength;float red, blue, green;};//在本个教程中使用两个句子SentenceType* mSentence1;SentenceType* mSentence2;

FontClass对象建立查找表通过FontClass的接口建立起每个字符串的SentenceType的顶点缓存,

void FontClass::BuildVertexArray(void* vertexs, string sentence, float drawX, float drawY){VertexType* VertexPtr;//转换指针VertexPtr = (VertexType*)vertexs;//获取在句子中字符的数量int numLetters =(int)sentence.size();//初始化索引int index = 0;//读取句子的每个字符，识别出读出的字符在mFont的位置以及其属性for (int i = 0; i < numLetters; ++i){//字符在mFont表的位置int LetterPos = ((int)sentence[i]) - 32;//如果字符是空格，往右移动位置三个像素if (LetterPos == 0){drawX += 3.0f;}else{//构成该字符第一个三角形VertexPtr[index].pos = XMFLOAT3(drawX, drawY, 0.0f); //左上角VertexPtr[index].tex = XMFLOAT2(mFont[LetterPos].left, 0.0f);++index;VertexPtr[index].pos = XMFLOAT3((drawX + mFont[LetterPos].size), (drawY - 16.0f), 0.0f); //右下角VertexPtr[index].tex = XMFLOAT2(mFont[LetterPos].right, 1.0f);++index;VertexPtr[index].pos = XMFLOAT3(drawX, (drawY - 16.0f), 0.0f);  //左下角VertexPtr[index].tex = XMFLOAT2(mFont[LetterPos].left, 1.0f);++index;//构成该字符的第二个三角形VertexPtr[index].pos = XMFLOAT3(drawX, drawY, 0.0f); //左上角VertexPtr[index].tex = XMFLOAT2(mFont[LetterPos].left, 0.0f);++index;VertexPtr[index].pos = XMFLOAT3((drawX + mFont[LetterPos].size), drawY , 0.0f); //右上角VertexPtr[index].tex = XMFLOAT2(mFont[LetterPos].right, 0.0f);++index;VertexPtr[index].pos = XMFLOAT3((drawX+ mFont[LetterPos].size), drawY - 16.0f, 0.0f);  //右下角VertexPtr[index].tex = XMFLOAT2(mFont[LetterPos].right, 1.0f);++index;//更新句子新的字符的新开始的位置drawX +=(mFont[LetterPos].size + 1.0f);}}}

最终构建的Sentence1和Stentence2对象的顶点缓存进行设置，用FontShaderClass建立并设置VertexShader,PixelShader进行绘制,注意常量缓存

struct CBPixelColor{XMFLOAT4 PixelColor;};

这个常量缓存的值来源与Sentence结构体的 float red, blue, green;

第二，说说为什么关闭Zbuffer，这是2D Rendering教程忘记说的,关闭ZBuffer，因为先进行StenilTest,在进行ZTest,如果ZBuffer关闭，并且stencilFun=D3D11_COMPARISON_ALWAYS即StencilTest总能成功通过,此时不存在ZTest，则绘制的字体（2D Render）一定能覆盖backbuffer的相应位置的像素,即一定能绘制成功.

第三点,为什么开启alpha混合来绘制字体,这点得结合PixelShader代码来说了,先看看PixelShader代码

float4 PS(VertexOut outa) : SV_Target{float4 color;    //对文字纹理进行采样,有一个大张的DDS纹理图,集合了各种符号纹理在其上面    color = ShaderTexture.Sample(SampleType, outa.Tex);//如果在纹理上的颜色是黑色的,则像素是透明的 r=0,g=0,b=0if (color.r == 0.0f){color.a = 0.0f;}else{color.rgb = PixelColor.rgb;color.a = 1.0f;}return color;}

首先符号纹理图(Font.dds)上只存在两种颜色,即黑色(0.0f,0.0f,0.0f)和白色(1.0f,1.0f,1.0f)，白色为真正的字体部分

对符号纹理(Font.dds)进行采样时 如果采样像素的为黑色(r=g=b=0.0f)，此时设置color.a = 0.0f;

在看看 BlendState的设置

blendStateDescription.RenderTarget[0].SrcBlend = D3D11_BLEND_ONE;
blendStateDescription.RenderTarget[0].DestBlend = D3D11_BLEND_INV_SRC_ALPHA;
blendStateDescription.RenderTarget[0].BlendOp = D3D11_BLEND_OP_ADD;

此时由于目标像素颜色(背景的颜色)的混合因子为源像素的alpha的逆反值即(1-Alpha源),源像素混合因子为1.0f

1,.0f*(0.0f,0.0f,0.0f)*(1-0.0f)+(r目标，g目标，b目标)=(r目标，g目标，b目标)

对符号纹理(Font.dds)进行采样时 如果采样像素的为白色(r=g=b=0.0f)，此时设置color.a = 1.0f;

1,.0f*(PixelColor.r,PixelColor.g,PixelColor.b)+(1.0f-1.0f)*(r目标，g目标，b目标)=(PixelColor.r,PixelColor.g,PixelColor.b);

这样就显示出特殊颜色的字体了

最后贴出程序运行效果图:

在看看关闭混合模式下运行的图，背景色更改下(不为黑色)

打开混合模式,程序运行得到

这里可以看出混合模式的作用就是:剔除纹理图中黑色的像素，再把白色部分变色打印到屏幕上

程序源码链接:

点击打开链接