Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
Tags

FGJ17 Drawing Workshop 繪畫教室使用方式 Sticky Locked

A topic by johnson_lin created Aug 18, 2017 Views: 455
This topic is locked
Viewing posts 1 to 1
(5 edits)

FGJ17 繪畫教室使用方式

網址https://drawws.kgr-lab.com/ 

請使用 Chrome 來進行操作,本頁面在其他牌的瀏覽器環境不一定能正常運作。

使用繪畫教室時須配合利用 AR marker 讓 webcam 進行定位的底稿,今年度有兩個版本的底稿:

  1. 有黑色輪廓線版本:https://drawws.kgr-lab.com/drawwsfgj.pdf 
  2. 無輪廓線進階版:https://drawws.kgr-lab.com/drawwsfgjex.pdf 

我們會場內已經有印製一定數量,歡迎取用,不夠可以再加印。如圖所示,上面有可畫頭與身體、還有手臂的部分,不一定要完全照著輪廓線去填色,畫的東西只要在 AR marker 與邊線的內側應該都能辨認,但是這支程式基本上還是會照原本的身體、頭部、手臂在紙張上原本應該在的位置來進行判定,所以真的完全不管畫框與原始位置的話,應該會判定出微妙的東西。

畫好之後就能對著筆電的 webcam (或同等 device) 來進行拍攝,四角落與邊線都要在畫面內、也要盡量擺正,不要有手或其他東西遮擋到底稿紙張太多;必要時用夾子或 clipboard 固定效果較佳。

辨認出圖像內容後,就會有自動去背好的預覽可以檢視,可以在預覽狀態下調整顏色,確定之後就能進行「登錄」,並應該馬上就能看到動起來的樣子。


素材登錄在系統後的使用方式

從繪畫教室網址上就有所有素材的直連連結,可以直接手動下載,或是使用 API 操作的方式,利用 URL request 來取得。

URL request 範例:
從 No.3 素材開始往回 (3->2->1) 取得素材 metadata (json 格式) 的範例:
https://drawws.kgr-lab.com/assets.php?start=3&count=2

從 No.3 素材開始往回 (3->2->1) 取得素材 metadata (csv 格式) 的範例:
https://drawws.kgr-lab.com/assets.php?start=3&count=2&mode=csv

素材取得的順序是從新 (編號較大) 到舊 (編號較小) 的順序來取得;在 URL request 中不帶任何參數的話,預設行為是從最新的素材開始往回抓 3 個。

取得的 metadata 資料包括,頭部+身體與手臂分別的直連 URL、色彩 RGB 值的整體比例 (合計 100)、判定有畫到的區域比例大小 (最大 100)。 RGB 與區域大小等參數可供遊戲內額外利用。想確認回傳的 metadata 字串格式,直接在瀏覽器中點擊上面兩組 URL 就能觀察。

手臂素材的部分,以圖片中心為旋轉中心或以肩膀接點為旋轉中心都是可以的。(編註:看不出原始說明中哪裡有提供這部分的功能。過去的經驗是圖片轉軸 offset 還是要自行程式處理計算)

利用 API 來在遊戲中動態抓取這些角色圖像素材,以隨時使用最新上傳到繪畫教室的圖片、甚至繪畫教室上有幾隻角色就全部出現在遊戲中之類的設計,都是做得到的。

以上提到的功能也有包成 Unity 插件可以使用 (不過這個插件一直以來都沒文件,可能要自己試一下):https://drive.google.com/file/d/0B6YPeOuoINcfeUpUZ1dyTG10c0U/view?usp=sharing


注意事項

活動結束後,繪畫教室頁面的管理者可能會隨時關閉服務或刪除已上傳的圖片。