[Kotlin写游戏教程六]KorGE使用Font改变文字风格

相信有开发UI经验的工程师们，当你们把成品拿给设计或是PM同事，还满多第一时间都会反应，"那个字体也太丑了吧！！"之类的话，或是设计师有的会抱怨说，为什么没用我设计图上指定的字型呢!?

工程师也是有点无奈，因为通常第一要务是功能有准确的呈现，UI的呈现优先权总是排在稍微后面，所以直接用系统上预设的字型来Demo呈现才是最快的。但是有时候是因为设计师根本没有提供字型档案(有时候是设计软体里的字型，实际上输出到软体上使用可能都要付费之类的)，那这时候就找要出钱的人讨论拉?!

以上闲聊稍微偏离主题，现在回归正题，如果我们有好看的设计字型何不拿来使用呢？！而且游戏在视觉呈现上是非常重要的课题，虽然笔者现在都用丑丑的自画像来Demo给大家看，但是不表示挑选适合游戏本身主题的美术风格跟字型是不重要的喔，那是因为笔者的技能点不在美术，还是只能用工程师的风格，请多包涵。

KorGE里头也提供了使用自订字型的功能，共有三种类型: BitmpFont、Device fonts、跟TTF fonts。笔者目前也只试出了TTF fonts，所以我们就先试着使用TTF fonts来替换目前的KorGE预设的字型。

下载免费开源字型

https://www.google.com/get/noto/
Google有提供Noto的免费开源字型，所以去找一个你想要的字型，然后解压缩后，可以看到很多的ttf档案，我挑了其中一种NotoSans-Black.ttf的字型来拿测试使用。

读取字型档
先把NotoSans-Black.ttf档案放到专案资料夹的src/commonMain/kotlin/resources/里头。

可以开始动手写Code了，在Splash.kt加上读取字型档的程式。

val ttfFont = TtfFont(resourcesVfs[“NotoSans-Black.ttf”].readAll().openSync())
读取后，因为字型档在KorGE里会变成要画在一张bitmap上才能呈现在画面上，所以接下来的程式会要额外加一些处理。

val textString = “Tap to Start”
val fontSize = 30

val bitmap = NativeImage(width = 200, height = 100).apply {
getContext2d().fillText(textString,
x = 0,
y = fontSize,
font = ttfFont,
fontSize = fontSize.toDouble(),
color = Colors.BLUE)
}
宣告一个textString并给字串值"Tap to Start"，然后字型大小fontSize为30，接着写一个NativeImage的物件，宽=200，高=100，接下来再呼叫getContext2d().fillText这个方法把字串画上，并指定刚刚读取的字型，并指定为蓝色字。

getContext2d().fillText(textString,
x = 0,
y = fontSize,
font = ttfFont,
fontSize = fontSize.toDouble(),
color = Colors.BLUE)
＊注意：依照官网的范例，照理应该是y要设定为0，但是不确定fillText这里的座标起始的是从NativeImage的哪里开始画，设为0时，字串会没办法显示出来，而笔者为了要让字显是出来，试出要将y设定成跟字型大小一样的高度才会出现字串…。(这部分还需要厘清)

显示套用字型档的字串
把已经建立好的字串bitmap物件，放到image物件里头，然后一样设定位置跟onClick的行为。

image(bitmap) {
position((image.scaledWidth) / 2 - (textString.count() * fontSize) / 4, (image.scaledHeight - image.scaledHeight / 4))
onClick {
launchImmediately { sceneContainer.changeTo