IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 游戏开发 -> 注意到这些,Cocos Creator 坐标系不再迷糊 -> 正文阅读

[游戏开发]注意到这些,Cocos Creator 坐标系不再迷糊

看完官方文档: Cocos Creator 坐标系,写完合成大西瓜,仍然对坐标系,参照标准,位置的确定这些问题,显得十分迷糊。将世界坐标系、屏幕坐标系、子节点与父节点搞清楚后,好像还是不能理解这些坐标位置的产生。推本溯源后惊觉:

canvas根节点,本身就是一个节点。

注意到这一点,就是不再犯迷糊的起点。来看看canvas的Node节点属性
在这里插入图片描述
canvas作为根节点,位置position,锚点anchor和宽高size是上锁的不让修改的。我们要关注的是:

位置position,锚点anchor

这两个属性是决定我们要描绘的东西放在什么位置,设置了精灵的位置后,为什么它处于了画布上那个位置,(虽然编辑器可以让我们自由添加精灵图片和摆放位置,但是如果碰到计算位置的时候,自己慌乱去调整数字的时间是完全不必要花的。
canvas的位置position, x=360,y=640。案例中的设计稿均以720*1280为参照。这个值是cocos2d-x 坐标系决定的。cocos2d-x 坐标系坐标系:
在这里插入图片描述
也就是说cocos2d-x 坐标系的原点在我们屏幕的左下角,左上角是我们惯例中的屏幕坐标系,也就是前端开发人员熟悉的元素相对定位或者决定定位参照的原点。
在这里插入图片描述

依据上图所示,canvas的(0,0)位置就是在编辑器的坐标(0,0)上。编辑器的坐标就是cocos2d-x 坐标系。原点在屏幕的左下角,这是为了跟OpenGL 坐标系一致。canvas根节点的锚点被锁定在了x=0.5,y=0.5,也就是在自己size的width和height的一半的位置,计算出来position的x=720/2=360, y=1280/2=640.
当我们新增任意一个节点,

在这里插入图片描述
对比Canvas根节点的属性可以发现,最大区别在于默认的Position位置是(x=0,y=0), 那这个位置不应该是在编辑器坐标轴的(0,0)原点上吗?实际上是这样的(我随意新增一个精灵鱼的图片)
在这里插入图片描述
为什么跑到中心点去了,Canvas根节点的(360,640)的位置上去了?但是position却还是(0,0)。产生这个差别的原因在于,所有的canvas子节点全部采用绝对坐标系,也就是官方文档所说的世界坐标系。

世界坐标系也叫做绝对坐标系,在 Cocos Creator 游戏开发中表示场景空间内的统一坐标体系,「世界」就用来表示我们的游戏场景。

在这里插入图片描述
我们的游戏开发都按照这个坐标轴,原点在画布的中心点位置,来计算位置的x,y值。
接下来说说父节点和子节点的坐标关系。默认的子节点位置都是(0,0),但是这个前提是由于父亲的锚点在(0.5,0.5)上。如果父亲的锚点改变了,子节点的位置也发生了变化。

比如我建立一个父节点father,白色底,儿子son节点是一个鱼的精灵图片。
在这里插入图片描述
显示的效果:
在这里插入图片描述
可以看到他们都在我们画布上的中心点上,x=0,y=0.做个实验改变father节点的锚点为(1,1)也就是father白色背景的右上角为基准点,在这里插入图片描述
son节点也跟着到了father白色背景的右上角。
我们可以得出,父子节点的关系是:

根据father白色背景节点的位置和锚点属性,确定son节点在画布上的位置。

希望读者们,通过这篇文章,可以理解Cocos Creator 坐标系,对于计算元素位置游刃有余。😘

  游戏开发 最新文章
6、英飞凌-AURIX-TC3XX: PWM实验之使用 GT
泛型自动装箱
CubeMax添加Rtthread操作系统 组件STM32F10
python多线程编程:如何优雅地关闭线程
数据类型隐式转换导致的阻塞
WebAPi实现多文件上传,并附带参数
from origin ‘null‘ has been blocked by
UE4 蓝图调用C++函数(附带项目工程)
Unity学习笔记(一)结构体的简单理解与应用
【Memory As a Programming Concept in C a
上一篇文章      下一篇文章      查看所有文章
加:2021-07-30 13:04:32  更:2021-07-30 13:05:25 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年4日历 -2024/4/28 6:17:04-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码