旋转
你可以通过对一个精灵的rotation
设定一个角度来旋转它。
cat.rotation = 0.5;
但是旋转是针对于哪一个点发生的呢?
你已经了解了,精灵的左上角代表它的位置,这个点被称之为 锚点 。如果你用像0.5
这种值设定rotation
,这个旋转将会 围绕着锚点发生 。下面这张图就是结果:
你能看见锚点是猫的左边耳朵(译者:对猫来说实际上是它的右耳朵!),那里成了猫的图片的旋转中心。
你该怎么改变锚点呢?通过改变精灵的anchor
属性的xy值来实现。像下面这样:
cat.anchor.x = 0.5;
cat.anchor.y = 0.5;
anchor.x
和anchor.y
的值如果是从0到1,就会被认为是整个纹理的长度或宽度百分比。设置他们都为0.5,锚点就处在了图像中心。精灵定位的依据点不会改变,锚点的改变是另外一回事。
下面的图显示把锚点居中以后旋转的精灵。
你可以看到精灵的纹理向左移动了,这是个必须记住的重要副作用!
像是position
和scale
属性一样,你也可以在一行内像这样设置锚点的位置:
cat.anchor.set(x, y)
精灵也提供和anchor
差不多的pivot
属性来设置精灵的原点。如果你改变了它的值之后旋转精灵,它将会围绕着你设置的原点来旋转。举个例子,下面的代码将精灵的pivot.x
和pivot.y
设置为了32。
cat.pivot.set(32, 32)
假设精灵图是64x64像素,它将绕着它的中心点旋转。但是记住:你如果改变了精灵的pivot
属性,你也就改变了它的原点位置。
所以anchor
和 pivot
的不同之处在哪里呢?他们真的很像!anchor
改变了精灵纹理的图像原点,用0到1的数据来填充。pivot
则改变了精灵的原点,用像素的值来填充。你要用哪个取决于你。两个都试试就知道哪个对你而言最适合。