[Kotlin写游戏教程七]制作简单的动画效果

前面几篇都是在介绍游戏比较静态的应用，这次终于要让游戏里的东西开始动起来了！所以这一回的重点会是介绍大家怎么在KorGE里让你的游戏物件透过程式进行变化。

while (true) + delay
这是官方文件介绍其中一个的简单实现动画效果的方式，就是在一个回圈内实作你要想要的效果。

这时就联想到我们在[Kotlin写游戏教程四]时有学到Image的alpha值变化以及前两回[Kotlin写游戏教程五]跟[Kotlin写游戏教程六]有一个进版提示文字"Tap to Start"，让这个提示文字透过alpha值的变化，达到渐变消失又再次显示的效果，进而更吸引玩家的注意!

记得先找出前一回练习的程式码，然后把套用字型的"Tap to Start"的image物件宣告一个tapString变数，好让在while(true)+delay区块内进行操作。

//…前略… 請回Day06找程式碼。
val tapString = image(bitmap) {
position((image.scaledWidth) / 2 - (textString.count() * fontSize) / 4, (image.scaledHeight - image.scaledHeight / 4))
onClick {
launchImmediately { sceneContainer.changeTo

() }
}
}

launchImmediately {
while (true) {
tapString.alpha -= 0.1
if(tapString.alpha <= 0){
tapString.alpha = 1.0
}
delay(100.milliseconds)
}
}
程式逻辑就是将tapString每100毫秒会减少0.1的alpha值，当小于等于0时又会恢复成alpha值等于1。

addFixedUpdater
另一种实现动画特效的方法是addFixedUpdater，是KorGE的view元件都有这一个method，你可以呼叫时带入要更新的频率，所以我们可以将while(true)+delay的程式进行改写如下:

tapString.addFixedUpdater(100.milliseconds){
tapString.alpha -= 0.1
if(tapString.alpha <= 0){
tapString.alpha = 1.0
}
}
将aplha变化的程式逻辑写到addFixedUpdater内，然后每100毫秒更新频率带入，会得到一样的效果唷！
既然已经学会怎么在addFixedUpdater内实作动画特效了，我们再多学一个将tapString做从上往下的垂直移动的效果，也就是让物件的y座标从0然后移动到目前的显示的位置。

var moveHeight = (image.scaledHeight - image.scaledHeight / 4)

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

() }
}
}

tapString.addFixedUpdater(100.milliseconds){
tapString.alpha -= 0.1
if(tapString.alpha <= 0){
tapString.alpha = 1.0
}
if(tapString.y < moveHeight){
tapString.y += 30
}
}
将要移动到的高度从position的y座标提出来，取名为moveHeight，然后position初始的时候y座标设为0，接下来只要在addFixedUpdater内加一个逻辑判断，当y座标还是小于moveHeight，我们就持续将y座标增加30单位。

addHrUpdater
另一种跟addFixedUpdater很像的是addHrUpdater，根据我的理解是根据萤幕画面更新频率去更新，而addFixedUpdater会是你给个固定频去更新，所以两者实际去实作出来后addHrUpater在做物体移动时会比较顺畅。

总结
学会了这三招后，你就可以任意地对你游戏内的物件要做形变或是位移以及旋转都可以实现了。之后会有其他动画效果的介绍，不过这一回我们就先学会最简单动画实作的方式，赶紧动手玩玩看啰！

上一篇：[Kotlin写游戏教程六]KorGE使用Font改变文字风格
下一篇：[Kotlin写游戏教程八]继续学习动画特效