引言
哈喽大家好，我是亿元程序员。
说实话我也不知道三国志战略版是怎么实现横竖屏动态切换的。
但是，我们可以看看它的源码是怎么实现的。
什么？没有源码？
言归正传 ，今天小伙伴们跟随笔者，一起来看下如何在Cocos游戏开发中实现横竖屏动态切换！
1. 拆解分析一下
**《孙子兵法》**说得好，"知己知彼，百战不殆"。
虽然我们没有三国志战略版的源码，但是我们可以通过游戏分析推测一下三国志战略版是怎么实现的。
1.横竖屏同一套UI和代码
我们先看看录屏：
从录屏 当中我们可以通过肉眼看出，像这样简单的一个提示弹框，在横竖屏中的尺寸是一样的，因此猜测是使用的是同一套UI。
**为什么可以这么确定？**因为我是用尺子量出来的，下面是竖屏状态下的UI尺寸。
而下面 是横屏状态下的UI尺寸。
通过上面的对比 ，UI尺寸是一样的，因此我们可以推断，它们使用的是同一套UI。
使用同一套UI是最理想的状态，我们不需要做额外的处理，即可在横竖屏下使用。
2.横竖屏使用两套UI，一套代码
还是先看看录屏：
首先是竖屏状态下：
- 卡牌布局 ：垂直的Scrollview , 限制列数为3。
- 返回按钮：在左下方。
- 查询模块：与返回按钮在同一行。
接着是横屏状态下：
- 卡牌布局 ：垂直的Scrollview , 限制列数为6。
- 返回按钮：在右上方。
- 查询模块：与功能按钮在同一行。
通过 上述的简单对比，笔者推测是使用了两套不同的UI。当然也可以是同一套，下面会讲到。
如果 使用的是两套UI，我们需要同时维护的东西就比较多了。例如修改布局或者修改功能，我们需要同时处理横竖屏的界面，需要的人力物力就会成倍增加。
但是 通过我们对厂商的判断，这是非常可能的。维护多套UI和代码最主要要解决规范和人员问题，要保证同时修改，互不影响。
3.横竖屏使用同套UI，代码适配
依旧是先看看录屏：
竖屏 状态下，活动图标是2行。
横屏 状态下，活动图标是1行。
像 这种，UI布局只有一点点不同，我们就可以采用同一套UI，把不同的部分，通过代码根据横竖屏判断，设置不同的参数，进行区分。
综合 上面三种情况，最理想的顺序是先考虑采用同一套UI和代码。其次是同一套UI，代码去适配不同的布局。最后万不得已才采用不同的UI和一套/两套代码。
2.实战一下
想要 在Cocos游戏开发中实现横竖屏动态切换,最关键的步骤就是要能知道当前是横屏还是竖屏，以及横竖屏切换的时机。
下面和笔者一起来实战一下。
引擎版本 ：Cocoscreator 3.8.7
编程语言 ：TypeScript
1.资源准备
为了更好的节目效果，我们"借用"(扣)一下资源，仅做学习和交流。
2.UI准备
把资源 拼凑成界面，其中如果需要两套UI的，分别用_V和_H来区分竖屏和横屏的界面。
例如 竖屏界面长这样，1秒完成拼UI。
横屏界面长这样，节目效果，实际上没有一张图片就能完成界面这么轻松。
3.核心代码实现
由于文章篇幅较长，本次实战只列出核心代码。
- 监听屏幕方向变化 ：通过
screen的orientation-change事件进行监听。
- 修改设计分辨率 ：当屏幕发生变化时，我们可以通过
view的setDesignResolutionSize方法进行设置。
- UI配置 ：通过配置界面的名字、竖屏的界面、横屏的界面、层级和管理组件。
- 显示UI ：通过横竖屏获取预制体、动态加载预制体、自动添加管理组件。
- 同套UI切换 ：通过基类的
onOrientationChange方法通知管理组件。
- 不同UI切换 ：删除旧的、添加新的、恢复层级。
- 同UI代码适配 ：通过
onOrientationChange时间调整布局。
4.效果演示
模拟器：
手机：
结语
**以上就是Cocos游戏开发中实现横竖屏动态切换的全部内容。**比起技术，横竖屏切换更考验的应该是UI的设计。
小伙伴们觉得我猜对了吗？
我是"亿元程序员"，一位有着8年游戏行业经验的主程。在游戏开发中，希望能给到您帮助, 也希望通过您能帮助到大家。
AD:笔者线上的小游戏《打螺丝闯关》《贪吃蛇掌机经典》《重力迷宫球》《填色之旅》《方块掌机经典》大家可以自行点击搜索体验。
实不相瞒，想要个赞 和爱心 ！请把该文章分享给你觉得有需要的其他小伙伴。谢谢！
推荐文章：