客製化斗內零錢箱！把贊助和會員丟進各種奇怪的容器裡！

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

總覽

前言

↓ 這個裡面右下角的零錢箱效果

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

推測這應該是使用實況輔助網站 StreamElements 的小工具 HypeCup，可將斗內與訂閱可視化成對應的圖片。

另一個輔助網站 StreamLabs 也有類似的小工具 Tip Jar，但缺點是只有原先預設的 3 種價錢區間且無法修改，自訂性上比較不足。

設定

由於這些網站無法自動辨識圖片應該如何運算，原本需要自己另外計算相關圖形，但有熱心網友製作了快速製作的工具，只需到下方網站，上傳圖片後，拉完外壁之後就會自行產生相關數據，之後到對應網站裡貼上相關程式碼即可。

Pype - Polygon Hype

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

（※ 要拉的是杯緣的外壁部分，記得不要把進入口封死）

StreamElements

點選左方「Streaming tools」裡面的「My overlays」
進入後點選「New Overlay」建立新的顯示介面
點選「ADD WIDGET」或下方的「+」，選擇「ALERTS」裡面的「HypeCup」
點開「Settings」後，點選「Change cup」右邊的齒輪圖案
點選「EDIT CUP」，更換「Cup Foreground」的圖片
並將剛剛自動產生的「wireframe」貼至下方處
若想自訂各種不同的條件與圖案，可以點選「Settings」上側各種事件右方的齒輪圖案
下方的「EMULATE」可以實際測試各種事件效果
確認無誤後，點擊右上角的「Preview」並將該網址加至 OBS 的瀏覽器來源內即可

StreamLabs

點選左方「Essentials」裡面的「All Widgets」
進入後點選「The Jar」進入設定頁面
點選「Enable Custom HTML/CSS」右邊的「Enabled」
將方才自動產生的 CSS 與 JS 各貼至對應的分頁
修改 JS 分頁裡面的圖片網址部分（將 YOUR_IMAGE_URL_HERE 更改為你的圖片網址）
上方的「Enabled Events」可以選擇什麼事件會有效果
右下角的「Test」可以測試實際效果
確認無誤後，點擊上方「Widget URL」右邊的「Copy」
並將該網址加至 OBS 的瀏覽器來源內即可