この記事ではStreamElemetnsで利用できるHypeCupで自分のオリジナル画像を利用する方法を紹介します
デフォルトで用意されているカップ素材でなく、自分で用意した素材を利用することでブランディングや他のオーバーレイとの統一感をつくることも簡単になります
HypeCupとは
イベント発生時にカップにチップを貯めるウィジェット
HypeCupはStreamElementsで利用できるウィジェットのひとつで、フォローやサブスクライブなどのイベントが発生した際にカップにスタンプ画像等のチップを貯めていく事ができるものとなります
![](https://kurocha.jp/wp-content/uploads/2021/10/2021-10-15_08-56-53.gif)
標準のカップ
カップには様々な種類が用意されており、季節に沿ったテーマのカップも用意されています
![](https://kurocha.jp/wp-content/uploads/2021/10/2021-10-15_09h00_51.jpg)
オリジナルのHypeCup
あらかじめ用意されているカップではなく、オリジナルの画像を使ったHypeCupの作り方を紹介します
作成するHypeCup
今回はこちらのHypeCupを作成していきます
![](https://kurocha.jp/wp-content/uploads/2021/10/2021-10-15_10-15-57.gif)
オーバーレイにHypeCupを追加
StreamElementsのオーバーレイ編集画面でADD WIDGETまたは左下のボタンからALERTS→HypeCupをクリックします
![](https://kurocha.jp/wp-content/uploads/2021/10/2021-10-15_08h49_31-1024x505.jpg)
これでHypeCupが追加できました
![](https://kurocha.jp/wp-content/uploads/2021/10/2021-10-15_09h21_04-1024x505.jpg)
Pypeでワイヤフレームを作成
Pypeというサービスでカップの当たり判定にあたるワイヤフレームを作成します
Pypeではまずカップに使用する画像の選択を行います
![](https://kurocha.jp/wp-content/uploads/2021/10/2021-10-15_09h07_29-1024x505.jpg)
カップに使用するための画像を選択したら表示された画像を左クリックで座標を追加していきます
この座標を始点から終点をつなげる事で1つのパーツを作成することができます
![](https://kurocha.jp/wp-content/uploads/2021/10/2021-10-15_09-12-33.gif)
作成したいワイヤーフレームが完成したら右にあるCopyをクリックします
![](https://kurocha.jp/wp-content/uploads/2021/10/2021-10-15_09h15_10-1024x505.jpg)
オリジナルの画像をHypeCupに適用
カップの見た目を変更するにはHypeCupのSettingsのChange cupを選択します
![](https://kurocha.jp/wp-content/uploads/2021/10/2021-10-15_09h37_02-1024x505.jpg)
EDIT CUPをクリックします
![](https://kurocha.jp/wp-content/uploads/2021/10/2021-10-15_09h34_24-1024x505.jpg)
CHANGE IMAGEからオリジナル画像にカップの見た目を変更(アップロードしてない場合はアップロード)
元々追加されているワイヤフレームを消して先ほどコピーしたものを貼り付けます
![](https://kurocha.jp/wp-content/uploads/2021/10/2021-10-15_09h34_29-1024x505.jpg)
これでオリジナルのカップと当たり判定が設定できました
SUBMITをクリックすると設定が反映されます
![](https://kurocha.jp/wp-content/uploads/2021/10/2021-10-15_09h34_41-1024x505.jpg)
設定したカップの位置や大きさを調整して完成です
オーバーレイ編集画面右上のSAVEボタンを押し忘れないようにしましょう
![](https://kurocha.jp/wp-content/uploads/2021/10/2021-10-15_09h35_01-1024x505.jpg)
チップの画像を変更
フォローやサブスクライブ、ホストなどイベントの種類によってチップの画像を変更することができます
Settingsの各イベント右にある歯車をクリックすることでそれぞれのイベントに対応したチップを設定することが可能です
![](https://kurocha.jp/wp-content/uploads/2021/10/2021-10-15_09h49_48-1024x505.jpg)
画像の変更以外にもチップの形や大きさ等も変更することができます
![](https://kurocha.jp/wp-content/uploads/2021/10/2021-10-15_09h50_15-1024x505.jpg)
上手く画像が反映されない場合はReload Cupを試してみて下さい
![](https://kurocha.jp/wp-content/uploads/2021/10/2021-10-15_10h13_34-1024x505.jpg)
おわりに
ワイヤフレームを工夫することでHypeCupでピンボールのようなものも作ることもできます
無機質なグラスもいいですがオリジナルな画像を使うことでより華やかな配信画面を作ることができます!
![](https://kurocha.jp/wp-content/uploads/2021/04/Stream-Elements-まとめ-300x158.jpg)