LV. 2
GP 0

RE:【心得】【心得分享】使用.ytt格式製作Youtube炫炮字幕(開發中)

樓主 やしし asd1530
21 -
感謝艾利絲緹分享了 .ytt 格式與 Aegisub 的基本介紹
搜尋用tag測試:Youtube 特殊 CC 字幕 特效 Caption Subtitles
這邊想跟大家介紹一下關於 .ytt 格式內容的一些資訊(或者稱為 .srv3 格式?)
相信有些人已經知道 Youtube 可以套用的字幕格式其實不少,而能做到特效的只有幾種
如:
vtt 可以製作時序顯示與位置資訊
xml、dfxp 可以增加文字顏色與位置資訊
然而
同時控制背景顏色、透明度、位置、字體大小、直式字幕、表音註解(Ruby)及時序顯示目前大概只有 ytt 能辦到
字幕控制,ytt 樂勝前述格式
但相對文本閱讀較不直觀,其實也還好

這樓主要介紹兩個部分:
1. 用 Aegisub 做卡拉OK字幕
2. ytt 語法
(I translate most important part about ytt syntax in English. You can find it in the 2nd part. Have fun !!!)

1.卡拉OK字幕
卡拉OK字幕目前我知道有3種語法能達成,這等語法說明結束再談
先以 YTSubConverter 這套軟體的方式來示範
在 Aegisub 中可以開啟卡拉OK編輯器
如上圖,接著可以用左鍵在單列字幕中間插入斷點
在音軌部分可以調整時間長度,右鍵點音軌可以聽單段聲音 很方便
設定完成再按勾勾就好,如此一來轉檔時就會自動轉成卡拉OK的時軸

另外一點
Aegisub 有「字幕樣式管理器」,可以設定字幕樣式庫(顏色、位置...)
如上圖,這在多人說話的影片很好用
接著將匯出的 ass 檔丟給 YTSubConverter,就會出現下面狀況
左側是你自訂的樣式庫,右側可選擇每個樣式庫的特效(是否使用卡拉OK、字體顏色、陰影顏色)
因為本人對軟體也不是很上手,因此就留給各位自行摸索。

2. ytt 語法 (ytt Syntax)
轉檔完成後你會有一個 ytt 檔,如果打開他會有以下畫面
(推薦用 Notepad++,因為 ytt 仍是基於 xml 的產物,所以 Notepad++ 可以自動標出語法所在)
(After converted, you should get a ytt file like picture. ↓
ytt is based on xml format, so you can open it by any text viewer. BTW, I used to open it by Notepad++.)
當然,這是重新排版過的
輸出的 ytt 應該是沒有分行,全部連在一起
可以使用全部取代一次把所有行都分開,如下圖

簡單講一下 ytt 概念,閒著沒事再來看就好(This part is talking about xml, not really important.):
其實都跟 xml 一樣,如果需要更詳細請自行查看更多 xml 的資料
因為本人也是外行,無法說明的很精確詳細
最開頭的 <?xml version="1.0" encoding="utf-8"?>宣告,必定放在開頭
單純使用中英日字幕的話是不會改變的,1.0 是 xml 版本,UTF-8 是文字編碼
xml 格式是由許多的元素屬性標籤資料內容組合而成
<timedtext format="3"> </timedtext> 是這份資料的根元素
所有內容都夾在這個根元素之中
屬性是在 <OO /> 之內用來描述內容特徵的東西
標籤是指這兩個 <OO> </OO> 東西,夾住資料用,前面是開始,後面是結束,必須前後呼應
以上圖的例子來講
根元素之下有兩個子元素headbody
head 這個元素中又含有三種屬性<wp /><ws /><pen />
各自屬性中可以控制不同特徵,像是位置、文字顏色、粗體…(詳細介紹在下面)
body個元素中只含有一個子元素/標籤<p></p>
p 這子元素中同時含有時間資訊、以及 head 中的三種屬性
並用起使標籤、結束標籤將字幕夾在中間
這個就是 xml 基本的結構,記得使用標籤時一定是有開始就有結束

以下開始字幕語法說明 (ytt Syntax)
實際上字幕部分是夾在<body>裡面
而<head>裡面的部分其實就等於「樣式庫」
並且給每一種樣式一個編號 id
上圖可以看到有三種不同的樣式:wpwspen
接下來依序介紹
(The subtitles always bundle in <body>. And <head> is almost equal to "stytle" in Aegisub.
Every feature would get a ID number. They are "wp" "ws" "pen", respectively.
I will show you what they mean here.)
wp字幕的位置 (Subtitles Position)
id 如上所述是這個樣式庫的編號 (ID number)
ap:定位點(如圖) (Control the relative position. See picture please.)
ah:水平位置 (Horizontal position, %)
av:垂直位置 (Vertical position, %)
這個定位點第一次看可能會有點複雜,但是非常好用,尤其是直式字幕
如上圖,正中央有9組字幕擠成一團,他們的座標全部都是畫面正中心
會造成這種差異就是因為 ap
左右兩側有 ap:0~9,字幕【Haooo!】的周圍各有一個小紅點
正是用這個小紅點來決定整個字幕框框要如何對準座標(ah,av)
(ap 9 只是我太順手多打出來的,請忽視)
(These 9 subtitles are all at ah:50 av:50.
But different ap value make different result in youtube player, even though they have same ah and av.
The tiny red point which near 【Haooo!】 are ap's position.
Red point will just be placed at ah and av you set.
And... please igonre ap 9. It's just a little mistake when I made picture.)
wp 注意事項與建議(Notice for wp):
※ap 使用 0、1、2 會受到上方標題列下降影響,不論 av 多低。
(ap:0、1、2 will affect by timeline no matter how high it is)
※ap 使用 6、7、8 會受到下方功能列抬升影響,不論 av 多高。
(ap:6、7、8 will affect by title line no matter how low it is)
※位置資訊需以整數為單位,含有小數位會跳掉。
(Position have to use integer, if use float would make bug.)
※群組 id 必須從 0 開始依序增加,跳號則位置跑掉,這點 ws 跟 pen 群組也一樣。
(Id number have to set 0 first, and add 1 for each group.)
※row 相鄰的兩列文字間隔 av > 6% 以上較易閱讀
※column 相鄰的兩行文字間隔 ah > 3% 以上較易閱讀

ws:字幕對齊 (Alignment)
在 ws 中只有看到一項 ju
ju 字幕在框框中的橫向位置
0:靠左對齊(Flush left)
1:靠右對齊(Flush right)
2:置中(Centered)
很簡單,跟 Word 那些一樣 (Just like Word or Excel...this part is simple, right?)

pen:炫炮特效 (special effect)
終於到了最重要的特效,那麼就一氣列出

i="1" 斜體,若無則無 (Italic)
b="1" 粗體,若無則無 (Bold)
u="1" 底線,若無則無 (Under line)
fs 字型 1~7 (如圖,系統預設是 4)(Font)(see picture, and default is 4.)
fc 字體顏色 sRGB (Font color)
bc 背景顏色 sRGB (Background color)
fo 字體透明度 淺 0~255 深 (Font transparency)
bo 背景透明度 淺 0~255 深 (Background transparency)
et 字體陰影模式(如圖) (Shadow mode, see picture↓)
0:無陰影
1:浮凸
2:內凹
3:外框
4:投射陰影
ec 字體陰影顏色 sRGB (Shadow color)
sz 字體大小 (Font size)

sRGB 是指色碼,Aegisub 有內建,再不濟也有小畫家
(sRGB is color code)
字型(Font)
英文(English font ↑)
中文一樣由上至下是 1~7 (Mandarin font ↑)
雖然可以控制,但這會隨著瀏覽器或平台而改變(The special effect looks different in different browser)
上圖是皆以 Firefox 64.0.2 觀看
陰影(Shadow mode ↓)
pen 注意事項與建議 (Notice for pen)
※文字顏色不能用純白(#FFFFFF),否則其餘功能會失效,建議以 #FEFEFE。
(Don't use #FFFFFF or it will lost all special effect. #FEFEFE is recommended)
字幕本體 (Subtitles information)
每一列字幕由 <p> 元素夾著
其中包含 t、d、p、wp、ws
後三項上面已經介紹完畢
(Each caption is bundled by <p> and </p> element.)
t 跟 d 則是時軸 ("t" and "d" are time information)
t 開始時間 ("t" is start second)
d 持續時間 ("d" is mean how long it will appear)
直接舉例可能比較好解釋
Ex:
0秒開始,1秒結束 (0:00 start, end in 0:01) → t="0" d="1000"
1分5秒開始,1分10秒結束 (1:05 start, end in 1:10) → t="65000" d="5000"
※皆以毫秒(ms)為單位
(Time unit are all in millisecond)
※秒數是採疊加,毫秒則採 10 進位
※不知道是不是軟體運算到使用者看不到的小數點位數,時間會差±個位數~±數十毫秒

進階的時序顯示此語法目前已無法正常顯示
ytt 可以跟 vtt 一樣可以簡單使用時序顯示,這邊直接用例子說明
在字幕之間插入 <s t="time"> </s> 元素可製作如 vtt 時序效果
ex:
<p t="0" d="4000" p="1" wp="0" ws="2">Good day, everybody!</p>

<p t="0" d="4000" wp="0" ws="2"><s p="1">Good </s><s t="1000">day, </s><s t="2000">every</s><s t="3000">body!</s></p>
如上圖所示
時序字幕注意事項與建議
※若使用時序功能,則 <p> 元素之中的 pen id 必須刪除,改寫至 <s> 元素的開頭,如範例。否則會變回無特效時序字幕。
※<s> 中的時間是以該句起始點當作 0 計算,而非影片的時間,這點跟 vtt 不同。
※記得上面提過資料內容一定是由開始標籤結束標籤兩個夾著嗎?
這邊也一樣,在 p 這個父元素中多出了 s 這個子元素
那麼在使用 s 標籤時也必須遵守這個規則,前面放了一個 <s>,後面就必須補一個 </s>

然後來看一些實際應用的例子吧~
範例(example)
卡拉OK:

配合原畫面,不同位置有不同透明度、顏色:

仿造對話框:

直式、斜式字幕:

三種卡拉OK語法
1. 一句字幕中使用兩種顏色,唱一個字就換一組字幕。
2. 一句字幕用三組字幕重疊,一組為底色、一組為當前發音字幕、一組為發音已結束字幕,唱一個字換一組字幕。
3. 一句字幕用兩組字幕重疊,一組為底色、一組為當前發音字幕,第二組採時序顯示。
限制:
1. 可在手機顯示,無法在電腦顯示
2. 可在電腦顯示,無法在手機顯示
3. 兩者皆可,但是手機上的顏色變化只能為白色

最後一些提醒
目前 ytt 在手機(平板我沒看過)上非常不友善,背景會全黑、位置難對齊
所以應盡量避免使用黑色字體,真的要用黑色字,建議加上白色陰影
不同瀏覽器顯示的效果也不同
總之就是非常有趣,大家可以玩看看

感謝與我一同研究字幕的 Vtuber 同好們
願 Vtuber 的字幕更加完善與美麗
以上。
21
-
未登入的勇者,要加入討論嗎?
板務人員:

32 筆精華,08/27 更新
一個月內新增 1
歡迎加入共同維護。


face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準,可能無法使用新的應用程式來呈現網站內容,在瀏覽器支援度及網站安全性的雙重考量下,為了讓巴友們有更好的使用體驗,巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特:
。Google Chrome(推薦)
。Mozilla Firefox
。Microsoft Edge(Windows10以上的作業系統版本才可使用)

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】