2.3　Stage、Sprite、Graphics

在本节中，我们将创建游戏的场景并熟悉Laya.stage、Laya.Sprite及Laya.graphics的功能。这3个对象分别是LayaAir引擎中laya.display.Stage、laya.display.Sprite和laya.display.Graphics的实例，我们将逐一了解它们的功能和用途。

启动IDE，打开在2.2节创建的工程，切换到代码模式，在资源管理器中打开scr/Main.js文件，代码如下。

我们即将创建的是一个2D项目，因此调用Main.js的第6行代码完成Laya引擎的初始化，参数设置如下。

我们创建了一个宽为720像素、高为1280像素的laya.display.Stage实例。该行代码等价于：

这行代码中的第3个参数Laya.WebGL，表示该项目在运行时优先使用WebGL渲染方式。WebGL（Web Graphics Library）是一种3D绘图协议，可以为HTML5 Canvas提供硬件3D加速渲染功能，帮助Web开发人员在浏览器里借助系统显卡更流畅地展示动态图形。因为并非所有的浏览器都支持WebGL，所以，在WebGL无法正常工作的情况下，LayaAir将使用普通的渲染方式来渲染游戏。

以下两行代码用于屏幕适配，将在第4章详细介绍，在此暂不展开。

然后，我们修改init()方法，具体如下。

laya.display.Stage是舞台类，所有的显示对象都在舞台上显示，通过Laya.stage单例访问。Laya.stage.bgColor是Laya.stage的背景颜色属性。修改完成后，运行项目，将看到一个蓝色背景的空界面。

接下来，将IDE的调试模式设置为【Chrome调试】，运行项目，然后在Chrome浏览器被选中的状态下按【F12】快捷键，运行结果如图2.5所示。

在Chrome浏览器中保持【选择元素查看】单选按钮为选中状态，然后将光标移至屏幕左侧的空界面区域。此时，在浏览器右侧的【Elements】页面元素显示区将高亮显示一个ID为“layaCanvas”的Canvas元素，代码如下。

由此可见，Laya.stage通常工作在Canvas元素中，它与浏览器的对应层级关系，如图2.6所示。在普通的LayaBox游戏开发中，通常只考虑在Laya.stage上实现各种功能。

Laya.stage是单例模式的对象，在一个游戏项目中只有一个。Laya.stage也使用LayaAir引擎开发游戏的根节点，因此在开发时不建议删除Laya.stage。贸然删除Laya.stage会给重建游戏场景等操作带来很多不便，所以，通常采用在Laya.stage上加载或移除对象的方法来渲染游戏的可视化对象。

Laya.stage的坐标系原点在左上角，x轴的正方向是从左至右，y轴的正方向是从上至下。在Main.js的init()方法体（后文简称为init()方法）的最后，添加两行用于显示Laya.stage坐标的代码，具体如下。

切换到LayaAir调试模式，运行项目，在调试控制台将输出下列结果。

注意：Laya.stage的默认位置是(0,0)，通常不可以修改。

接下来，介绍Laya.Sprite。

Laya.Sprite是基本的显示图形的列表节点。Laya.Sprite默认没有宽和高，并且不接受鼠标事件。通过Graphics可以绘制图形或矢量图，支持旋转、缩放、位移等操作。Laya.Sprite也是容器类，可用来添加多个子节点。

创建一个名为“sp”的Laya.Sprite对象，代码如下。

在init()方法中添加下列代码并运行。

调试控制台的运行输出结果如下。

但是，此时在屏幕上没有显示任何内容。这是因为创建的sp对象只是一个空节点，不包含任何可显示的元素。

下面介绍如何在Laya.stage和Sprite对象中添加可显示的内容。

Laya.Graphics是一个工具API，用于创建绘图显示对象。在Laya项目中，可视化对象的实例都自动包含Graphics的功能。例如，在init()方法的最后添加下面的代码，将在Laya.stage()中绘制两条交叉的线段。drawLine()是绘制线段的方法，前4个参数分别表示起点的横坐标、纵坐标及终点的横坐标、纵坐标，第5个参数表示线段的颜色，第6个参数表示线段的宽度。运行结果如图2.7所示。

同理，可以在已经创建的Sprite对象sp中绘制图形，代码如下。

运行结果如图2.8所示。

以下代码在Sprite对象的原点绘制了一个半径为40的圆。

drawCircle的前3个参数依次表示圆心坐标x、y及圆的半径；第4个参数表示圆的填充颜色，此处设为null（不填充）；第5个参数表示边框的颜色；第6个参数表示边框的宽。

注意：第56行代码与第54行代码的运行结果在屏幕上组成了同心圆，这两个圆分别绘制在Laya.stage和sp上，因此，这两行代码的drawCircle参数的圆心坐标是不一样的。

Laya.Sprite是可以嵌套使用的，在指定的Sprite中，它们的子节点的Sprite位置通常是相对该Sprite的原点设置的。在init()方法的最后，可以添加下面的代码。

运行结果如图2.9所示。这时，在调试控制台中会同时显示sp1相对于Laya.Stage的坐标（以下称为“全局坐标”）。sp1相对stage的坐标是(450,450)。

第68行代码的作用是完成sp1相对于Laya.stage的坐标转换，并将结果存储在一个laya.maths.Point类型的对象中（该对象使用x和y两个元素保存转换结果）。

注意：使用localToGlobal方法转换容器本身的坐标时，被转换的点应该是这个容器的坐标原点。例如，将第68行代码进行如下修改，得到的转换结果将是先前设定的(400,300)。

localToGlobal是一个非常有用的方法，可以提供便捷的坐标转换。如果将sp围绕其原点转动30°，使用localToGlobal方法可以方便地得到sp1的新的全局坐标。修改init()方法，添加如下代码。

调试项目，将得到如图2.10所示的结果，并在调试控制台中输出。sp1相对于stage的坐标是(368.3012715727659,454.9038108507872)。

如图2.10所示，sp与sp1的相对位置不变，但由于sp旋转了30°，导致先前绘制在Sprite上的线段发生了旋转，sp1的全局坐标就发生了改变。

Main.js中的init()方法的完整代码如下。