Unity中视切角转盘UI的实现

在游戏中,动态的UI设计常常会造成更好的用户体验和更流畅的操作反馈。
其中,视切角轮盘是其中常用的一种。其好处在于可以在显示转盘中所有选项的同时,将其所在的矩形区域调整至符合窗口显示的比例。
效果图

实现思路

游戏开发就是一个将脑中构建的物理逻辑转换为界面上素材显示的逻辑的过程。在这个视切角轮盘的运作过程中,其物理过程为:

  1. 所有的选项在三维空间中呈圆形分布,其位置取决于圆心位置center、圆的半径R,以及所在位置在圆上的角度θ。
  2. 我们在观察角度上视切角α以斜方向观察,因此产生前后交替以及近大远小的视觉效果。

视切角转盘的物理模型

以上过程描述了视切角轮盘在真实的物理世界运作的机理,将其映射至纯粹的显示空间中:

  1. 其空间位置(x,y)遵循如下关系:

    	x = center.x + R*cos(θ)
    	y = center.y + R*sin(θ)*cos(α)
    
  2. “近大院小”即是图形大小随z轴位置变化。在假想的三维空间中,其z轴坐标应为:

       z = center.z + R*sin(θ)*sin(α)
    

此时即可以将该选项的localScale设置为随z轴位置变化大小的函数即可。(我这里直接使用了一个线性函数)

代码实现

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
//控制单个选项位置与显示
public class CoronaButton : MonoBehaviour
{
   
    RectTransform thistf;
    GameObject buttonText;
    float theta;    //当前button在轮盘中所处角度
    readonly float sightAngle = Mathf.PI / 6;  //视切角大小
    float primeScale;	//起始的图标大小
    Vector3 center;
    float radius;
    
    void Awake()
    {
   
        thistf = this.GetComponent<RectTransform>();
        buttonText = this.GetComponentInChildren<Text>().gameObject;
        primeScale = thistf.localScale.x;
    }
    
    //设置初始角度
    public void SetCenter(Vector3 input,int radius)
    {
   
        center = input;
        this.radius = radius;
    }

	//直接改变圆域极坐标角度
    public void SetTheta(float neoTheta)
    {
   
        theta = neoTheta;
        //控制在-pi到pi之间
        theta -= theta > Mathf.PI ? (Mathf.PI *</
  • 7
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值