IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 游戏开发 -> unity发布WebGl在手机上的横屏适配,webgl横版游戏在手机上直接转横屏 -> 正文阅读

[游戏开发]unity发布WebGl在手机上的横屏适配,webgl横版游戏在手机上直接转横屏

unity版本2020.1

问题:webgl的横版游戏 1920*1080,在手机上适配的不好,还是竖屏显示,

使用官方的说明,说是只在全屏模式下能旋转,也不好用,可能直接旋转也不会达到理想的效果

解决方案:

1.我这边使用的方案是UI的适配,UGUI,采用的是两套UI,根据不同平台加载不同的资源就行,我这里使用的Addressable来加载资源的,pc端加载的比如是UILogin,手机上加载的是mb_UILogin

(1)需要配置canvas这里?适配Match改成两者之间

?

(2)就是pc端使用的是横版ui,就是设计分辨率的ui,1920*1080的,

(3)手机端使用的直接竖屏下的横版ui,

?

这么做的原因是因为我尝试过许多方法,都不好用,方法如下

1.转Canvas的相机 ,因为已经是竖屏,相机转了,在横屏下只显示一半的屏幕,调节相机的Size也不行
2.转预制体根节点,可以,但是对齐的按钮需要调整,那些边缘对齐之类的按钮就会错乱
3.直接调整预制体的内容为横屏,背景图按照中间对齐的方式
4.转UI的Canvas?不行
5.webgl代码实现旋转,这个有点困难,因为打包后的html的unityCanvas是webgl的,webgl是基于openGL发展出来的,没有这方面的经验

所以最终选择的3号方案

2.除UI之外,对于游戏场景中的3d和2d相机的适配,默认的平台是pc,不需要操作,判断如果是在手机上就需要操作

我这里游戏场景的?相机 size是5

Unity会根据当前屏幕实际的宽高比和摄像机的orthographicSize值来计算出摄像机的宽度值,即

摄像机实际宽度 = 摄像机高度 * 屏幕宽高比

比如,iPhone4的屏幕像素为640*960,宽高比为2:3,假设Pixels To Units值为100,那么如果设摄像机高度size值为4.8,那么摄像机实际宽度按照公式算出6.4,刚好就是屏幕的单位宽度。

?我们这里就要重新计算一下相机的实际宽度,假如在手机上的宽高是1080*1920,

那么,就要把宽高反过来,计算相机宽度,因为相机需要旋转90度

?if (UnityCallJs.Instance.GetCurPlatForm() == 1)
? ? ? ? {// 手机上 相机旋转
? ? ? ? ? ? transform.rotation = Quaternion.Euler(0,0,90);

? ? ? ? ? ? // 屏幕适配
? ? ? ? ? ? float orthographicSize = GetComponent<Camera>().orthographicSize;
? ? ? ? ? ? orthographicSize *= (Screen.height / (float)Screen.width);
? ? ? ? ? ? GetComponent<Camera>().orthographicSize = orthographicSize;
? ? ? ? }

因为默认情况下?orthographicSize是5,在手机的竖屏状态下,是unity计算出来的,我们这里把相机旋转,那么宽高就反转一下来重新计算一下orthographicSize的值,最终得到8.85,正好和横版游戏的显示比例一样。

结语:这是我尝试出来比较好点的方案,如果有同学有更好的方法,还望不吝赐教!

  游戏开发 最新文章
6、英飞凌-AURIX-TC3XX: PWM实验之使用 GT
泛型自动装箱
CubeMax添加Rtthread操作系统 组件STM32F10
python多线程编程:如何优雅地关闭线程
数据类型隐式转换导致的阻塞
WebAPi实现多文件上传,并附带参数
from origin ‘null‘ has been blocked by
UE4 蓝图调用C++函数(附带项目工程)
Unity学习笔记(一)结构体的简单理解与应用
【Memory As a Programming Concept in C a
上一篇文章      下一篇文章      查看所有文章
加:2022-05-16 11:28:43  更:2022-05-16 11:28:48 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 10:42:27-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码