admin 管理员组

文章数量: 894082

cocos2dx之锚点/坐标系/精灵 详解

(1)什么是锚点
当我们插入一张图片时,我们需要调整它的位置。假如一张空白的画布是背景,那么当我们插入一张图片时,我们如何确定图片的位置呢?图片可以看做一个精灵,也就是一个节点。那么对于一个节点的位置很好判断,那就是以背景画布建立坐标系。一般来说,父节点的坐标原点默认为(0,0),也就是说,对于一个960*640的游戏窗口,左下角为(0,0),右上角为(960,640)。如果要将图片(也就是子节点)插入到画布上,那么就是设定坐标为(480,320)。
但问题是,我们只能确保代表图片元素的这个节点是位于最中间的,我们并不能确保整张图片看起来是位于画布最中间,因为图片本身也有大小。那么这里就涉及到一个问题,图片的哪一个点代表整张图片的位置?这个点呢,也被称作锚点。(重点总结)

如上图所示,空白代表着背景画布,我们插入的图片是一个蓝色的矩形。如果我们想让矩形看起来位于背景画布的中央,那么我们就应该将锚点设置为矩形的最中央。那么这样一来,只要锚点位于背景中央,自然就代表了矩形位于背景中央。再者,如果将锚点设为矩形左下角,那么当我们设置图片位置为(480,320)时,矩形其实并没有像我们所想的那样位于画布中间,而是矩形左下角位于(480,320)这个位置,这样看起来矩形就处于画布的右上部分。
这样我们就能很容易的明白cocos官方文档中对于锚点的解释了,如下
mySprite->setPosition(Vec2(500, 0));
首先设置了精灵的位置为(500,0),精灵一般为
然后分别设置不同的锚点,精灵的位置发生变化

因为我们已经确定了位置(500,0),当分别设置精灵不同位置的锚点,即显示位置也不同。
当我们想设置一个精灵的位置时,主要是使用 setPosition() 方法,只有想改变精灵与基准坐标点的相对位置时,才考虑使用 setAnchorPoint() 设置锚点。
值得一提的是,锚点的范围是从(0,0)到(1,1),同时默认锚点值为(0.5,0.5)。
一般Node的锚点默认为(0.5, 0.5),而Layer的锚点则在左下角(0,0)。

(2)Cocos2d-x 用右手坐标系,也就是说坐标原点(0,0)在展示区的左下角,当你在场景里放置一些节点对象设置坐标位置时,注意左下角是坐标计算的起点。
(3)精灵(Sprite)
之前我们提到,精灵是屏幕上移动的对象,它能被控制。你喜欢玩的游戏中主角可能就是一个精灵,我知道你在想是不是每个图形对象都是一个精灵,不是的,为什么? 如果你能控制它,它才是一个精灵,如果无法控制,那就只是一个节点(Node)。
准确的说,精灵(Sprite) 是一个能通过改变自身的属性:角度,位置,缩放,颜色等,变成可控制动画的 2D 图像。
可以使用一张图像来创建精灵,PNG, JPEG, TIFF, WebP, 这几个格式都可以。

本文标签: cocos2dx之锚点坐标系精灵 详解