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

moon

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中）

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

golden

很受益啊~支持:)

moon

golden 发表于 2019-6-29 00:06
很受益啊~支持

:loveliness:

lyirs

了解到了，支持~

miantouchi

学习了，出现教程必学，还请问下，血条的宽和高是多少，还有圆形血的宽和高是多少，知道这个是不是有助于修改血条位置:)

moon

miantouchi 发表于 2019-6-29 13:02
学习了，出现教程必学，还请问下，血条的宽和高是多少，还有圆形血的宽和高是多少，知道这个是不是有助于修 ...

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

miantouchi

moon 发表于 2019-6-30 01:11
好问题！血条的精灵宽高和素材是相等的，血条和icon等等所有UI资源都保存在Graphic/System下，想知道任何 ...

谢谢，找到了

IFA15Cgame

谢谢，正需要这个，还有状态样式修改教程希望以后会有

a798777544

怪物的HP血条位置从哪里调？

moon

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.     }

复制代码