[Kotlin写游戏教程九]使用SpriteAnimations-外星人动起来了！

已经连两篇都介绍跟动画特效有关的文章了，但是还不够唷，这一回正要介绍游戏制作也很常用的Sprite Animations。

Sprite Animations
SpriteAnimation物件就是由一连串连续的图片组合而成的，游戏中的角色或是物品会有连续动作想要呈现时，我们就能先画好这些图片影格，一张一张照顺序排好，接着让SpriteAnimaiton帮我们播放出来。而这些一张一张的影格我们会称作Sprite Sheet，如果你手边有这些动画影格，就可以将它合并成一组png档案，提供给KorGE来读档使用。

准备图片
上网搜寻应该都有很多图源，不过想要商用或是公开出来的还是要注意是否需要授权或是付费唷，这边笔者找到一个免费的资源，通常我们还是要在作品里特别感谢他们提供这些宝贵的资源。选这套的原因是单存是因为里头的外星人角色动作很可爱，也有一些地板上的素材跟障碍物素材，很适合拿来做跑酷类型游戏。

转换成Sprite Sheet
我们要先把它先转换成一张Sprite Sheet为green_alien_walk.png，这时可以利用TexturePacker这个工具帮助你转换。

安装好后，将那11张图片拖曳到中间区域

然后右边可以看到Packing区块，Alogrithm选Grid/Strip(因为这样读取每张图片时才不会大小不一样), Max size选1024。

接着再点选上方的Publish sprite sheet按钮。

命名green_alien_walk.png放到专案资料夹的/src/commonMain/kotlin/resources里头

开始写程式
因为外星人走路我们预计会是在GamePlay画面游戏开始时才会出现，所以我们就先打开先前有建立好的GamePlay.kt档案，把读取SpriteSheet跟播放SpriteAnimation的程式写到Container. ScenceMain()里头。

val spriteMap = resourcesVfs[“green_alien_walk.png”].readBitmap()
val alienWalkAnimation = SpriteAnimation(
spriteMap = spriteMap,
spriteWidth = 72,
spriteHeight = 97,
marginTop = 0,
marginLeft = 0,
columns = 11,
rows = 1,
offsetBetweenColumns = 0,
offsetBetweenRows = 0
)
val alien = sprite(alienWalkAnimation)
alien.spriteDisplayTime = 0.1.seconds
alien.playAnimationLooped()
读取档案的方式大家应该都不陌生了，主要是SpriteAnimation要设定的内容有spriteMap，也就是我们做好的外星人Sprite Sheet档案，然后我们要给播放图片的宽度spriteWidth=72跟高度spriteHeight= 97(请看每张的外星人图片档案都是这个大小)，然后有栏位columns=11，列是rows=1。

SpriteAnimation(
spriteMap = spriteMap,
spriteWidth = 72,
spriteHeight = 97,
marginTop = 0,
marginLeft = 0,
columns = 11,
rows = 1,
offsetBetweenColumns = 0,
offsetBetweenRows = 0
)
最后将这SpriteAnimation传给sprite物件，然后播放的频率设为0.1秒，并设成无限制播放。

val alien = sprite(alienWalkAnimation)
alien.spriteDisplayTime = 0.1.seconds
alien.playAnimationLooped()
执行程式后就能看到绿色外星人在原地走动了！

想要让他移动就加上上回学过的tween啰！

while (true) {
alien.tween(alien::x[0.0, 512.0], time = 3000.milliseconds)
delay(1.seconds)
}
果然外星人开始移动啰！！

总结
学到这边应该有觉得越来越好玩了，因为有角色开始活了起来，能开始走动了！之后SpriteAnimation会应用到很多需要动起来的游戏物件上，所以除了绿色外星人之外，其他的外星人也能当作练习的材料，你也开始动手做吧！

上一篇：[Kotlin写游戏教程八]继续学习动画特效
下一篇：[Kotlin写游戏教程十]使用Input输入系统