(原创)SpriteKit+Swift学习笔记(四)-纹理部分缩放

这个纹理部分缩放,可能初次接触游戏开发的小伙伴,不知道是什么东西,简单地说,部分边和角不缩放,只缩放中心的部分纹理。其实这个用途非常广,最常见的就是血条蓝条和玩家角色对话框。血条蓝条应该怎么做?(对话框同理)根据开发经验和需求的不同,可以有多种形式:第一种,用一个矩形条,设置x轴缩放xScale,如果血条纹理宽度高度都是10,需要表示血量100,那么设置xScale=10,横轴放大10倍即可(hp=95的时候,设置xScale=9.5,以此类推)。第二种,就比较高大上了,作为第一种方式的延伸,需要额外设置一些属性,但是效果也更好,可以做圆角矩形,或者胶囊形。
先看代码:

hp.centerRect = CGRectMake(8/20, 8/20, 4/20, 4/20)
hp.anchorPoint = CGPointMake(0, 0.5)
hp.xScale = 1.0 + hpValue / 200.0

首先设置中心矩形,纹理部分缩放是四角不缩放,只缩放中心矩形,前两个值是中心矩形起始位置/总尺寸,后两个点是矩形尺寸/总尺寸,原理同UIView的subview的rect。比如我现在想用一个20x20的红色圆角矩形,来做血条的初始纹理。其中圆角的尺寸是8x8,我们缩放时需要把圆角抠去,设置centerrect的尺寸。坐标原点在左上角,从(8,8)这个点开始,向右下角画一个4x4的大小的矩形,这个设置必须用比值来做,不能直接用(4,4)来设置尺寸。(知道原因的小伙伴欢迎指出,大家一起学习)设置完中心矩形,还必须设置精灵锚点。所有spritenode的锚点,默认都是0.5,0.5,也就是精灵的正中央。如果要把血条缩放,肯定是一端固定,另一端延长或者缩短。锚点的作用,就是限制精灵缩放的方向,设置为0和0.5,锚点就在精灵左边界的中点上,这个精灵缩放只影响右边,左边是固定的,也就是我们看到的效果了。如果血条是纵向的,那么只需要设置0.5和0,锚点就固定在精灵下边界的中点上,任何缩放操作都向上进行。
对话框也是同样的道理,素材只需要一个很小的图,设置好锚点进行x和y轴的缩放,就可以得到我们需要的尺寸了。

PS:坐标系一定不要混乱,view的坐标系,是左上角为原点,向下为Y正方向,而spritekit的坐标系,是左下角为坐标原点,向上是Y正方向。
最后进行缩放,就会按照中心矩形进行缩放了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值