青瓷引擎布局基础详解之Transform篇
作者：hzc 来源：绿软联盟 发布时间：2016-2-22 15:11:03
文章正文
所有游戏对象都具有Transform组件，Transform组件决定了游戏对象在场景中的的位置、大小、旋转和缩放。位置、旋转和缩放都是相对于父亲对象，如果未明确指定父亲对象则挂载在game.world的世界对象上。以下为详细介绍：
（提示：可在青瓷引擎编辑器中创建UIImage对象（通过菜单：GameObject/Image）进行编辑测试，以便理解本节内容。）
- 位置
游戏对象原点(pivot point)相对于父亲对象原点(pivot point)的水平和垂直偏移位置
X - 水平坐标，node.x = 200
Y - 垂直坐标，node.y = 100
- 大小
游戏对象的水平宽度和垂直高度，显示基于Pivot
Width - 宽度，node.width = 200
Height - 高度，node.height = 100
- Pivot
Pivot参数决定自身原点(Pivot Point)在对象矩形区域的位置，自身缩放和旋转，以及孩子对象位置都相对于原点进行。如下例子中：
Pivot X - 水平相对位置，左边界为0，右边界为1，node.pivotX = 0.2
Pivot Y - 垂直相对位置，上边界为0，下边界为1，node.pivotY = 0.5
- 旋转
游戏对象基于Pivot的旋转弧度。注意：在编辑器中rotation设置为角度，但在游戏代码中得到的为弧度。
Rotation - 旋转角度，node.rotation = Math.PI/4
- 缩放
游戏对象基于Pivot的水平和垂直缩放系数
Scale X - 水平缩放，node.scaleX = 0.5
Scale Y - 垂直缩放，node.scaleY = 1
- Transform 示例
在编辑器中创建一个UIImage对象，在Inspector中设置如下图所示的属性值：
以上编辑器操作结果，可在编辑器所在浏览器控制台内输入如下代码运行实现：
var node = new qc.UIImage(G.game);
node.texture = G.game.assets.find('__builtin_resource__');
node.frame = 'empty.png';
node.colorTint = new qc.Color(0xffff0000);
node.x = 100;
node.y = 100;
node.width = 100;
node.height = 100;
node.rotation = -Math.PI/4;
node.scaleX = 2;
node.scaleY = 1;
node.pivotX = 0.5;
node.pivotY = 0;
文章来自绿盟(xDowns.com)转载请注明来路。
上一篇文章：元宵节最不缺少的就是活动全民突击活动福利介绍！ []
相关文章
· [图文] 青瓷引擎如何编辑帧动画 青瓷引擎编辑帧动画教程· [图文] 如何将骨骼动画导入到青瓷引擎工程？
· [图文] 青瓷引擎如何导出骨骼动画 青瓷引擎导出骨骼动画教程
· [图文] 青瓷引擎如何打包图集 青瓷引擎打包图集教程
· [图文] 青瓷引擎如何创建保存切换场景 青瓷引擎场景编辑教程
· 青瓷引擎如何管理脚本依赖 青瓷引擎脚本依赖管理教程
· 青瓷引擎如何设置工程参数 青瓷引擎工程设置属性说明
· 青瓷引擎软件层级(Hierarchy)面板能干什么
· 青瓷引擎软件工程项目(Project)面板功能介绍
· 青瓷引擎软件的场景、游戏面板是干什么用的？