iFAction游戏UI坐标修改方法说明
iFAction游戏UI坐标修改方法说明iFAction默认提供了主界面、菜单界面、装备界面等基础游戏界面。如果你对这些界面中的某些部件的位置不满意，或者你自己做的UI图片替换以后坐标有偏差想要调整，甚至你完全不想看到界面中的某些部分，这个时候这个帖子或许可以帮到你。 这里以主界面HP状态为例，介绍修改界面坐标的方法。
注意：本教程需要修改脚本，但不需要任何程序相关知识。
static/image/hrline/line3.png
1、在工具栏中打开脚本编辑器。
2、在脚本编辑器左侧目录中找到主界面控件部分【CActorStatus】，然后找到写在最上面的【=======界面坐标======】，在这里可以修改主界面所有角色状态UI的坐标。
3、找到要修改的HP状态坐标（Ctrl+F 搜索关键词可以快速定位）
HP状态由HP条、HP图标和HP数字三部分组成，这三部分坐标分别用了三种不同方法设置。{:3_57:}假设我们想要把HP状态条全部移动到屏幕右下角，图标显示在右侧，HP数字显示在HP条左上，怎么做呢？
我们先来修改HP条的坐标，它是用绝对坐标的方法设置的。
static/image/hrline/line3.png
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，这样它就消失了。当然他没有真的消失，只是你看不到。{:3_58:}
接着，我们来修改HP图标，它是用相对坐标的方法设置的。
static/image/hrline/line3.png
B、相对坐标
相对坐标以参照物左上角为（0,0）点，同样遵循上述坐标系规则。
找到HP图标坐标，可以看到两个变量【iconHPX】和【iconHPY】，它们现在分别等于-27和-5。
HP图标是以HP条（barHP）为参照物的，-27与-5都是它与参照物的偏移量。现在图标位于HP条的左上，所以图标的偏移量是负的，想要左移（上移）图标，就让偏移量减少，右移（下移）则增大。
想要让图标显示在HP条右侧，我们试着修改一下：var iconHPX = 127;
这样修改的效果如图：
最后，我们来修改HP数字，它是用字符串坐标设置的。
static/image/hrline/line3.png
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改为绝对坐标数字。反之亦然。
static/image/hrline/line3.png
以上就是修改三种UI坐标的方法，想要修改主界面，就到脚本中的主界面控件里找相应脚本，窗口则在窗口UI里找。（注：手机端移动轮盘的坐标在SMain中）
就是这些，有问题请在这里留言~{:3_52:}
很受益啊~支持:) golden 发表于 2019-6-29 00:06
很受益啊~支持
:loveliness: 了解到了，支持~ 学习了，出现教程必学，还请问下，血条的宽和高是多少，还有圆形血的宽和高是多少，知道这个是不是有助于修改血条位置:) miantouchi 发表于 2019-6-29 13:02
学习了，出现教程必学，还请问下，血条的宽和高是多少，还有圆形血的宽和高是多少，知道这个是不是有助于修 ...
好问题！血条的精灵宽高和素材是相等的，血条和icon等等所有UI资源都保存在Graphic/System下，想知道任何UI的信息都可以去这个地址下找，关于如何查找资源可以参考我的另外一篇帖子：iFAction图片与音乐资源说明。 moon 发表于 2019-6-30 01:11
好问题！血条的精灵宽高和素材是相等的，血条和icon等等所有UI资源都保存在Graphic/System下，想知道任何 ...
谢谢，找到了 谢谢，正需要这个，还有状态样式修改教程希望以后会有 怪物的HP血条位置从哪里调？ a798777544 发表于 2020-3-23 18:55
怪物的HP血条位置从哪里调？
在LEnemy里找到下面的部分，修改x和y就可以了
/**
* update HP bar
*/
function updateBar(){
var sp = char.getCharacter().getCharactersRect();
hpBar.x = sp.x + (sp.width - hpBar.width) / 2 ;
hpBar.y = sp.y - hpBar.height - 10;
hpBar.update();
}
页:
[1]
2