Advertisement
parabragun

how to pngtuber strats like a boss

Oct 26th, 2021
41
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.02 KB | None | 0 0
  1. 1. go to https://streamkit.discord.com/overlay, install for obs. open discord in the background
  2.  
  3. 2. tab over to "voice widget". it'll show your picture *only* if you're inside a certain server's voice chat. what i do for this is i select my personal server that i use to put pictures in/note keeping. under "server" select the one you want to connect, then under "invite channel" select the voice channel you want to connect. the rest of the settings you can fiddle with if you want
  4.  
  5. 3. below the live preview there's a text box that says "Once you've finished configuring your widget, enter the following URL, width, and height into a browser source" and a bunch of text below it. copy the text below it for the next step
  6.  
  7. 4. open obs, select a scene you want to put this on, and create a browser source. name it whatever you want. take the text you copied earlier and put it into "url", then in the custom css, paste the following code:
  8.  
  9. li.voice-state:not([data-reactid*="192377766061146112"]) { display:none; }
  10. .avatar {
  11. content:url(THIS IS THE PICTURE THAT WILL APPEAR WHEN YOU ARE IDLE, DO NOT REMOVE PARENTHESIS);
  12. height:auto !important;
  13. width:auto !important;
  14. border-radius:0% !important;
  15. filter: brightness(100%);
  16. }
  17.  
  18. .speaking {
  19. border-color:rgba(0,0,0,0) !important;
  20. position:relative;
  21. animation-name: speak-now;
  22. animation-duration: 1s;
  23. animation-fill-mode:forwards;
  24. filter: brightness(100%);
  25. content:url(THIS IS THE PICTURE THAT WILL APPEAR WHEN YOU ARE TALKING, DO NOT REMOVE PARENTHESIS);
  26. }
  27.  
  28. @keyframes speak-now {
  29. 0% { bottom:0px; }
  30. 15% { bottom:10px; }
  31. 30% { bottom:0px; }
  32.  
  33. and voila. your picture will appear and move on screen as long as you're connected to that specific channel in that specific server. i am not a pngtuber myself nor am i a codemaster this is just the information i remembered from the video that got taken down. there is probably some extra code you can do so the talking picture is Multiple pictures to imitate lips moving but i am not smart enough for that. enjoy
  34.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement