前端开发入门：从零开始认识游戏界面制作
上课信息
上课日期：2025年8月24日
上课时间：下午5:20
上课时长：45分钟40秒
一、这节课到底在学什么？
这节课是前端开发的入门课程，主要带大家了解游戏前端开发的基本概念、核心文件和常用工具库。老师通过实际操作演示，让大家直观感受前端如何控制游戏界面元素，以及如何通过代码创建和修改游戏中的图片、文字等组件。
二、课程时间线梳理
-
开始-10分钟：课程引入，介绍前端开发的作用和优势（如客户端计算、特效渲染等后端无法替代的功能）。
-
10-20分钟：讲解前端两大核心文件——export（界面布局文件） 和 layout（界面逻辑控制文件），并通过工具创建UI，演示组件层级关系（父节点、子节点）。
-
20-35分钟：系统介绍前端开发需要掌握的四大核心库：
- 原生库（必须掌握）
- SL库（996引擎封装的功能库）
- GUI库（界面生成、修改库）
- CC库（Cocos2d-x基础库，选修）
-
35-45分钟：实战演示。
- 使用
require加载模块。
- 讲解并演示事件触发机制（如键盘事件F1/F2）。
- 实现热更新（F2键刷新界面），避免修改代码后重启客户端。
- 使用GUI库三步创建界面：创建父节点 -> 添加图片/文本组件 -> 修改组件属性。
- 使用循环批量创建文本组件。
三、重点知识点总结
-
前端开发的核心价值：处理渲染特效、进行客户端计算和验证，可控性强。
-
两大核心文件：export 负责定义UI界面的结构和样式（像HTML），layout 负责界面的交互逻辑（像JavaScript）。
-
组件与层级关系：界面元素存在父节点和子节点的层级关系，拖动父节点，其下的子节点会跟随移动。
-
四大核心库：重点是原生库、SL库和GUI库，掌握这三者即算前端入门。
-
关键函数与操作：
require：加载Lua模块文件。- 事件注册：监听玩家操作（如按键）并触发相应函数。
- 热更新：通过事件（如按F2）重新加载模块，实时查看代码修改效果，提高开发效率。
- GUI创建界面三步曲：创建父节点 -> 挂接组件（图片、文本等） -> 设置组件属性。
dump函数：用于打印输出表（table）的结构和内容，方便调试。
四、学完这节课你能掌握
- 明白游戏前端是做什么的，以及它的主要优势。
- 认识前端最核心的**
export和 layout文件**，并了解它们的分工。
- 知道前端开发需要重点学习和使用的三个核心库（原生、SL、GUI），学习目标更清晰。
- 学会使用F2键实现热更新，这是一个非常实用的开发技巧。
- 能够看懂并使用GUI库的基础API来创建最简单的图片和文本界面。
老师讲课评价
本节课老师讲解非常通俗易懂，善于用比喻和实际操作（如拖动父节点子节点跟随）来解释抽象概念，降低了学习门槛。课程结构清晰，从宏观介绍到具体操作，由浅入深，尤其适合小白建立对前端开发的整体认知。同时，老师指出了明确的学习路径和重点（如三大库），对学员后续自学非常有帮助。实战部分节奏适中，关键代码都有演示，整体教学效果很好。
课程入口
开发实战
