标准屏幕坐标系

  如果接触过iOS,Android,Windows Phone等系统的应用开发,或使用DOM,CSS开发过Web网页,开发者会非常熟悉所谓的标准屏幕坐标系:左上角为原点,向右为X轴正方向,向下为Y轴正方向。

Cocos2d坐标系

  Cocos2d引擎家族,包括Cocos2d-x,Cocos2d-JS的坐标系统是统一的,但是却不同于前面的屏幕坐标系,而是继承于OpenGL的右手笛卡尔坐标系(Right-handed Cartesian Coordinate System)。

 Cocos2d坐标系的特点是:

  • 原点为屏幕左下角
  • 向右为X轴正方向
  • 向上为Y轴正方向

锚点(Anchor Point)

锚点是在坐标系之上非常重要的概念,锚点就是给节点定位和仿射变换的基准点。锚点包含X轴和Y轴两个方向上的基准点,两个方向上的取值均为[0, 1],意味着锚点位置在节点的X轴和Y轴上的占其宽度和长度的比例。锚点的默认值对于cc.Layer来说是(0,0),也就是场景的左下角;对于其他节点类型来说是(0.5,0.5),即节点的中央。

将一个节点添加到父节点里面时,需要设置其在父节点上的位置,本质上就是设置节点的锚点在父节点坐标系上的位置。节点的显示位置是其位置属性和锚点属性共同作用的结果,位置属性决定锚点位置,锚点属性决定节点相对于锚点位置如何定位。以下图为例:

图中三个精灵的Y轴位置是相同的,左边的精灵锚点为(0,0),所以锚点位于精灵的左下角;中间的精灵锚点为(0.5,0.5),所以锚点位于精灵 中央;右边的精灵锚点为(1,1),所以锚点位于精灵右上角。与此同时,图中可以看到,精灵的旋转也是围绕锚点的,所以锚点的作用不仅仅在于定位,它还会 影响针对节点做出的旋转,防缩等操作。

忽略锚点

cc.Node还拥有ignoreAnchor属性,默认值为false,即使用锚点来定位。若改变其取值为true,则在定位和仿射变换时忽略锚点,始终认为锚点为(0,0)。

Z值

cc.Node包含两种深度值:vertexZzIndex

  • verextZ是OpenGL坐标系中的Z值,仅在Web端的WebGL模式下或原生平台中有效。
  • zIndex是Cocos2d-JS本地坐标系中Z值。

在实际开发中开发者只需关注zIndex,在本地坐标系中,即在某个节点的所有子结点中,它决定了子节点从前向后的排列以及绘制顺序。zIndex值越大,节点越靠前,反之,zIndex值越小,节点越靠后,绘制顺序则是从后向前逐个节点进行绘制,这也同样符合右手笛卡尔坐标系的逻辑。

给节点定位

在Cocos2d-JS中,有两个非常方便的属性辅助开发者为某个节点定位:

  • cc.winSize:Cocos2d-JS游戏窗口的大小。
  • cc.visibleRect:Cocos2d-JS游戏的可视范围矩形以及相对于游戏窗口的位置等信息。

需要注意的是,cc.winSize可能不等同于cc.visibleRect的大小,这取决于游戏所使用的屏幕适配策略,关于屏幕适配策略的细节我们留待后面章节详细阐述。概括来说,cc.winSize等同于游戏场景的大小,但是游戏场景可能并不是完整可见,其可见范围信息被保存在cc.visibleRect中。cc.visibleRect包含以下属性:

属性 类型 描述
topLeft Point 可视范围左上角坐标
topRight Point 可视范围右上角坐标
bottomLeft Point 可视范围左下角坐标
bottomRight Point 可视范围右下角坐标
center Point 可视范围中心点坐标
top Point 可视范围上方中心点坐标
bottom Point 可视范围下方中心点坐标
left Point 可视范围左边中心点坐标
right Point 可视范围右边中心点坐标
width Number 可视范围的宽度
height Number 可视范围的高度

举个例子,想要在屏幕上方居中显示一个精灵或文本标签,那么可以使用cc.pAdd(cc.visibleRect.top, cc.p(0, 50))来获得上方中心点向下偏移50个像素的位置,这个位置就可以作为精灵的位置,同时将精灵的锚点设置为(0.5,1),那么这个精灵就会居中显示,并且精灵顶端距离可视范围顶端50个像素。

使用cc.winSize配合cc.visibleRect可以更有效率得为节点定位,我们强烈推荐配合锚点使用这些属性来给节点进行定位。

设置锚点

var label = cc.LabelTTF.create("Hello World", "Arial", 40);
label.setPosition(size.width / 2, size.height / 2);

Cocos2d-JS坐标系统的更多相关文章

  1. cocos2d js jsb XMLHttpRequest 中文乱码

    1.首先讲下怎样使用XMLHttpRequest 下面所说的是在cocos2d-x 2.2.2 或者 2.3 版本号中. 首先要明确cocos2d js事实上分两个版本号,一个是html5的版本号,另 ...

  2. cocos2d js的一些tip

    cocos2d-js-v3.2-rc0 cc.director.end();//退出app cc.Application.getInstance().openURL("http://www. ...

  3. cocos2d js ClippingNode 制作标题闪亮特效

    1.效果图: 之前在<Android 高仿 IOS7 IPhone 解锁 Slide To Unlock>中制作了文字上闪亮移动的效果,这次我们来看下怎样在cocos2d js 中做出类似 ...

  4. cocos2d.js

    1.节点是Cocos2d最基础的东西 2.坐标与普通数学坐标一致 3.children属性表示节点的孩子,父节点位置变化,它包含的子节点也会跟着变化,以整体的形势移动 4.层(layer), 新建层: ...

  5. cocos2d JS 源生js实现each方法

    javascript笔记——源生js实现each方法   出处:http://www.lovejavascript.com/#!zone/blog/content.html?id=48 jquery里 ...

  6. cocos2d JS 错误异常抛出捕获和崩溃拦截

    Error对象 一旦代码解析或运行时发生错误,JavaScript引擎就会自动产生并抛出一个Error对象的实例,然后整个程序就中断在发生错误的地方. Error对象的实例有三个最基本的属性: nam ...

  7. cocos2d JS 在 JavaScript 中,怎样把一个对象转化成 JSON 字符串?

    为什么今天要做这样子的操作,原因很简单,因为cocos JS 的本地缓存储存不了对象,所以当我通过本地缓存的 key和value来取值的时候就取不出来来,json的消息数据是一个对象来的,然而在做牌局 ...

  8. cocos2d JS 本地缓存存储登陆记住账号密码->相当于C++中的UserDefault

    在cocos-js 3.0以上的版本中,当我们用到本地存储的时候,发现以前用到的UserDefault在JS中并没有导出,而是换成了LocalStorage. 在LocalStorage.h文件中我们 ...

  9. html5 cocos2d js Access-Control-Allow-Origin

    1.No 'Access-Control-Allow-Origin' header is present on the requested 近期在接html5的渠道,遇到了跨域的问题,使用 js 的 ...

  10. VSCode配合chrome浏览器调试cocos2d js项目

    1.准备阶段 具备调试功能的VSCode(我的是在win10上,版本是1.17.1) 在VSCode里下载安装Debugger for Chrome扩展插件. 2.具体操作 创建一个cocosjs工程 ...

随机推荐

  1. HTTP各个状态返回值

    转载来自于:http://desert3.iteye.com/blog/1136548 502 Bad Gateway:tomcat没有启动起来 504 Gateway Time-out: nginx ...

  2. 43.Android之ListView中BaseAdapter学习

    实际开发中个人觉得用的比较多是BaseAdapter,尽管使用起来比其他适配器有些麻烦,但是使用它却能实现很多自己喜欢的列表布局,比如ListView.GridView.Gallery.Spinner ...

  3. poj1733Parity game

    Parity game Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 7288   Accepted: 2833 Descr ...

  4. TP中二维数组的遍历输出

    例子分析 <volist name="list" id="vo"> <volist name="vo['sub']" id ...

  5. PHP时间比较和时间差如何计算

    1.<?php 2. $zero1=date(“y-m-d h:i:s”); 3. $zero2=”2010-11-29 21:07:00′; 4. echo “zero1的时间为:”.$zer ...

  6. VS2013配置Caffe卷积神经网络工具(64位Windows 7)——准备依赖库

    VS2013配置Caffe卷积神经网络工具(64位Windows 7)--准备依赖库 2014年4月的时候自己在公司就将Caffe移植到Windows系统了,今年自己换了台电脑,想在家里也随便跑跑,本 ...

  7. javascript滚动条之ScrollBar.js

    ScrollBar.js是一个仅仅120行的滚动条JS插件,使用非常方便 详情阅读:https://git.oschina.net/wuquanyao/scrollbar.js/*========== ...

  8. Servlet的生命周期及filter,servletRequest和servletResponse

    序,Web应用中,Servlet和Filter是很重要的两个概念,一定要理解透彻. 一.Servlet类 继承自HttpServlet,HttpServlet是一个抽象类,主要包含的方法有init,s ...

  9. PHP常用正则表达式

    正则表达式用于字符串处理.表单验证等场合,实用高效.现将一些常用的表达式收集于此,以备不时之需. 匹配中文字符的正则表达式: [\u4e00-\u9fa5] 评注:匹配中文还真是个头疼的事,有了这个表 ...

  10. Android软键盘隐藏,遮挡EidtText解决办法

    一.自动弹出软键盘 Timer timer=new Timer(); timer.schedule(new TimerTask() { public void run() { InputMethodM ...