『ぴょんぴょんオーバーレイ』について

概要

ぴょんぴょんオーバーレイは、Discordのサーバー上で動作するbotになります。

コマンドを使用することで、Discord Streamkit Overlay用のCSSを自動で生成することができます。

喋っている時に光らせることに加え、ぴょんぴょんさせたり、喋っている間のみ画像の差し替えを行うことも可能です。

更新情報

おかげさまでたくさんの人に使用していただき、ぴょんぴょんオーバーレイV2へとバージョンアップすることができました。

このバージョンでの更新内容は以下の通りです。

• 生成方法を一新し、/pol url や/pol css newなどのコマンドをすべて/pol createへ統合。それに伴いVCに入っていなくても生成できるようになりました。
• 設定変更コマンドを/pol settingsに統合
• 生成されたURLとCSSがより見やすくなるように表示を改良
• 画像サイズの設定がしっかり反映されるようになり、「設定サイズに自動的に画像がリサイズされる」ように仕様変更。
• Discordによる認証を受け、認証済みbotになったため、１００サーバー以上のサーバーへ導入できるようになりました！おまたせしました！！

リンク集

動画での説明

＠Yagihata4x【Twitter】：作者であるヤギハタのTwitterです。機能追加の要望やバグの報告等ありましたらDMなどでお願いします。

『ぴょんぴょんオーバーレイ』お布施用【BOOTH】：趣味でやっていることではあるのですが、やっぱりサーバーの維持で電気代がかかったりするため、寄付していただけますとものすんごくありがたいです・・・・。もししてやってもいいぜ！っていう方がいらっしゃいましたら寄付お願いします！

導入方法

まずDiscordを起動し、ボイスチャットに使用するサーバーを用意してください。

次に、『Discord Streamkit Overlay』にアクセスし、下にある『Install for OBS』か『Install for XSplit』のボタンを押します。

すると、Discord側でこのような画面が出てくるので、右下の『認証』ボタンを押します。

Discord Streamkit Overlayのページはこの段階で閉じて大丈夫です。

次に、『ぴょんぴょんオーバーレイの招待』にアクセスし、ボイスチャットを使用するサーバーにbotを導入します。

botを導入した状態でチャット欄に/（スラッシュ）と入力すると、botで使用できるコマンドの一覧が出てきます。

ここまでできたら導入完了です。

使用する際の注意事項

• このbotは個人開発のため、不具合などが残っている場合があります。報告いただけた場合は修正作業を行いますが、すぐに修正出来るとは限らないため、ご了承ください。
• このbotは個人サーバー上にて動作しています。停電や回線の不調、その他の要因によってbotの動作が停止することがあるかもしれませんが、その場合は復旧までお待ちいただけますと幸いです。
• このbotは予告なく機能の提供を終了する可能性があります。できるだけTwitter上などで報告する予定ではありますが、メンテナーの体に何かあった場合などはメンテナンスできなくなるため、そのときはごめんなさい！
• 機能追加の要望はTwitterのDMにてよろしくお願いします。（リンクはページの上の方にあります。）
• サーバー上には『botを使用しているサーバーのID（数字列）』『各種設定（明るさとか）』のみが保存されており、個人のID等を識別できる情報はサーバー上に保管していません。画像もすべてDiscord上で保管されているため、こちらのサーバーでは保存していません。
• これらの事に同意していただけた場合は、サーバー上で『/pol enable』というコマンドを使用してください。このコマンドを使用した場合は注意事項に同意したとみなし、botの機能が開放されます。

オーバーレイの作り方

『/pol create』と入力すると、このような画面になります。

まず、喋っているかどうかを取得したいユーザーを指定します。userの欄にユーザー名を入れると、上に検索結果が表示されます。

その後、上の『一致するメンバー』から、ユーザーを指定します。

次に、『main_image』のところをクリックして、立ち絵をして使用したい画像をアップロードします。

この状態でエンターキーを押すと、URLとCSSが生成されます。

オーバーレイを使用するボイスチャンネルは、未指定の場合はサーバー内で一番上にあるボイスチャンネルが使用されます。
明示的に指定する場合は、後述する「/pol settings」コマンド内にて変更することが可能です。

次に、OBSを起動し、シーン上に『ブラウザ』のソースを作ります。

ここで、URLに『/pol create』で取得したURLを入れます。

また、カスタム CSSにも『/pol create』で作成したCSSを入れます。

注意：カスタムCSSにはデフォルトで文字列が入っています。これを残したままだとおかしくなる可能性があるため、全て消した上で作成したCSSをコピペしてください。

OKを押すと、喋り始めた時に『ぴょん』っと跳ねて、その後喋っている間は明るくなっているオーバーレイを追加できました。

これで簡単なオーバーレイの追加は完了です、おつかれさまでした。

発展

喋っている間だけ画像を差し替える

ぴょんぴょんオーバーレイでは、喋っている間のみ別の画像に差し替えることも可能です。

『/pol create』を使用しているときに、『他2』というところをクリックすると、上に『設定』という一覧が表示されます。

ここの『sub_image』というものをクリックすると、追加でもう一つ画像を設定することができます。

この状態でエンターキーを押すと、喋っている間だけ画像が『sub_image』で指定した画像に切り替わるCSSが生成できます。

CSSを更新した場合は、ブラウザソースのカスタムCSSを上書きするだけで更新できます。

オーバーレイの設定をカスタマイズする

ぴょんぴょんオーバーレイでは、『/pol settings』コマンドで、生成されるCSSのカスタマイズが可能です。

• widthでは、立ち絵のリサイズに使用する横幅の値を設定できます。（画像は指定したサイズに、アスペクト比を保ったまま自動的にリサイズされます。）
• heightでは、立ち絵のリサイズに使用する高さの値を設定できます。
• brightnessでは、喋っていないときの立ち絵の明るさを0から100で設定できます。（0が一番暗く、100が一番明るい。）
• durationは、1回跳ねるのにかかる時間をミリ秒（1000ミリ秒＝1秒）で指定します。
• pixelは、1回跳ねた時にどれぐらいの高さで跳ねるのかを、ピクセル数で指定します。（マイナスだと下に跳ねます）
• loopは、TrueかFalseで、跳ねるアニメーションをループさせるかの指定を行います。

ぴょんぴょんオーバーレイV2では、コマンドを使用するとこのようなボタンの一覧が表示されます。

どれかのボタンを押すと値を入力できるダイアログが表示され、この中の値を変更したうえで「送信」ボタンを押すことで設定の変更が可能です。

これらの設定を変更した後にURLやCSSを再度生成する場合は、一度生成したCSSの下にある「URLとCSSの再生成」ボタンを押すことで、最新の設定を反映させることができます、

寄付していただいた方々

お布施用BOOTHを購入していただいた方々の内、希望者のお名前をこちらにて掲載させていただいています。（敬称略）

• 黄泉瀬

本当にありがとうございます！