Unity之UI、模型跟随鼠标移动(自适应屏幕分辨率、锚点、pivot中心点)

这篇具有很好参考价值的文章主要介绍了Unity之UI、模型跟随鼠标移动(自适应屏幕分辨率、锚点、pivot中心点)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、效果展示

UI跟随鼠标移动, 当我们修改屏幕分辨率、锚点、pivot等参数时会动态自适应并始终让ui的pivot中心点位置跟随鼠标位置。同时脚本中包含3d物体跟随ui位置和3d物体直接跟随鼠标位置移动

unity3d物体跟随鼠标移动,ui,计算机外设

二、屏幕坐标、Canvas自适应、锚点、中心点关系

在说功能原理之前我们需要先了解屏幕坐标、Canvas自适应、锚点、中心的特性和之间的关系。

1.屏幕坐标 

屏幕坐标也就是电脑分辨率,一般我们所说的1920*1080代表的是这个显示器可以容纳长1920*宽1080像素。例如下方图片中我设置屏幕分辨率是1920*1080,左下角坐标位置为(0,0),右上角位置是(1920*1080)。而鼠标位置是基于屏幕坐标零点在左下角计算的。

设置1920*1080分辨率

unity3d物体跟随鼠标移动,ui,计算机外设

根据下方动图可以看出鼠标在左下角为0,右上角为1920*1080.ps:因为不好控制鼠标位置所以有点小误差。

unity3d物体跟随鼠标移动,ui,计算机外设

2. Canvas自适应

在Unity中,Canvas是用于处理UI(用户界面)元素的重要组件。它是一个容器,可以包含各种UI元素,比如文本、按钮、图像等。是所有ui组件的父物体。

Canvas自适应是用来兼容各种设备下不同分辨率的,我们在开发项目中时,如果针对每一个设备的分辨率进行ui布局这是非常麻烦且复杂的事情,通过自适应我们可以只对ui进行一次布局就可以适配在不同分辨率的设备下。

自适应修改Canvas Scale组件下的UI Scale Mode属性。一般有三种模式选项。

画布缩放器 (Canvas Scaler) - Unity 手册

(1)ConstantPixelSize

在这个模式下Canvas的显示大小是固定的,无论用户界面的比例怎么变化Canvas的显示大小都不会改变。

unity3d物体跟随鼠标移动,ui,计算机外设

例如我们ui布局在1080*1920的竖屏下,在左上角设置一个400*400的图片

unity3d物体跟随鼠标移动,ui,计算机外设

unity3d物体跟随鼠标移动,ui,计算机外设

用户设备分辨率是480*800的竖屏下效果

unity3d物体跟随鼠标移动,ui,计算机外设   

 unity3d物体跟随鼠标移动,ui,计算机外设

这种模式下设置的ui不会进行自适应大小,如果你布局ui的分辨率大于用户设备的分辨率可能会出现ui超出屏幕遮挡等问题。

(2)Scale With Screen Size

这个模式下的Canvas会适配用户设备分辨率并对Canvas的Scale大小进行等比例调整。

unity3d物体跟随鼠标移动,ui,计算机外设

 例如我们ui布局在1080*1920的竖屏下,在左上角设置一个400*400的图片

unity3d物体跟随鼠标移动,ui,计算机外设

用户设备分辨率是480*800的竖屏下效果

unity3d物体跟随鼠标移动,ui,计算机外设

此属性是通过等比例缩放来进行自适应的,通过设置ui布局的原始分辨率Reference Resolution,和Match宽高匹配来进行Scale放大缩放。

1080*1920分辨率到480*800分辨率的缩放原理

unity3d物体跟随鼠标移动,ui,计算机外设

 因为我们Match值为0取的是width,所以缩放比例要按照width来,在下图ps中width是44.4%约等于0.44与unity中canvas的scale。

unity3d物体跟随鼠标移动,ui,计算机外设

计算方式文章来源地址https://www.toymoban.com/news/detail-760128.html

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class Test : MonoBehaviour
{
    pr

到了这里,关于Unity之UI、模型跟随鼠标移动(自适应屏幕分辨率、锚点、pivot中心点)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Unity【角色/摄像机移动控制】【2.角色跟随鼠标转向】

    本章代码实现基于本系列的【1.角色移动】 在前面的基础上,我们在PlayerController脚本中添加如下函数,随后在update方法中调用即可: 其中mouseSensitivity是前面自定义的一个float变量,用来调节对鼠标转向速度,至此,当我们转动鼠标,角色也会跟着转动

    2024年02月22日
    浏览(57)
  • 【Unity】摄像机跟随鼠标移动以物体为中心旋转 物体根据视线方向移动

    描述 实现摄像机根据鼠标移动跟随物体旋转,以摄像机前物体为中心,摄像机围绕物体旋转,并使摄像机时刻指向物体 实现效果 Unity 组件设置 Camera 组件设置 Body 组件设置 实现代码 CameraRotateMove.cs 摄像机跟随和旋转 move_better.cs 物体根据按键移动

    2024年02月08日
    浏览(91)
  • unity UI 跟随3D物体移动

     

    2024年02月11日
    浏览(69)
  • untiy 连接两个UI或一段固定一段跟随鼠标移动的线段

    注意,仅适用于UI,且Canvas必须是Camera模式,不能用在3D物体上,3D物体请使用LineRenender 先创建一个图片,将锚点固定在左边 然后在脚本中添加如下内容

    2024年02月13日
    浏览(45)
  • 【Unity】 Canvas及UI屏幕自适应的基本介绍

    当使用Unity引擎开发游戏时,可以使用Canvas(画布)来处理游戏中的用户界面࿰

    2024年02月12日
    浏览(49)
  • QT 程序自适应屏幕分辨率

    参考资料:https://blog.csdn.net/woshiwangxin0/article/details/78659209 1、step1: 点击UI界面文件控件间的空白区域,然后选择工具中的栅格布局(网格布局),点击后,它会自动调整你的控件大小,默认将你的widget的框长宽大小设置为0。 2、step2 需要对每个控件设置其大小(最小宽、高以

    2024年02月16日
    浏览(43)
  • vue项目实现自适应屏幕分辨率

    npm install postcss-px2rem px2rem-loader --save 在根目录src中新建utils目录下新建rem.js等比适配文件 3、在main.js中引入适配文件 4、到vue.config.js中配置插件 ***********************************  第二种(大屏可用)*********************************** 在外层文件中(包含所有的子组件)

    2024年02月13日
    浏览(34)
  • 外接竖屏显示器virtual box虚拟机屏幕分辨率不能自适应

    问题描述: 笔记本外接竖屏显示器后,virtual box 无适合分辨率 导致结果如图  解决方案: 1.确保虚拟机关闭 2.双击此处修改显卡设置为VBoxSVGA 3.重启虚拟机--- 找到视图界面,勾选“自动调整显示尺寸”    修改视图中的模式即可(依然失败可尝试将外接显示器设置为主屏幕

    2024年02月14日
    浏览(81)
  • 【移动端网页布局】移动端网页布局基础概念 ① ( 移动端浏览器 | 移动端屏幕分辨率 | 移动端网页调试方法 )

    移动端浏览器 比 PC 端浏览器发展要晚 , 使用的技术比较新 , 对 HTML5 + CSS3 支持较好 , 常见的浏览器如下 : UC / QQ / Opera / Chrom / 360 / 百度 / 搜狗 / 猎豹 国内的浏览器 基本都是 根据 Webkit 内核进行修改而来的 , 目前没有自主研发的内核 , 因此 移动端开发适配比较简单 , 兼容主流

    2023年04月22日
    浏览(61)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包