Cocos2d-JS坐标系,cocos2d坐标系

  次阅读 来源:互联网(转载协议) 2015-09-28 13:12 我要评论(0)

Cocos2d-JS坐标系,cocos2d坐标系

在图形图像和游戏应用开发中坐标系是非常重要的,我们在Android和iOS等平台应用开发的时候使用的二维坐标系它的原点是在左上角的。而在Cocos2d-JS坐标系中它原点是在左下角的,而且Cocos2d-JS坐标系又可以分为:世界坐标和模型坐标。UI坐标UI坐标就是Android和iOS等应用开发的时候使用的二维坐标系。它的原点是在左上角的。\UI坐标UI坐标原点是在左上角,x轴向右为正,y轴向下为正。我们在Android和iOS等平台使用的视图、控件等都是遵守这个坐标系。然而在Cocos2d-JS默认不是采用UI坐标,但是有的时候也会用到UI坐标,例如在触摸事件发生的时候,我们会获得一个触摸对象(Touch),触摸对象(Touch)提供了很多获得位置信息的方法,如下面代码所示:var touchLocation = touch.getLocationInView();使用getLocationInView()方法获得触摸点坐标事实上就是UI坐标,它的坐标原点在左上角。OpenGL坐标我们在上面提到了OpenGL坐标,OpenGL坐标是种三维坐标。由于Cocos2d-JS的JSB是采用OpenGL渲染,因此默认坐标就是OpenGL坐标,只不过只采用两维(x和y轴)。如果不考虑z轴,OpenGL坐标的原点在左下角。\OpenGL坐标我们会通过一个触摸对象(Touch)获得OpenGL坐标位置,如下面代码所示:[html] view plaincopyvar touchLocation = touch.getLocation();

提示 三维坐标根据z轴的指向不同分为:左手坐标和右手坐标。右手坐标是z轴指向屏幕外,如3-49左图所示。左手坐标是z轴指向屏幕里,如下图所示。OpenGL坐标是右手坐标,而微软平台的Direct3D[ Direct3D(简称:D3D)是微软公司在Microsoft Windows操作系统上所开发的一套3D绘图编程接口,是DirectX的一部份,目前广为各家显卡所支持。与OpenGL同为计算机绘图软件和计算机游戏最常使用的两套绘图编程接口之一。—— 引自于维基百科 http://zh.wikipedia.org/wiki/Direct3D]是左手坐标。\三维坐标世界坐标和模型坐标由于OpenGL坐标有可以分为:世界坐标和模型坐标,所以Cocos2d-JS的坐标也有世界坐标和模型坐标。你是否有过这样的问路经历:张三会告诉你向南走一公里,再向东走500米。而李四会告诉你向右走一公里,再向左走500米。这里两种说法或许都可以找到你要寻找的地点。张三采用的坐标是世界坐标,他把地球作为参照物,表述位置使用地理的东、南、西和北。而李四采用的坐标是模型坐标,他让你自己作为参照物,表述位置使用你的左边、你的前边、你的右边和你的后边。我们看看下图,从图中可以看到A的坐标是(5,5),B的坐标是(6,4),事实上这些坐标值就是世界坐标。如果采用A的模型坐标来描述B的位置,则B的坐标是(1,-1)。\世界坐标和模型坐标有的时候我们需要将世界坐标与模型坐标互相转换。我们可以通过Node对象如下方法实现:{cc.Point} convertToNodeSpace(worldPoint)。将世界坐标转换为模型坐标。{cc.Point} convertToNodeSpaceAR(worldPoint)。将世界坐标转换为模型坐标。AR表示相对于锚点。{cc.Point} convertTouchToNodeSpace(touch)。将世界坐标中触摸点转换为模型坐标。{cc.Point} convertTouchToNodeSpaceAR(touch)。将世界坐标中触摸点转换为模型坐标。AR表示相对于锚点。{cc.Point} convertToWorldSpace(nodePoint)。将模型坐标转换为世界坐标。{cc.Point} convertToWorldSpaceAR(nodePoint)。将模型坐标转换为世界坐标。AR表示相对于锚点。下面我们通过两个例子了解一下世界坐标与模型坐标互相转换。

1、世界坐标转换为模型坐标

如下图所示是世界坐标转换为模型坐标实例运行结果。\世界坐标转换为模型坐标在游戏场景中有两个Node对象,其中Node1的坐标是(400, 500),大小是300 x 100像素。Node2的坐标是(200, 300),大小也是300 x 100像素。这里的坐标事实上就是世界坐标,它的坐标原点是屏幕的左下角。编写代码如下:[html] view plaincopy

var HelloWorldLayer = cc.Layer.extend({

sprite: null,

ctor: function () {

this._super();

var size = cc.winSize;

var closeItem = new cc.MenuItemImage(

res.CloseNormal_png,

res.CloseSelected_png,

function () {

cc.log("Menu is clicked!");

}, this);

closeItem.attr({

x: size.width - 20,

y: 20,

anchorX: 0.5,

anchorY: 0.5

});

var menu = new cc.Menu(closeItem);

menu.x = 0;

menu.y = 0;

this.addChild(menu, 1);

//创建背景

var bg = new cc.Sprite(res.bg_png); ①

bg.setPosition(size.width / 2, size.height / 2);

this.addChild(bg, 2); ②

//创建Node1

var node1 = new cc.Sprite(res.node1_png); ③

node1.setPosition(400, 500);

node1.setAnchorPoint(1.0, 1.0);

this.addChild(node1, 2); ④

本站部分文章来源于网络以及网友投稿,本站只负责对文章进行整理、排版、编辑,是出于传递更多信息之目的,并不意味着赞同其观点或证实其内容的真实性。如果您有什么意见或建议,请联系QQ28-1688-302!

人工智能实验室
相关文章相关文章
  • Oculus公布原型机,大幅度提升可视角,能实现140°的视场水平

    Oculus公布原型机,大幅度提升可视角,能实现140°的视场水平

  • Michael I. Jordan带你解读百万奖金ATEC蚂蚁人工智能大赛

    Michael I. Jordan带你解读百万奖金ATEC蚂蚁人工智能大赛

  • teamLab创始人猪子寿之: 抛去衣食住行,我还剩下什么?

    teamLab创始人猪子寿之: 抛去衣食住行,我还剩下什么?

  • 2018深圳国际人工智能展览会 2018 shenzhen International Artif

    2018深圳国际人工智能展览会 2018 shenzhen International Artif

网友点评网友点评
阅读推荐阅读推荐

据外媒报道,STEER打造了首款完全自动驾驶停车技术,旨在使常规车辆转变为无人驾驶车辆。STEER的首款技术应用是4级自动驾驶及网络安全停车...

近日,美国软性机器抓手制造商 Soft Robotics 宣布,获得 2000 万美元的融资,本轮投资者包括 Scale Venture Partners,Calibrate Ventures...

据外媒报道,加州车管局发布了《2017自动驾驶脱离报告(California Autonomous Vehicle Disengagement Reports)》,其中谈及了脱离的具体...

用人机语音交互,来解决智能家居适老的问题;通过家庭门禁与安防套件、空气净化套件、可燃气体与有害气体监控套件等相互联动,在不同生活情...