[技術] Hitbox聊天室自訂字型擷取

[Append (鴉片)]

     1/13 更新CSS:有時間戳記，字體描邊更清晰 http://pastebin.com/QQg5M5r5
          有圖有真相: http://i.imgur.com/fBqGpU1.png
     1/13 目前有兩個人回報裝上CLR套件之後OBS會無法啟動，
          解法為安裝 Microsoft .NET Framework 4.5 http://goo.gl/CMNjh
          (這東西其實好像不是必要的，我自己沒有裝，)
          但是目前有三個人裝了之後解決問題)

     1/12 更新CSS:有時間戳記 http://pastebin.com/s1xGAVbE
     1/12 更新CSS:無時間戳記 http://pastebin.com/JMWSxbtH
     1/09 修正:去除聊天室右邊的白線

     好讀版 http://disp.cc/b/27-79uz

     首先，有圖有真相。http://i.imgur.com/JZ5GKsm.png



     由於最近Twitch加長了延遲時間，有一些Twitch實況主開始嘗試移動到Hitbox上

 進行實況。然而，Hitbox的聊天室並不是用IRC協議，所以以往我們在Twitch/Justin

 可以處理的自訂聊天室沒辦法用在Hitbox上。直覺上我們可以去擷取聊天室，甚至對

 他去背景，但是這不是一個好方法。網頁聊天室的字型和大小都綁在瀏覽器裡面，要

 調整的話，牽一髮動全身，平常看的其他東西也會一起改變；不調整的話，小小的字

 型經過H264壓縮之後就糊成一團。



     由於聽到不少人反應沒IRC的痛苦，所以就花了些時間來研究心儀已久的CLR套件

 ，這東西就是在你的OBS裡面裝好一整個瀏覽器！這實在是太豪邁了...這個套件一開

 始出來的時候大家想到的用途是讓OBS可以支援Flash，不過後來BetterTTV的作者

 Night架好了用他截取Twitch官方聊天室的方法。我的直覺是，同一套玩法也可以拿

 來截取Hitbox聊天室；直接用正確大小的CLR瀏覽器打開Hitbox的Popout聊天室，同

 時利用自訂CSS的功能來更改版面還有字型的樣式，如此一來，Hitbox實況主也能夠

 在OBS中適當的安排聊天室的版面。

 --------

 安裝

     Faruton's CLR Browser Source Plugin (出處 http://goo.gl/EfpacV )

     本文撰寫時，當前核心版本：Chromium 31.0.1621.0



     請依照你使用的OBS版本來下載。

     (打不開7z的話，請下載免費的7-zip http://www.7-zip.org/ )

      (64bit) http://goo.gl/A5qWrN
      (32bit) http://goo.gl/KsoQD1

     將檔案解壓縮到OBS路徑下的plugins資料夾中，然後打開OBS，安裝完成。

     如果裝上套件，打開OBS就Crash掉─請裝.NET Framework4.5 http://goo.gl/CMNjh 
     (這東西好像不是必要的，我自己沒有裝，)
     (但是目前有三個人裝了之後解決問題。)
 --------

 使用

     http://i.imgur.com/a0ZL6J7.png

     安裝完成之後，在OBS裡面的"來源"區域，點選右鍵，選擇"CLR Browser"，

 取一個好認的名字，然後進入設定。



     General (一般) http://i.imgur.com/QR9P4Kf.png

     要注意的點只有三個：

     (1) URL輸入popout聊天室的位址，

         例如如果是我(append)的聊天室，

         URL就是 http://www.hitbox.tv/embedchat/append

         請把它改成你想看到的聊天室的ID。

     (2) Dimensions可以讓你設定這整個瀏覽器的尺寸，

         請選個你喜歡的，而且合適的大小；

         例如我通常會把基本解析度設定在960x540，

         而我玩的遊戲大多是4:3的，會佔720x540，

         這樣就可以讓聊天室佔滿剩下的空間 240x540

         於是，Width(寬度)填上240，Height(高度)填上540。

     (3) Opacity "不透明度"

         請直接把他推到最右邊。這個東西是"整個瀏覽器的不透明度"，

         如果哪天你想讓字也一起變的半透明再來考慮調整這個。



     CSS http://i.imgur.com/w75dr1y.png

     這裡就是重點啦。自訂CSS的功能可以更改版面還有字型的樣式。

     總之我們可以複製貼上，然後安心按下確定。

     CSS碼請看這裡 http://pastebin.com/JMWSxbtH



 ================

╭─────── 看不懂就算了的框框 ─── 我會複製貼上我超強 ──────╮
│                                                                        │
│ 這邊仍然對細節稍做解釋。                                               │
│                                                                        │
│ body {                                                                 │
│   background-color: rgba(0,0,0,0.5) !important;                        │
│   /*這是背景顏色，rgba(紅,綠,藍,透明度)             */                 │
│   /*RGB可以分別從0~255，如果不清楚的話就打開小畫家查*/                 │
│   /*透明度: 0是完全透明，1是完全不透明。            */                 │
│   /*所以像例子中的0.5就是用半透明的黑底。           */                 │
│ }                                                                      │
│                                                                        │
│ /*想要改字型大小顏色的可以注意這部分/*                                 │
│ .chatBody li, .chatBody li.admin, .chatBody li.user, .chatBody .name{  │
│     font-size: 24px !important; /*文字大小*/                           │
│     font-family: 微軟正黑體 !important; /*文字字型*/                   │
│     font-weight: 900 !important; /*文字粗細，900最粗，100最細*/        │
│     line-height: 1.05em !important; /*聊天室文字行高*/                 │
│     padding: .05em .05em !important; /*與前後段距離*/                  │
│     /*這邊使用的單位em就是行高，會自動跟著fontsize變化*/               │
│ }                                                                      │
│                                                                        │
│ .chatBody li, .chatBody li.admin, .chatBody li.user {                  │
│     color: white; /*聊天室文字顏色*/                                   │
│     /*如果想自訂顏色也可以用                    */                     │
│     /*color: rgb(255,255,0)  像這樣就是黃色     */                     │
│     background-color: transparent !important;                          │
│     /*聊天室admin和mod的背景，設定為透明避免干擾*/                     │
│ }                                                                      │
│ /*其他以下原則上都不用動*/                                             │
│                            │                                          │
╰─────── 看不懂就算了的框框 ─── 我會複製貼上我超強 ──────╯


     效果在最上面看過了，不過我們這邊提供三種透明度的版本。

     rgba(0,0,0,0) 完全透明 http://i.imgur.com/RTVhQAq.png

     rgba(0,0,0,0.5) 半透明 http://i.imgur.com/D87Lj1w.png

     rgba(0,0,0,1) 完全不透明 http://i.imgur.com/Tkl0PHF.png

 --------

 結語

     Hitbox聊天室...嘛，作為一個十月才剛成立的平台來說，三天兩頭發生一些bug

 好像沒辦法怪他太多。事實上從他們的Twitter可以知道他們正在寫新版的聊天室，

 所以上面這個CSS很可能會在他們更新聊天室的時候就失效了。然而，要用的套件仍

 然是同一個CLR瀏覽器套件，所以如果新版的聊天室上線了，我會試著盡快釋出新版

 的CSS來複製貼上。



     其實這是我生平第一次寫CSS，我畢竟不是做這行的，從來沒學過，所以有點難

 上手。...如果有哪個地方寫得不好或是根本不對的，也請指正。當然，如果哪邊寫

 的不夠清楚，或是哪邊執行上有問題的，或是Hitbox突然很神速的更新聊天室所以

 不能用了，也都請順便回報，讓我對這篇文章做進一步的修正。



     Append.   2014.01.09. 00:18 a.m. UTC(+0)

--
 ███◣ ◢██◣ ◢██◣ █  ◢█ ◣    ◢ ◢██◣ ◣    █
 █  ██ █  ██ █  ██ █◢█◤ █◣◢█ █  ██ █◣  █
 █  ██ █  ██ █       ██◤   ████ █  ██ ██◣█ @ ptt.cc 
 ███◤ █  ██ █       ██◣   █◥◤█ ████ ████
 █◥█◣ █  ██ █  ██ █◥█◣ █    █ █  ██ █◥██    鴉片(Append)
 █  ◥█ ◥██◤ ◥██◤ █  ◥█ █    █ █  ██ █  ◥█twitch.tv/append

--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 176.251.120.12
※ 編輯: Append          來自: 176.251.120.12       (01/09 08:31)
推 sixwong:感謝分享！
推 AirRider:CLR還不錯,但設定上實在太過複雜了,但對於克服畫質壓縮
→ AirRider:有神奇的功效(應該這麼說,本來就是分開處理,效果好很多)
推 ncitjj:感謝大大辛苦用心分享，最近也在使用hitbox^^
推 johnny132:希望他們能改用IRC  不然limechat的語音設定都不能用XD
推 KMSNY:推推 準備跳hitbox
※ 編輯: Append          來自: 176.251.120.12       (01/09 18:17)
推 KMSNY:一個小問題 如果想要加上Timestamps有辦法嗎
※ 編輯: Append          來自: 176.251.120.12       (01/09 20:39)
→ Append:Timestamps要研究一下 預設是沒有辦輸入的 只好硬開看看
→ Append:搞定 比想像簡單
***1/12更新*** 時間戳記版CSS http://pastebin.com/s1xGAVbE

※ 編輯: Append          來自: 176.251.120.12       (01/10 01:07)
推 KMSNY:加了戳記 行距變大了耶
推 KMSNY:http://imgur.com/Uv2LSyh
→ Append:我有發現這件事情 我還想不出辦法 讓我在想想
推 Readygolol:超棒 最近才在打算發篇CLR+twitch的
→ Append:CLR+Twitch有nightdev的作品
→ Append:http://www.nightdev.com/obschat/
推 Readygolol:對對 我就是看到這個 想介紹給大家認識
→ Readygolol:CSS稍微修改一下就很漂亮了
推 snyuuu:一樓發現中壢怪人www
推 Readygolol:obschat沒有時間戳記 能弄得出來嗎 或是只能從twitch
→ Readygolol:popout出來改了?
※ 編輯: Append          來自: 176.251.120.12       (01/13 03:12)
→ Append:時間戳記版CSS完成 原來span不能改行距 所以要inline-block
※ 編輯: Append          來自: 176.251.120.12       (01/13 03:27)
→ Append:obschat的source code裡面沒有time 所以大概是先天上沒救
推 Readygolol:果然我想得沒錯XD 只能期待作者加上去了
※ 編輯: Append          來自: 176.251.120.12       (01/14 01:34)
※ 編輯: Append          來自: 176.251.120.12       (01/14 01:38)
推 Readygolol:出現ff啥碗糕.dll錯誤的解 我自己是搜尋電腦裡其他位置
→ Readygolol:的替換上去
→ Readygolol:ffmpegsumo.dll 這個檔案在chrome底下有
推 KMSNY:好用 再推
※ 編輯: Append (90.201.30.4), 06/19/2014 20:29:34