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