今天我们就来聊聊如何使用支持TSX、运行于原生平台的游戏引擎Dora SSR，帮助你轻松进入游戏开发的世界。
别担心，游戏引擎并不是什么高不可攀的技术，它和我们熟悉的前端开发工具有着惊人的相似之处。
1.游戏客户端开发也可以是前端开发的一种
首先我们来解释一下什么是游戏引擎。
简单来说，游戏引擎是一些工具和库的集合，可以帮助开发人员构建游戏并管理图形、声音、物理计算或碰撞检测等。
对于前端开发人员来说，你可以将其视为专门为运行游戏而设计的特殊浏览器。
Dora SSR的游戏场景管理采用了类似HTML DOM的树形结构游戏开发素材，这是我们非常熟悉的。
想象一下，把 div 元素替换成游戏中的各种物体，把 CSS 动画替换成游戏动画，概念都差不多，代码写法可能也差不多开源游戏引擎游戏运营，是不是觉得很有趣呢？
2. 从 TypeScript 到 TSX：前端技术在游戏中的应用
许多前端开发人员熟悉 TypeScript 和 React 的 JSX 语法。
在Dora SSR开源游戏引擎中，我们通过支持TSX，提供了类似于前端开发编程模型的游戏开发接口。
是的，你没听错，就是那个 TSX。
使用 TSX 开发游戏意味着您可以利用现有的前端技术堆栈（组件、模块和其他现代前端技术），并在游戏开发中直接重用这些概念。
而且，Dora SSR的性能优化保证了它在复杂的游戏场景中也能流畅运行。
3. 挑战：用 100 行代码编写一款类似《愤怒的小鸟》的游戏
好了，理论讲得够多了，让我们来点实际的。
我们来看看如何用不到100行TSX代码在Dora SSR中编写一个类似《愤怒的小鸟》的游戏。
当然，在开始之前你还是需要准备好开发环境的，用Dora SSR来做这个很简单：装好安装包，打开浏览器，然后开始写代码，运行就可以了。
安装与启动请见：Dora启动！
（）
不小心在手机上安装了APK包？那么在同一个局域网内访问它，就可以直接在手机上进行开发和调试了。
1.编写最简单的游戏场景
在编写实际代码之前，我们可以编写一条专门的注释，这个注释可以告诉 Dora SSR 的 Web IDE 当我们按 Ctrl + S 保存文件时，自动对正在运行的代码进行热更新，从而实现代码运行结果的实时预览功能。
//@preview-file 开启
然后，我们导入必要的库和组件。
当然，我们的代码编辑器也会提示我们自动导入所需的模块，这可以在以后的编码过程中完成：
从'DoraX'导入{React，toNode，useRef}；
从'Dora'导入{Body、BodyMoveType、Ease、Label、Line、Scale、TypeName、Vec2、tolua}；
在Dora SSR中显示一张图片非常简单，只需要使用一个标签即可，最后通过toNode()函数将标签实例化为游戏对象。
到节点（）；
OK，现在你已经基本掌握了朵拉SSR游戏开发的大部分技巧，开始制作你自己的游戏吧（认真的说）。
2.编写游戏盒子组件
接下来，游戏中碰撞的盒子将由 Box 组件定义，该组件接受
num、x、y 和 children 等属性：
接口 BoxProps {
num：数字；
x?: 数字；
y？：数字；
孩子？：任何|任何[]；
const Box = (props: BoxProps) => {
const numText = props.num.toString();
返回 （
绘制节点>
{numText} 标签>
{props.children}
正文>
（英文）：
};
我们使用类似 React 的函数组件来定义我们的盒子组件，其中：
3. 创建 TSX 实例化对象引用
使用 useRef 创建两个用于备份的引用变量，分别指向鸟和分数标签：
const bird = useRef();
const 分数 = useRef();
4. 创建发射线
发射线由线变量创建，并添加触摸（和鼠标单击）事件处理：
让开始 = Vec2.zero;
让 delta = Vec2.zero;
const 线 = 线();
到节点（
onTapBegan = {(触摸) => {
开始 = 触摸.位置;
行.清除（）；
}}
onTapMoved = {(触摸) => {
delta = delta.添加（触摸.delta）；
线.设置（[开始，开始.添加（delta）]）；
}}
onTapEnded = {() => {
如果（！bird.current）返回；
鸟.当前.速度 = delta.mul(Vec2(10, 10));
开始 = Vec2.零；
delta = Vec2.零；
行.清除（）；
}}
{/* ...在物理世界下创建其他游戏元素... */}
5.创建其他游戏元素
接下来我们使用游戏场景的父标签，在其下继续创建游戏场景中的各个元素：
5.1 接地
首先，我们使用身体组件创建地面并将其设置为静态刚体：
绘制节点>
正文>
5.2 盒子
接下来我们使用之前编写的Box组件创建5个盒子，并设置不同的初始位置和分数，并在创建时播放出现动画：
[10, 20, 30, 40, 50].map((num, i) => (
序列>
盒子>
））
序列组件：用于创建在父节点上播放的动画序列，包含以下动画：
5.3 鸟类
最后，我们使用身体组件创建鸟并设置碰撞形状、外观和分数标签：
如果（其他标签！==''&&分数当前）{
// 累积积分
const sc = parseFloat(score.current.text) + parseFloat(other.tag);
分数.当前.文本 = sc.toString();
// 清除命中框上的分数
const 标签 = tolua.cast(其他.子项?.last, 类型名称.标签);
如果（标签）标签.text ='';
其他.标签 = '';
// 播放盒子被击中的动画
其他.执行（比例（0.2，0.7，1.0））；
}}>
绘制节点>
0 标签>
正文>
6.完成游戏逻辑
至此，我们已经完成了游戏的核心逻辑，你可以根据自己的想法进一步完善游戏逻辑，添加功能。
完整的演示代码可以在以下链接中找到：
以下是一些实际结果的截图。
拖动屏幕启动愤怒的小鸟
我技术很好，一杆进洞就拿下了所有分。
IV. 简要揭秘 1. 它是鹿还是马？
事实上，借助 Dora SSR 引擎的功能，我们编写的游戏代码可以保证在 Linux、Android、iOS、macOS 和 Windows 上运行结果一致。
但为了运行这段代码，我们的 Dora SSR 引擎甚至不支持 JavaScript 运行环境……（你说什么？）
是的，Dora SSR 的底层技术实现其实是基于 Lua 和 WASM 虚拟机作为脚本语言运行环境的。
对 TypeScript 的支持实际上是通过集成 TypescriptToLua 编译器提供的。
（eScriptToLua）
TSTL 重写了 TypeScript 语言编译器的后端，将 TS 和 TSX 代码编译成等效的 Lua 代码，以便 TS 代码可以在 Dora 上加载运行。
在Dora内置Web IDE的代码编辑器中开源游戏引擎，可以帮助进行TS语言的检查与补全以及Dora内置库API的提示。
至于最终的用户体验，就不用担心最后是鹿死谁手了，只要代码能通过TS编译检查，拉出来运行都一样。
2. 它和 React 相关吗？
目前对这个问题的答案是：是的，有（因此截至发布时还没有）。
React 最重要的能力就是通过 Virtual DOM 和 Tree Diff 处理来同步渲染组件的状态和业务数据。目前在 Dora SSR 中还没有实现这个机制，所以现在大家看到的用 TSX 编写的类似 VDOM 的构造代码在运行时只会做一次性的游戏渲染对象的构造，之后的处理将交由底层的 C++ 引擎函数来负责。
也许有一天我们会为游戏UI开发提供通过执行Tree Diff来同步状态的能力，类似于React，或者基于TSX实现其他渲染组件状态同步机制，类似于SolidJS。
因此我们诚挚邀请各位前端开发的朋友加入我们，一起玩朵拉SSR项目，研究如何运用前端开发技术思想为游戏开发推出更多好用、便捷的轮子。
最后我们的Q群来啦，欢迎大家来玩：
512620381
关于作者
李进：金融行业大数据工程师，Dora SSR、Yuescript开源软件作者。
项目简介
Dora SSR（多拉SSR）是一个用于在多种设备上快速开发2D游戏的游戏引擎。
其内置简单易用的开发工具链，支持在手机、开源掌上游戏机等设备上直接进行游戏开发。
项目存储库
