一、素材准备
制作前需要准备的图片:
输入框底图。(由于高级界面的输入框默认是无背景透明的,为了让作品中更好的捕捉到输入框的位置以及输入光标,我们需要准备一张突出输入框位置的底图)
![](http://f.3000test.com/m~diy/0/2017/05/04/17_ym6C7N.960x540.jpg)
二、具体步骤
将底图素材上传到客户端背景素材分类,应用到第一个剧情中作为背景,我们就可以开始制作了。
1.点击左上方的高级界面,再点击新增界面。
![](http://f.3000test.com/m~diy/0/2017/05/04/17_WnSJq0.700x413.png)
2.在组件库点击添加高级界面。
![](https://apppic.3000test.com/s1/work/other/20210927/e92248da2013116512413a59ed740bf7.png)
![](https://apppic.3000test.com/s1/work/other/20210927/e92248da2013116512413a59ed740bf7.png)
3.在弹出的提示中,选择输入框,点击确定。我们就得到了一个输入框组件。
![](https://apppic.3000test.com/s1/work/other/20210927/d7c6db0ee39391f3001eeb214530d018.png)
![](https://apppic.3000test.com/s1/work/other/20210927/d7c6db0ee39391f3001eeb214530d018.png)
4.在界面上方点击初始数值设置。
![](https://apppic.3000test.com/s1/work/other/20210927/503655435c210f0449dd7579d8c9c1db.png)
5.在弹出的设置中,选择字符串,并改一个字符串数值的名称为“输入姓名”。
![](http://apppic.3000test.com/s1/work/other/20200413/596a6b8b625e9cc9766fc88e01972b91.png)
6.点击输入框,在弹出的输入框设置窗口上绑定数值。选择字符串值,即我们刚刚设置的 1:输入姓名。
![](https://apppic.3000test.com/s1/work/other/20210927/00996ffc0c0b07106c36dcd472c05c86.png)
7.全都完成后,点击下方的保存(给界面输入一个名称有利于后期更好的找到相应功能的高级界面哦),然后点击返回舞台。
![](http://f.3000test.com/m~diy/0/2017/05/04/17_cXVIKy.600x321.png)
8.再次点击高级界面,并使用 输入框组件。
![](http://f.3000test.com/m~diy/0/2017/05/04/17_zC0RMr.600x295.png)
9.将输入框拖动到我们准备好的底图中合适的位置。
![](http://f.3000test.com/m~diy/0/2017/05/04/17_614gIX.700x379.png)
10.接下来我们来做一个名字长度的判断,限定名字的长度为3个字。(如果你不需要做名字长度限制,只需添加一个命名为“确认”的选项继续剧情即可)
1)点击剧情下方的分支按钮,添加一个条件分支。
![](http://apppic.3000test.com/s1/work/other/20191216/a30ac3855922b76e8203bad50ce5a1fa.png)
条件分别设置为满足名字长度≤3和>3时两种。
1)点击剧情下方的分支按钮,添加一个条件分支。
![](http://apppic.3000test.com/s1/work/other/20191216/a30ac3855922b76e8203bad50ce5a1fa.png)
条件分别设置为满足名字长度≤3和>3时两种。
![](http://apppic.3000test.com/s1/work/other/20191216/4f9bb0d45bd7b5156094f235cafec0a3.png)
![](http://apppic.3000test.com/s1/work/other/20191216/1c0b72a43975b38f57e38724d4786166.png)
2)当名字长度≤3时,添加一句是否确认继续剧情的文案。
![](http://apppic.3000test.com/s1/work/other/20191216/bf0ef6e0570c0c2ddf71cb84ecd74267.png)
当名字长度>3时,添加一句提示超过名字长度的剧情文案。
![](http://apppic.3000test.com/s1/work/other/20191216/34e85483b6d15bca279399da8b3e10bd.png)
11.那么,如何将这里玩家输入的姓名显示到后边剧情的姓名框中呢?操作如下:
1)点击姓名框中的小三角后,再点击新增角色。 (注:看到“点击编辑”四个字了吗?点击该区域后,小三角才会出现)
![](http://f.3000test.com/m~diy/0/2017/05/04/17_I32ACA.700x213.png)
2)点击新增角色,在角色1后选择小三角,选择我们设置好的字符串1输入姓名,最后点击确定。
![](http://f.3000test.com/m~diy/0/2017/05/04/17_8tRr7C.700x458.png)
3)然后再次点击姓名框的小三角,就能从中找到我们输入框输入的姓名了。
![](http://f.3000test.com/m~diy/0/2017/05/04/17_oWLZi9.700x199.png)
测试效果如下:
![](http://f.3000test.com/m~diy/0/2017/05/04/17_Ekr_HF.967x551.gif)