Guida alla creazione di immagini reattive su Discord

Passaggio 1: crea il tuo PNGtuber utilizzando lo strumento Fugi

Per iniziare, utilizza lo strumento Discord Reactive Images di Fugi per semplificare il processo di creazione. Segui questi passaggi:

1. Apri l’app Discord sul tuo computer insieme a OBS Studio, disponibile per il download gratuito.
2. Accedi alle impostazioni di Discord cliccando sull’icona a forma di ingranaggio accanto al tuo nome utente.
3. Nel menu delle impostazioni, vai alla sezione Avanzate e abilita la Modalità sviluppatore.
4. Scorri fino a Voce e video nel pannello di sinistra, seleziona il microfono e imposta la telecamera su OBS Virtual Camera.
5. Vai su reactive.fugi.tech e clicca su Accedi con Discord.
6. Accedi utilizzando le tue credenziali oppure scansiona il codice QR e clicca su Autorizza.
7. Configura le tue immagini reattive nella pagina di configurazione che si apre.
8. Carica le tue immagini: una con la bocca chiusa, l’altra con la bocca aperta. Fai clic sull’icona Più (+) per aggiungere ciascuna immagine, quindi fai clic su Salva.
9. Copia il link generato per la tua configurazione.
10. In OBS, fare clic sull’icona Più (+) sotto Sorgenti, selezionare Browser, immettere un nome per la sorgente e fare clic su OK.
11. Incolla il collegamento nel campo URL Proprietà e fai clic su OK.
12. Regola le dimensioni dell’immagine come preferisci prima dello streaming Discord.
13. Fare clic su “Avvia telecamera virtuale” in OBS per avviare lo streaming.
14. Unisciti a un canale vocale su Discord e abilita la tua telecamera per vedere l’immagine reattiva in azione.

Suggerimento: testa la configurazione parlando nel microfono per verificare che l’immagine reattiva risponda correttamente.

Passaggio 2: utilizzare CSS personalizzato con l’overlay StreamKit di Discord

Per chi ha familiarità con il CSS di base, Discord StreamKit Overlay offre un altro approccio efficace. Ecco come fare:

1. Visita streamkit.discord.com.
2. Seleziona Installa per OBS o XSplit in base al tuo software di streaming.
3. Se richiesto, accedi a Discord; assicurati prima che Discord sia aperto.
4. Accedi al Widget Vocale, scegliendo il server e il canale vocale. Abilita l’opzione “Nascondi nomi” per la privacy. Copia l’URL generato visualizzato a destra.
5. Autorizza l’applicazione quando richiesto da Discord.
6. Apri OBS, clicca sull’icona Più (+) per aggiungere una nuova sorgente, scegli Browser e incolla l’URL copiato.
7. Crea un canale di testo privato su Discord per caricare le tue immagini PNG.
8. Utilizza il generatore CSS su codepen.io.
9. Copia il tuo ID Discord dall’app Discord e incollalo nel generatore CSS.
10. Per ogni immagine PNG caricata sul tuo canale Discord, fai clic con il pulsante destro del mouse e seleziona “Copia ID”.Incollala accanto a “URL immagine” nel generatore.
11. Fare clic su Genera CSS, quindi copiare il codice di output.
12. In OBS, accedi alle proprietà della sorgente del browser StreamKit, vai alla sezione CSS personalizzato e incolla lì il codice.
13. Per concludere, clicca su Ok.

Suggerimento: assicurati di adattare la posizione e le dimensioni dell’immagine reattiva in OBS in modo che si adattino perfettamente al layout.

Come posso creare un’immagine reattiva per Discord?

Posso usare altri formati immagine oltre al PNG?