cocos creator 最佳实践（自学CocosJS）

老规矩，先上效果图

本节效果

1. 主城添加酒馆建筑
2. 点击建筑，弹出酒馆UI

下来开始我们的制作流程

Mc_JiuguanPanel，酒馆主界面的制作

这个Perfab是酒馆的主界面，主要负责招募新英雄

布局图如下

布局效果图如下

这里面就是把图片资源都拖到对应的节点上

这里用到了ScrollView控件，用这个控件是因为，这是一个酒馆功能，ScrollView里放的是待出售的英雄，因为数量可能超出屏幕所以用到这个组件

把脚本JiuGuanUI挂到Mc_JiuguanPanel的根节点上

至此Mc_JiuguanPanel这个Perfab制作完成

Building，通用建筑物模板的制作

这个perfab是主城场景中的建筑的通用模板

布局图如下

• Building节点是一个sprite，图片就是场景的建筑
• BuildingNameBoard节点是一个sprite，图片就是建筑名字框
• BuildingName是一个label控件，显示建筑的名称

至此Building这个perfab制作完成

修改MainCityUI脚本

因为主城增加了建筑物适当要修改之前的代码

1. 新增BuildingAtlas节点，这个是所有场景建筑物的图里文件
2. 新增JiuGuanButtonPerfab节点，这个是场景上酒馆的Building
3. 新增JiuGuanNodePerfabs节点，这个是酒馆的UI

把对应节点拖上去，如图

代码部分如图

onLoad函数

• 实例化酒馆主UI

InitMainCity函数

• 实例化酒馆的Building
• 注册点击回调函数，打开酒馆主UI

新增JiuGuanUI脚本

代码如图

这个就很简单了

• createBuilding函数

绑定节点关系，初始化的时候关闭界面

• showPanel函数

打开/关闭界面

结语

本节是一个简单的打开UI的逻辑，后续还有很多逻辑要加

1. 统一关闭界面
2. 酒馆里的英雄显示
3. 其他主城建筑
4. 还有如果按照现在这样的制作主城建筑物的逻辑MainCityUI脚本会写的越来越臃肿，需要拆分

需要做的事情，还有很多

如果有什么问题欢迎评论区留言

谢谢

,