这款神器竟然出了插件!网页适配!

news/2024/7/19 15:52:48 标签: python, html, javascript, css, js
htmledit_views">
js_content">

Cocos Store即将上线一个新功能:立即体验!

但有不少开发者,构建的web-mobile体验包,在桌面浏览器上体验很差。需要手动调节浏览器窗口大小,从而导致给用户的第一印象不完美,甚至是负面的,特别是一些非技术或非Cocos用户。

晓衡将此问题在社区开发者群一提出,没想到当天下午,就有大神『奶爸程序猿』开发出一款 Creator 插件,完美解决此问题!

插件地址:http://store.cocos.com/app/detail/2693

不仅授人以鱼,还授人以渔,『奶爸程序猿』还准备了干货讲解插件的使用与实现原理。

  • 解决痛点

  • 获取方式

  • 使用方式

    • 效果说明

    • 参数说明

  • 效果对比

  • 写在最后

在之前的文章中,介绍了一种网页简单适配PC端的方案,速达链接适配主要解决了PC端屏幕比例的问题,同时注意到目前对该类需求其实比较多,但又不是及其迫切(因为PC主要是用来做演示的),可能很多人并不愿意花费时间在这个适配上面,因此号主这几天通过几个版本的完善,已经基本实现了适配上的一键化操作,方便有需要的开发者快速集成

解决痛点

  1. 适配需要做两套的问题

  2. PC端比例问题

  3. 进入全屏问题(该点暂非最优方案)

  4. 浏览器大小改变后,不需要刷新(仅支持PC)

获取方式

  1. 付费支持通道

在Creator(支持全版本)编辑器的扩展标签中,选择商城进入CocosStore(CocosStore是Cocos的官方商城,里面聚集了非常多优秀开发者开发的优秀源码和插件等,极其推荐各位体验。)在扩展中搜索H5适配优化,下载后安装到全局或项目,creator2.x版本将会保存在packages目录下,3.x版本将会保存在extensions目录下。

  1. 公众号获取

为满足更多开发者需要,凡对该文四连(阅读、点赞、再看、分享)的用户,可以联系号主,免费获取。

  • 当前最新版本号为1.2.1,CocosStore并不一定审核完成,可以联系号主获取最新版本。

使用方式

  1. 扩展标签页打开H5适配优化

  2. 在配置面板中,配置参数,并保存

  3. 构建时,选择web-mobile方式

image

效果说明

  1. 本插件主要是模拟一种设备分辨率,比如使PC的效果类似手机

  2. 如果需要场景适配,请参考号主一个框架中的Canvas适配

参数说明

  1. 全屏开启

可以选择手机或者PC是否开启全屏,开启全屏后,将会隐藏状态栏和底部菜单(视浏览器支持情况而定)

  • 手机全屏必须在splash加载中进入,一个临时解决办法推荐:询问是否全屏后再加载游戏。

  • 不推荐PC端也进行全屏操作

  1. 机型忽略

可以对手机或者PC设置不进行适配优化。

  • 因为手机屏幕相对统一,不建议对手机进行优化,所以推荐选择忽略。

  1. 适配模式

本功能参考了Cocos的分辨率适配方案,所以基本对应了相应的名称:

  • EXACT_FIT 即适配全屏,存在拉伸

  • FIXED_WIDTH 适配宽度,上下可能存在黑边或需要滑动

  • FIXED_HEIGHT 适配高度,左右可能存在黑边或者需要滑动

  • NO_BORDED 优先利用屏幕,上下或者左右需要滑动

  • SHOW_ALL 优先展示内容,上下或者左右存在黑边

  • NONE 不进行适配,根据指定分辨率,上下左右都有可能出现黑边或者滑动

  • 一般推荐选择SHOW_ALL

  1. 设计分辨率

一般可以与游戏的设计分辨率相同,但两者有本质概念区别,该插件所指的分辨率其实是PC端模拟的机型分辨率。

效果对比

本DEMO的素材来自由magelevin开发的开心鼠吃象

编辑器打开效果

image

实际运行效果

image
  • 明显观察到游戏画面被裁剪了

使用插件后,与设计时基本保持一致

image

写在最后

该插件原理相对比较简单,但要发布成插件,就要适配各种情况,麻雀虽小五脏俱全!

而且欢迎随时向『奶爸程序猿』反馈问题,作者将提供后续升级优化,插件只要¥1.99,感谢您的支持!【阅读原文】直达

插件地址:http://store.cocos.com/app/detail/2693


http://www.niftyadmin.cn/n/805585.html

相关文章

iOS学习-创建带下划线的button

1 UIButton *tempBtn [UIButton buttonWithType: UIButtonTypeCustom];2 tempBtn.frame CGRectMake(50, 250, 80, 40);3 4 NSMutableAttributedString *str [[NSMutableAttributedString alloc] initWithString:"忘记密码"];5 NSRange strRan…

为了Creator 3.0 中的 ProtoBuf,我又打开代码编辑器!

先上个视频:在这里分享一下在 Cocos Creator 3.0 中集成 protobufjs 遇到的问题,如果你在 Creator 3.0 中使用其它 JS 三方库,也会有一定的帮助。1module 不可用了Creator 3.0 使用标准的 ES6 语法,代码中不支持 module.exprots …

UVa 1210 (高效算法设计) Sum of Consecutive Prime Numbers

题意: 给出n,求把n写成若干个连续素数之和的方案数。 分析: 这道题非常类似大白书P48的例21,上面详细讲了如何从一个O(n3)的算法优化到O(n2)再到O(nlogn),最后到O(n)的神一般的优化。 首先筛出10000以内的素数&#xf…

node 安装全局环境时出错 ATAL ERROR: Ineffective mark-compacts... - JavaScript heap out of memory

解决方案是删除npmrc文件,该文件位于C:\Users\admin下 删除该文件,重新执行命令即可

【体系结构系列】同步实现

同步实现 核心就是硬件提供原子操作指令 基本硬件原语 在多处理机中实现同步,所需的主要功能是: 一组能以原子操作的方式读出并修改存储单元的硬件原语。 它们都能以原子操作的方式 读修改 存储单元并指出所进行的操作是否以原子的方式进行。 通常情…

Server Tomcat v7.0 Server at localhost was unable

在eclipse启动tomcat时遇到超时45秒的问题:Server Tomcat v7.0 Server at localhost was unable to start within 45 seconds. If the server requires more time, try increasing the timeout in the server editor.网上解决办法。1.在 eclipse菜单-》window->p…

三流员工卖命,二流员工卖时间,一流员工.....

谨献给每一个对现状不满的奋斗者。你好,我叫何川!北漂8年,创业6年,公司越来越大,员工越来越多,经常有人私下问我:我怎么才能成长再快点儿?怎么才能让工资再高点儿?我说&a…

RSA加密、解密、签名、验签的原理及方法

一、RSA加密简介 RSA加密是一种非对称加密。可以在不直接传递密钥的情况下,完成解密。这能够确保信息的安全性,避免了直接传递密钥所造成的被破解的风险。是由一对密钥来进行加解密的过程,分别称为公钥和私钥。两者之间有数学相关&#xff0c…