UWP 手绘视频创作工具技术分享系列 - 全新的 UWP 来画视频

从2017年11月开始,我们开始规划和开发全新的来画Pro,在12月23日的短视频峰会上推出了预览版供参会者体验,得到了很高的评价和关注度。吸取反馈建议后,终于在2018年1月11日正式推出了全新版本的 UWP App,定名为“来画视频”。(根据微软应用商店的命名规则,大家可以继续搜索“来画Pro”)

全新版本的 UWP 来画视频,适配了来画平台的手绘视频模板,对创作工具做了全新的改版。

适配来画平台手绘视频模板

来画成立两年多的时间里,一直在积累手绘视频模板,目前来画平台的模板有上千个,覆盖了各种风格和用途。利用模板,用户可以很方便的创作手绘视频,应用到很多的场景。而创作的过程,只需要基于模板,简单的做编辑、添加和替换就可以了。所以从来画Pro 发布之初,适配平台模板一直都是用户呼声很高的需求。但是由于来画平台和 UWP 创作工具的功能和形式差异,这一需求一直到这个版本才得到实现。在来画平台、UWP 和 Mobile App 模板可以互通后,用户对于模板的使用就变得更加灵活,模板的使用度也会变高,对于模板设计师来讲,不只可以用平台来创作模板,使用功能更强大的 UWP App 和更灵活的 Mobile App 都是很好的选择。

先来看看目前 UWP 来画视频中模板的展现方式:

在首页展示模板缩略图列表,选择模板后,进入模板详情页面,展示模板的基础信息、生成视频和相关类型的推荐模板。点击“立即下载”按钮后,开始下载模板信息和文件。

平台的模板存储形式为一个 json 配置文件,存储了模板名、模板尺寸、时长、分组信息、素材信息、音乐信息等字段,每个涉及到文件的字段,都是一个 URL。所以 UWP 在下载模板时做的工作,就是下载这个配置文件,解析文件里所有的 URL,下载对应资源并存储到某个固定文件夹下。把位置信息、动画信息等转换成 UWP 创作工具可以使用的格式,完成后用户就可以在创作工具中使用这个模板了。

全新的创作工具

1. 工具分组

这是新版的创作工具界面,相比于旧版的界面,最大的变化就是“分组”。原有的视频创作方式,是以素材为单位,添加若干素材后,顺序播放。这种方式遇到的一个难题,就是当素材数量过多,比如超过60-80个时,素材间的覆盖就会变得严重,想选中和编辑素材就变得比较困难。另外对于很多手绘视频创作者来说,心里对于视频会有分镜头的概念,一个视频由几个分镜头组成,而每个分镜头又由多个素材的动画组成。这样就有了新版的工具分组。

通过分组的创作工具,用户在每个分镜头中只需要加入少量的素材,就可以完成一个分镜头动画。而通过添加多个分组,让多个分镜头组成一个手绘视频。每个分镜头可以单独进行动画设置、预览和素材调整等操作。再配合我们上一篇(UWP 手绘视频创作工具技术分享系列 - 有 AI 的手绘视频)提到的来画和科大讯飞的智能配音,用户可以针对每个分镜头,选择不同的声音进行配音,并在每个分镜头间根据转场动画时长来做配音停顿,这样配音的同步变得更加简单,而且每个视频中可以出现多种声音,更加灵活。

在技术实现方面,原有引擎中以 Sprite item 为操作单位,而分组后,加入了 Group 这一层的操作,Group 和 Sprite 间有从属关系,Group 有自己的索引、动画设置和画布位置、缩放等信息。Group 间没有过多的关联,所以 Group 可以随意的拖拽顺序,添加和删除。

可能你也注意到了,新版的工具界面重新定义了 Title Bar。我们认为系统默认的 Title Bar 我们的利用度较低,为了更大限度的扩大用户的可操作区域,让整个工具更有浸入感,我们把原来右侧的元素类型菜单,放到了 Title Bar 上。如果大家对这个实现感兴趣,可以参考:Windows Dev Center - Title bar customization,也欢迎和我们交流。

2. 全新的绘画功能

在分组功能之外,我们也顺应 Windows 10 的更新方向,不断的拓展绘画功能。

原有版本我们更多的是直接使用了系统的 InkToolbar,包括画笔选择,画笔颜色和粗细等的操作。而新版本我们重新定义了绘画菜单。

如上图左上角的圆形菜单,最外层是常用的推荐颜色和推荐的画笔粗细,里层是不同的画笔、橡皮、调色板和画笔粗细。其中推荐颜色控件,是一个自定义的圆形列表控件。

选择调色板后,出现如下的界面,以 RGB、HSB 数值选择,和颜色选择的角度,去设置画笔的颜色。

3. 全新的图片编辑功能

过去我们也讲过,SVG 相比于 PNG,在手绘视频中的表现形式更丰富,因为 SVG 有路径信息,而 PNG 没有。所以我们在新版的开发过程中,也在不断考虑 PNG 更多的展现方式。

如上面的图片编辑界面,我们对于图片,做了滤镜、编辑、描图和调整的功能。下面四张图依次展示了这四个功能点。

其中滤镜、编辑和调整功能都很常规,主要说一下描图功能。

描图功能的目的,是让用户对于 PNG 做自定义的描绘操作,从而生成一张 SVG,这张 SVG 的底图是这张 PNG,而路径(也就是视频中的绘画过程)是用户自己描绘的线条。绘画过程,是一个底图根据路径被不断展示出来的形式。如下图所示,对比上面的描图界面,这张 PNG 生成的 SVG,描绘过程是用户描图的路径。通常用户想做这个操作,需要先在 PS 里对图片做编辑操作,然后倒入到 AI 中,描绘路径后保存为 SVG 文件,再导入到来画视频中。而现在在来画视频中就可以完整整个的操作过程。

好了,全新的 UWP 来画视频就介绍到这里,欢迎大家在 Microsoft Store 搜索“来画”下载使用,如果大家对 UWP 中的技术实现感兴趣,欢迎和我们交流,谢谢!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序你好

微信小游戏开发入门: 示例代码介绍

62320
来自专栏极乐技术社区

【微信小程序】从入门到放弃

前言 关于微信小程序是什么,能做什么的问题,草民在此不在罗列了,随着小程序的天天刷屏,想必您也是来吃一些干货,本篇博文和大家走进微信小程序的从入门到放弃~ 微信...

49670
来自专栏DeveWork

微信内置浏览器 长按识别二维码 功能的两三个坑与解决方案

这篇文章是上一篇文章的延伸与总结,做的一个微信游戏宣传页上要调用长按识别二维码的功能,做的过程中遇到了两个坑,后来在组里分享会上分享了入坑经历,然后再度发现一个...

5K50
来自专栏日常学python

同学利用Python爬虫制作王者荣耀出装助手,引来了隔壁班的女生!

暑假回家,”小皇帝”般的生活持续了几天,头几天还挺舒服,闲久了顿时觉得好没意思。眼看着10天的假期就要结束,曾信誓旦旦地说要回家学习,可拿回家的两本书至今一页未...

17420
来自专栏编程微刊

提高工作效率的几个小技巧

16940
来自专栏李成熙heyli

腾讯新闻React同构直出优化实践

按照经验来说,直出,能够减少20% - 50%不等的首屏时间,因此尽管增加一定维护成本,前端们还是前赴后继地在搞直出。

67550
来自专栏代码GG之家

android 游戏移植 (一) (文末有福利) | SDL 西游释厄传调试

游戏效果(不是真实画质) 有没有被惊艳到?你的内心肯定会说,我靠,画质这么渣,画面却如此熟悉。对的,就是如此渣渣的画面,却伴随了我们的童年快乐。 下面我们就详细...

28960
来自专栏技术/开源

TypeScript 优秀开源项目大合集

TypeScript出来有段时间了,也冒出了很多用TypeScript开发的优秀开源项目,搜寻了一些基于TypeScript项目,分享给大家:https://g...

61990
来自专栏HTML5学堂

HBuilder的基本介绍

工具 - HBuilder 起因 HTML最开始其实不是一个编程语言,确实用不着什么ide。 但是发展到现在,7w多个语法,js越来越庞大,真开发一个达到原生水...

1K100
来自专栏SAP最佳业务实践

SAP最佳业务实践:MM–有JIT交货计划的采购(230)-3收货&开票

4.5 MIGO收货 收货是指实际货物和物料的入库过程。收货通常来自于外部供应商或内部生产部门。所有收货都会增加库存。 此步骤仅用于物料H20,H21,看板物料...

49060

扫码关注云+社区

领取腾讯云代金券