8分钟，构建出你平生第一个H5游戏！-CSDN博客

本文链接：https://blog.csdn.net/6346289/article/details/143497374

本公众号由以下老铁赞助，感谢他们❗️

面对 Cocos Store 商城上琳琅满目的游戏资源，很多人惊叹不已，好像是发现了新大陆亦或是加勒比的宝藏！

可大部分不禁兴叹，自己根本没接触过游戏开发啊！如何才能将如山的宝藏转化为财富？

其实，即使没有游戏开发的经验，你依然可以成为 CocosStore 商城中的一名成功的宝藏猎人。你只需要知道基本的概念和软件的操作即可，就像使用PPT一样，我不会设计PPT，难道就不能做PPT了吗？

你只需要跟随晓衡的指引，就像使用PPT一样：下载工具、打开工程、构建输出、运行游戏就这么简单。

按照这篇文章介绍的去做，就可以生成你的第一个H5游戏，唯一需要你做的就是，给自己5 ~ 8分钟专注。

我这里以《消消大冒险》例，你也可以使用 Cocos Store 上任意免费游戏源作为案例。打开 Dashboard 切换到【项目】窗口页，可直接拖入工程目录，见下图：

导入后成功后，游戏项目会显示在列表中，双击项目列表 Dashboard 会调唤起对应的引擎版本，打开项目。

每一个 Cocos Creator 项目都记录了它所使用的引擎版本，不同的引擎版本存在一定的差异，可点击编辑器版本进行切换，当然你得事先下载安装。

项目列表的最右边【操作】一栏上，你可以进行删除、设置项目图标、重命名等操作。《消消大冒险》项目加载完成后，界面如下：

有可能，你第一次看到 Cocos Creator 引擎编辑器窗口会感觉到，界面太复杂了，有点不知道如何下手。

先不用着急，后面我会对每一个窗口和常用菜单界面进行详细说明。

接下来，我们来学习如何将项目构建成H5资源包，如果你有自己的个人网站，将构建生成的文件传上去就可以给任何人玩了！

点击 Cocos Creator 引擎编辑主菜单→项目→构建发布。

你也可以使用快捷键，Mac系统是：⌘+shift+b，Windows系统为：ctrl+shift+b。

打开【构建发布】面板，你会看到已经创建有4个构建任务，如下图：

提示：本订阅我们只介绍 web-mobile 和 wechgame 的构建，其它平台的构建可搜索晓衡公众号文章或Cocos官方文档。

避免干扰，我们从一个干净的构建面板开始。在【构建发布】面板，左上角点击【新键构建任务】。

显示以下界面，

如果在你的电脑上显示有所不同，请在【发布平台】一项选择为【Web 手机端】。

咋一看构建面板很是复杂，确实也是，不过我们这个工程默认配置就行，直接点击面板下方【构建】按钮，你可以看到 web-mobile 的构建进度条。

构建完成后，点击【运行】按钮启动游戏，浏览器将被自动唤起加载游戏场景。

注意，我们的H5游戏虽然是运行在本地，其实是 Cocos Creator 引擎编辑器内部为我们提供有一个 HTTP 服务。

不同的游戏项目差距很大，有些小则2~3MB，而有的好几百MB甚至上G,构建构面板的有些选项，主要是对游戏资源的各种优化、压缩、调试的设置，我们这里不讲复杂了，先只挑目前对我们有用的进行介绍。

基本设置构建任何平台都会有的，主要是名字、平台、输出路径、运行时从那个游戏场景启动，我们下面一个个来解释下。

我们这个项目，包含三个场景分别是：

将构建面板滑动到底部，你会看到【Web手机端】相关设置。

还有几个设置关系到部署，我觉得可以多说一下。

MD5缓存：勾选后生成的文件名，会带上MD5后缀名。
例如有个文件名为 a.png，使用MD5缓存后，文件名格式将会变为a.xxxxx.png，其中的xxxxx是根据文件内容生成的MD5码，内容不变这个码就不会变，也就是说当文件内容修改后文件名才会发生改变，这可以比较不同构建版本的文件差异。

其主要作用是，当游戏更新重新上传服务器后，曾经加载过该链接的浏览器，会缓存文件，当发现缓存中文件名已经存在，就不会再去下载该文件了，那就看不到游戏更新的内容了；

调试模式：构建生成调试版本的资源包，代码不会被压缩混淆，如果游戏存在BUG，方便找到问题所在；
Source Maps：代码调试映射文件，构建后脚本代码会被合并，勾选后可保持代码的可读性和可调试性；
跳过纹理压缩：【纹理】简单理解就是游戏中使用到的PNG\JPG等格式的图片，每个图片都可以设置压缩方式，使最后生成的安装包尽可能小，加载更快或占用内存更小。

但是当项目大了，文件多了以后压缩每一个纹理就会会非常慢，打一次包要花上十几甚至几分钟，如果只是调试测试游戏功能，可以先不压缩纹理，让构建打包得更快。