---
title: "客製化斗內零錢箱！把贊助和會員丟進各種奇怪的容器裡！"
tags: OBS
description: "VTuber 實況裡偶爾會看到的那個"
image:
---

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

{%hackmd @f6bfb5/biKBG-dnSQajGm3NZj38Fg %}

 

- [總覽](/s/1lhI9SqjRzepld5qyOMHKw)

## 前言

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

{%youtube __ef16oCxe8%}

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

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

## 設定

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

- [Pype - Polygon Hype](https://overlays.thefyrewire.com/tools/pype/)

[](https://i.imgur.com/254Oya3.png)

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

### [StreamElements](https://streamelements.com/dashboard/overlays)

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

### [StreamLabs](https://streamlabs.com/dashboard#/jar)

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