UI坐标系与OpenGL坐标系

UI坐标就是Android和IOS等应用开发时候使用的二维坐标系,原点在左上角

OpenGL坐标是三维坐标,由于Cocos2d-x Lua 底层采用OpenGL渲染,因此默认坐标就是OpenGL坐标,只不过采用了两维(XY轴),不考虑Z轴,OpenGL的坐标原点在左下角

  1. 获得UI坐标
  2. cc.p touchLocation = touch:getLocationInView()
  3. UI坐标转换为OpenGL坐标
  4. cc.p touchLocation2 = cc.Director:getInstance:convertToGL(touchLocation)
  5.  
  6. 这样就转换为Cocos2d -x Lua的默认坐标了

世界坐标系和模型坐标系

什么是世界坐标系和模型坐标系?

类似于你向别人问路,有的人告诉你向东1000M,然后向北走500M,这就是世界坐标

而有的人告诉你向左走1000M,然后向右走500M 这是模型坐标,以你自己为参照物

有时候我们需要将他们互换,可以通过Node对象函数实现

  1. convertToNodeSpace ( worldPoint ) --将世界坐标转化为模型坐标
  2. convertToNodeSpaceAR ( worldPoint ) --将世界坐标转化为模型坐标。AR表示相对于锚点
  3.  
  4. convertTouchToNodeSpace ( touch ) --将世界坐标系中的触摸点转化为模型坐标
  5. convertTouchToodeSpace ( touch ) --将世界坐标系中的触摸点转化为模型坐标。AR表示相对于锚点
  6.  
  7. concertToWorldSpace ( nodePoint ) --将模型坐标转化为世界坐标
  8. convertToWorldSpaceAR ( nodePonit ) --将模型坐标转化为世界坐标。AR表示相对于锚点

世界坐标转换为模型坐标

  1. --[[
  2. --创建层 添加背景颜色为白色
  3. local layer = cc.Layer:create()
  4. local bg = cc.LayerColor:create(cc.c3b(255,255,255))
  5. layer:addChild(bg)
  6. --创建一个Item
  7. local closeItem = cc.MenuItemImage:create(
  8. "CloseNormal.png","CloseSelected.png")
  9. closeItem:setPosition(cc.p(size.width - closeItem:getContentSize().width/2,
  10. closeItem:getContentSize().height/2))
  11. local menu = cc.Menu:create(closeItem)
  12. menu:setPosition(cc.p(0,0))
  13. layer:addChild(menu)
  14. --创建一个Node
  15. local node1 = cc.Sprite:create("node1.png")
  16. node1:setPosition(cc.p(400,500))
  17. node1:setAnchorPoint(cc.p(1.0,1.0))
  18. layer:addChild(node1,0)
  19. --创建一个Node2
  20. local node2 = cc.Sprite:create("node2.png")
  21. node2:setPosition(cc.p(200,300))
  22. node2:setAnchorPoint(cc.p(0.5,0.5))
  23. layer:addChild(node2,0)
  24. --获取Node2 世界坐标系转换为相对于node1的模型坐标
  25. local posX,posY = node2:getPosition()
  26. local point1 = node1:convertToNodeSpace(cc.p(posX,posY))
  27. local point3 = node1:convertToNodeSpaceAR(cc.p(posX,posY))
  28. cclog("Node2 x:"..point1.x.." y:"..point1.y)
  29. cclog("Node2AR x:"..point3.x.." y:"..point3.y)
  30. return layer
  31. --
  32. --Node 2 x: 100 y:-100 不管node1锚点,则以node1的左下角为原点,相对于node2的锚点
  33. --AR X:-200 y:-200 node1的锚点(1.01.0)为原点,相对于node2的锚点
  34. --]]

模型坐标转化为世界坐标

  1. local layer = cc.Layer:create()
  2. --层背景
  3. local bg = cc.LayerColor:create(cc.c3b(255,255,255))
  4. layer:addChild(bg)
  5. --Item
  6. local loseItem = cc.MenuItemImage:create("CloseNormal.png","CloseSelected.png")
  7. loseItem:setPosition(cc.p(size.width - loseItem:getContentSize().width/2,
  8. loseItem:getContentSize().height/2))
  9. local men = cc.Menu:create(loseItem)
  10. men:setPosition(cc.p(0,0))
  11. layer:addChild(men)
  12.  
  13. --创建node1 添加到layer
  14. local node1 = cc.Sprite:create("node1.png")
  15. node1:setPosition(cc.p(400,500))
  16. layer:addChild(node1,0)
  17.  
  18. --创建node2 添加到node1
  19. local node2 = cc.Sprite:create("node2.png")
  20. node2:setPosition(cc.p(0,0))
  21. node2:setAnchorPoint(cc.p(0,0))
  22. node1:addChild(node2,0) --添加到node1 这样node2:setPosition(cc.p(0.0,0.0))变成了相对于node1 --的相对坐标了
  23.  
  24. local posX,posY = node2:getPosition()--A点的位置
  25. cclog(""..posX.."--"..posY)
  26. local point1 = node1:convertToWorldSpace(cc.p(posX,posY))
  27. --将Node2的坐标转化为世界坐标
  28. local point3 = node1:convertToWorldSpaceAR(cc.p(posX,posY))
  29. --将Node2的坐标转化为世界坐标,相对于锚点的位置
  30. cclog("point X:" .. point1.x .. " Y:" .. point1.y)
  31. cclog("pointAR X:" .. point3.x .. " Y:" .. point3.y)
  32.  
  33. return layer
  34. --
  35. --得到的结果是 point: x = 250 y = 450 就是node1的原点与坐标轴原点的相对值
  36. --得到的结果是 pointAR: x = 400 y = 500 就是node1的锚点与坐标轴原点的相对值
  37. --

模型坐标转化为世界坐标有点跟书上介绍的不同,是我自己理解的,有误解的话欢迎指出

Cocos2d-x 核心概念 - 坐标系(UI.OpenGL.世界坐标系.模型坐标系)的更多相关文章

  1. Netty核心概念(8)之Netty线程模型

    1.前言 第7节初步学习了一下Java原本的线程池是如何工作的,以及Future的为什么能够达到其效果,这些知识对于理解本章有很大的帮助,不了解的可以先看上一节. Netty为什么会高效?回答就是良好 ...

  2. OpenGL中各种坐标系的理解[转]

    OPENGL坐标系可分为:世界坐标系和当前绘图坐标系. 世界坐标系:在OpenGL中,世界坐标系是以屏幕中心为原点(0, 0, 0),且是始终不变的.你面对 屏幕,你的右边是x正轴,上面是y正轴,屏幕 ...

  3. cocos2d-x 屏幕坐标系和OPenGL坐标系转换

    转自:http://home.cnblogs.com/group/topic/57609.html cocos2d坐标系(OPenGL坐标系):以左下角为原点,x向右,y向上 屏幕坐标系(androi ...

  4. Redux 核心概念

    http://gaearon.github.io/redux/index.html ,文档在 http://rackt.github.io/redux/index.html .本文不是官方文档的翻译. ...

  5. TensorFlow.js之安装与核心概念

    TensorFlow.js是通过WebGL加速.基于浏览器的机器学习js框架.通过tensorflow.js,我们可以在浏览器中开发机器学习.运行现有的模型或者重新训练现有的模型. 一.安装     ...

  6. (转)Maven学习总结(四)——Maven核心概念

    孤傲苍狼只为成功找方法,不为失败找借口! Maven学习总结(四)——Maven核心概念 一.Maven坐标 1.1.什么是坐标? 在平面几何中坐标(x,y)可以标识平面中唯一的一点. 1.2.Mav ...

  7. OpenGL中各种坐标系的理解

    转载:https://blog.csdn.net/meegomeego/article/details/8686816 OPENGL坐标系可分为:世界坐标系和当前绘图坐标系. 世界坐标系以屏幕中心为原 ...

  8. Ext JS 6学习文档–第2章–核心概念

    核心概念 在下一章我们会构建一个示例项目,而在这之前,你需要学习一些在 Ext JS 中的核心概念,这有助于你更容易理解示例项目.这一章我们将学习以下知识点: 类系统,创建和扩展类 事件 Ext JS ...

  9. Storm 学习之路(二)—— Storm核心概念详解

    一.Storm核心概念 1.1 Topologies(拓扑) 一个完整的Storm流处理程序被称为Storm topology(拓扑).它是一个是由Spouts 和Bolts通过Stream连接起来的 ...

随机推荐

  1. linux/unix 编程手册 fork()函数

    父进程通过fork()函数创建子进程,将父进程数据段和栈的内容拷贝到子进程中,子进程执行程序execve创建新程序,调用exit函数退出到等待wait(),挂起父进程, 父子进程享用相同的程序文本段. ...

  2. 搭建git for windows服务器

    文档出处 :http://blog.csdn.net/code_style/article/details/38764203 http://blog.csdn.net/aaron_luchen/art ...

  3. jQuery File Upload done函数没有返回

    最近在使用jQuery File Upload 上传图片时发现一个问题,发现done函数没有callback,经过一番折腾,找到问题原因,是由于dataType: ‘json’造成的,改为autoUp ...

  4. webapi返回json格式优化

    一.设置webapi返回json格式 在App_Start下的WebApiConfig的注册函数Register中添加下面这代码 config.Formatters.Remove(config.For ...

  5. WCF入门-项目间调用服务

    练习WCF入库,添加了一个WCF项目,同时添加了一个控制台程序,在控制台程序启动时,调用WCF服务,报错. 控制台程序代码为: namespace WcfConsumer { class Progra ...

  6. Kernel Time和User Time分别指什么

    比如你的一个程序读取并分析一个文件,读取时会调用系统接口,系统会调用驱动来从物理设备上读取数据这个就是kernel time,除此以外在你自己进程上下文中执行代码占用的时间就是user time了. ...

  7. win10 启动文件夹

    C:\ProgramData\Microsoft\Windows\Start Menu\Programs\StartUp

  8. js判断变量是否等于undefined

    js中判断变量是否等于undefined,不是使用==,而是使用typeof. typeof(featureId)!="undefined"

  9. Hibernate 基础配置及常用功能(二)

    本章主要是描述几种经典映射关系,顺带比较Hibernate4.x和Hibernate5.x之间的区别. 一.建立测试工程目录 有关实体类之间的相互映射关系,Hibernate官方文档其实描述的非常详细 ...

  10. Tempter of the Bone

    Description The doggie found a bone in an ancient maze, which fascinated him a lot. However, when he ...