『ぴょんぴょんオーバーレイ』について
概要
ぴょんぴょんオーバーレイは、Discordのサーバー上で動作するbotになります。
コマンドを使用することで、Discord Streamkit Overlay用のCSSを自動で生成することができます。
喋っている時に光らせることに加え、ぴょんぴょんさせたり、喋っている間のみ画像の差し替えを行うことも可能です。
更新情報
おかげさまでたくさんの人に使用していただき、ぴょんぴょんオーバーレイV2へとバージョンアップすることができました。
このバージョンでの更新内容は以下の通りです。
- 生成方法を一新し、/pol url や/pol css newなどのコマンドをすべて/pol createへ統合。それに伴いVCに入っていなくても生成できるようになりました。
- 設定変更コマンドを/pol settingsに統合
- 生成されたURLとCSSがより見やすくなるように表示を改良
- 画像サイズの設定がしっかり反映されるようになり、「設定サイズに自動的に画像がリサイズされる」ように仕様変更。
- Discordによる認証を受け、認証済みbotになったため、100サーバー以上のサーバーへ導入できるようになりました!おまたせしました!!
リンク集
動画での説明
@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を購入していただいた方々の内、希望者のお名前をこちらにて掲載させていただいています。(敬称略)
- 黄泉瀬
本当にありがとうございます!
投稿者プロフィール
最新の投稿
- 技術書2023年3月14日ヤギハタのVPMパッケージインストール方法
- お知らせ2023年2月19日過去に制作したワールド『RoUDON One』がテレビ東京『メタバースプラネット』にて使用されます
- 説明書2022年12月23日Radial Inventory System V4.4 説明書
- お知らせ2022年8月11日Radial Inventory System V4 不具合とよくある質問