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

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

作者:丫丫    浏览次数:173    2021-06-15 15:18:48

这一篇的教学要教大家怎么在你的场景上放置一些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处理文字