天天看點

UWP 手繪視訊創作工具技術分享系列 - 全新的 UWP 來畫視訊

從2017年11月開始,我們開始規劃和開發全新的來畫Pro,在12月23日的短視訊峰會上推出了預覽版供參會者體驗,得到了很高的評價和關注度。吸取回報建議後,終于在2018年1月11日正式推出了全新版本的 UWP App,定名為“來畫視訊”。(根據微軟應用商店的命名規則,大家可以繼續搜尋“來畫Pro”)

全新版本的 UWP 來畫視訊,适配了來畫平台的手繪視訊模闆,對創作工具做了全新的改版。

适配來畫平台手繪視訊模闆

來畫成立兩年多的時間裡,一直在積累手繪視訊模闆,目前來畫平台的模闆有上千個,覆寫了各種風格和用途。利用模闆,使用者可以很友善的創作手繪視訊,應用到很多的場景。而創作的過程,隻需要基于模闆,簡單的做編輯、添加和替換就可以了。是以從來畫Pro 釋出之初,适配平台模闆一直都是使用者呼聲很高的需求。但是由于來畫平台和 UWP 創作工具的功能和形式差異,這一需求一直到這個版本才得到實作。在來畫平台、UWP 和 Mobile App 模闆可以互通後,使用者對于模闆的使用就變得更加靈活,模闆的使用度也會變高,對于模闆設計師來講,不隻可以用平台來創作模闆,使用功能更強大的 UWP App 和更靈活的 Mobile App 都是很好的選擇。

先來看看目前 UWP 來畫視訊中模闆的展現方式:

UWP 手繪視訊創作工具技術分享系列 - 全新的 UWP 來畫視訊
UWP 手繪視訊創作工具技術分享系列 - 全新的 UWP 來畫視訊

在首頁展示模闆縮略圖清單,選擇模闆後,進入模闆詳情頁面,展示模闆的基礎資訊、生成視訊和相關類型的推薦模闆。點選“立即下載下傳”按鈕後,開始下載下傳模闆資訊和檔案。

平台的模闆存儲形式為一個 json 配置檔案,存儲了模闆名、模闆尺寸、時長、分組資訊、素材資訊、音樂資訊等字段,每個涉及到檔案的字段,都是一個 URL。是以 UWP 在下載下傳模闆時做的工作,就是下載下傳這個配置檔案,解析檔案裡所有的 URL,下載下傳對應資源并存儲到某個固定檔案夾下。把位置資訊、動畫資訊等轉換成 UWP 創作工具可以使用的格式,完成後使用者就可以在創作工具中使用這個模闆了。

全新的創作工具

1. 工具分組

UWP 手繪視訊創作工具技術分享系列 - 全新的 UWP 來畫視訊

這是新版的創作工具界面,相比于舊版的界面,最大的變化就是“分組”。原有的視訊創作方式,是以素材為機關,添加若幹素材後,順序播放。這種方式遇到的一個難題,就是當素材數量過多,比如超過60-80個時,素材間的覆寫就會變得嚴重,想選中和編輯素材就變得比較困難。另外對于很多手繪視訊創作者來說,心裡對于視訊會有分鏡頭的概念,一個視訊由幾個分鏡頭組成,而每個分鏡頭又由多個素材的動畫組成。這樣就有了新版的工具分組。

在技術實作方面,原有引擎中以 Sprite item 為操作機關,而分組後,加入了 Group 這一層的操作,Group 和 Sprite 間有從屬關系,Group 有自己的索引、動畫設定和畫布位置、縮放等資訊。Group 間沒有過多的關聯,是以 Group 可以随意的拖拽順序,添加和删除。

2. 全新的繪畫功能

在分組功能之外,我們也順應 Windows 10 的更新方向,不斷的拓展繪畫功能。

UWP 手繪視訊創作工具技術分享系列 - 全新的 UWP 來畫視訊

原有版本我們更多的是直接使用了系統的 InkToolbar,包括畫筆選擇,畫筆顔色和粗細等的操作。而新版本我們重新定義了繪畫菜單。

如上圖左上角的圓形菜單,最外層是常用的推薦顔色和推薦的畫筆粗細,裡層是不同的畫筆、橡皮、調色闆和畫筆粗細。其中推薦顔色控件,是一個自定義的圓形清單控件。

選擇調色闆後,出現如下的界面,以 RGB、HSB 數值選擇,和顔色選擇的角度,去設定畫筆的顔色。

UWP 手繪視訊創作工具技術分享系列 - 全新的 UWP 來畫視訊
UWP 手繪視訊創作工具技術分享系列 - 全新的 UWP 來畫視訊
UWP 手繪視訊創作工具技術分享系列 - 全新的 UWP 來畫視訊

3. 全新的圖檔編輯功能

過去我們也講過,SVG 相比于 PNG,在手繪視訊中的表現形式更豐富,因為 SVG 有路徑資訊,而 PNG 沒有。是以我們在新版的開發過程中,也在不斷考慮 PNG 更多的展現方式。

UWP 手繪視訊創作工具技術分享系列 - 全新的 UWP 來畫視訊

如上面的圖檔編輯界面,我們對于圖檔,做了濾鏡、編輯、描圖和調整的功能。下面四張圖依次展示了這四個功能點。

UWP 手繪視訊創作工具技術分享系列 - 全新的 UWP 來畫視訊
UWP 手繪視訊創作工具技術分享系列 - 全新的 UWP 來畫視訊
UWP 手繪視訊創作工具技術分享系列 - 全新的 UWP 來畫視訊
UWP 手繪視訊創作工具技術分享系列 - 全新的 UWP 來畫視訊

其中濾鏡、編輯和調整功能都很正常,主要說一下描圖功能。

描圖功能的目的,是讓使用者對于 PNG 做自定義的描繪操作,進而生成一張 SVG,這張 SVG 的底圖是這張 PNG,而路徑(也就是視訊中的繪畫過程)是使用者自己描繪的線條。繪畫過程,是一個底圖根據路徑被不斷展示出來的形式。如下圖所示,對比上面的描圖界面,這張 PNG 生成的 SVG,描繪過程是使用者描圖的路徑。通常使用者想做這個操作,需要先在 PS 裡對圖檔做編輯操作,然後倒入到 AI 中,描繪路徑後儲存為 SVG 檔案,再導入到來畫視訊中。而現在在來畫視訊中就可以完整整個的操作過程。

UWP 手繪視訊創作工具技術分享系列 - 全新的 UWP 來畫視訊

好了,全新的 UWP 來畫視訊就介紹到這裡,歡迎大家在 Microsoft Store 搜尋“來畫”下載下傳使用,如果大家對 UWP 中的技術實作感興趣,歡迎和我們交流,謝謝!

繼續閱讀