标准屏幕坐标系

  如果接触过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. 17.(转) Android之四大基本组件介绍与生命周期

    Android四大基本组件分别是Activity,Service服务,Content Provider内容提供者,BroadcastReceiver广播接收器. 一:了解四大基本组件 Activity ...

  2. mysql中的if判断

    问题是这样的,有一张表(tb_class)专门保存班级的ID和班级的名字 另一张表是学生信息表(tb_stu),表中有一个字段叫classID,没有外键关联,现在要把 这张表刷新到另一个表tb_par ...

  3. jquery中的prop和attr比较区别

    近期和一同事争执prop和attr的区别,也查了很多,同事说它只是特性和固有属性的区别,但是我也查到了一些其他的,故此,来总结一下吧! 1.固有属性和特别属性 对于HTML元素本身就带有的固有属性,在 ...

  4. 阿里云搭建基于PPTP的VPN(Windows Server 2008)

    由于阿里云在网络上分为两张网卡,一张内网,另一张是外网,所以在搭建PPTP的VPN时需要特殊处理. 实现步骤: 通过以上配置即可拨号成功 下面是通过NFS策略进行控制访问  完成后,即可拨号上网. 下 ...

  5. Record is locked by another user --Oracle行锁解锁

    Oracle修改表中记录时出现record is locked by another user的问题 在操作表时没有commit,导致表被锁,只要执行下面两行语句,就可以了将行锁解锁了. 1.     ...

  6. groovy–流程控制

    在本篇文章中,我们将介绍逻辑分支,循环,以及如何从if-else以及try-catch代码块中返回值. if – elseGroovy 支持Java传统的if-else语法: def x = fals ...

  7. centos 配置固定ip

    centos下网络配置方法(网关.dns.ip地址配置) 来源:互联网 作者:佚名 时间:07-13 00:32:07 [大 中 小] 本文介绍了centos网络配置的方法,centos网络配置主要包 ...

  8. 生成元(Digit Generator ,ACM/ICPC Seoul 2005 ,UVa 1583)

    生成元:如果 x 加上 x 各个数字之和得到y,则说x是y的生成元. n(1<=n<=100000),求最小生成元,无解输出0. 例如:n=216 , 解是:198 198+1+9+8=2 ...

  9. C/S B/S 及WEB工作原理

     一.C/S B/S区别 (http://wenku.baidu.com/link?url=e8bxaqz_lYCXws6TlDRJEq1qsLumNTBhr3Es6eA1ZuhHhq9FZGbVgo ...

  10. 15个超实用的php正则表达式

    在这篇文章里,我已经编写了15个超有用的正则表达式,WEB开发人员都应该将它收藏到自己的工具包. 验证域名 检验一个字符串是否是个有效域名. $url = "http://komunitas ...