- 了不起的LayaBox:HTML5游戏开发指南
- 沈毅编著
- 1917字
- 2024-11-02 09:33:45
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文件,代码如下。
![](https://epubservercos.yuewen.com/80E8CD/23950038601095306/epubprivate/OEBPS/Images/42492-00-42-2.jpg?sign=1734431836-pcae3SjNihZ6akqaJr4CTAveSTWuCKi8-0-5651410e5335b70321b052232b1ce41e)
我们即将创建的是一个2D项目,因此调用Main.js的第6行代码完成Laya引擎的初始化,参数设置如下。
![](https://epubservercos.yuewen.com/80E8CD/23950038601095306/epubprivate/OEBPS/Images/42492-00-43-1.jpg?sign=1734431836-05zE0E9YRYGxYU1EinZaMqhS3LaWX13l-0-34174b6ae905ac73062595b3bbe28ced)
我们创建了一个宽为720像素、高为1280像素的laya.display.Stage实例。该行代码等价于:
![](https://epubservercos.yuewen.com/80E8CD/23950038601095306/epubprivate/OEBPS/Images/42492-00-43-2.jpg?sign=1734431836-f3yGO2yJR3WoStjYh4yWPxiYVwysjJst-0-afe92d97b0c9cc9d0b1a91b16cad2f57)
这行代码中的第3个参数Laya.WebGL,表示该项目在运行时优先使用WebGL渲染方式。WebGL(Web Graphics Library)是一种3D绘图协议,可以为HTML5 Canvas提供硬件3D加速渲染功能,帮助Web开发人员在浏览器里借助系统显卡更流畅地展示动态图形。因为并非所有的浏览器都支持WebGL,所以,在WebGL无法正常工作的情况下,LayaAir将使用普通的渲染方式来渲染游戏。
以下两行代码用于屏幕适配,将在第4章详细介绍,在此暂不展开。
![](https://epubservercos.yuewen.com/80E8CD/23950038601095306/epubprivate/OEBPS/Images/42492-00-43-3.jpg?sign=1734431836-exKrk2KS6b33ixU6aBAwdLCsiSfJNhoJ-0-ef20f64b56468fdb34fe06cae1913f1e)
然后,我们修改init()方法,具体如下。
![](https://epubservercos.yuewen.com/80E8CD/23950038601095306/epubprivate/OEBPS/Images/42492-00-43-4.jpg?sign=1734431836-nv7UC9ilg8ELuMUCEYFh02NF1NxspbNM-0-0bada3984d3773cd88c1a237057af957)
laya.display.Stage是舞台类,所有的显示对象都在舞台上显示,通过Laya.stage单例访问。Laya.stage.bgColor是Laya.stage的背景颜色属性。修改完成后,运行项目,将看到一个蓝色背景的空界面。
接下来,将IDE的调试模式设置为【Chrome调试】,运行项目,然后在Chrome浏览器被选中的状态下按【F12】快捷键,运行结果如图2.5所示。
![](https://epubservercos.yuewen.com/80E8CD/23950038601095306/epubprivate/OEBPS/Images/42492-00-44-1.jpg?sign=1734431836-PNKXMyPEry2X5xhWAFylkjApLqPKegZy-0-cd5e33c8731b58d6008eba8911dd25f1)
图2.5 在Chrome浏览器中运行调试
在Chrome浏览器中保持【选择元素查看】单选按钮为选中状态,然后将光标移至屏幕左侧的空界面区域。此时,在浏览器右侧的【Elements】页面元素显示区将高亮显示一个ID为“layaCanvas”的Canvas元素,代码如下。
![](https://epubservercos.yuewen.com/80E8CD/23950038601095306/epubprivate/OEBPS/Images/42492-00-44-2.jpg?sign=1734431836-MHvT8B62wWoGTS8DjYgQlHIqw7gqxmsD-0-68242a1677ae6ad4d601f40c1714e1a6)
由此可见,Laya.stage通常工作在Canvas元素中,它与浏览器的对应层级关系,如图2.6所示。在普通的LayaBox游戏开发中,通常只考虑在Laya.stage上实现各种功能。
![](https://epubservercos.yuewen.com/80E8CD/23950038601095306/epubprivate/OEBPS/Images/42492-00-44-3.jpg?sign=1734431836-bgf6n2FzCOuk6k0aWQ5fhkWhlbDoWywy-0-5699028e405cf9f92c0fab472338da16)
图2.6 Stage与浏览器的层级关系
Laya.stage是单例模式的对象,在一个游戏项目中只有一个。Laya.stage也使用LayaAir引擎开发游戏的根节点,因此在开发时不建议删除Laya.stage。贸然删除Laya.stage会给重建游戏场景等操作带来很多不便,所以,通常采用在Laya.stage上加载或移除对象的方法来渲染游戏的可视化对象。
Laya.stage的坐标系原点在左上角,x轴的正方向是从左至右,y轴的正方向是从上至下。在Main.js的init()方法体(后文简称为init()方法)的最后,添加两行用于显示Laya.stage坐标的代码,具体如下。
![](https://epubservercos.yuewen.com/80E8CD/23950038601095306/epubprivate/OEBPS/Images/42492-00-45-1.jpg?sign=1734431836-NCmnrHNHLLR9TnosXNbTOz6tIo8OpLre-0-6118764cedc7e92a016417cec53b6beb)
切换到LayaAir调试模式,运行项目,在调试控制台将输出下列结果。
![](https://epubservercos.yuewen.com/80E8CD/23950038601095306/epubprivate/OEBPS/Images/42492-00-45-2.jpg?sign=1734431836-zd11fkOmrVMFFKBdu7GfzuBxlY71EU6r-0-8d3b33ff0b05e6cbcce2e343bc90d5ff)
注意:Laya.stage的默认位置是(0,0),通常不可以修改。
接下来,介绍Laya.Sprite。
Laya.Sprite是基本的显示图形的列表节点。Laya.Sprite默认没有宽和高,并且不接受鼠标事件。通过Graphics可以绘制图形或矢量图,支持旋转、缩放、位移等操作。Laya.Sprite也是容器类,可用来添加多个子节点。
创建一个名为“sp”的Laya.Sprite对象,代码如下。
![](https://epubservercos.yuewen.com/80E8CD/23950038601095306/epubprivate/OEBPS/Images/42492-00-45-3.jpg?sign=1734431836-ZC8Cd7xtn3VAdPseO2kxagSAVWEUea7P-0-6f4133ab646c89833115f276063bac41)
在init()方法中添加下列代码并运行。
![](https://epubservercos.yuewen.com/80E8CD/23950038601095306/epubprivate/OEBPS/Images/42492-00-45-4.jpg?sign=1734431836-WUDPHV8fzhZB5ZEVGXAJLLUwSfvBFyeE-0-a61e4f679006f3410889234b85776684)
调试控制台的运行输出结果如下。
![](https://epubservercos.yuewen.com/80E8CD/23950038601095306/epubprivate/OEBPS/Images/42492-00-45-5.jpg?sign=1734431836-S3uYUWUvMdPaEI0TLnJslFA5zqbqm6mB-0-7efd0908134bc338949228063d4b34e9)
但是,此时在屏幕上没有显示任何内容。这是因为创建的sp对象只是一个空节点,不包含任何可显示的元素。
下面介绍如何在Laya.stage和Sprite对象中添加可显示的内容。
Laya.Graphics是一个工具API,用于创建绘图显示对象。在Laya项目中,可视化对象的实例都自动包含Graphics的功能。例如,在init()方法的最后添加下面的代码,将在Laya.stage()中绘制两条交叉的线段。drawLine()是绘制线段的方法,前4个参数分别表示起点的横坐标、纵坐标及终点的横坐标、纵坐标,第5个参数表示线段的颜色,第6个参数表示线段的宽度。运行结果如图2.7所示。
![](https://epubservercos.yuewen.com/80E8CD/23950038601095306/epubprivate/OEBPS/Images/42492-00-46-1.jpg?sign=1734431836-H4MIl5rfAJ3k8WlJibkXb9ZxfIP6Ywye-0-d3bb4ba62f78d2bf99a1468373d38d1a)
![](https://epubservercos.yuewen.com/80E8CD/23950038601095306/epubprivate/OEBPS/Images/42492-00-46-2.jpg?sign=1734431836-K8osra09AbO96IPDD4iiA3DTQVHN1hTF-0-e2f6cd0dffe325835288db3db78867cd)
图2.7 在Laya.stage中绘制两条交叉的线段
同理,可以在已经创建的Sprite对象sp中绘制图形,代码如下。
![](https://epubservercos.yuewen.com/80E8CD/23950038601095306/epubprivate/OEBPS/Images/42492-00-46-3.jpg?sign=1734431836-2n142onXhWFjRl1dS48a8ylVMpBmyjo4-0-4007b848c2c31d245448f22ae141c4f2)
运行结果如图2.8所示。
![](https://epubservercos.yuewen.com/80E8CD/23950038601095306/epubprivate/OEBPS/Images/42492-00-47-1.jpg?sign=1734431836-9oraVsSkm8Yrp0nG1Ss7L3AHamBlypX6-0-c6885ff16bd3cc701bc9b2033331041c)
图2.8 在Sprite中绘制图形
以下代码在Sprite对象的原点绘制了一个半径为40的圆。
![](https://epubservercos.yuewen.com/80E8CD/23950038601095306/epubprivate/OEBPS/Images/42492-00-47-2.jpg?sign=1734431836-oasfTl51DEm5HYGgWK2R8J3cos6KOr5A-0-20c289c16ab17c2264b5d02bde393d58)
drawCircle的前3个参数依次表示圆心坐标x、y及圆的半径;第4个参数表示圆的填充颜色,此处设为null(不填充);第5个参数表示边框的颜色;第6个参数表示边框的宽。
注意:第56行代码与第54行代码的运行结果在屏幕上组成了同心圆,这两个圆分别绘制在Laya.stage和sp上,因此,这两行代码的drawCircle参数的圆心坐标是不一样的。
![](https://epubservercos.yuewen.com/80E8CD/23950038601095306/epubprivate/OEBPS/Images/42492-00-47-3.jpg?sign=1734431836-vbeKt3QtCuyBx3feRspdtDebRISNDZSB-0-3f8300b36eded40ffb0f556694cc2398)
Laya.Sprite是可以嵌套使用的,在指定的Sprite中,它们的子节点的Sprite位置通常是相对该Sprite的原点设置的。在init()方法的最后,可以添加下面的代码。
![](https://epubservercos.yuewen.com/80E8CD/23950038601095306/epubprivate/OEBPS/Images/42492-00-47-4.jpg?sign=1734431836-u1cpIvjfKBsg3QJXsVrjewpuOiEOt7fY-0-4e77be1d314ae2e2126bc36dc18cd7b7)
运行结果如图2.9所示。这时,在调试控制台中会同时显示sp1相对于Laya.Stage的坐标(以下称为“全局坐标”)。sp1相对stage的坐标是(450,450)。
![](https://epubservercos.yuewen.com/80E8CD/23950038601095306/epubprivate/OEBPS/Images/42492-00-48-1.jpg?sign=1734431836-BqDaKl62RWRZQ6vgTg6RzcsyQzfa3i81-0-67efb60ab794bb376da9146596178f29)
图2.9 在Sprite中添加Sprite
第68行代码的作用是完成sp1相对于Laya.stage的坐标转换,并将结果存储在一个laya.maths.Point类型的对象中(该对象使用x和y两个元素保存转换结果)。
注意:使用localToGlobal方法转换容器本身的坐标时,被转换的点应该是这个容器的坐标原点。例如,将第68行代码进行如下修改,得到的转换结果将是先前设定的(400,300)。
![](https://epubservercos.yuewen.com/80E8CD/23950038601095306/epubprivate/OEBPS/Images/42492-00-48-2.jpg?sign=1734431836-oSYYiKgnyTr3M3PkzMruIi5ZtibmKYqN-0-25457a1c73699335c74da21f84c4bfd1)
localToGlobal是一个非常有用的方法,可以提供便捷的坐标转换。如果将sp围绕其原点转动30°,使用localToGlobal方法可以方便地得到sp1的新的全局坐标。修改init()方法,添加如下代码。
![](https://epubservercos.yuewen.com/80E8CD/23950038601095306/epubprivate/OEBPS/Images/42492-00-49-1.jpg?sign=1734431836-aifwI00QrbYOHmzUPLEXbgCsmZYPwZKM-0-e6573a066ad25248868eb8885e4f4d6a)
调试项目,将得到如图2.10所示的结果,并在调试控制台中输出。sp1相对于stage的坐标是(368.3012715727659,454.9038108507872)。
![](https://epubservercos.yuewen.com/80E8CD/23950038601095306/epubprivate/OEBPS/Images/42492-00-49-2.jpg?sign=1734431836-CBCfNDQAzMY7eR74kYUNHb1JvhbUYuam-0-4d0622986fecd44e229fcd315f54da3e)
图2.10 旋转Sprite
如图2.10所示,sp与sp1的相对位置不变,但由于sp旋转了30°,导致先前绘制在Sprite上的线段发生了旋转,sp1的全局坐标就发生了改变。
Main.js中的init()方法的完整代码如下。
![](https://epubservercos.yuewen.com/80E8CD/23950038601095306/epubprivate/OEBPS/Images/42492-00-50-1.jpg?sign=1734431836-pnRDfVjP6jNpUisuF1iEBU3e2SrGJ5Ow-0-c7fac7aa5a2b6924ff38694abb572287)