[Kotlin写游戏教程四]使用Image处理图片

这一篇的教学要教大家怎么在你的场景上放置一些Image(图片)跟对图片做一些变化，所以会介绍到KorGE提供在Day01第一篇一开始就使用过的Image类别。

读取Image图片

image(resourcesVfs[“mylogo.png”].readBitmap())
其实非常简单，只要写下上面那一行，KorGE就会到专案资料夹的resouces/mylogo.png读取档案图片，然后帮你把它加入到场景上。
如果你好奇为什么只要宣告这一行就能帮我显示到场景上，你可以去trace Image.kt的程式，在inline fun Container.image就能看见最后其实他已经帮你在建立image物件时，Image(texture, anchorX, anchorY).addTo(this, callback)已经预设帮你加到他的Parent了，所以我们不用特别再做addChild()来添加View到场景这个动作，。

Image.kt

inline fun Container.image(
texture: Bitmap, anchorX: Double = 0.0, anchorY: Double = 0.0, callback: @ViewDslMarker Image.() -> Unit = {}
): Image = Image(texture, anchorX, anchorY).addTo(this, callback)
调整Image图片大小
因为我放的mylogo.png的实际大小是400x400，在没有进行缩放前，放在500x500的视窗上，当然就是右下边都是黑色的背景，如果是像是SPLASH进版画面，希望都是能全萤幕显示，所以就来进行image的大小调整。

image(resourcesVfs[“mylogo.png”].readBitmap()) {
width = ConfigModule.size.width.toDouble()
height = ConfigModule.size.height.toDouble()
}
执行结果看到图片把黑色部份都填满啰。
调整Image位置
在游戏中的背景或是物品都有可能会进行移动，而且每张图片的起始座标不会一直都从原点(x,y) = (0,0)，所以我们来练习让图片的座标放在不同的位置上。

val image = image(resourcesVfs[“mylogo.png”].readBitmap()) {
width = ConfigModule.size.width.toDouble()
height = ConfigModule.size.height.toDouble()
position(100,100)
}
执行结果可以看到mylogo.png确实往右下移了(100,100)，当然图片就会超出画面外了。
调整Image透明度
玩游戏的经验中，应该都有经验当角色受到伤害时，会感觉角色本身会有一闪一闪的感觉，来表现被碰到伤害，这时可以用调整透明度这种简单的特效来达成。或是想要表现晚上的星空的星星在闪烁，我们也能透过调整星星的透明度来做到，所以我们先来试着调整mylogo.png的透明度来练习，为在之后的特效教学做准备。

image(resourcesVfs[“mylogo.png”].readBitmap()) {
width = ConfigModule.size.width.toDouble()
height = ConfigModule.size.height.toDouble()
alpha = 0.5
}
执行后，可以比对预设是alpha = 1.0跟alpha = 0.5的差异，这就是调整alpha的效果了。
旋转Image
将图片旋转的动作也是游戏中常用的行为，像是可能想要表现一颗球的滚动，除了位置的移动，物体本身做旋转也是必须的，所以就来练习将图片进行旋转。

image(resourcesVfs[“mylogo.png”].readBitmap()) {
width = ConfigModule.size.width.toDouble()
height = ConfigModule.size.height.toDouble()
rotationDegrees = 45.0
}
执行后，有发现好像图片真的有向右旋转了45度，但是怎么觉得有点怪怪的！
没错！就是有点怪怪的，因为我们预期心里应该是照着图片的中心点来进行向右的45度旋转啊，为什么会这样呢？

原因是image物件预设的anchor point(定锚点)的座标是(0,0)，图片就会以(0,0)为旋转中心点去向右转45度。所以我们只要将anchor point重新设定，在程式以加上anchor(0.5, 0.5)，表示图片的定锚点在图片中心了。

image(resourcesVfs[“mylogo.png”].readBitmap()) {
anchor(.5, .5)
width = ConfigModule.size.width.toDouble()
height = ConfigModule.size.height.toDouble()
rotationDegrees = 45.0
}
执行后，痾痾痾…怎么还是怪怪的啊！！没有在中心点旋转啊！！
这里就要解释一下，因为你的anchor point(定锚点)跑到图片的中心，在设定image座标时，就会以定锚点的位置去移动，也就是你现在看到的结果就是图片中心放在场景座标(0.0)的位置，然后旋转了45度。而一开始没感觉定锚点的存在，是刚好定锚点预设是(0,0)，图片预设的座标也是(0,0)，因此图片看起来就是正常的呈现，但一旋转就变这样了。

那该怎么调整到看起来正常?
当我们设定定锚点在图片中心anchor(0.5, 0.5)时，假设还没旋转的样子，图片会是呈现这样。图片中心点跑去场景的原点座标(0,0)了
只要把图片的座标移到场景的中心点，也就是算出长宽一半width/2跟height/2的位置，图片就会又会正常地呈现了。

image(resourcesVfs[“mylogo.png”].readBitmap()) {
anchor(0.5, 0.5)
width = ConfigModule.size.width.toDouble()
height = ConfigModule.size.height.toDouble()
position(scaledWidth/2, scaledHeight/2)
}
特别注意: 这里我们是拿scaledWidth跟scaledHeight去算位置，而不是直接拿已经分配好的width跟height，原因是如果你去trace Image.kt的程式码，发现set并不会去真的去改变image原先的图片的长宽，而是去改变scaleX跟scaleY的数值，所以我们计算位置必须是要拿scale过的长宽唷。
最后，在进行向右45度旋转，就能达到我们想要的旋转效果了!!

image(resourcesVfs[“mylogo.png”].readBitmap()) {
anchor(0.5, 0.5)
width = ConfigModule.size.width.toDouble()
height = ConfigModule.size.height.toDouble()
position(scaledWidth/2, scaledHeight/2)
rotationDegrees = 45.0
}
总结
这篇主要讲解一些图片的基本应用，几乎都会应用在游戏上，透过这些简单的练习，在后面的部分就能举一反三来的拿来利用了！

上一篇：2021年6日15日NTT-AT为DoCoMo低延迟云用户提供安全措施支持服务
下一篇：[Kotlin写游戏教程五]使用Text处理文字