自学开发笔记，有兴趣的同学请关注微信WiGameFun，不定时分享游戏开发相关技术。有不对的地方烦请指点修正。

Egret开发（三）对象的显示

前面我们已经整理了Egret代码结构，接下来我们就一起学习一下在Egret中如何把对象展示在场景中。

​

坐标系

要在场景中展示对象元素，离不开坐标信息。所以第一部分我们首先需要掌握坐标系的概念。一般来说，在游戏中分为世界坐标系和相对坐标系。所谓世界坐标系，就是我们在添加一个元素到场景中时，这个元素相对stage的坐标，而相对坐标系则是当我们把这个元素添加到另外一个节点时的坐标。

通过上面的演示，我们可以看出来，世界坐标系是X轴向右为正向，Y轴为向下为正向。但是我们在设计实现一个游戏时，往往我们设计的逻辑中，对玩家来说，X轴向右为正向，Y轴向上为正向，这样才符合玩家操作时的习惯，因此我们在将逻辑中的对象展示在屏幕中时，需要将逻辑坐标系转换为世界坐标系才合适。这一点需要大家在以后的游戏开发中注意。如下图说明，红色的是屏幕坐标系，当我们把一个元素在屏幕上显示时，一定是遵循这个坐标系的，蓝色的是逻辑坐标系，我们在玩的游戏中，一般会认为遵循这个坐标系，比如BOSS会出现在逻辑坐标系中的远端，而我们控制的角色则在逻辑坐标系的近端等等。（是不是被Forward出神入化的绘图功底震撼了？）

锚点

接下来我们要了解的的一个关键概念是锚点，什么是锚点呢？我们在游戏场景中设置一个元素的坐标是以（x，y）形式给定的，但是我们显示的元素并不是一个像素点，而是一个具有宽和高的矩形、或者有半径的圆形、甚至是一些不规则的多边形……总之，元素会有一定的面积，那我们在设置该元素的位置信息时，到底是设置的这个元素区域内哪一点呢？

说到这里，有些读者可能已经明白了。对，我们需要在元素上选择一点，作为设置该元素位置的标准点，这就是我们这里要说到的锚点。但是锚点的位置是分别以横轴方向和纵轴方向上[0-1]之内的一个点来表示的数来表示在该方向上锚点的百分比位置。这样描述可能有些拗口。举个栗子！如下图所示，一个宽100，高50的矩形元素，我们要设置它在场景中的坐标为（80,80），当我们选择以锚点为（0,0）来设置坐标时，就会将矩形的左上角这一点对齐放置在场景中的（80,80）位置处，当我们以锚点（50，25）来设置坐标时，就会将矩形的几何中心（宽50，高25）这一点对齐放置在场景中的（80,80）位置处……(这里需要大家注意的是，egret的锚点与Cocos2dx中的锚点有区别，Cocos2dx中的锚点是0-1的一个小数，代表坐标点在这个方向上的一个比例值)

核心类及对应属性

我们在有了以上这些基础概念之后，就可以展望下自己动手实现元素在场景中的展示了。不同的显示内容，Egret为我们准备了不同的类型。

DisplayObject：显示对象的基类，所有显示对象都继承自这个类型。

Bitmap：位图，用来显示图片。
Shape：矢量图，用来显示矢量图形，其中提供方法供使用者绘制矢量图形。
TextFiled：文本类，用来显示文本信息。
BitmapText：位图文本类，用来显示图片字。
DisplayObjectContainer：显示对象容器接口，所有显示容器对象均实现此接口。
Sprite：带有矢量绘制功能的显示容器。
Stage：舞台类。

显示对象的具有以下公共属性：

alpha：透明度。

width：宽度。

height：高度。

rotation：旋转角度。

scaleX：横向缩放。

scaleY：纵向缩放。

skewX：横向斜切。

skewY：纵向斜切。

visible：是否可见。

x：横坐标。

y：纵坐标。

anchorOffsetX：对象绝对锚点X。

anchorOffsetY：对象绝对锚点Y。

效果展示

有了以上知识的储备，接下来我们用Egret在场景中添加一个元素。为了方便理解，我在代码中进行了详细的注释。

执行效果如下，为了能够与没做缩放、旋转等操作的对象进行对比，我们在左侧放置了一个原始的对象元素。