Cocos2D-X扫盲之坐标系、锚点

一、引言

  在Cocos2D-X的开发过程中,经常会碰到设置精灵位置的问题。而设置位置的过程,涉及到两个问题:第一是坐标系,包括原点的位置、X/Y坐标轴的方向灯;第二是基准点(Cocos2D-X中叫锚点),即精灵旋转的时候,以哪个点为轴心;下面我们将逐一来分析这两个问题。

二、正文

 1. 坐标系

  Cocos2D-X中,坐标系包括:OpenGL坐标系、世界坐标系、节点相对坐标系、仿射变换等,这些坐标系的原点都是在屏幕的左下角、X轴向右、Y轴向上。

  1.1 OpenGL坐标系

   屏幕坐标系的原点在屏幕的左上角、X轴向右、Y轴向下。屏幕触击时间CCTouch传入的位置信息就是该坐标系,因此Cocos2D-X在对屏幕触摸事件做出响应前,需要使用CCDirecotr::convertToGL()方法,将触摸点转化为OpenGL坐标系。

  1.2 世界坐标系

   也叫绝对坐标系,是游戏开发中建立的概念,世界是指游戏世界。Cocos2D-X中的元素都是父子关系的层级结构,通过CCNode设置位置使用的是相对其父节点的本地坐标系,最后绘制屏幕的时候,会将本地节点坐标映射成世界坐标系。

  1.3 节点坐标系

   节点坐标系是和特定节点相关联的坐标系,每个节点都有独立的坐标系。当节点移动或者改变方向的时候,和该节点相关联的坐标系(子节点)会随之一起移动或改变方向。CCNode类中设置位置使用的就是父节点的节点坐标系,它有两个函数可以转换坐标:

   convertToWorldSpace:把基于当前节点的本地坐标系转换为世界坐标系;不基于锚点,如果基于锚点应该使用convertToWorldSpaceAR;

   convertToNodeSpace:把世界坐标系转化为当前节点的本地坐标系;不基于锚点,如果基于锚点应该使用convertToNodeSpaceAR;

  1.4 仿射变换

   仿射变换是指在线性变换的基础上加上平移,平移不是线性变换。游戏中大量使用的旋转、缩放、平移等都是仿射变换。

 2. 锚点

  通俗点说,锚点就是你在CCNode中,使用贴图的基准点。默认锚点为(0.5, 0.5)。

  精灵在进行运动的过程中,都需要一个锚点,比如在旋转的过程中,设置的锚点不一样,旋转效果是不一样的。比如使用默认锚点,精灵是以中点为轴心旋转;使用(0, 0)作为锚点,精灵是以左下角为轴心旋转;使用(1, 1)作为锚点,精灵是以右上角为轴心旋转。

三、小结

  这些都是基本的概念,有空的时候,我会附上详细的实例代码和效果图。

Cocos2D-X扫盲之坐标系、锚点

时间: 2024-10-10 01:43:49

Cocos2D-X扫盲之坐标系、锚点的相关文章

Cocos2d-x坐标体系

Cocos2d-x坐标体系 cocos2d引擎是一款非常优秀的扩平台的游戏开发引擎,在apple游戏榜上,有很多排名靠前的游戏都是由他创造出来的,他也有一套十分方便的坐标体系. 一.UI坐标体系 UI坐标体系相对于移动开发人员来说再熟悉不过了,在iOS系统中,它就是frame体系,即坐标(0,0)点位于屏幕的左上角,向右x增大,向下y增大. 二.OpenGL坐标体系 OpenGL坐标系是cocos2d中使用的坐标系,它更接近于数学上的坐标系,即(0,0)点位于屏幕的左下角,往左x增大,往上y增大

Cocos2d-x 3.2 Lua演示样本 ActionTest(操作测试)

Cocos2d-x 3.2 Lua演示样本 ActionTest(操作测试) 2014年博文大赛,请投上您宝贵的一票:http://vote.blog.csdn.net/Article/Details?articleid=38272837 移动开发狂热者群: 299402133,欢迎广大开发人员增加 Cocos2d-x官方真够给力的,3.1.1还没有熟悉完,3.2就出来.本篇博客继续介绍Cocos2d-x的Lua演示样例.关于3.2的样例变动不是非常大,略微介绍一下3.2的新特性吧: 3.2版本

Cocos2d-x学习(3) - cocos2d坐标系,锚点

1.OpenGL的坐标系 Cocos2d是基于OpenGL开发的,所以Cocos2d的坐标系和OpenGL的坐标系是一致的,都是按照图示方向.和我们平时最常见到的坐标系也是一致的. 2.屏幕坐标系 屏幕坐标系是界面编程中很常见的坐标系.它规定的则是屏幕的左上角为坐标原点,向右为X轴正方向,向下为Y轴正方向.这个相比OpenGL坐标系,X轴方向其实是一致的,不同就在与Y轴方向. 3.元素的位置 每个元素的坐标系都是相对于其父节点的,也就是说如果父节点移动那么该父节点下的元素坐标也是相对移动的.就像

Cocos2d坐标系转换

Cocos2d-x坐标系和OpenGL坐标系相同,都是起源于笛卡尔坐标系(高中数学里面那种). 笛卡尔坐标系 笛卡尔坐标系中定义右手系原点在左下角,x向右,y向上,z向外,OpenGL坐标系为笛卡尔右手系. 屏幕坐标系和Cocos2d坐标系 标准屏幕坐标系使用和OpenGL不同的坐标系,而Cocos2d则使用和OpenGL相同的坐标系. iOS, Android, Windows Phone等在开发应用时使用的是标准屏幕坐标系,原点为屏幕左上角,x向右,y向下. Cocos2d坐标系和OpenG

第五讲:OpenGL坐标系和UIKit坐标系、锚点、addChild函数详解

一.坐标系 OpenGl坐标系 原点在左下角(0,0),与数据的二维坐标系一致 UIKit坐标系 又称为屏幕坐标系,原点在左上角,X轴越右越大,Y轴越下越大: 由OpenGL转化为UIKit的方法: CCPoint point = CCDirector::sharedDirector()->convertToUI(sp1->getPosition); 二.锚点 锚点默认为(0.5,0.5) 就是在精灵的中间 : *****坐标系已锚点定位(先确定锚点在哪,ccp(X,Y)是描述锚点在哪个位置)

Cocos2d-x 3.0final 终结者系列教程08-绘图节点Node中的锚点和坐标系

图片问答,(只要回答正确,锚点和坐标系就学会了) 1.下图一共有几个填充为淡黄色的实心矩形? 选择:A,2个  B, 4个 C,1个 D,16个 答案,B,4个 2.下图的4个实心矩形排列在几行几列? 选择:A,1行1列 B,2行2列 答案,B 3.在每个实心矩形外侧都代表了屏幕,并标记了屏幕坐标系,和OpengGL坐标系,请问以下回答哪个正确? A,下图第一列是屏幕坐标系,左上角为0,0点,第二列是OpenGL坐标系,左下角为(0,0)点 B,    文章喜欢马伊琍 C,   黄海波是被陷害的

Cocos2d-x 3.0final 终结者系列教程08-画图节点Node中的锚点和坐标系

图片问答,(仅仅要回答正确,锚点和坐标系就学会了) 1.下图一共同拥有几个填充为淡黄色的实心矩形? 选择:A,2个  B, 4个 C,1个 D,16个 答案.B.4个 2.下图的4个实心矩形排列在几行几列? 选择:A,1行1列 B,2行2列 答案,B 3. 在每一个实心矩形外側都代表了屏幕,并标记了屏幕坐标系.和OpengGL坐标系,请问下面回答哪个正确? A,下图第一列是屏幕坐标系.左上角为0,0点,第二列是OpenGL坐标系,左下角为(0,0)点 B,    文章喜欢马伊琍 C,   黄海波

Cocos-2d 坐标系及其坐标转换

anchor point 究竟是怎么回事? 之所以造成不容易理解的是因为我们平时看待一个图片是 以图片的中心点 这一个维度来决定图片的位置的.而在cocos2d中决定一个 图片的位置是由两个维度 一个是 position 也就是图片的中心点 另外一个是anchor point.只要我们搞清楚他们的关系,自然就迎刃而解. 他们的关系是这样的: actualPosition.x = position.x + width*(0.5 - anchor_point.x); acturalPosition.

一张图了解cocos2d坐标系

一张图了解cocos2d坐标系 平面直角坐标系