如何用cocos creator做一个胶体（果冻效果）小游戏（一）

本篇博客基于自己做的毕设，不过相隔时间有点长（大半年- -），可能有些细节记不清楚，但我会努力把内容填充完整；

当时的毕设做的是很难受，而且网上对于这个方面的资料也比较少，受限于工具的选择，所以自己走了一些弯路，这篇博客也希望能帮助和我一样情况的人；

这一节我们主要对工具和一些学习资源进行介绍。下面是正式内容：

工具使用：Cocos Creator+vs code +liquidfun库

一、Cocos Creator

Cocos Creator在我看来是一款未来前景很好的引擎，它包括了 cocos2d-x 引擎的 JavaScript 实现，很容易上手，各种的控件和工具都很方便，下面附上它的官方文档（官方文档里包含安装、环境配置、样例游戏等；适合新手阅读，了解该引擎；）：

https://docs.cocos.com/creator/manual/zh/

Cocos Creator是一个完整的游戏引擎和开发解决方案。它包括了Cocos2d-x引擎的JavaScript实现，在Cocos2d-x 的基础上实现了数据驱动和彻底脚本化等特点。它还包括了资源管理、场景编辑、游戏预览和发布等这些游戏开发所需的全套功能。

但是想进一步学习的话可以去cocos的中文社区，下面附上社区团队整理的学习资源，可以根据自己选择去学习；

https://forum.cocos.org/t/creator/44782

版本的话我当时用的是V2.0.10版本，现在再去看已经更新了5个新版本了- -；

二、VS code：

Visual Studio Code是一款轻量级的代码编辑器，由微软公司推出，是免费且开源的。它的安装和配置都十分简单。它支持智能代码补全、语法高亮、代码托管、代码片段、代码对比等功能。除此之外，软件还跨平台支持 Windows、 Linux等操作系统。在本次开发中，只要通过安装适配插件和简单的操作，就可以完成代码编辑环境的配置。

三、脚本开发

Cocos Creator的脚本开发，只需将脚本挂载到相应的节点下即可，有其本身扩展组件的帮助。需要注意的一点是，游戏脚本需根据Cocos Creator要求的特定格式进行编写，才能够被游戏引擎识别，其大致结构如下图：

在脚本编写完成之后，需使其发挥作用，与普通的开发模式不同，Cocos Creator是数据驱动。Cocos Creator通过把组件脚本添加到场景节点中的方式，把可视化编辑器和代码联系到一起，形成有机的整体。所以对于游戏引擎而言，等同为该节点添加一份组件。当游戏脚本作为节点的组件存在时，它会在特定时段调用脚本中的特定方法，从而达到期望的运行结果。

 

四、Liquidfun

LiquidFun是由Google小组开发的强大的流体/柔体库（我使用的版本为1.1.0）。它是基于Box2D2.3.0版进行了扩展，在原有的物理碰撞刚体的基础上添加了粒子系统，可以轻松高效地实现流体和柔体效果的模拟。目前，LiquidFun库已经支持包括Android，iOS，Windows，OS X，Linux在内的许多系统。在开发语言的方面可以支持C++、Java以及JavaScript。

这其中的liquidfun.js是Google官方推出的LiquidFun的JavaScript版本支持，官方还提供了其测试例子，可直接通过浏览器查看效果。它提供了JavaScript语言的API，开发者只需调用接口即可在网页上实现胶体模拟。

在游戏开发中，liquidfun.js脚本文件作为Cocos Creator的插件脚本直接导入游戏引擎。与普通 脚本不同，插件 脚本不支持声明组件、不提供模块化。它脚本内不在任何函数内的局部变量会暴 露成全局变量。在场景加载的过程中，插件脚本就会先于普通游戏脚本加载。这样保证了插件脚本所提供的接口能被普通脚本正确调用。

Liquidfun的程序员指南：

http://google.github.io/liquidfun/Programmers-Guide/html/index.html

API接口（我印象中它只有C++的接口）：

http://google.github.io/liquidfun/API-Ref/html/index.html

github：

https://github.com/google/liquidfun

五、总结

所以在正式开发游戏前，我们需要做的就是：

1.完成Cocos Creator和vs code的下载安装，完成二者的配置（网上教程一大堆）。

2.在网上寻找视频了解工具的使用，并完成数个样例（b站就有一些免费视频）

3.下载LIquidfun的js并将其以插件导入引擎。

4.完成一个Liquidfun的样例（注意版本，当你导入之后无法完成demo的例子，可能是版本的问题）

 

如果文中有什么错误，欢迎指出，共同进步：）

系列已结束，其余部分见：

（二）https://blog.csdn.net/packdge_black/article/details/106242955

（三）https://blog.csdn.net/packdge_black/article/details/107465436

（四）https://blog.csdn.net/packdge_black/article/details/107466701