如何制作人物好感度界面
发表时间: 2021-11-18 16:26:27 阶段:高级 分类:实例应用

一、好感度界面作用
给作品中攻略人物角色添加好感度显示的界面,更清晰的展示攻略角色好感度变化,使作品更人性化。

下面的具体教程步骤中将给大家展示4种好感度界面的制作方法。点击下方文字直接跳转到对应模式:
模式一 单页查看
模式二 点图查看
模式三 翻页查看
模式四 不重叠翻页查看

 

二、具体步骤
模式一 单页查看:

————————————————————————————————————————————————————————————————

1. 首先,用ps先制作好一个单页的人物好感度界面图片。

 

2. 打开闪艺制作工具,进入作品,点击【设置栏 - 数值设置 - 设置初始数值】,添加三个男主的初始数值,确定。

 

3. 点击菜单栏中的【高级界面 - 新增界面】,新增一个容器,在【组件库】点击容器名,更改为【好感度界面】便于区分。

704994c973ef2487889a3b58e0c16f22.png


4. 将准备好的人物好感度界面图片导入到【我的素材 - 背景】分类下。

 

5. 单击导入的好感度界面图片,替换掉容器底图。

 

6. 选择添加【文本】组件。

 

7. 双击【文本】,进入【文本】编辑界面,删除文本内部默认文字,点击下方【数值设置】区,点击【插入数值】,插入【boy one好感】数值,确定。

 

8. 在下方【文本设置】内更改到合适的字色,调整文本框大小,保存,返回上一级。

 

9. 将设置好的文本移动到合适的位置。

 

10. 按照第6步,再次设置好人物2,人物3的好感数值显示。

 

11. 如需制作好感度按钮去打开这个界面,可以直接在【组件库】添加按钮组件,替换准备好的好感度按钮底图,设置点击打开好感度界面的操作即可。


 

模式二 点图查看
————————————————————————————————————————————————————————————————

1. 首先,用ps先制作好一个人物好感度界面图片以及处理过大小的男主人物图片。

 

2. 打开闪艺制作工具,进入作品,点击【设置栏 - 数值设置 - 设置初始数值】,添加三个男主的初始数值,确定。

 

3. 点击菜单栏中的【高级界面 - 新增界面】,新增一个容器,在【组件库】点击容器名,更改为【好感度界面】便于区分。

 

4. 将准备好的人物好感度界面图片、处理过的人物图片和单独的人物好感展示图片,导入到【我的素材 - 背景】分类下。

 

5. 单击导入的好感度界面图片,替换掉容器底图。

 

6. 选择添加【图片】组件。

 

7. 双击【图片】,进入【图片】编辑界面,点击【我的素材 - 背景】分类内准备好的人物1素材替换,保存,返回上一级。

 

8. 将人物1移动到合适的位置上,再次新增【图片】,依次替换好人物2和人物3,移动到合适的位置。

 

9. 点击【组件库】添加【容器】组件,更名为【人物1好感】,便于区分。

 

10. 点击准备好的人物好感展示图片,替换容器底图。

 

11. 点击添加【文本】组件。

 

12. 双击【文本】,进入【文本】编辑界面,删除文本内部默认文字,点击下方【数值设置】区,点击【插入数值】,插入【boy one好感】数值,确定。

 

13. 在下方【文本设置】内更改到合适的字体和字色,调整文本框大小,保存,返回上一级。

 

14. 将设置好的文本移动到合适的位置。

 

15. 点击添加【按钮】组件。

 

16. 双击【按钮】,进入【按钮】编辑界面,点击准备好的返回图片替换按钮底图,确定。返回上一级,移动到合适位置。

 

17. 选中【返回】按钮,点击右侧【事件】添加【鼠标点击的时候】事件,设置点击【关闭组件 - 关闭当前组件】操作,确定。

 

18. 再次在【组件库】添加【容器】组件,设置好人物2与人物3的界面。

 

19. 双击【组件库】中的【好感度界面】容器,选中人物1图片,在右侧【事件】添加【鼠标点击的时候】事件,设置【打开组件 - 人物1好感】,确定(其他两个人物也设置打开事件,打开对应的好感度界面。)。

 

20. 点击添加【按钮】组件。

 

21. 双击【按钮】,进入【按钮】编辑界面,点击准备好的返回图片替换按钮底图,确定。返回上一级,移动到合适位置。选中【返回】按钮,点击右侧【事件】添加【鼠标点击的时候】事件,设置点击【关闭组件 - 关闭当前组件】操作,确定。

 

 

模式三 翻页查看
————————————————————————————————————————————————————————————————

*注:翻页查看模式中的人物好感度展示界面,尽量做成不透明的哦,否则人物打开会层叠显示。

 

1. 首先,用ps先制作好每个人物的好感度展示界面以及翻页按钮物图片。

 

2. 打开闪艺制作工具,进入作品,点击【设置栏 - 数值设置 - 设置初始数值】,添加三个男主的初始数值,确定。

 

3. 点击菜单栏中的【高级界面 - 新增界面】,新增一个容器,在【组件库】点击容器名,更改为【人物1好感】便于区分。

 

4. 将准备好的人物好感度展示界面图片和翻页按钮图片,导入到【我的素材 - 背景】分类下。

 

5. 点击准备好的人物好感展示图片,替换容器底图。

 

6. 点击添加【文本】组件。

 

7. 双击【文本】,进入【文本】编辑界面,删除文本内部默认文字,点击下方【数值设置】区,点击【插入数值】,插入【boy one好感】数值,确定。

 

8. 在下方【文本设置】内更改到合适的字体和字色,调整文本框大小,保存,返回上一级。

 

9. 将设置好的文本移动到合适的位置。

 

10. 点击添加【按钮】组件。

 

11. 双击【按钮】,进入【按钮】编辑界面,点击准备好的返回图片替换按钮底图,确定。返回上一级,移动到合适位置。

 

12. 点击右侧【组件库 - 添加组件】,添加新的容器组件,将另外两个人物的界面也设置好。

 

13. 双击【人物1好感】,点击添加【按钮】组件。

 

14. 双击【按钮】,进入【按钮】编辑界面,点击准备好的下一页图片替换按钮底图,确定。返回上一级,移动到合适位置。

 

15. 选中【下一页】按钮,点击右侧【事件】添加【鼠标点击的时候】事件,设置点击【打开组件 - 打开人物2好感】操作,确定。

 

16. 双击【组件库】中【人物2好感】,添加【按钮】组件,依次设置好上一页按钮和下一页按钮,移动到合适位置。

 

17. 选中【上一页】按钮,点击右侧【事件】添加【鼠标点击的时候】事件,设置点击【打开组件 - 打开人物1好感】操作,确定。

 

18. 选中【下一页】按钮,点击右侧【事件】添加【鼠标点击的时候】事件,设置点击【打开组件 - 打开人物3好感】操作,确定。

 

19. 双击【组件库】中【人物3好感】,添加【按钮】组件,设置好上一页按钮,移动到合适位置。

 

20. 选中【上一页】按钮,点击右侧【事件】添加【鼠标点击的时候】事件,设置点击【打开组件 - 打开人物2好感】操作,确定。

 

21. 选中【返回】按钮,点击右侧【事件】添加【鼠标点击的时候】事件,设置点击【关闭组件】操作,依次设置关闭【人物1好感、人物2好感、人物3好感】,确定。


22. 其他两个好感度展示界面,【返回】按钮也做一样的设定。

 

 

模式四 不重叠翻页查看:


在用点击事件做好感度界面的时候,打开了一个新的界面后,上一个界面是无法关闭的。此时如果制作的好感度界面背景是透明的,重叠着上一个界面的话,整个画面看起来就会很凌乱。所以可根据下面的教程用载入事件来制作不重叠的好感度界面。

 

1. 首先我们先新增一个高级界面。

 

2. 进入高级界面,右键删除底图,将高级界面调整到合适的大小,将容器命名更改为【好感度界面】。

 

3. 然后添加设置好每个人物所对应的好感度界面、上下页翻页按钮以及返回按钮组件。

 

4. 接下来我们需要给空白的这个好感度界面设置载入事件,载入所有的人物好感度界面、上下页翻页按钮以及返回按钮。

注意:
【上一页】和【下一页】载入设置完打开事件时记得要定位下按钮的位置。
点击【定位】,然后将按钮移动到合适的位置上,然后点击【√】确认。另外按钮在各男主的好感度界面里不需要添加哦~

 

 


5. 那么我们要如何控制翻页按钮,在什么时候打开什么人物界面呢?
首先我们点击【设置栏 - 数值设置 - 设置初始数值】先设置一个初始数值,例如:页数 设置初始数值为1。

 

6. 双击【下一页】按钮,进入按钮编辑界面,给翻页按钮进行点击事件的设置。

 

7. 添加按钮点击事件,点击【+】添加点击动作,再点击【需要满足的条件】,设置【下一页】按钮的点击条件,我们有三个人物界面,所以【下一页】按钮的点击条件为0<页数<3,确定,如下图所示。

 

8. 然后设置【下一页】按钮点击事件,点击后进行【数值操作】,添加数值操作【页数=页数+1】,确定。

 

9. 再次设置【重新载入】事件,重新载入【好感度界面】。

 

10. 同理,我们对【上一页】按钮进行点击事件的设置。

 

11. 添加按钮点击事件,点击【动作1】后方的铅笔处,设置【上一页】按钮的点击条件,设置【上一页】按钮的点击条件为1<页数<4,确定,如下图所示。

 

12. 然后设置【上一页】按钮点击事件,点击后进行【数值操作】,添加数值操作【页数=页数-1】,确定。

 

13. 再次设置【重新载入】事件,重新载入【好感度界面】。

 

14. 翻页按钮设置完成后,接下来,双击【好感度界面】,进入【好感度界面】编辑界面,设置每个人物的好感度界面的载入事件。设置男主1的载入条件,条件为【页数=1】时,载入男主1。

 

15. 然后设置载入事件,设置打开男主1,关闭男主2、男主3事件。

 

16. 同理,我们可以对男主2和男主3进行载入设置,再次添加【载入后】动作,设置男主2的载入条件,条件为【页数=2】时,载入男主2。

 

17. 然后设置载入事件,设置打开男主2,关闭男主1、男主3事件。

 

18. 再次添加【载入后】动作,设置男主3的载入条件,条件为【页数=3】时,载入男主3。

 

19. 然后设置载入事件,设置打开男主3,关闭男主1、男主2事件。

 

20. 最后,双击【返回】按钮,进入【返回】按钮的编辑界面,进行点击事件设置。

 

21. 设置【返回】按钮的点击事件,我们需要设置关闭前面所打开的所有界面,包括返回按钮本身。


*注:这里的返回按钮本身的关闭需要设置关闭"返回"按钮,不要设置关闭当前界面哦。
 

PS:在高级界面——共享界面中,芊芊用了模式四的方法制作了一个“好感菜单按钮”,欢迎下载研究。

 

相关链接:

如何将好感度界面添加到菜单内

TOP