【微信小游戏实战】零基础制作《欢乐停车场》三、游戏场景制作

1、游戏立项

微信小游戏中有一款《欢乐停车场Plus》的小游戏，大家可以搜索玩下。这是一款益智类的小游戏，游戏中有红、黄、绿、蓝、紫5辆豪车6个停车位，玩家通过可行走路线移动小车，最终让各颜色的小车停到对应的颜色车位，则完成本关挑战。接下来的日子，我将同大家一步一步的来实现这款小游戏，从零基础入门微信小游戏的开发和发布。

2、本篇内容

CocosCreator零基础制作《欢乐停车场Plus》微信小游戏  三、游戏场景制作

3、文章检索

1）、【微信小游戏实战】零基础制作《欢乐停车场》一、游戏设计

2）、【微信小游戏实战】零基础制作《欢乐停车场》二、关卡设计

3）、【微信小游戏实战】零基础制作《欢乐停车场》三、游戏场景制作

4）、【微信小游戏实战】零基础制作《欢乐停车场》四、游戏关卡脚本实现

5）、【微信小游戏实战】零基础制作《欢乐停车场》五、游戏玩法脚本实现

6）、【微信小游戏实战】零基础制作《欢乐停车场》六、游戏结束

7）、【微信小游戏实战】零基础制作《欢乐停车场》七、游戏发布

4、游戏实战

1）、安装cocos creator 并新建ParkingLot（停车场）项目；

2）、在资源管理器中创建如下目录（在资源管理器区域 右键->新建->文件夹），Prefabs(预制体)用来存放关卡和道路，Scene（场景）我们的游戏场景，Scripts(脚本)游戏中js脚本，Texture(纹理)游戏中用到的美术资源。

3）、在Scene目录上，右键->新建->Scene，命名为Game,这就是我们的游戏场景。

4）、双击我们的Game场景，然后再层级管理器中选中Canvas，在属性检查器中设置游戏分辨率720*1280(竖屏)，适配方式选择FitWidth；

5）、接下来我们在层级管理器区域创建3个空节点（在层级管理器区域 右键->创建节点->创建空节点），名称分别为node_game（游戏界面）；node_level（关卡选择）；node_result（过关界面）；这跟我们第一篇脑图分析中的三块是对应的；

 6)、完善node_level节点：注意层级关系，spr_bg背景（在node_level上右键->创建节点->创建渲染节点->Sprite精灵），scv_level是关卡列表（右键->创建节点->创建UI节点->ScrollView滚动视图）。ScrollView添加完后，修改成截图所示的样子。

 

7）完善后的node_level节点：

注意看右边的属性检查器，多了一个Widget组件（点击属性检查器下面的添加组件->添加UI组件->Widght，作用是不同分辨率的适配）和BlockInputEvents组件（添加组件->添加UI组件->Block Input Events，作用是屏幕层）。

再一个注意点就是scv_level->view->content， 属性检查器中多了一个Layout组件（添加组件->添加UI组件->Layout，作用是自动布局），自动布局什么意思呢？我们看到关卡选择界面中每行4关，每行4关这样的有序排列，放在以前我们实现的方式是通过计算坐标放到对应的位置来实现，现在通过Layout可以更简单的实现了，省了自己计算坐标位置了。

 8）、完善node_result节点，如下图；spr_开头表示的是精灵(Sprite)节点，lbl_开头表示的是文字（Label）节点，btn_开头的表示的是按钮（Buttong）节点，toogle_开头的表示的是复选按钮（Toogle）节点。

9）、完善node_game节点，这也是游戏中最关键的一部分，这部分就不再详细介绍步骤了，按照我们8）步骤说的命名的规则对应的节点类型，自己尝试搭建。

最终效果如下图：

spr_head_bg：场景编辑器中上半部分，包含的内容分别是：spr_level_bg(温度计样子的背景)，spr_lv(LV图片)，lbl_lv(显示当前关)，btn_menu(返回关卡选择按钮)，btn_reset(重置按钮)；

node_parking：整个游戏最关键大部分包括：parking0，parking2 ...... ，parking5 分别是空，蓝，红，黄，绿，紫6个精灵，用来表示车位；car1,car2 ...... car5 分别代表蓝红黄绿紫5辆不同颜色的豪车。

node_blockInput：是一个空节点，包含一个widget组件和一个BlockInputEvents组件，作用:移动车的时候，车还没有移动到指定位置，屏幕不可点击。简单说就是车在移动过程中，屏幕不可点击。

10）、到此整个场景就搭建完成，搭建的过程中注意节点的层级关系，节点的类型。

预制体制作：

1）、关卡选择页面，每一个关就是一个预制体。最终效果如下图：

制作预制体也很简单，在我们的Game场景的层级管理器面板中，新建一个Node节点，命名为pfg_level，然后再此节点上右键，添加一个sprite节点，添加一个label节点。然后再Game场景的层级管理器面板中，鼠标左键选中pfg_level节点并长按，拖动到资源管理器面板中的Prefabs文件夹中，这样一个Prefab(预制体)制作就完成了。

 

2）、游戏过程中，路同样是预制体。一个正六边形，点之间的相互连线，其实就三种长度不同的连线；建立三个road prefab分别为road1,road2,road3；

以road1为例，最终效果如下图：road2,road3只是属性检查器中的Sprite Frame不同而已。road2,road3不再做赘述。

整个的资源管理器面板最终效果如下：

在Scripts文件夹上右键->新建->javascript，新建三个脚本文件，后面我们来实现。Game.js整个游戏脚本；LevelData.js关卡配置脚本；Utils.js通用方法脚本，如本地数据的读取和写入等。

5、游戏总结

1）、如有问题，欢迎留言，加QQ群交流。QQ群： 1群：418177552（已满）  2群：858799494

2）、下一篇我们将一起来用代码来实现选择关卡部分。