制作简单游戏:第一部分
完整项目见此处。
本系列将介绍如何使用 PlayCanvas 制作完整游戏。我们制作了简单的 Keepy Up 颠球游戏,目标是通过鼠标点击或触摸足球,让它保持在空中。
将涵盖以下主题:
- 场景与层级
- 材质配置
- 游戏脚本
- 足球物理与输入
- 音频与效果
- 用户界面
本系列并非逐步操作指南,而是讨论脚本的各个部分并解释工作原理。建议先将游戏项目派生到自己的账户,再跟随教程学习。
第一部分:场景与层级
PlayCanvas 使用实体层级描述场景。每个实体代表应用中的一个对象,始终具有 ID、名称和变换。变换是定义实体在三维空间中位置、旋转和缩放的矩阵。构建场景时,创建实体并将它们排列为树结构,显示在编辑器左侧面板。树结构让父实体影响子级,例如所有子实体都继承父级的位置、旋转和缩放;禁用父实体也会禁用全部子实体。
Keepy Up 场景的层级中有七个顶层实体。

相机实体
相机决定应用运行时从哪里观察场景。本游戏只有一台固定相机。
平行光实体
光源照亮场景中的三维模型。同时启用的光源越多,渲染场景耗时越长,可能影响游戏帧率,因此应尽量只同时启用少量光源。本游戏只使用一盏固定平行光。
足球实体
足球是场景中的主要动态实体。Football 实体挂载三个组件,选中后可在编辑器右侧属性面板查看:
Sound 组件
声音组件用于播放音频文件。每个组件包含多个槽位,每个槽位对应一个音频文件,可设置循环、音量和音高等播放参数。足球只有一个槽位,播放弹跳声音。
Model 组件
模型组件用于将三维模型资源挂到实体。实体上启用的模型组件,会在实体的三维位置渲染模型。本例挂载足球模型。
Script 组件
脚本组件用于将 JavaScript 文件挂到实体。每个实体会创建文件中脚本的实例,以自定义自身行为。足球脚本将在第三部分进一步介绍。
背景
Background 实体也有模型组件,用作游戏背景平面。将球场纹理放入材质资源,再应用到内置 Plane 实体类型即可创建背景。我们使用材质的 Emissive 槽位,确保背景明亮,不受灯光和足球阴影影响,效果类似老电影中的接景绘画。
撞击效果实体
Impact Effect 实体是在足球弹起时播放的粒子效果,第四部分将进一步介绍。
音频
Audio 实体挂载了更多声音组件,用于播放音乐和游戏结束音效。
用户界面
UI 实体是其他多个实体的父级,每个实体对应游戏用户界面的一个画面。第五部分将介绍 UI 实体。
第二部分继续介绍本游戏。