Laya2.x游戏引擎入门系列（五）：游戏的灵魂 - Script

一、从官方Demo中学习如何给游戏注入灵魂

上面的游戏是Laya IDE中提供的官方Demo，一个利用了物理引擎的简单的射击游戏。

游戏中涉及到了音频、动画、物理引擎、预设 等游戏开发中较常用的知识点，但是，这都不是我们这次讨论的重点。我们这次要讨论的是如何才能让你做出来的静态界面变得有灵魂。

1.1 Demo源码分析

我们先来看看Demo的示例代码中都有什么？

示例代码中一个包含了4个文件，他们的继承关系如下：

a. Bullet.ts 继承 Laya.Script，子弹脚本类

b. DropBox.ts 继承 Laya.Script，盒子脚本类

c. GameControl.ts 继承 Laya.Script，游戏控制脚本类

d. GameUI.ts 继承 ui.test.TestSceneUI，游戏场景runtime

我们先说结论，一会带着结论再去看我们的UI文件，简单的解释一下上面的类对应的作用：

1. Laya.Script即脚本，挂载在某个组件/页面中，会定期触发生命周期中回调函数，可在指定的生命周期中实现业务逻辑；
2. ui.test.TestSceneUI它是我们通过IDE实现的UI场景，继承该场景可以让我们的脚本变成该场景的Runtime逻辑。帮助我们操控页面中的元素，并且可以在指定的场景生命周期中实现业务逻辑；

1.2 Demo 场景分析

有了这些代码之后，Laya引擎是怎么让整个游戏运行起来的呢？让我们去Demo的场景列表里面找找原因吧，看看有没有什么奇怪的东西？

打开场景列表，我们能看到除了场景文件*.scene、动画文件*.ani外，列表中还多了一组prefab文件夹，其中包括了Bullet.prefab和DropBox.prefab。

这里的prefab可以直接理解成是我们利用编辑器生成出来的UI组件。具体生成步骤可以参见预设使用。

bullet.prefab的节点结构：

DropBox.prefab的节点结构：

这两个prefab中都带有一个Script节点（红框部分）。

再看看我们的主场景test/TestScene.scene，我们也会发现它的节点列表里面也带有一个Script节点。

但是，在场景的属性里面，我们可以看到在runtime的位置指定了我们之前在script目录下看到的脚本。

看完场景列表中脚本的挂载位置，大家是不是可以才到我们应该怎么给游戏注入灵魂了吧？没错，增加逻辑类的方法有两个：

• 实现一个类继承生成出来的ui场景，并在UI编辑器中将对应的场景的runtime属性设置为你实现的那个类即可；
• 实现一个继承Laya.Script的类，并将该类拖拽到指定的场景中即可；

针对上述两种方式，在laya中维护两套生命周期逻辑

runtime方式的生命周期：

（图示官网上的图，懒得画了）

script方式的生命周期：

在不同的生命周期函数中增加你自己的业务逻辑就可以实现自己的游戏啦，这个套路是不是听起来有点像在Vue中写代码？

针对两种增加逻辑类的方法，推荐的使用场景如下：

• 如果是页面级别的逻辑，可以使用runtime的方式；
• 如果是独立模块，可以使用script的方式；

1.3 script激活流程图

下图为runtime和script的激活流程：

场景激活流程.jpg

• Scene.loadScene加载场景，根据UI文件中的数据，加载对应的静态资源、脚本资源；
• 加载完成后，会优先根据UI文件中的属性runtime来实例化我们的runtime类；
• 同时也会根据场景中的其他UI配置将元素初始化，例如，sprite、script、iamge之类的元素；
• 打开场景，将场景添加到根结点，同时，对该场景下的节点做相同的处理；
• 添加完成后触发该场景的_onAdded方法；
• node._processActive()激活父场景
• node._activeHierarchy()激活当前场景runtime对应的onEnable方法；
• node._activeScript()激活当前场景下的script对应的onEnable方法；

二、Laya2.x游戏引擎入门系列介绍

笔者19年5月开始深度参与了一个OPPO快游戏项目（类似微信小游戏），从零开始折腾到现在,终于算是入了H5游戏开发的门。目前关于Laya引擎开发快游戏的教程还不多，于是笔者决定把这几个月踩过的坑、解决的问题、总结的经验都记录下来，方便其他准备入坑的同学提前规避。

Laya2.x游戏引擎入门系列预计会写以下文章，记录如何从零开始完成一个快游戏的开发和上架：

• Laya2.x游戏引擎入门系列（一）：Hello World
• Laya2.x游戏引擎入门系列（二）：UI界面开发
• Laya2.x游戏引擎入门系列（三）：常用的动画开发
• Laya2.x游戏引擎入门系列（四）：像素级还原文字
• Laya2.x游戏引擎入门系列（五）：游戏的灵魂 - Script
• Laya2.x游戏引擎入门系列（六）：图片治百病【构思中】
• Laya2.x游戏引擎入门系列（七）：数据通信【构思中】
• Laya2.x游戏引擎入门系列（八）：2D物理世界【构思中】
• Laya2.x游戏引擎入门系列（九）：游戏调试【构思中】
• Laya2.x游戏引擎入门系列（十）：项目工程化【构思中】
• Laya2.x游戏引擎入门系列（十一）：游戏性能优化【构思中】
• Laya2.x游戏引擎入门系列（十二）：常见问题汇总【构思中】

同时，Laya2目前将引擎代码通过TypeScript进行了重构，大家如果在写代码中遇到什么疑问都可以直接在GitHub源码中找到答案，后续笔者也会写一些关于Laya2源码解析的文章，有兴趣的朋友可以关注。

第一次尝试写完整的教学文章，如有错误或不严谨的地方，请务必给予指正，十分感谢！

关于我

我是一个莫得感情的代码搬运工，每周会更新1至2篇前端相关的文章，有兴趣的老铁可以扫描下面的二维码关注或者直接微信搜索前端补习班关注。

精通前端很难，让我们来一起补补课吧！