换个姿势入门Cocos游戏开发

游戏换皮，我猜是很多人急切想了解的内容吧！但在学习如何安全地更换游戏美术资源之前，我们得先了解 Cocos Creator 引擎编辑器的资源管理相关的内容。我们先来见识一下，Cocos Creator 引擎编辑器的4大核心窗口之——资源管理器。四大窗口相互联动变化，可以说【资源管理器】窗口是牵一发以动全身，我们就以它为起点，开讲。01 资源管理器【资源管理器】其实就是对项目 assets 目录和文件的映射，资源管理器可以对文件进行添加、删除、修改等操作。需要注意的是，当我们将一个外部文件拖入【资源管理器】时，它是将该文件复制到了项目的assets目录下，同时还会创作一个同名的 .meta 文件。如果你需要将一个Creator项目中的资源复制到另一个项目时，一定要将同名的 meta 文件一起复制，不然会出现资源丢失、场景打开报错、无法预览构建等问题。因此，建议不要轻易在操作系统中去删除、移动、改名 assets 目录下的文件，而是在引擎编辑器，资源管理窗口进行操作。02 资源结构前面一章说过，项目中的 assets 目录存放着整个游戏所使用到的脚本、图片、音乐、场景、预制等文件，他们分别都有不同的图标显示，如下图：这里讲一个经验，当我们拿到一个新项目时，首先就应该去了解资源文件结构，看看文件名是否规范有规则，分类是否合理。下面我们来看看《消消大冒险》是怎么做的。我从上到下，一个一个解释：animations：动画目录，其中包含了方块爆炸时的【序列帧动画】与角色【Spine动画】components：自己写的组件脚本，而且是可复用的，它们都是有 TypeScript 语言写的；music：游戏中所使用到的音乐、音效文件都放在这里；prefabs：这里存放的都是预制体文件，【预制体】你可以把它当【预制菜】去理解，就是提前做到的一些积木块。这里需要注意，除了预制体文件外，我还为每个预制体配套了一个同名的代码脚本文件。这些脚本与Components目录下的脚本区别就是，它们不能被复用，只能与同名的预制体文件配合使用。为了加深你的理解，你可以将预制体当成肉体，将配套的组件脚本当成灵魂。肉体主表现，灵魂主控制。scenes：顾名思义，就是用来存放游戏【场景】的目录，与上面的prefabs目录类似，我也为场景文件配套有固定的组件脚本。场景非常好理解，因为它是可视化的，你双击场景文件，对应在场景编辑器中，你就能看到场景中的内容。textures：纹理图片目录，分为bg背景、font字体、icon图标以及 ui 四类。03 纹理图片我们要对游戏进行换皮，主要工作就是替换项目中所使用到的图片文件。点击任意一张图片，在属性检查器中，你可以看到纹理图片的预览图、尺寸、类型（sprite-frame）等，目前了解这几个参数就行了。准备好自己的图片素材，注意文件命名、文件类型、尺寸与项目中的一致，复盖原文件就可以了！

01 导入游戏工程《消消大冒险》游戏源码下载，请见文末链接。下载 zip 后，请解压到一个非中文路径下，它是一个文件夹。打开 Dashboard 切换到【项目】窗口页，可直接拖入工程目录，见下图：导入后成功后，游戏项目会显示在列表中，双击项目列表 Dashboard 会调唤起对应的引擎版本，打开项目。每一个 Cocos Creator 项目都记录了它所使用的引擎版本，不同的引擎版本存在一定的差异，可点击编辑器版本进行切换，当然你得事先下载安装。项目列表的最右边【操作】一栏上，你可以进行删除、设置项目图标、重命名等操作。《消消大冒险》项目加载完成后，界面如下：有可能，你第一次看到 Cocos Creator 引擎编辑器窗口会感觉到，界面太复杂了，有点不知道如何下手。先不用着急，后面我会对每一个窗口和常用菜单界面进行详细说明。02 项目构建接下来，我们来学习如何将项目构建成H5资源包，如果你有自己的个人网站，将构建生成的文件传上去就可以给任何人玩了！点击 Cocos Creator 引擎编辑主菜单→项目→构建发布。你也可以使用快捷键，Mac系统是：⌘+shift+b，Windows系统为：ctrl+shift+b。打开【构建发布】面板，你会看到已经创建有4个构建任务，如下图：web-mobile构建：将游戏项目打包输出成可以在手机浏览器运行一堆html、js、json、图片或其它项目中使用到的资源文件。android 构建：生成 Android APK 安装包，前题是你需要配置好 Android NDK 和 SDK，以及Android Studio。ios 构建：生成 iOS 安装包，前题是你需要有台 Mac 系统电脑，安装配置好苹果的XCode。wechatgmae构建：生成微信小游戏资源包，你可以在微信开发者工具中运行调试，如果你注册有微信小游戏账号，游戏还可运行在你的手机微信上。提示：本订阅我们只介绍 web-mobile 和 wechgame 的构建，其它平台的构建可搜索晓衡公众号文章或Cocos官方文档。03 web-mobile构建避免干扰，我们从一个干净的构建面板开始。在【构建发布】面板，左上角点击【新键构建任务】。显示以下界面，如果在你的电脑上显示有所不同，请在【发布平台】一项选择为【Web 手机端】。咋一看构建面板很是复杂，确实也是，不过我们这个工程默认配置就行，直接点击面板下方【构建】按钮，你可以看到 web-mobile 的构建进度条。构建完成后，点击【运行】按钮启动游戏，浏览器将被自动唤起加载游戏场景。注意，我们的H5游戏虽然是运行在本地，其实是 Cocos Creator 引擎编辑器内部为我们提供有一个 HTTP 服务。不同的游戏项目差距很大，有些小则2~3MB，而有的好几百MB甚至上G,构建构面板的有些选项，主要是对游戏资源的各种优化、压缩、调试的设置，我们这里不讲复杂了，先只挑目前对我们有用的进行介绍。1. 基本设置基本设置构建任何平台都会有的，主要是名字、平台、输出路径、运行时从那个游戏场景启动，我们下面一个个来解释下。游戏名称：就是给游戏起个名字，如果你构建的是web-mobile或web-desktop它会显示浏览器的标题窗口上；发布平台：H5、原生、小游戏各种平台的构建打包；发布路径：构建打包的输出文件路径与目录名；初始场景：游戏启动时的入口场景，一旦选择某个场景文件做为初始场景后，后下放列表中将禁止取消勾选，并且会显示一个小房子图标。我们这个项目，包含三个场景分别是：HomeScene：游戏的主菜单界面；DoubleScene：双人模式界面；GameScene：经典玩法界面。2. Web手机端设置将构建面板滑动到底部，你会看到【Web手机端】相关设置。设备方向：我们这个项目是手机游戏，是竖屏玩的，因此选择竖屏，很好理解就不多做解释了；VConsole：是一个控制台，可以看到游戏日志、系统日志、网络、本地存储等信息，主要用于调试问题，不勾选它构建出的包体会更小；预览二维码：想要在手机上测试构建后的游戏，可使用微信或手机浏览器扫此二维码。需要注意，电脑与手机需要在同一局域网；预览地址：与二维码一样，你将此链接地址发给局域网的其它电脑，也可以玩到你的游戏，这也是使用 Cocos Creator 开发游戏的一大亮点。03 进阶设置还有几个设置关系到部署，我觉得可以多说一下。MD5缓存：勾选后生成的文件名，会带上MD5后缀名。例如有个文件名为 a.png，使用MD5缓存后，文件名格式将会变为a.xxxxx.png，其中的xxxxx是根据文件内容生成的MD5码，内容不变这个码就不会变，也就是说当文件内容修改后文件名才会发生改变，这可以比较不同构建版本的文件差异。其主要作用是，当游戏更新重新上传服务器后，曾经加载过该链接的浏览器，会缓存文件，当发现缓存中文件名已经存在，就不会再去下载该文件了，那就看不到游戏更新的内容了；调试模式：构建生成调试版本的资源包，代码不会被压缩混淆，如果游戏存在BUG，方便找到问题所在；Source Maps：代码调试映射文件，构建后脚本代码会被合并，勾选后可保持代码的可读性和可调试性；跳过纹理压缩：【纹理】简单理解就是游戏中使用到的PNG\JPG等格式的图片，每个图片都可以设置压缩方式，使最后生成的安装包尽可能小，加载更快或占用内存更小。但是当项目大了，文件多了以后压缩每一个纹理就会会非常慢，打一次包要花上十几甚至几分钟，如果只是调试测试游戏功能，可以先不压缩纹理，让构建打包得更快。启用插屏：在启动游戏时会看到一个Logo画面，其实这时是在加载必要的引擎文件和游戏首场景资源，如果没有这个Logo那就是一个黑屏界面，体验会非常差。插屏画面默认为 Cocos 的品牌 Logo，点击旁边的【编辑】按钮，你也可以修改为自己喜欢的图片。好本节内容结束，赶快去试试，构建你的第一个H5游戏！当然，除了使用晓衡提供的教学案例工程来构建外，你也可以到 Cocos Store 下载免费游戏项目 来构建。欢迎加群，添加小助手微信：tddrap 领取教程源码！

网络上已经有不少 Cocos Creator 的各种文章、视频课程，但晓衡知道还有不少朋友并不想学习完整的游戏编程，从头去开发一个游戏。更多的是希望利用网络上现有的游戏玩法模板，懂得怎么去做一些修改、调整、组合、改造出一个自己所想的游戏。就好比你要准备一个PPT，你首先想到的是，先找个模板来填充自己的内容。对吧！这样会让你效率更高。当然，如果你想用来它入门 Cocos Creator 2D 游戏编程，也是决对可以的，而且，我有信心让你能更快上手。01 入门篇因为，一上来我不会教你如何去编程写代码，这样做会打击很多人对开发游戏的信心。很有可能，连编程语法都还没学完，就已经放弃了。我则反其道而行，就像使用 PPT 模板一样，我会准备好一个精心设计的消除游戏项目，像积木一样搭建出一个可以玩的游戏。当然，我会讲解这些积本的制作方法和思路。我们将这个游戏，生成为可以在浏览器上玩的H5游戏，你也可以注册一个微信小游戏账号，将它运行在微信小游戏上（如果你要想给朋友玩，那得通过平台严格的审核与备案），如果你喜欢折腾，还可以打包成 Android、iPhone 的 APP 来玩。当你体验到，生成游戏如些简单过后，我们再来认识 Cocos Creator 游戏工程结构、可视化引擎、编辑器界面、内置组件，更重要的是如何去更换游戏素材，让游戏中的元素变成你所希望的那样。学会这些，你就可以对 Cocos Creator 开发的 2D 游戏进行一定的改造，以及按自己的想法搭建游戏UI了。02 基础篇基础篇开始，我们会轻量涉及到一些组件代码，这些组件是怎么实现的？比如：场景切换组件，让你在不同的舞台跳跃穿梭；可变化的精灵，消除方块的颜色变化是如何实现的；可触摸拖放的动画，让屏幕与你交互。当然，其中肯定会包含基本的 Javascript\Typescript 代码，以及 Cocos Creator API 接口，用到什么讲什么，够用就行。03 实战篇实战篇会介绍消除玩法的核心，控制方块的爆炸、掉落、补位，游戏中的Tween动画的使用，这是最为烧脑的部分，也是最有挑战的部分。你放心，我已经将每一步操作拆到了最小，并制作成动画帮助你理解，只有学懂了这部分，你才算是真正入门了游戏编程。说了这么多，你准备好了吗？接下来，就要开始下载我们的游戏源码和游戏开发工具了！希望你学有所获。欢迎扫码加群，添加小助手微信：tddrap 领取教程源码！专栏原价199元，限时21.9元，终身卖断，每满百人涨价！