跳到主要内容

制作简单游戏:第一部分

完整项目见此处。

本系列将介绍如何使用 PlayCanvas 制作完整游戏。我们制作了简单的 Keepy Up 颠球游戏,目标是通过鼠标点击或触摸足球,让它保持在空中。

将涵盖以下主题:

  1. 场景与层级
  2. 材质配置
  3. 游戏脚本
  4. 足球物理与输入
  5. 音频与效果
  6. 用户界面

本系列并非逐步操作指南,而是讨论脚本的各个部分并解释工作原理。建议先将游戏项目派生到自己的账户,再跟随教程学习。

第一部分:场景与层级​

PlayCanvas 使用实体层级描述场景。每个实体代表应用中的一个对象,始终具有 ID、名称和变换。变换是定义实体在三维空间中位置、旋转和缩放的矩阵。构建场景时,创建实体并将它们排列为树结构,显示在编辑器左侧面板。树结构让父实体影响子级,例如所有子实体都继承父级的位置、旋转和缩放;禁用父实体也会禁用全部子实体。

Keepy Up 场景的层级中有七个顶层实体。

层级

相机实体​

相机决定应用运行时从哪里观察场景。本游戏只有一台固定相机。

平行光实体​

光源照亮场景中的三维模型。同时启用的光源越多,渲染场景耗时越长,可能影响游戏帧率,因此应尽量只同时启用少量光源。本游戏只使用一盏固定平行光。

足球实体​

足球是场景中的主要动态实体。Football 实体挂载三个组件,选中后可在编辑器右侧属性面板查看:

Sound 组件​

声音组件用于播放音频文件。每个组件包含多个槽位,每个槽位对应一个音频文件,可设置循环、音量和音高等播放参数。足球只有一个槽位,播放弹跳声音。

Model 组件​

模型组件用于将三维模型资源挂到实体。实体上启用的模型组件,会在实体的三维位置渲染模型。本例挂载足球模型。

Script 组件​

脚本组件用于将 JavaScript 文件挂到实体。每个实体会创建文件中脚本的实例,以自定义自身行为。足球脚本将在第三部分进一步介绍。

背景​

Background 实体也有模型组件,用作游戏背景平面。将球场纹理放入材质资源,再应用到内置 Plane 实体类型即可创建背景。我们使用材质的 Emissive 槽位,确保背景明亮,不受灯光和足球阴影影响,效果类似老电影中的接景绘画。

撞击效果实体​

Impact Effect 实体是在足球弹起时播放的粒子效果,第四部分将进一步介绍。

音频​

Audio 实体挂载了更多声音组件,用于播放音乐和游戏结束音效。

用户界面​

UI 实体是其他多个实体的父级,每个实体对应游戏用户界面的一个画面。第五部分将介绍 UI 实体。

第二部分继续介绍本游戏。