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

概要

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

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

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

リンク集

動画での説明

@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 url』コマンドを使用することで、オーバーレイの表示に必要なURLを取得できます。

このコマンドを使用する際は、あらかじめ『オーバーレイを使いたいボイスチャット』に参加した状態で、コマンドを使用してください。

また、コマンドにはオプションが使用できます。(無くても動作します)

/pol urlでは、-nか-nameとオプションに入力することで、立ち絵に名前を表示することができます。

コマンドを実行すると、URLが表示されます。

次に、CSSを生成します。

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

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

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

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

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

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

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

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

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

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

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

発展

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

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

『/pol css new』を使用しているときに、『他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で、跳ねるアニメーションをループさせるかの指定を行います。

これらの設定を変更した後にCSSを再度生成する場合は、『/pol css last』を使用することで、最後に生成したユーザーや画像を使用してCSSの再生成を行うことが可能です。

寄付していただいた方々

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

  • 黄泉瀬

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