Cocos2d-JS坐标系统
标准屏幕坐标系
如果接触过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
包含两种深度值:vertexZ
和zIndex
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坐标系统的更多相关文章
- cocos2d js jsb XMLHttpRequest 中文乱码
1.首先讲下怎样使用XMLHttpRequest 下面所说的是在cocos2d-x 2.2.2 或者 2.3 版本号中. 首先要明确cocos2d js事实上分两个版本号,一个是html5的版本号,另 ...
- cocos2d js的一些tip
cocos2d-js-v3.2-rc0 cc.director.end();//退出app cc.Application.getInstance().openURL("http://www. ...
- cocos2d js ClippingNode 制作标题闪亮特效
1.效果图: 之前在<Android 高仿 IOS7 IPhone 解锁 Slide To Unlock>中制作了文字上闪亮移动的效果,这次我们来看下怎样在cocos2d js 中做出类似 ...
- cocos2d.js
1.节点是Cocos2d最基础的东西 2.坐标与普通数学坐标一致 3.children属性表示节点的孩子,父节点位置变化,它包含的子节点也会跟着变化,以整体的形势移动 4.层(layer), 新建层: ...
- cocos2d JS 源生js实现each方法
javascript笔记——源生js实现each方法 出处:http://www.lovejavascript.com/#!zone/blog/content.html?id=48 jquery里 ...
- cocos2d JS 错误异常抛出捕获和崩溃拦截
Error对象 一旦代码解析或运行时发生错误,JavaScript引擎就会自动产生并抛出一个Error对象的实例,然后整个程序就中断在发生错误的地方. Error对象的实例有三个最基本的属性: nam ...
- cocos2d JS 在 JavaScript 中,怎样把一个对象转化成 JSON 字符串?
为什么今天要做这样子的操作,原因很简单,因为cocos JS 的本地缓存储存不了对象,所以当我通过本地缓存的 key和value来取值的时候就取不出来来,json的消息数据是一个对象来的,然而在做牌局 ...
- cocos2d JS 本地缓存存储登陆记住账号密码->相当于C++中的UserDefault
在cocos-js 3.0以上的版本中,当我们用到本地存储的时候,发现以前用到的UserDefault在JS中并没有导出,而是换成了LocalStorage. 在LocalStorage.h文件中我们 ...
- html5 cocos2d js Access-Control-Allow-Origin
1.No 'Access-Control-Allow-Origin' header is present on the requested 近期在接html5的渠道,遇到了跨域的问题,使用 js 的 ...
- VSCode配合chrome浏览器调试cocos2d js项目
1.准备阶段 具备调试功能的VSCode(我的是在win10上,版本是1.17.1) 在VSCode里下载安装Debugger for Chrome扩展插件. 2.具体操作 创建一个cocosjs工程 ...
随机推荐
- 17.(转) Android之四大基本组件介绍与生命周期
Android四大基本组件分别是Activity,Service服务,Content Provider内容提供者,BroadcastReceiver广播接收器. 一:了解四大基本组件 Activity ...
- mysql中的if判断
问题是这样的,有一张表(tb_class)专门保存班级的ID和班级的名字 另一张表是学生信息表(tb_stu),表中有一个字段叫classID,没有外键关联,现在要把 这张表刷新到另一个表tb_par ...
- jquery中的prop和attr比较区别
近期和一同事争执prop和attr的区别,也查了很多,同事说它只是特性和固有属性的区别,但是我也查到了一些其他的,故此,来总结一下吧! 1.固有属性和特别属性 对于HTML元素本身就带有的固有属性,在 ...
- 阿里云搭建基于PPTP的VPN(Windows Server 2008)
由于阿里云在网络上分为两张网卡,一张内网,另一张是外网,所以在搭建PPTP的VPN时需要特殊处理. 实现步骤: 通过以上配置即可拨号成功 下面是通过NFS策略进行控制访问 完成后,即可拨号上网. 下 ...
- Record is locked by another user --Oracle行锁解锁
Oracle修改表中记录时出现record is locked by another user的问题 在操作表时没有commit,导致表被锁,只要执行下面两行语句,就可以了将行锁解锁了. 1. ...
- groovy–流程控制
在本篇文章中,我们将介绍逻辑分支,循环,以及如何从if-else以及try-catch代码块中返回值. if – elseGroovy 支持Java传统的if-else语法: def x = fals ...
- centos 配置固定ip
centos下网络配置方法(网关.dns.ip地址配置) 来源:互联网 作者:佚名 时间:07-13 00:32:07 [大 中 小] 本文介绍了centos网络配置的方法,centos网络配置主要包 ...
- 生成元(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 ...
- C/S B/S 及WEB工作原理
一.C/S B/S区别 (http://wenku.baidu.com/link?url=e8bxaqz_lYCXws6TlDRJEq1qsLumNTBhr3Es6eA1ZuhHhq9FZGbVgo ...
- 15个超实用的php正则表达式
在这篇文章里,我已经编写了15个超有用的正则表达式,WEB开发人员都应该将它收藏到自己的工具包. 验证域名 检验一个字符串是否是个有效域名. $url = "http://komunitas ...