C#服务端的微信小游戏——多人在线角色扮演（十二）

对于游戏而言，界面不是软件功能的出口，而是用户需求的入口，所以，游戏界面的设计思路应该是面向界面的设计UOD(UI Oriented Design)
——茂叔

终于，我们要开始做界面了。作为一个程序猿，我对美术一窍不通，所以，别嫌丑，以下内容更多的是跟大家探讨（其实代码也是）。

技术人员包括我本人，最容易犯的错误就是，以为界面的功能的出口，即我有什么功能就提供什么界面给用户。这是典型的技术本位主义。大家还记得最开始的触摸屏移动终端么？生搬硬套的提供滚动条、超链接、双击启动等PC终端的概念，使得大多数触摸屏终端不配个手写笔都没法用。伟大的史蒂夫乔布斯大胆抛弃了这些技术本位谬误，针对用户使用场景的具体细节，为苹果手机设计了全套适合手指触摸的点击、长按、滑动、拖拽等操作模式，使得现在的触摸屏移动终端谁要是配了触摸笔谁就是沙雕……

我好崇拜他的。

界面思路

作为一款游戏，最重要是用户的使用，既然是一款探索和打怪的游戏，一款微信手机用户的游戏，我的出发点是，尽量不要让用户转动手机，尽量单手操作，这样，在地铁上一手扶着栏杆，一手就可以享受游戏。

因此，我决定：

1. 竖屏，这才是手机。
2. 不要输入任何文字，单手输入，特别是汉字，是非常不好的体验。

另外，基于RogueLike的定位，界面要尽量简单，虽然不至于回归ASCII时代，但褪去华丽外在，提供丰富内涵的游戏乐趣，这才是RogueLike的界面主轴。

所以，我们采用像素风格的界面，以黑白为主搭配尽量少的其他颜色。

由于手机屏幕的差异，以及微信小游戏无法去除的系统菜单按钮影响，可用的游戏界面区域如下（以iPhone 6 Plus为例）：

这个区域的横纵比为13::21，但是考虑到其他手机的比例会不一样，我们采用5:8的比例来设计界面，再将顶部和底部可能的空白部分用图案填充，这样不同手机虽然有所差异，但不至于影响游戏体验。

场景部分显示一个1111的图片元素矩阵，没有图片元素为1616个像素，加上两边的边框什么的，所以横向总像素位188，纵向为300，那么我们整个界面的像素就是188*300px。

好的，就在这个范围内设计我们的UI了。然后在不同终端渲染的时候，按终端宽度进行等比例拉伸，最后用一些图案填充未覆盖的部分就可以了。

界面制作

用Photoshop新建一个188300px的文件，然后规划出三个主要的功能区。
场景区域为176176，正好可以渲染我们的场景。
玩家信息区显示血、体力和饥饿值及其他相关内容。
控制区域提供操作控制及其他相关内容。

我们先从玩家信息区域开始，打开Photoshop的标尺。

选择铅笔工具：

把笔触设置为1：

然后按ctrl+alt++把图像放大放大放大。

然后就用铅笔点啊点啊，就成这样了：

别说丑，再次警告你们，我是程序猿，不是美工！
然后同样的方式把控制区弄出来，最后的成品是这样滴：

好了，暂时做成这样吧，已经汗流浃背了，UI真是个绣花的活，太不适合我了。

文字渲染

有了UI，还应该有字体不是。微信小游戏使用的是系统自带的字体，一般手机自带的字体都是Truetype字体，好看是好看，但是我们的界面太小，如果把字号缩小到12px以下放进界面，最后再随界面拉伸到全屏幕，就非常的难看了。

字体整个模糊了……

所以，我们需要清晰的点阵字库来完成字体渲染。
12pt的汉字点阵字库网上到处都有，是开发led显示应用的常用资源，自己去下载一个吧。

点阵字库的数据是按照汉字的区位码来排列的，我们需要一张检索表，将需要渲染的汉字内码与区位码对应起来，然后根据区位码获得汉字的点阵信息，最后按点阵信息渲染出来就可以了。

在根路径下添加网上下载的12pt点阵字库，命名为12.bin。
然后添加一个新的文件han.js,前方高能，因为有区位码表，所以很长很长：
han.js

exports.install = () => {
   
   
  GameGlobal.FontData = new Uint8Array()
  GameGlobal.drawText = (ctx, str, sx, sy, color = "white") => {
   
   
    ctx.fillStyle = color
    var cx = 0
    for (var i = 0; i < str.length; i++) {
   
   
      var charCode = str.charCodeAt(i)
      var qu = 0
      var wei = 0
      if (charCode >= 33 && charCode <= 127) {
   
   
        qu = 2
        wei = charCode - 33
      }else {
   
   
        var unicode = "[" + charCode + "]"
        var pos = CodeMap.indexOf(unicode);
        var gbkcode = CodeMap.substring(pos + unicode.length, pos + unicode.length + 4)
        qu = parseInt(gbkcode.substring(0, 2), 16) - 161
        wei = parseInt(gbkcode.substring(2, 4), 16) - 161
      }

      var idx = (qu * 94 + wei) * 24
      for (var off = 0; off < 24; off += 2) {
   
   
        var x = 0
        var y = off / 2
        var a = FontData[idx + off]
        while (a != 0) {
   
   
          var c = a & 128
          if (c != 0) {
   
   
            ctx.fillRect(sx + x + cx, sy + y, 1, 1)
          }
          a = (a << 1)
          x++
        }
        x = 8
        a = FontData[idx + off + 1]
        while (a != 0 && x < 12) {
   
   
          var c = a & 128
          if (c != 0) {
   
   
            ctx.fillRect(sx + x + cx, sy + y, 1, 1)
          }
          a = (a << 1)
          x++
        }
      }
      cx += 13
    }
  }

  GameGlobal.CodeMap = "[12288]A1A1[12289]A1A2[12290]A1A3[183]A1A4[713]A1A5[711]A1A6[168]A1A7[12291]A1A8[12293]A1A9[8212]A1AA[65374]A1AB[8214]A1AC[8230]A1AD[8216]A1AE[8217]A1AF[8220]A1B0[8221]A1B1[12308]A1B2[12309]A1B3[12296]A1B4[12297]A1B5[12298]A1B6[12299]A1B7[12300]A1B8[12301]A1B9[12302]A1BA[12303]A1BB[12310]A1BC[12311]A1BD[12304]A1BE[12305]A1BF[177]A1C0[215]A1C1[247]A1C2[8758]A1C3[8743]A1C4[8744]A1C5[8721]A1C6[8719]A1C7[8746]A1C8[8745]A1C9[8712]A1CA[8759]A1CB[8730]A1CC[8869]A1CD[8741]A1CE[8736]A1CF[8978]A1D0[8857]A1D1[8747]A1D2[8750]A1D3[8801]A1D4[8780]A1D5[8776]A1D6[8765]A1D7[8733]A1D8[8800]A1D9[8814]A1DA[8815]A1DB[8804]A1DC[8805]A1DD[8734]A1DE[8757]A1DF[8756]A1E0[9794]A1E1[9792]A1E2[176]A1E3[8242]A1E4[8243]A1E5[8451]A1E6[65284]A1E7[164]A1E8[65504]A1E9[65505]A1EA[8240]A1EB[167]A1EC[8470]A1ED[9734]A1EE[9733]A1EF[9675]A1F0[9679]A1F1[9678]A1F2[9671]A1F3[9670]A1F4[9633]A1F5[9632]A1F6[9651]A1F7[9650]A1F8[8251]A1F9[8594]A1FA[8592]A1FB[8593]A1FC[8595]A1FD[12307]A1FE[63]A1FF[8560]A2A1[8561]A2A2[8562]A2A3[8563]A2A4[8564]A2A5[8565]A2A6[8566]A2A7[8567]A2A8[8568]A2A9[8569]A2AA[59238]A2AB[59239]A2AC[59240]A2AD[59241]A2AE[59242]A2AF[59243]A2B0[9352]A2B1[9353]A2B2[9354]A2B3[9355]A2B4[9356]A2B5[9357]A2B6[9358]A2B7[9359]A2B8[9360]A2B9[9361]A2BA[9362]A2BB[9363]A2BC[9364]A2BD[9365]A2BE[9366]A2BF[9367]A2C0[9368]A2C1[9369]A2C2[9370]A2C3[9371]A2C4[9332]A2C5[9333]A2C6[9334]A2C7[9335]A2C8[9336]A2C9[9337]A2CA[9338]A2CB[9339]A2CC[9340]A2CD[9341]A2CE[9342]A2CF[9343]A2D0[9344]A2D1[9345]A2D2[9346]A2D3[9347]A2D4[9348]A2D5[9349]A2D6[9350]A2D7[9351]A2D8[9312]A2D9[9313]A2DA[9314]A2DB[9315]A2DC[9316]A2DD[9317]A2DE[9318]A2DF[9319]A2E0[9320]A2E1[9321]A2E2[59244]A2E3[59245]A2E4[12832]A2E5[12833]A2E6[12834]A2E7[12835]A2E8[12836]A2E9[12837]A2EA[12838]A2EB[12839]A2EC[12840]A2ED[12841]A2EE[59246]A2EF[59247]A2F0[8544]A2F1[8545]A2F2[8546]A2F3[8547]A2F4[8548]A2F5[8549]A2F6[8550]A2F7[8551]A2F8[8552]A2F9[8553]A2FA[8554]A2FB[8555]A2FC[59248]A2FD[59249]A2FE[63]A2FF[65281]A3A1[65282]A3A2[65283]A3A3[65509]A3A4[65285]A3A5[65286]A3A6[65287]A3A7[65288]A3A8[65289]A3A9[65290]A3AA[65291]A3AB[65292]A3AC[65293]A3AD[65294]A3AE[65295]A3AF[65296]A3B0[65297]A3B1[65298]A3B2[65299]A3B3[65300]A3B4[65301]A3B5[65302]A3B6[65303]A3B7[65304]A3B8[65305]A3B9[65306]A3BA[65307]A3BB[65308]A3BC[65309]A3BD[65310]A3BE[65311]A3BF[65312]A3C0[65313]A3C1[65314]A3C2[65315]A3C3[65316]A3C4[65317]A3C5[65318]A3C6[65319]A3C7[65320]A3C8[65321]A3C9[65322]A3CA[65323]A3CB[65324]A3CC[65325]A3CD[65326]A3CE[65327]A3CF[65328]A3D0[65329]A3D1[65330]A3D2[65331]A3D3[65332]A3D4[65333]A3D5[65334]A3D6[65335]A3D7[65336]A3D8[65337]A3D9[65338]A3DA[65339]A3DB[65340]A3DC[65341]A3DD[65342]A3DE[65343]A3DF[65344]A3E0[65345]A3E1[65346]A3E2[65347]A3E3[65348]A3E4[65349]A3E5[65350]A3E6[65351]A3E7[65352]A3E8[65353]A3E9[65354]A3EA[65355]A3EB[65356]A3EC[65357]A3ED[65358]A3EE[65359]A3EF[65360]A3F0[65361]A3F1[65362]A3F2[65363]A3F3[65364]A3F4[65365]A3F5[65366]A3F6[65367]A3F7[65368]A3F8[65369]A3F9[65370]A3FA[65371]A3FB[65372]A3FC[65373]A3FD[65507]A3FE[63]A3FF[12353]A4A1[12354]A4A2[12355]A4A3[12356]A4A4[12357]A4A5[12358]A4A6[12359]A4A7[12360]A4A8[12361]A4A9[12362]A4AA[12363]A4AB[12364]A4AC[12365]A4AD[12366]A4AE[12367]A4AF[12368]A4B0[12369]A4B1[12370]A4B2[12371]A4B3[12372]A4B4[12373]A4B5[12374]A4B6[12375]A4B7[12376]A4B8[12377]A4B9[12378]A4BA[12379]A4BB[12380]A4BC[12381]A4BD[12382]A4BE[12383]A4BF[12384]A4C0[12385]A4C1[12386]A4C2[12387]A4C3[12388]A4C4[12389]A4C5[12390]A4C6[12391]A4C7[12392]A4C8[12393]A4C9[12394]A4CA[12395]A4CB[12396]A4CC[12397]A4CD[12398]A4CE[12399]A4CF[12400]A4D0[12401]A4D1[12402]A4D2[12403]A4D3[12404]A4D4[12405]A4D5[12406]A4D6[12407]A4D7[12408]A4D8[12409]A4D9[12410]A4DA[12411]A4DB[12412]A4DC[12413]A4DD[12414]A4DE[12415]A4DF[12416]A4E0[12417]A4E1[12418]A4E2[12419]A4E3[12420]A4E4[12421]A4E5[12422]A4E6[12423]A4E7[12424]A4E8[12425]A4E9[12426]A4EA[12427]A4EB[12428]A4EC[12429]A4ED[12430]A4EE[12431]A4EF[12432]A4F0[12433]A4F1[12434]A4F2[12435]A4F3[59250]A4F4[59251]A4F5[59252]A4F6[59253]A4F7[59254]A4F8[59255]A4F9[59256]A4FA[59257]A4FB[59258]A4FC[59259]A4FD[59260]A4FE[63]A4FF[12449]A5A1[12450]A5A2[12451]A5A3[12452]A5A4[12453]A5A5[12454]A5A6[12455]A5A7[12456]A5A8[12457]A5A9[12458]A5AA[12459]A5AB[12460]A5AC[12461]A5AD[12462]A5AE[12463]A5AF[12464]A5B0[12465]A5B1[12466]A5B2[12467]A5B3[12468]A5B4[12469]A5B5[12470]A5B6[12471]A5B7[12472]A5B8[12473]A5B9[12474]A5BA[12475]A5BB[12476]A5BC[12477]A5BD[12478]A5BE[12479]A5BF[12480]A5C0[12481]A5C1[12482]A5C2[12483]A5C3[12484]A5C4[12485]A5C5[12486]A5C6[12487]A5C7[12488]A5C8[12489]A5C9[12490]A5CA[12491]A5CB[12492]A5CC[12493]A5CD[12494]A5CE[12495]A5CF[12496]A5D0[12497]A5D1[12498]A5D2[12499]A5D3[12500]A5D4[12501]A5D5[12502]A5D6[12503]A5D7[12504]A5D8[12505]A5D9[12506]A5DA[12507]A5DB[12508]A5DC[12509]A5DD[12510]A5DE[12511]A5DF[12512]A5E0[12513]A5E1[12514]A5E2[12515]A5E3[12516]A5E4[12517]A5E5[12518]A5E6[12519]A5E7[12520]A5E8[12521]A5E9[12522]A5EA[12523]A5EB[12524]A5EC[12525]A5ED[12526]A5EE[12527]A5EF[12528]A5F0[12529]A5F1[12530]A5F2[12531]A5F3[12532]A5F4[12533]A5F5[12534]A5F6[59261]A5F7[59262]A5F8[59263]A5F9[59264]A5FA[59265]A5FB[59266]A5FC[59267]A5FD[59268]A5FE[63]A5FF[913]A6A1[914]A6A2[915]A6A3[916]A6A4[917]A6A5[918]A6A6[919]A6A7[920]A6A8[921]A6A9[922]A6AA[923]A6AB[924]A6AC[925]A6AD[926]A6AE[927]A6AF[928]A6B0[929]A6B1[931]A6B2[932]A6B3[933]A6B4[934]A6B5[935]A6B6[936]A6B7[937]A6B8[59269]A6B9[59270]A6BA[59271]A6BB[59272]A6BC[59273]A6BD[59274]A6BE[59275]A6BF[59276]A6C0[945]A6C1[946]A6C2[947]A6C3[948]A6C4[949]A6C5[950]A6C6[951]A6C7[952]A6C8[953]A6C9[954]A6CA[955]A6CB[956]A6CC[957]A6CD[958]A6CE[959]A6CF[960]A6D0[961]A6D1[963]A6D2[964]A6D3[965]A6D4[966]A6D5[967]A6D6[968]A6D7[969]A6D8[59277]A6D9[59278]A6DA[59279]A6DB[59280]A6DC[59281]A6DD[59282]A6DE[59283]A6DF[65077]A6E0[65078]A6E1[65081]A6E2[65082]A6E3[65087]A6E4[65088]A6E5[65085]A6E6[65086]A6E7[65089]A6E8[65090]A6E9[65091]A6EA[65092]A6EB[59284]A6EC[59285]A6ED[65083]A6EE[65084]A6EF[65079]A6F0[65080]A6F1[65073]A6F2[59286]A6F3[65075]A6F4[65076]A6F5[59287]A6F6[59288]A6F7[59289]A6F8[59290]A6F9[59291]A6FA[59292]A6FB[59293]A6FC[59294]A6FD[59295]A6FE[63]A6FF[1040]A7A1[1041]A7A2[1042]A7A3[1043]A7A4[1044]A7A5[1045]A7A6[1025]A7A7[1046]A7A8[1047]A7A9[1048]A7AA[1049]A7AB[1050]A7AC[1051]A7AD[1052]A7AE[1053]A7AF[1054]A7B0[1055]A7B1[1056]A7B2[1057]A7B3[1058]A7B4[1059]A7B5[1060]A7B6[1061]A7B7[1062]A7B8[1063]A7B9[1064]A7BA[1065]A7BB[1066]A7BC[1067]A7BD[1068]A7BE[1069]A7BF[1070]A7C0[1071]A7C1[59296]A7C2[59297]A7C3[59298]A7C4[59299]A7C5[59300]A7C6[59301]A7C7[59302]A7C8[59303]A7C9[59304]A7CA[59305]A7CB[59306]A7CC[59307]A7CD[59308]A7CE[59309]A7CF[59310]A7D0[1072]A7D1[1073]A7D2[1074]A7D3[1075]A7D4[1076]A7D5[1077]A7D6[1105]A7D7[1078]A7D8[1079]A7D9[1080]A7DA[1081]A7DB[1082]A7DC[1083]A7DD[1084]A7DE[1085]A7DF[1086]A7E0[1087]A7E1[1088]A7E2[1089]A7E3[1090]A7E4[1091]A7E5[1092]A7E6[1093]A7E7[1094]A7E8[1095]A7E9[1096]A7EA[1097]A7EB[1098]A7EC[1099]A7ED[1100]A7EE[1101]A7EF[1102]A7F0[1103]A7F1[59311]A7F2[59312]A7F3[59313]A7F4[59314]A7F5[59315]A7F6[59316]A7F7[59317]A7F8[59318]A7F9[59319]A7FA[59320]A7FB[59321]A7FC[59322]A7FD[59323]A7FE[63]A7FF[257]A8A1[225]A8A2[462]A8A3[224]A8A4[275]A8A5[233]A8A6[283]A8A7[232]A8A8[299]A8A9[237]A8AA[464]A8AB[236]A8AC[333]A8AD[243]A8AE[466]A8AF[242]A8B0[363]A8B1[250]A8B2[468]A8B3[249]A8B4[470]A8B5[472]A8B6[474]A8B7[476]A8B8[252]A8B9[234]A8BA[593]A8BB[59335]A8BC[324]A8BD[328]A8BE[59336]A8BF[609]A8C0[59337]A8C1[59338]A8C2[59339]A8C3[59340]A8C4[12549]A8C5[12550]A8C6[12551]A8C7[12552]A8C8[12553]A8C9[12554]A8CA[12555]A8CB[12556]A8CC[12557]A8CD[12558]A8CE[12559]A8CF[12560]A8D0[12561]A8D1[12562]A8D2[12563]A8D3[12564]A8D4[12565]A8D5[12566]A8D6[12567]A8D7[12568]A8D8[12569]A8D9[12570]A8DA[12571]A8DB[12572]A8DC[12573]A8DD[12574]A8DE[12575]A8DF[12576]A8E0[12577]A8E1[12578]A8E2[12579]A8E3[12580]A8E4[12581]A8E5[12582]A8E6[12583]A8E7[12584]A8E8[12585]A8E9[59341]A8EA[59342]A8EB[59343]A8EC[59344]A8ED[59345]A8EE[59346]A8EF[59347]A8F0[59348]A8F1[59349]A8F2[59350]A8F3[59351]A8F4[59352]A8F5[59353]A8F6[59354]A8F7[59355]A8F8[59356]A8F9[59357]A8FA[59358]A8FB[59359]A8FC[59360]A8FD[59361]A8FE[63]A8FF[59390]A9A1[59391]A9A2[59392]A9A3[9472]A9A4[9473]A9A5[9474]A9A6[9475]A9A7[9476]A9A8[9477]A9A9[9478]A9AA[9479]A9AB[9480]A9AC[9481]A9AD[9482]A9AE[9483]A9AF[9484]A9B0[9485]A9B1[9486]A9B2[9487]A9B3[9488]A9B4[9489]A9B5[9490]A9B6[9491]A9B7[9492]A9B8[9493]A9B9[9494]A9BA[9495]A9BB[9496]A9BC[9497]A9BD[9498]A9BE[9499]A9BF[9500]A9C0[9501]A9C1[9502]A9C2[9503]A9C3[9504]A9C4[9505]A9C5[9506]A9C6[9507]A9C7[9508]A9C8[9509]A9C9[9510]A9CA[9511]A9CB[9512]A9CC[9513]A9CD[9514]A9CE[9515]A9CF[9516]A9D0[9517]A9D1[9518]A9D2[9519]A9D3[9520]A9D4[9521]A9D5[9522]A9D6[9523]A9D7[9524]A9D8[9525]A9D9[9526]A9DA[9527]A9DB[9528]A9DC[9529]A9DD[9530]A9DE[9531]A9DF[9532]A9E0[9533]A9E1[9534]A9E2[9535]A9E3[9536]A9E4[9537]A9E5[9538]A9E6[9539]A9E7[9540]A9E8[9541]A9E9[9542]A9EA[9543]A9EB[9544]A9EC[9545]A9ED[9546]A9EE[9547]A9EF[59393]A9F0[59394]A9F1[59395]A9F2[59396]A9F3[59397]A9F4[59398]A9F5[59399]A9F6[59400]A9F7[59401]A9F8[59402]A9F9[59403]A9FA[59404]A9FB[59405]A9FC[59406]A9FD[59407]A9FE[63]A9FF[57344]AAA1[57345]AAA2[57346]AAA3[57347]AAA4[57348]AAA5[57349]AAA6[57350]AAA7[57351]AAA8[57352]AAA9[57353]AAAA[57354]AAAB[57355]AAAC[57356]AAAD[57357]AAAE[57358]AAAF[57359]AAB0[57360]AAB1[57361]AAB2[57362]AAB3[57363]AAB4[57364]AAB5[57365]AAB6[57366]AAB7[57367]AAB8[57368]AAB9[57369]AABA[57370]AABB[57371]AABC[57372]AABD[57373]AABE[57374]AABF[57375]AAC0[57376]AAC1[57377]AAC2[57378]AAC3[57379]AAC4[57380]AAC5[57381]AAC6[57382]AAC7[57383]AAC8[57384]AAC9[57385]AACA[57386]AACB[57387]AACC[57388]AACD[57389]AACE[57390]AACF[57391]AAD0[57392]AAD1[57393]AAD2[57394]AAD3[57395]AAD4[57396]AAD5[57397]AAD6[57398]AAD7[57399]AAD8[57400]AAD9[57401]AADA[57402]AADB[57403]AADC[57404]AADD[57405]AADE[57406]AADF[57407]AAE0[57408]AAE1[57409]AAE2[57410]AAE3[57411]AAE4[57412]AAE5[57413]AAE6[57414]AAE7[57415]AAE8[57416]AAE9[57417]AAEA[57418]AAEB[57419]AAEC[57420]AAED[57421]AAEE[57422]AAEF[57423]AAF0[57424]AAF1[57425]AAF2[57426]AAF3[57427]AAF4[57428]AAF5[57429]AAF6[57430]AAF7[57431]AAF8[57432]AAF9[57433]AAFA[57434]AAFB[57435]AAFC[57436]AAFD[57437]AAFE[63]AAFF[57438]ABA1[57439]ABA2[57440]ABA3