关于Cocos2d-x中坐标系的种类和转换
注意:
当一个节点有一个子节点的时候,如果移动父节点,子节点也会跟着做相应的移动变化,只要被添加到父节点中,子节点就被绑定了,所以子节点的位置,坐标就会被动地变化。
当一个节点有一个子节点的时候,如果通过setPosition方法设置子节点的坐标,那么,这时候其实是在以父节点左下角为原点的坐标系中,x轴最长是父节点的宽度,y轴最长是父节点的高度。后面如果有需要可以通过一些坐标的转换的方法转化为世界坐标/UI坐标。
例如,jewel1是hero的子节点,屏幕分辨率960*640,hero大小200*250
Point p1, p2,p3;
auto hero = Sprite::create("s_1.png");
hero->setPosition(visibleSize.width / 2, visibleSize.height / 2);
p1=hero->getPosition();
log("p1=(%f,%f)",p1.x,p1.y);
addChild(hero);
auto jewel1 = Sprite::create("jewel1.png");
jewel1->setAnchorPoint(Vec2(1, 0));
jewel1->setPosition(hero->getContentSize().width, 0);
p2 = jewel1->getPosition();
log("p2=(%f,%f)", p2.x, p2.y);
p3 = hero->convertToWorldSpace(jewel1->getPosition());
log("p3=(%f,%f)", p3.x, p3.y);
hero->addChild(jewel1);
输出结果
p1=(480.000000,320.000000)
p2=(200.000000,0.000000)
p3=(580.000000,195.000000)
一.UI坐标系
在进行iOS或者Android界面开发时,它的坐标系规则如下图所示:
- 原点坐标(x=0, y=0)位于左上角;
- X轴从屏幕最左边开始,由左向右渐增;
- Y轴坐标从屏幕最上方开始,由上向下渐增
二.Cocos2d-x坐标系
Cocos2d-x坐标系是这里的重点,也是我们开发时考虑的最多的。由于Cocos2d-x是基于OpenGL和OpenGL ES的。该坐标系的规则如下:
- 原点坐标(x=0, y=0)位于左下角;
- X轴从屏幕最左边开始,由左向右渐增;
- Y轴从屏幕最下方开始,由下向上渐增;
在Cocos2d-x中的场景,就是使用的该坐标系。
三.世界坐标系
世界坐标系也叫绝对坐标系,是游戏开发中建立的概念。它建立了描述其它坐标系所需要的参考标准。我们都可以使用世界坐标系来描述其它坐标系的位置。
Cocos2d-x中元素是有父子关系的层次结构,通过Node
设置位置使用的是相对其父节点的本地坐标系,而非世界坐标系,最后在绘制屏幕的时候,Cocos2d-x会把这些元素的本地节点坐标映射成世界坐标系坐标。世界坐标系和OpenGL坐标系方向一致,原点在屏幕左下角,X轴向右,Y轴向上。
四.节点坐标系
节点坐标系也叫相对坐标系,它是与特定节点相关联的坐标系。每个节点都有独立的坐标系,当节点移动或改变方向时,和该节点关联的坐标系(它的子节点)将随之移动或改变方向。比如一个Layer上面有10个精灵,当移动这个Layer的时候,这些精灵也会跟着一起移动的。
在Node
节点类中,我们可以对节点进行位置的操作,而这些设置位置使用的就是父节点的节点坐标系。它和OpenGL坐标系方向一致,原点在屏幕左下角,X轴向右,Y轴向上。有的时候,我们需要将节点坐标转换成世界坐标,或者将世界坐标转换成节点坐标。在Node
节点类中,就提供了对应的转换函数,下面我们就使用一下这些函数,加深对Cocos2d-x坐标系、世界坐标系和节点坐标系的理解。
转换API
在Cocos2d-x中提供了以下的API用来进行坐标转换。
/**
* 将世界坐标转换成节点坐标,忽略锚点的影响;结果是以点为单位。
*/
Vec2 convertToNodeSpace(const Vec2& worldPoint) const;
/**
* 将节点坐标转换成世界坐标,忽略锚点的影响;结果是以点为单位。
*/
Vec2 convertToWorldSpace(const Vec2& nodePoint) const;
/**
* 将世界坐标转换成节点坐标;结果是以点为单位。
* 会考虑到锚点的影响
*/
Vec2 convertToNodeSpaceAR(const Vec2& worldPoint) const;
/**
* 将节点坐标转换成世界坐标;结果是以点为单位。
* 会考虑到锚点的影响。
*/
Vec2 convertToWorldSpaceAR(const Vec2& nodePoint) const;
/**
* 将Touch对应的点转换成节点坐标,忽略锚点的影响。
*/
Vec2 convertTouchToNodeSpace(Touch * touch) const;
/**
* 将Touch对应的点转换成节点坐标,考虑锚点的影响。
*/
Vec2 convertTouchToNodeSpaceAR(Touch * touch) const;
好了,世界坐标系转节点坐标系,节点坐标系转世界坐标系,就这么几个函数就能搞定了,剩下的就是实际的应用了。对了,在实际中,一定要考虑到锚点的影响,可能你得到的结果,就是因为锚点的影响,而完全不同的。
坐标系变换原理
上面总结了坐标系之间转换的一些API函数,下面就来看看它们之间到底是如何转换的。看了网上很多人的博客,写的转换原理,写的都不错,就是看的云里雾里的,很多人都配上了坐标图,搞笑的是那些坐标图都是“一副”,也不知道谁抄袭的谁的。
下面就做一些简单的原理,没有过的图来说明,就是一些简短的文字,按照这些文字说明,你肯定能看的懂的。
1.convertToNodeSpace
Vec2 newPosition = node1->convertToNodeSpace(node2->getPosition());
将node2的位置坐标转换成相对于node1左下角顶点的坐标。转换方法:node1和node2位置不变,将坐标轴原点设置为node1的左下角顶点,重新计算node2->getPosition()
这个点的坐标即为newPosition。
当调用以下代码时,返回的是相对于其父节点的节点坐标,当然了,以下代码的实际用处并不大。
Vec2 newPosition = node1->convertToNodeSpace(node1->getPosition());
2.convertToNodeSpaceAR
Vec2 newPosition=node1->convertToNodeSpaceAR(node2->getPosition());
将node2的位置坐标转换成相对于node1锚点的坐标。转换方法:node1和node2位置不变,将坐标轴原点设置为node1的锚点,重新计算node2->getPosition()
这个点的坐标即为newPosition。
3.convertToWorldSpace
Vec2 newPosition=node1->convertToWorldSpace(node2->getPosition());
将node2的位置坐标转换成世界坐标。转换方法:node1的位置不变,世界坐标的坐标轴也不变,以node1的左下角顶点再建立一个坐标系(其实就是本地坐标),将node2->getPosition()
这个点设置到新建的坐标系中,以原来的世界坐标系为参考,重新计算node2->getPosition()
这个点的坐标即为newPosition。
4.convertToWorldSpaceAR
Vec2 newPosition=node1->convertToWorldSpaceAR(node2->getPosition());
将node2的位置坐标转换成世界坐标。转换方法:node1的位置不变,世界坐标的坐标轴也不变,以node1的锚点再建立一个坐标系,将node2->getPosition()
这个点设置到新建的坐标系中,以原来的世界坐标系为参考,重新计算node2->getPosition()
这个点的坐标即为newPosition。
另一个例子
首先我们添加两个测试精灵(宽:27,高:40)到场景里面:
Sprite *sprite1 = Sprite::create("player.png");
sprite1->setPosition(Vec2(20, 40));
sprite1->setAnchorPoint(Vec2(0, 0));
this->addChild(sprite1);
Sprite *sprite2 = Sprite::create("player.png");
sprite2->setPosition(Vec2(-15, -30));
sprite2->setAnchorPoint(Vec2(1, 1));
this->addChild(sprite2);
然后调试,在场景中大概是下图这样显示(以左下角为坐标原点,从左到右为x方向,从下到上为y方向,废话了:)):
在cocos2d-x中,每个精灵都有一个锚点,以后对精灵的操作(比如旋转)都会围绕锚点进行,我们暂且可以看作是精灵的中心位置,一般来说有每个方向有三种可能的值:0,0.5,1。上图中红色圆点即为各自的锚点,sprite1 锚点为 (0,0) 左下角,sprite2锚点为(1,1)在右上角。
现在我们来看看坐标系转换,同样地,我们先写点测试代码:
Point p1 = sprite2->convertToNodeSpace(sprite1->getPosition());
Point p2 = sprite2->convertToWorldSpace(sprite1->getPosition());
Point p3 = sprite2->convertToNodeSpaceAR(sprite1->getPosition());
Point p4 = sprite2->convertToWorldSpaceAR(sprite1->getPosition());
Log("p1:%f,%f", p1.x, p1.y);
Log("p2:%f,%f", p2.x, p2.y);
Log("p3:%f,%f", p3.x, p3.y);
Log("p4:%f,%f", p4.x, p4.y);
由于cocos2d-x的坐标系(本地坐标系)是以左下角为坐标原点的,所以 sprite1和sprite2的坐标原点在上图的位置分别是(20,40)、(-42,-70),那么很明显的:
p1就是sprite1锚点相对于sprite2原点来说在sprite2坐标系中的位置,经过对比上图,我们可以得到(20-(-42),40-(-70))即(62,110)
p2就是sprite1锚点相对于sprite2原点来说在上图坐标系中的位置,这样我们可以计算出sprite1在sprite2坐标系中的位置:(20+(-42),40+(-70)),即(-22,-30)
p3就是sprite1锚点相对于sprite2锚点来说在sprite2坐标系中的位置,也就是(20-(-15),40-(-30)),即(35,70)
p4就是sprite1锚点相对于sprite2锚点来说在上图坐标系中的位置,也就是(20+(-15),40+(-30)),即(5,10)
现在我们可以知道,计算方法都是用sprite1的坐标去加减sprite2的坐标,针对本地坐标系就用减法,针对世界坐标系就用加法。
关于Cocos2d-x中坐标系的种类和转换的更多相关文章
- 关于Unity中坐标系的种类
坐标空间 1:物体空间: 3D物体自己的坐标空间 一般设计时几何体以中心为原点,人物以双脚为原点; 2: 世界空间: 3D物体在场景中的世界坐标, 整个游戏场景的空间; 3: 摄像机空间: 以观察摄像 ...
- ArcGIS中利用ArcMap将地理坐标系转换成投影坐标系(从WKID=4326到WKID=102100)
原文:ArcGIS中利用ArcMap将地理坐标系转换成投影坐标系(从WKID=4326到WKID=102100) 对于非地理专业的开发人员,对与这些生涩的概念,我们不一定都要了解,但是我们要理解,凡是 ...
- 如何在cocos2d项目中enable ARC
如何在cocos2d项目中enable ARC 基本思想就是不支持ARC的代码用和支持ARC的分开,通过xcode中设置编译选项,让支持和不支持ARC的代码共存. cocos2d是ios app开发中 ...
- 如何在Cocos2D游戏中实现A*寻路算法(六)
大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;) 免责申明:本博客提供的所有翻译文章原稿均来自互联网,仅供学习交流 ...
- 如何在Cocos2D游戏中实现A*寻路算法(一)
大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;) 免责申明:本博客提供的所有翻译文章原稿均来自互联网,仅供学习交流 ...
- Pandas中查看列中数据的种类及个数
Pandas中查看列中数据的种类及个数 读取数据 import pandas as pd import numpy as np filepath = 'your_file_path.csv' data ...
- 关于==和equals()方法&Java中string与char如何转换&String,StringBuffer
1.对于基本数据类型,可以直接使用==和!=进行内容比较 如:int x=30; int y=30; x==y; //true 基本数据类型 简单类型(基本类型) bo ...
- SQL Server中提前找到隐式转换提升性能的办法
http://www.cnblogs.com/shanksgao/p/4254942.html 高兄这篇文章很好的谈论了由于数据隐式转换造成执行计划不准确,从而造成了死锁.那如果在事情出现之前 ...
- 怎么实现ZBrush 4R7中界面视窗的快速转换
本篇教程介绍ZBrush® 4R7界面的基本操作之转换界面视窗, 教程属于入门教程可以帮助新手快速入门.因为ZBrush工 作界面不同于其他我们所熟知的3D软件,初次接触ZBrush的时候难免会有所困 ...
随机推荐
- PO_标准采购流程请购采购接受入库(流程)
2014-06-03 Created By BaoXinjian
- Android 布局之LinearLayout 子控件weight权重的作用详析
关于Android开发中的LinearLayout子控件权重android:layout_weigh参数的作用,网上关于其用法有两种截然相反说法: 说法一:值越大,重要性越高,所占用的空间越大: 说法 ...
- malloc的内存分配原理
0 堆内存的在计算机内存中的形式 根据<The C Programming language>推测得到堆内存,图中的Heap区域即为堆内存块(Heap区域的数目不代表计算机堆内存的真实数目 ...
- Linux内核(2) - 分析内核源码如何入手(上)
透过现象看本质,兽兽们无非就是一些人体艺术展示.同样往本质里看过去,学习内核,就是学习内核的源代码,任何内核有关的书籍都是基于内核,而又不高于内核的. 既然要学习内核源码,就要经常对内核代码进行分析, ...
- python标准库介绍——8 operator 模块详解
==operator 模块== ``operator`` 模块为 Python 提供了一个 "功能性" 的标准操作符接口. 当使用 ``map`` 以及 ``filter`` 一类 ...
- django1.8高级视图和URL配置读书笔记
一.在url配置中可以通过导入视图函数来将url模式和对应的函数对象进行映射,也可以通过字符串的形式进行映射.字符串包含应当是模块名.函数名的组合例如: 之前: from mysite import ...
- Solr4:配置Data Import,从数据库直接创建索引
1. 要求 将数据库中的数据直接创建到Solr索引中去.先做全部索引,然后定期做增量索引. 2. 环境 Solr4.4版本,Tomcat7.0版本,Oracle 11g,已经配置好Tomcat与Sol ...
- Android:Textview 通过代码设置 Drawable
解决方案 public void setCompoundDrawables (Drawable left, Drawable top, Drawable right, Drawable bottom) ...
- 批处理学习笔记9 - 深入学习For命令2
这一篇是对于for /f的扩展,上一篇说道/f可以读txt文件里的数据.这里了解下tokens和delims功能 平常文本文件保存数据经常用这样的格式 avi|wmv|rm|mkv|mp4 以读取这个 ...
- SICP-Exercise 1.5
Exercise 1.5. Ben Bitdiddle has invented a test to determine whether the interpreterhe is faced wit ...