请选择 进入手机版 | 继续访问电脑版

站内搜索

搜索
热搜: 活动 交友 discuz

iFAction 世界需要你的想象力!

iFAction游戏UI坐标修改方法说明

 

15

主题

169

帖子

1094

积分

管理员

Rank: 22Rank: 22Rank: 22Rank: 22Rank: 22Rank: 22

积分
1094

iFAction官方导师

发表于 2019-6-28 23:22:45 | 显示全部楼层 |阅读模式
iFAction游戏UI坐标修改方法说明

iFAction默认提供了主界面、菜单界面、装备界面等基础游戏界面。
如果你对这些界面中的某些部件的位置不满意,或者你自己做的UI图片替换以后坐标有偏差想要调整,甚至你完全不想看到界面中的某些部分,这个时候这个帖子或许可以帮到你。
这里以主界面HP状态为例,介绍修改界面坐标的方法。

注意:本教程需要修改脚本,但不需要任何程序相关知识。



1、在工具栏中打开脚本编辑器。


2、在脚本编辑器左侧目录中找到主界面控件部分【CActorStatus】,然后找到写在最上面的【=======界面坐标======】,在这里可以修改主界面所有角色状态UI的坐标。



3、找到要修改的HP状态坐标(Ctrl+F 搜索关键词可以快速定位)

HP状态由HP条、HP图标和HP数字三部分组成,这三部分坐标分别用了三种不同方法设置。
假设我们想要把HP状态条全部移动到屏幕右下角,图标显示在右侧,HP数字显示在HP条左上,怎么做呢?

我们先来修改HP条的坐标,它是用绝对坐标的方法设置的。



A、绝对坐标

绝对坐标以游戏窗口左上角为(0,0)点,如图所示,该点向右x>0,向下y>0。



先找到HP条坐标,我们可以看到两个变量【barHPX】和【barHPY】,它们现在分别等于35和15。
barHPX为HP条的横坐标,35即HP条最左端距离原点35像素,想要让它向右移动,就增大这个数字,反之就减少这个数字。
barHPY为HP条的纵坐标,15即HP条顶端距离原点15像素,想要让它向下移动,就增大这个数字,反之就减少这个数字。

想要让HP状态条全部移动到屏幕右下角,我们试着修改一下:
var barHPX = 735;
var barHPY = 415;

修改效果如图:
注意当坐标数字大于当前分辨率(960 ×540),HP条就会到界面外,如果你不想看到这个HP条,那你就可以让它的barHPX大于960或者barHPY大于540,这样它就消失了。
当然他没有真的消失,只是你看不到。

接着,我们来修改HP图标,它是用相对坐标的方法设置的



B、相对坐标

相对坐标以参照物左上角为(0,0)点,同样遵循上述坐标系规则。

找到HP图标坐标,可以看到两个变量【iconHPX】和【iconHPY】,它们现在分别等于-27和-5。

HP图标是以HP条(barHP)为参照物的,-27与-5都是它与参照物的偏移量。现在图标位于HP条的左上,所以图标的偏移量是负的,想要左移(上移)图标,就让偏移量减少,右移(下移)则增大。

想要让图标显示在HP条右侧,我们试着修改一下:
var iconHPX = 127;

这样修改的效果如图:

最后,我们来修改HP数字,它是用字符串坐标设置的。



C、字符串坐标

找到HP数字坐标,可以看到两个变量【volHPX】和【volHPY】,它们现在分别等于"barHP_left_0"和barHPY - 11。
volHPY是随着barHPY变化的,直接对数字进行修改即可。
而修改volHPX则需要先理解"barHP_left_0"的意思,这个字符串是按照参照物_对齐方式_偏移量的格式写成的。

参照物
可以按照相对坐标的参照物理解。

对齐方式
字符串坐标的对齐方式共有四种,分别为:
Left:左对齐
Right:右对齐
Top:顶端对齐
Bottom:底端对齐

偏移量
同相对坐标。

所以"barHP_left_0"的意思为:
“以barHP为参照物,左对齐,偏移量为0”
如果想要修改HP数字显示在HP条左上,可以写成:
var volHPX = "barHP_left_-84"

修改效果如图:

注意:请不要轻易修改以字符串形式设置的坐标,如果你一定要将以字符串形式设置的坐标修改为绝对坐标,那么你就需要在脚本中找到这一行:
volHP.x = RF.PointTranslation(_sf , volHP , volHPX , "x");
并把他改为
volHP.x = volHPX;
然后再把volHPX改为绝对坐标数字。
反之亦然。



以上就是修改三种UI坐标的方法,想要修改主界面,就到脚本中的主界面控件里找相应脚本,窗口则在窗口UI里找。(注:手机端移动轮盘的坐标在SMain中)

就是这些,有问题请在这里留言~

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

1

主题

3

帖子

11

积分

iF尘埃

Rank: 1

积分
11
发表于 2019-6-29 00:06:22 | 显示全部楼层
很受益啊~支持:)

15

主题

169

帖子

1094

积分

管理员

Rank: 22Rank: 22Rank: 22Rank: 22Rank: 22Rank: 22

积分
1094

iFAction官方导师

 楼主| 发表于 2019-6-29 00:09:39 | 显示全部楼层

:loveliness:

10

主题

113

帖子

1858

积分

iF城镇

Rank: 6Rank: 6

积分
1858

摩点支持者

QQ
发表于 2019-6-29 00:17:35 来自手机 | 显示全部楼层
了解到了,支持~

0

主题

6

帖子

107

积分

iF基础方块

Rank: 3Rank: 3

积分
107

摩点支持者继续加油哦!

发表于 2019-6-29 13:02:54 | 显示全部楼层
学习了,出现教程必学,还请问下,血条的宽和高是多少,还有圆形血的宽和高是多少,知道这个是不是有助于修改血条位置:)

15

主题

169

帖子

1094

积分

管理员

Rank: 22Rank: 22Rank: 22Rank: 22Rank: 22Rank: 22

积分
1094

iFAction官方导师

 楼主| 发表于 2019-6-30 01:11:04 来自手机 | 显示全部楼层
miantouchi 发表于 2019-6-29 13:02
学习了,出现教程必学,还请问下,血条的宽和高是多少,还有圆形血的宽和高是多少,知道这个是不是有助于修 ...

好问题!血条的精灵宽高和素材是相等的,血条和icon等等所有UI资源都保存在Graphic/System下,想知道任何UI的信息都可以去这个地址下找,关于如何查找资源可以参考我的另外一篇帖子:iFAction图片与音乐资源说明。

0

主题

6

帖子

107

积分

iF基础方块

Rank: 3Rank: 3

积分
107

摩点支持者继续加油哦!

发表于 2019-6-30 16:40:54 | 显示全部楼层
moon 发表于 2019-6-30 01:11
好问题!血条的精灵宽高和素材是相等的,血条和icon等等所有UI资源都保存在Graphic/System下,想知道任何 ...

谢谢,找到了

0

主题

2

帖子

14

积分

iF元素粒

Rank: 2

积分
14
发表于 2019-7-5 23:21:32 | 显示全部楼层
谢谢,正需要这个,还有状态样式修改教程希望以后会有

6

主题

14

帖子

58

积分

iF基础方块

Rank: 3Rank: 3

积分
58
发表于 6 天前 | 显示全部楼层
怪物的HP血条位置从哪里调?

点评

在LEnemy里找到下面的部分,修改x和y就可以了  详情 回复 发表于 5 天前

15

主题

169

帖子

1094

积分

管理员

Rank: 22Rank: 22Rank: 22Rank: 22Rank: 22Rank: 22

积分
1094

iFAction官方导师

 楼主| 发表于 5 天前 | 显示全部楼层
a798777544 发表于 2020-3-23 18:55
怪物的HP血条位置从哪里调?

在LEnemy里找到下面的部分,修改x和y就可以了
  1.     /**
  2.      * update HP bar
  3.      */
  4.     function updateBar(){
  5.         var sp = char.getCharacter().getCharactersRect();
  6.         hpBar.x = sp.x + (sp.width - hpBar.width) / 2 ;
  7.         hpBar.y = sp.y - hpBar.height - 10;
  8.         hpBar.update();
  9.     }
复制代码
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

联系我们
QQ群:977585123
iFAction下载
Windows客户端
反馈
意见建议
iFAction

iFAction

京ICP备15053274号-1

Powered by Discuz! X3.4 © 2001-2013 Comsenz Inc.