Discord は、クリエイターにとって特に役立つリアクティブ画像を作成することができます。しかし、クリエイターでなくてもリアクティブ PNG を使用して Discord に追加することができます。この投稿では、Discord で Discord リアクティブ画像を作成して使用する方法を紹介します。Discord のゲームに華やかさを加えたい方は、このガイドをご覧ください。
リアクティブ画像とは？
リアクティブ画像は、音に反応する能力を持った画像です。誰かが話すと、アイコンが光り、その人が話していることを示します。話し終わると、元に戻ります。リアクティブ画像は、以下で説明するように、さまざまな方法で作成して Discord に追加することができます。
Discord リアクティブ画像を作成する方法
Discord リアクティブ画像を作成する方法は次の 2 つです。
- Fugi の Discord リアクティブ画像を作成して追加する
- Discord の StreamKit オーバーレイを使用してカスタム CSS を追加する
これらについて詳しく説明しましょう。
1] Fugi の Discord リアクティブ画像を作成して追加する
まず、最も簡単な方法から始めましょう。Fugi の Discord リアクティブ画像ツールを使って PNGtuber を作成します。同じようにするには、以下の手順に従ってください。
- コンピュータで Discord クライアント アプリケーションを起動します。また、誰もがインストールできる無料のアプリケーションである OBS Studio をダウンロードして開きます。
- Discord で、ユーザー名の横に配置されている歯車アイコンをクリックして設定に移動する必要があります。
- 設定ウィンドウで、左のパネルから詳細設定に移動し、詳細設定セクションで開発者モードに関連付けられたトグルを有効にします。
- 左側のセクションを下にスクロールして音声とビデオに移動し、音声設定に移動して正しいマイクを選択します。ビデオ設定で、カメラを OBS 仮想カメラに切り替えます。
- 次に、reactive.fugi.tech に移動して、Discord でログインをクリックします。
- 資格情報を入力するか、QR コードをスキャンしてアカウントにサインインし、承認をクリックします。
- リアクティブ画像を構成できるページにリダイレクトされます。
- アバターの例を見てみましょう。口を閉じた画像と口を開けた画像の 2 つの画像が必要です。これらの画像を用意したら、プラス (+) アイコンをクリックして、話している画像と非アクティブな画像をアップロードします。最後に、保存をクリックします。
- 画像を好きなように構成し、完了したら生成されたリンクをコピーします。
- OBS Studio を起動し、ソースからプラス (+) アイコンをクリックして、ブラウザ > 新規作成 > ソース名を入力 > OK に移動します。
- プロパティ > URL で、コピーするように求めたリンクを貼り付けて、OK をクリックします。
- Discord ストリームを開始する前に、画像のサイズを変更します。
- Discord でストリーミングを開始するには、OBS の「コントロール」の下にある「仮想カメラを開始」をクリックする必要があります。
- 最後に、Discord に切り替え、ボイスチャンネルに接続してカメラをオンにします。
マイクに向かって話して、Discord に表示されるリアクティブ画像をテストしてみてください。リアクティブ画像は、Discord コールによるストリーミングやコラボに使用できます。
2] Discord の StreamKit オーバーレイを使用してカスタム CSS を追加する
別の方法として、Discord の StreamKit オーバーレイを使用して画像に CSS を追加することができます。この方法には、CSS またはコーディングの事前知識が必要であることに注意してください。ただし、プログラマーである必要はなく、CSS の知識があれば問題ありません。同じようにするには、以下の手順に従ってください。
- streamkit.discord.com に移動します。
- 次に、使用しているストリーミング ソフトウェアに応じて、OBS 用にインストールするか、XSplit 用にインストールするかをクリックする必要があります。
- まだログインしていない場合は、Discord にログインするように求められます。それを行う前に、Discord を開いておいてください。
- ボイスウィジェットに移動し、ドロップダウンメニューからサーバーとボイスチャンネルを選択します。Discord コール中にユーザー名を非表示にするには、名前を非表示にするオプションを有効にします。完了すると、画面の右側に URL が表示されるので、それをコピーする必要があります。
- Discord はアプリで承認するように求めるので、アプリケーションでそれを行います。
- OBS を開き、ソースメニューからソースを追加するためにプラス (+) アイコンをクリックし、ブラウザ > OK に移動し、コピーした URL を貼り付けて、OK をクリックします。
- Discord アプリを開き、PNG 画像を保存して両方のファイルをアップロードできるプライベート テキスト チャネルを作成します。
- 次に、CSS ジェネレーターである codepen.io に移動します。
- Discord の左下隅にあるユーザー名をクリックして ID をコピーし、「ID をコピー」を選択します。次に、CSS ジェネレーターの Discord ユーザー ID の横に貼り付けます。
- Discord チャンネルで各 PNG 画像を右クリックして「ID をコピー」を選択して、各 PNG 画像の ID をコピーします。次に、CodePen ウィンドウの「画像 URL」の横に ID を貼り付けます。
- 最後に、生成された CSS コードを取得するために CSS を生成ボタンをクリックし、生成されたコードをコピーするには CSS をコピーをクリックします。
- OBS を開き、StreamKit ブラウザ ソースに移動し、右クリックしてプロパティを選択します。
- カスタム CSS に移動し、コピーしたコードを貼り付けます。
- 最後に、OK をクリックします。
一番上のリアクティブ画像を見て、必要に応じてサイズを変更してドラッグします。Discord に接続するには、OBS コントロールに移動して仮想カメラを開始を選択します。
Discord に PNG を追加するにはどうすればよいですか？
Discord に PNG を追加する最も簡単な方法は、ソースからドラッグしてチャットにドロップすることです。ファイル エクスプローラーを開き、画像が保存されている場所に行き、選択して Discord にドラッグ アンド ドロップするだけです。この方法は PNG に限定されず、他のファイル タイプにも使用できます。
コメントする