前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >[Cocos Creator] 多分辨率适配方案

[Cocos Creator] 多分辨率适配方案

作者头像
陈皮皮
发布2020-07-10 16:41:23
1.4K0
发布2020-07-10 16:41:23
举报
文章被收录于专栏:菜鸟小栈菜鸟小栈

本文由“壹伴编辑器”提供技术支持

前言

现在市场上的显示设备分辨率五花八门绿肥红瘦(主要是手机),所以屏幕适配是游戏开发过程中必不可少的步骤。

这次给大家分享一个较通用的多分辨率适配方案,无论是什么奇葩分辨率都能完整地显示游戏内容。

效果图

本文由“壹伴编辑器”提供技术支持

正文

Cocos Creator 引擎自带的 Canvas 组件中有 Fit HeightFit Width 属性来让游戏适配不同的分辨率,但是这两种方案都有各自的局限:

  • Fit Height 模式:适用于宽大于高的屏幕
  • Fit Width 模式:适用于高大于宽的屏幕

Canvas 组件

既然如此,那我们是不是可以动态地判断屏幕的宽高比来选择启用 Fit Height 模式或者 Fit Width 模式呢。

以上这就是该方案的整体思路了,下面我们看具体的代码实现。

—▼—

这里我将适配分辨率做成了一个单独脚本(组件),将脚本挂载在场景中任意节点上之后(个人选择挂在 Canvas 节点上),即可在游戏开始时适配当前分辨率。

其中核心代码为(完整文件点击文章底部 阅读原文 获取):

关键函数

在 onLoad 时调用 adapt 函数:

onLoad

另外,如果项目运行在可动态调整窗口大小的平台(比如浏览器),我们需要在每次调整窗口大小后都适配一次。

我们可以利用 cc.view.setResizeCallback 函数来设置窗口变化时的回调,达到每次窗口变化都能自动适配的效果:

onLoad+

本文由“壹伴编辑器”提供技术支

结束语

以上皆为本菜鸡的个人观点,如果有哪些地方说的不对,还请各位指出,大家共同进步。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-04-17,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 菜鸟小栈 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档