主站
首页
案例中心
UI编辑 — 手动适配手机UI
UI编辑 — 手动适配手机UI
迷你队长 更新时间: 2022-08-15 18:38:35

效果演示:

 

众所周知,在手机和电脑两个设备,游戏的比例是不同的。

电脑的比例比较固定,但手机的屏幕一般更长

这就导致,在不同的平台上制作UI界面,在另一个设备上会出现不适配的情况。

 

如果UI在手机端制作,在电脑端游玩,部分UI可能会卡在边角,无法完整展示。

 

如果UI在电脑端制作,在手机端游玩,UI会偏向左侧,无法正常对称。下面举个栗子:

电脑视角:

 

手机视角:

 

所以本次的教程就是做一个玩家可以去手动调整UI的功能,让电脑和手机的玩家都可以适配UI界面。

适用于:如果你想让某些按钮居中在玩家的屏幕,或右对齐玩家的屏幕。(参考地图:38733494177289)

 

加入你想让某些UI,适中居中在玩家屏幕右侧,如以下的这些UI:

 

记下它们的x坐标

 

单独创建一个菜单按钮,设置如图所示的UI界面,其中:

红线供玩家判定正中间、X按钮取消设置、√按钮保存设置,左右按钮则进行左右移动的调整。

我们要实现的功能是,当玩家点击左/右,当前的参考页面会实时移动帮助玩家判断位置,当玩家点击确定,即可保存移动的数据。

 

这里需要记下参考UI的X坐标

 

新建玩家的两个变量,

第一个是移动位置,用来计算玩家点击左右按钮,移动了多少,这样玩家点击确定时就可以把这个值加到我们想让玩家调整的UI上。

第二个是UI的x,是指辅助UI的x坐标,用来计算玩家移动UI后,辅助UI的x坐标是多少。这样当玩家设置成功再次打开辅助UI后,展示的是移动后的UI,而不是没有移动的UI

 

先设置打开辅助页面的触发器,因为玩家可能在调整UI后再次打开该页面,也就是说,玩家可能之前已经调整过UI的位置了。

这时我们打开辅助UI,就需要将辅助UI展示出移动后的x坐标。

动作1:设置辅助UI的x值=420+移动的位置(420为辅助UI的初始x坐标,移动的位置就是玩家点击左右的数值)

动作2:设置辅助UI的位置,y不用变,x为第一个动作中计算得到的“辅助UI的x值”

动作3:打开辅助UI

 

然后我们设定,点击左按钮将x坐标-10,点击右按钮将x坐标+10,那么左按钮的触发器就是:

动作1:设置辅助UI的x值=辅助UI的x值加-10(辅助UI的x-10)

动作2:设置移动位置=移动位置加-10(计算出来移动的总位置)

动作3:设置辅助UI的位置,y不变,x为第一个动作中计算得到的“辅助UI的x值”

(右按钮同理,加+10即可)

(当玩家第一次点左按钮,辅助UI的x-10,也就是向左移动了10个坐标,相对于中间的位置就是-10)

(当玩家第二次点左按钮,辅助UI的x-10,也就是向左移动了10个坐标,相对于中间的位置就是-20)

(当玩家第三次点了右按钮,辅助UI的x+10,也就是向右移动了10个坐标,相对于中间的位置就是-10)

 

点击保存按钮:隐藏掉用来参考的UI,设置你想设置调整的UIx坐标即可,最后弹出提示保存成功。

 

点击放弃按钮,隐藏界面后,不进行x轴的变动,直接提示取消修改即可

 

这样,一个可以用户手动调整UI的功能就做好了

站点有内容要更新是否更新。
更新
忽略