在游戏中,动态的UI设计常常会造成更好的用户体验和更流畅的操作反馈。
其中,视切角轮盘是其中常用的一种。其好处在于可以在显示转盘中所有选项的同时,将其所在的矩形区域调整至符合窗口显示的比例。
实现思路
游戏开发就是一个将脑中构建的物理逻辑转换为界面上素材显示的逻辑的过程。在这个视切角轮盘的运作过程中,其物理过程为:
- 所有的选项在三维空间中呈圆形分布,其位置取决于圆心位置center、圆的半径R,以及所在位置在圆上的角度θ。
- 我们在观察角度上视切角α以斜方向观察,因此产生前后交替以及近大远小的视觉效果。
以上过程描述了视切角轮盘在真实的物理世界运作的机理,将其映射至纯粹的显示空间中:
-
其空间位置(x,y)遵循如下关系:
x = center.x + R*cos(θ) y = center.y + R*sin(θ)*cos(α)
-
“近大院小”即是图形大小随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 *</