全套源码丨Cocos Creator 3.0 开发 io 类游戏关键技术点详解

App Store 曾经将 io 游戏列为“值得关注的四个趋势”之一。io 类游戏在国内又被称为休闲竞技类游戏、大作战游戏、大乱斗游戏等，以操作规则简单、多人在线对抗、死后即刻复活等为特点，曾经风靡一时的《球球大作战》、《贪吃蛇大作战》都属于这一类型，广受玩家喜爱。

扫码体验微信小游戏《奔跑吧小仙女》

Cocos 引擎官方于上周正式推出一款 io 类玩法游戏源码《奔跑吧小仙女》。本项目源码包里包含了完整策划文档、项目源码、美术源文件，且官方支持免费提供微信小游戏上线源码授权服务。

游戏中角色会自动前进，玩家需要滑动屏幕控制角色移动的方向，通过收集木板来跨域水域达到抄近路的目的。游戏一共5人参与，最快到达终点的玩家即为胜利。

《奔跑吧小仙女》在不使用物理的基础上进行开发。同时，我们也配置了完整的教程，包括如何启动场景、摄像机跟随、水面和天空球的设置、玩家与 AI 的控制，以及如何加载数据，相关配置文件等。除此之外我们还有地图编辑器，供玩家扩展使用。

今天主要从以下四个方面对本项目进行关键技术点解析：

• 游戏场景与地图生成

• 玩家控制与 AI

• 地图编辑器

• 性能优化

PART 1

游戏场景与地图生成

《奔跑吧小仙女》设定在一个水上乐园，为这美丽的环境，我们给场景中添加了天空球和水面效果。

我们只需要简单的图片和简单的模型就能实现好看的效果！

天空球由以下组成：

• 球模型

• 一张贴图

• 一个旋转动画

•  一个 builtin-unlit 无光照材质

水面由以下几部分构成：

• 平面模型(四方形)

• 噪声贴图(用于显示水纹)

• 深度贴图(控制水的颜色，中心到边缘的变化)

• 一小段 shader 代码

顶点偏移动画，上下起伏：

#if USE_WAVE
      vec3 offset;
      vec3 tangent;
      vec3 bitangent;
      gerstnerWaves(worldPos.xyz, waveVisuals.xyz, waveDirections, offset, v_normal, tangent, bitangent);
      worldPos.xyz += offset;

      #if USE_NORMAL_MAP
        v_tangent = tangent;
        v_bitangent = bitangent;
      #endif
    #endif

水基础颜色：

// color
vec4 waterColor = shallowColor;

计算水纹：

// caustic
    vec4 finalCausticColor = vec4(0.);
    #if USE_CAUSTIC
      float causticDepth = causticParams2