发布于: 2021-09-29 11:34:30

在剧情中，会涉及到社交平台聊天的剧情内容，我们可以将聊天的文本内容制作成聊天图片模拟手机社交平台聊天界面展现在作品中。

例如：

上方的静态图展现的是主角“我”收到群聊信息，下方的动态图为“主角”在群聊群中收到信息以及发送信息的一个效果。

这样在体验作品时，一方面贴合实际推进剧情文本，另一方面模拟聊天互动可以增加沉浸感。

制作前，我们需要准备的内容：

1.聊天头像素材图（可直接使用立绘图裁剪）

2.手机框素材图（psd中已含），可以直接右键下方的图，选择“图片另存为",将其下载到本地。

（透明底手机外框）

psd文件：

1.打开psd工程文件后，可以看见如下图的可编辑内容。

2.我们可替换顶栏中的群聊名称/备注、聊天界面中的昵称、对话文字、头像框、发送时间等内容。

举例：以“我”与【梨酱】聊天为例。

顶栏备注：梨酱

左侧昵称：梨酱

对话文字：你今天学会了吗？

发送时间：7月10日

更改后如图：

当我们做好了所需的聊天图片后，在编辑器中进入“附加事件”面板，找到“添加图片”开始制作。

1.如果不想要对话框/旁白框出现就需要先在“附加”中选择清除对话和角色。

2.添加上传做好的图片

2.1调整图片大小和尺寸

可以先添加一次附加将宽高缩小到50%展现收到消息，再添加一次附加选择“图片修改”调整为200%的宽高来展现聊天内容。

（效果如下两张图产生的变化）

2.2设置等待时间

在添加图片和修改图片中间 必须设置等待时间 。

若没有设置用户点击后直接会显示“图片修改”的附加事件内容，会导致画面感非常的突兀。

（ 注 ：目前没有高级文本选项功能，我们在多条聊天记录间，设置等待时间时注意多预留几秒的浏览时间）

（下图为完成所有步骤后的操作可视化面板的可见状态）

预览动图：

预览测试链接：

https://ohayoo.cn/avg-game/index.html?fiction_id=425&version=6&width=2436&height=1125&from=editor

（本次代码教程已默认我们添加完毕上传完所需素材图）

1.如果不想要对话框/旁白框出现就需要先在“附加”中选择清除对话。

要清除对话，需要用到一个简单脚本： clearText ，用于清除对话。

2.添加图片-修改图片

要使图片移动，需要用到两个简单脚本：setPic 和 setPicAttr，分别用于添加图片和修改图片。

在案例中，我们需要令第一张图缩放屏幕，整体脚本写法如下：

【添加图片代码】

【修改（本教程的缩放+移动）图片代码】

3.设置等待

要想设置等待，需要用到一个简单脚本：wait time,用于设置等待时间。

看不太明白？别急，我们认识一下里面的各项参数。

参数解释

layer：图片的图层编号。

name：图片素材的名称。

x, y：setPic中的x和y代表图片的初始位置，setPicAttr中的则代表移动后的位置。

zoomX、 zoomY:图片高宽缩放的大小（0.5=50%即原图的一半、2=200%即原图的两倍）

wait time：图片用多长时间完成此次移动（单位为秒）。

由此我们解读一下这段代码的意思：

“将图层编号为1，名称为‘梨酱聊天’的图片从(1018, 250)位置、50%的缩放状态移动到(600, 0)位置、200%缩放的状态，中间等待1秒。”

来看看它的效果吧。

想掌握更多运用技巧，欢迎到千梨官方教程站查询相应内容。