前言
由于内容较多,不能够在一篇文章内完成,所以接下来会有一个系列文章来和大家一起从 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 的预制体
★ 到这里我们资源准备和场景搭建的部分就已经完成啦,下篇文章正式开始 撸 代 码 !
结束语
以上皆为本菜鸡的个人观点,文采实在不太好,如果写得不好还请各位见谅。如果有哪些地方说的不对,还请各位指出,大家共同进步。