[Cocos Creator] 制作简版消消乐(一):资源准备与场景搭建

2020-07-10 16:43:29 浏览数 (1)

前言

由于内容较多,不能够在一篇文章内完成,所以接下来会有一个系列文章来和大家一起从 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 的预制体

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

结束语

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

0 人点赞