上一节中讲解了Quick中的Scene,本节来了解Quick中的Sprite。
什么是精灵(Sprite)?简单的说,Sprite就是用来显示一个图片的,你可以让它移动,缩放以及旋转!关于精灵更详细的定义,可以百度之,这里不过多阐述!
下面我们就开始讲解在Quick中使用Sprite
1. 首先,我们需要一张图片,常用的图片就是png或者jpg,我这里使用的是一张太空飞船的png图片
把图片放在你的res目录下,这样我们的程序才能够搜索到。
2. 打开你的MainScene,删除ctor中用来显示hello world的代码,添加如下代码
1
2
3
|
self.sp = display.newSprite(
"flattop.png"
)
:pos(display.cx, display.cy)
:addTo(self)
|
上面的代码调用display.newSprite接口来初始化一个精灵,使用的图片是我们刚刚放到res下的flattop.png。创建的精灵被赋值给self.sp变量,这里的self就是MainScene。
紧接着的两个冒号语句是对这个精灵调用的方法,含义如下:
-
pos:精灵在屏幕中的位置,这里使用了预定义的两个变量display.cx,display.cy,这两个变量指的时屏幕中央
-
addTo:这个方法是将精灵添加到哪个节点上,这里是添加到self,也就是MainScene。
保存文件,刷新一下player,你回看到原来的hello world不见了,取而代之的是在屏幕中央的飞船图片
3.改变精灵的大小
如果你想让精灵初始的时候就改变大小,你可以在pos下加如下代码:scale(2),scale的参数就是你要缩放的大小,1为原始大小,你可能会问,那能不能是负数呢?你可以试试,然后看看效果!
4.精灵的移动
前面我们说到,我们可以对精灵进行很多操作,我们先来说移动。
精灵的移动大体分为两种:一种是在一定时间内移动到指定坐标,一种是在一定时间内按照指定的步长进行移动;
A.移动到指定位置
Quick的transition模块中提供了一个移动精灵的封装,函数原型为transition.moveTo(target, args)
其中target就是你要移动的精灵,args是移动所需要的参数,我们继续添加如下代码
1
|
transition.moveTo(self.sp, {
time
= 5, x = display.cx, y = display.height})
|
再次刷新player,你会看到你的飞船晃晃悠悠的移动到了屏幕中央上方,然后停住了。
这里args对应的就是 {time = 5, x = display.cx, y = display.height}, 其中time表示移动的总时间,xy表示移动到的终点坐标,很容易理解是不是。
transition是Quick封装的模块,你可以在src/framework/transition.lua中查看其提供的所有接口。
这里提一下如何使用原生的接口来让飞船移动,注释一下transition.moveTo的代码,然后添加如下代码
1
|
self.sp:runAction(cc.MoveTo:create(5, cc.p(display.cx, display.cy)))
|
刷新player,你会看到飞船跟执行了一样的移动动作,细心的童鞋查看transition.moveTo的实现的话,会看到其也是最终调用了上面的方法来完成移动的
B. 第二种移动使用的接口就是transition.moveBy(target, args),它的使用跟moveTo基本一样,但又有点不一样,这个留给童鞋们自己去测试吧,修改参数,然后刷新player,你就会掌握它的使用方式的。
5. 缩放动作
在前面我们提到了可以在精灵初始化的时候设定其大小,那么如果你是想要让精灵在一定时间内变大或者变小要如何做呢?当然是使用缩放动作了。
transition.scaleTo(target, args)接口就是用来让精灵做缩放动作的,我们先来看下效果,为了看清效果,请先注释掉前面移动的代码,并把精灵的初始大小设置为1,然后添加如下代码
1
|
transition.scaleTo(self.sp, {
time
= 5, scale = 2})
|
刷新player,你会看到飞船慢慢的变大到了2倍。参数scale的意义就是要缩放的倍数。当然,你也可以不传入scale而传入scaleX和scaleY,具体效果仍然是留给你自己去尝试了
6. 各种动作
上面介绍了transition中的移动和缩放动作,打开transition.lua,你会看到其提供的全部的接口,结合上面的讲解以及代码的注释,你可以轻松的看懂这些接口的使用,别光看,动起手来,每个接口都使用以下,这样你才能真正理解这些接口的含义。每个接口的注释中都提供了详细的使用方法,所以不要告诉我你还是不会,那我只能呵呵了!