[Cocos Creator] 制作简版消消乐（一）：资源准备与场景搭建

本文由“壹伴编辑器”提供技术支

前言

由于内容较多，不能够在一篇文章内完成，所以接下来会有一个系列文章来和大家一起从 0 开始制作一个 8 x 8 包含 5 种方块的简版消消乐。

本篇文章作为该系列的第一篇，不含代码，讲解资源准备与场景搭建。

话不多说，让我们开始吧！

本文由“壹伴编辑器”提供技术支

正文

资源准备

1. 首先我们创建一个空项目，我用的 Cocos Creator 版本为 2.3.3 ，如果跟我一起做的话建议使用和我同样的版本，避免出现版本兼容性问题。

2. 创建好项目之后，先点击左上角 项目 -> 项目设置 -> 项目预览 ，将设计分辨率改为 宽度：720 | 高度：1280 。

3. 然后创建好资源目录结构并导入之后要用到的素材（点击文章底部阅读原文获取素材）。

    

左：资源目录结构  |  右：导入素材

场景搭建

1. 首先我们在 scenes 目录下新建一个名为 game 的空场景，并且切换到 game 场景。

2. 在 Canvas 节点下创建一个带 Sprite 组件的 background 节点并应用我们准备好的背景图，并调整为合适的大小。

3. 在 Canvas 节点下创建一个空节点 main 作为我们主要游戏内容的父节点，并且使用 FlatPanel 图片来创建一个游戏内容大背景（使用图片前，我们需要编辑它的 Border 属性来支持九宫格模式，避免拉伸时变形）。

    

左：编辑素材  |  右：游戏内容背景

4. 制作 8 x 8 的地图（简版为固定地图，所以这里不采用动态生成的方式）。首先用 FlatPanel 来制作 64 个大小为 70 x 70 的方格 vacancy 节点作为单个方块的背景，创建节点 mapContainer 作为方格的容器，并加入 Layout 组件快速排列，边距（padding）和方格间距（spacing）均为 5，最后顺便调整一下背景：

mapContainer

5. 制作方块预制体。创建节点 tileContainer 作为方块的容器，在容器中创建一个 70 x 70 的空节点 tile ，给 tile 节点添加一个带有 Sprite 组件的子节点 sprite 并调整到合适的大小，该节点用来显示方块的图像。然后将节点拖到 prefabs 目录下保存为预制体，并将 tile 节点删除。

制作方块 tile 的预制体

★ 到这里我们资源准备和场景搭建的部分就已经完成啦，下篇文章正式开始 撸 代 码 ！

本文由“壹伴编辑器”提供技术支

本文由壹伴编辑器”提供技术支

结束语

以上皆为本菜鸡的个人观点，文采实在不太好，如果写得不好还请各位见谅。如果有哪些地方说的不对，还请各位指出，大家共同进步。

接下来我会持续分享自己所学的知识与见解，欢迎各位关注本公众号。

我们，下次见！

本文由“壹伴编辑器”提供技术支

扫描二维码

获取更多精彩

文弱书生陈皮皮

点击 阅读原文 获取文中用到的素材