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!

人工智能实验室
相关文章相关文章
  • 英国研发“杀生”机器人 通过生命体获取能量

    英国研发“杀生”机器人 通过生命体获取能量

  • 无人驾驶汽车如何改变城市生活?听听他们怎么说

    无人驾驶汽车如何改变城市生活?听听他们怎么说

  • 韩春雨称已能重复实验结果 近期将有消息公布

    韩春雨称已能重复实验结果 近期将有消息公布

  • 未来两年人工智能要怎么走?看这篇就够了

    未来两年人工智能要怎么走?看这篇就够了

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

据国外媒体报道,在过去两年内,聊天机器人(chatbot)、人工智能以及机器学习的研发和采用取得了巨大进展。许多初创公司正利用人工智能和...

霍金 视觉中国 图 英国著名物理学家霍金(Stephen Hawking)再次就人工智能(AI)发声,他认为:对于人类来说,强大AI的出现可能是最美妙的...

文|郑娟娟 今年,人工智能(AI) 60岁了。在AI60岁的时候,笔者想要介绍一下AI100,一个刚刚2岁的研究项目,但它的预设寿命是100年,甚至更长...

AlphaGo与李世石的人机大战,为大众迅速普及了人工智能的概念。 但对谷歌而言,除了下围棋,现在的人工智能进展到哪一步了?未来,人工智能...