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

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

作者:丫丫    浏览次数:192    2021-06-15 15:28:41

相信有开发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

() }
}
}
执行后,果然跟上一回的Text预设字串是不一样的风格,是后来套用的NotoSans-Black字型。

总结
套用自订的字型档案步骤虽然多了一些,不过能选到符合游戏风格的字型让玩家感受到整体的一致性,都算是游戏制作团队的用心。趁这回来练习套用你喜欢的字型吧!

上一篇:[Kotlin写游戏教程五]使用Text处理文字
下一篇:[Kotlin写游戏教程七]制作简单的动画效果