ฝัง
- เผยแพร่เมื่อ 24 ก.ค. 2024
- disclaimer: i did NOT make this code originally. the tutorial that i referred everyone to got deleted and i decided to put my own tutorial up and share the code with everyone (at no charge, of course!)
this is a tutorial for OBS + windows pc
i also made all of my own PNGtubers (unless said otherwise). i wanted to make this open to anyone that has considered PNGtubing/vtubing, as this is a more affordable, beginner-friendly way to start!
--
LINKS TO WHAT IS NEEDED FOR THIS TUTORIAL
obs: obsproject.com/
discord: discord.com/
discord streamkit: / discord
custom CSS master code: github.com/jshibe96/streamkit...
EDIT NOTE (12/7/2021): i edited the code so there are no extra spaces that would cause an issue in the code. use the revised code and it should work! originally i put spaces to show where to paste everything but it caused more issues so i changed it. you must be in the channel and unmuted for it to work, takes a second or two to pop up once you are in the channel.
--
"what can i use this for?"
streaming, collaborations with other vtubers/friends, recording gameplay, + more! there is so many creative ways to utilize this tool. have fun!!
--
my links:
twitch: / daijojobu
twitter: / daijojobu
art website: daijojobu.carrd.co/ - แนวปฏิบัติและการใช้ชีวิต
YES!! This is EXACTLY what I've been searching for for idk how long. I know the exact youtube tutorial you're referring to and I thought all was lost since I guess they took it down and I lost my obs settings. So thank you so much for making this tutorial, it's like the name of a song I could always hum but never know the name of was suddenly revealed to me. Thank you!!
this worked perfectly for me and I'm really thankful for this video and the tutorial and the code, i really really appreciate it 💗
Thank you this video was perfect for exactly what I was looking for! Really nicely edited and I'm grateful you walked it through so well!
It's working for you? It used to work for me but no longer :(
@@SuperSkip64 yeah dud same here
This is amazing! thanks god you did this tutorial! this was easy to understand and not confuse like the other ones i watched! you deserve more sub!
Concise and straight to the point. I love it
THANK YOU SO MUCH! I've been looking for this tutorial for a few days now but I'm only seeing the basic one then TH-cam recommended this to me! SUBSCRIBED TOO!!!
UPDATE (1/17/2023):
i've been receiving comments regarding the CSS code and have been looking into a solution to this. i've had a couple of friends also help me out with updating the CSS so that it works on OBS. there currently is no solution to the coding at the moment due to responsibilities outside of my online content, at the moment. i will be looking into it periodically and hopefully post an updated video + solution within the next month. i'm so sorry for the delays! if anyone has updates on this, i would appreciate it so much. thank you for your patience, and happy new year!
UPDATE 1/29/2022: thank you to @schmitzkatze! there is a known bug where the streamkit url would still show the name(s) of the discord user the PNG is linked to, TO FIX THIS: capitalize the "T" in "hide_names=true" in the streamkit url
UPDATE (12/7/2021): i edited the code so there are no extra spaces that would cause an issue in the code. use the revised code and it should work! originally i put spaces to show where to paste everything but it caused more issues than help, so i changed it. you must be in the channel and unmuted for it to work, takes a second or two to pop up once you are in the channel.
eventually i'd like to make a code generator in the future!! so that will be in the works when my other work slows down, thank you! - jo
Is there a new new fix? Because I’ve set this up last year and it worked for me and all my friends but it just doesn’t anymore? I’ve tried everything including using the correct image size and the capitol T :(
@@SuperSkip64 just updated my pinned comment for future viewers, but there currently is no updated code at the moment. i heard rolling back the OBS may work for the time being, since the CSS should be working with the older OBS versions. thank you so much for bringing this to my attention!
@@daijojobu I had a feeling it was an update on OBSs end or something with streamerkit, but I really appreciate you following up! I couldn’t find anyone else that would know anything on this subject matter haha. Look forward to info either way 😄
Such a great tutorial! Thank you so much :)
my pleasure!! i wish you the best in your PNGtubing journey!! ^^
@@daijojobu this world doesn’t need you
Jk
You seriously need more subs, this was straight forward and easy to follow, thank you so much!
I'm just wondering, how do you show your screen thing on obs? I just see the png and I dont have any idea on how to use obs lol
i FINALLY did it! thank you again Jojo super easy and super thorough
Thank you so so much!!! :)))) You were perfectly concise and very demonstrative!!! :)))) Sadly, the code didn't quite work, but when I amended the changes that Dying Breath in the comments said (thank you to them as well!), it worked perfectly!!!! Thank you thank you! :))))))
the width and hight are the main problem. my png wont appear its like invisible does anyone have any width and hight advise or anything??
so real (yes ik this is a year ago but still), i'm still guessing on how to do that and have NO clue how to make it visible
Thank you so much for this tutorial! :D
this is a good tutorial. you deserve more then this. 👍👍👍
Very nice tutorial thank you!
I watched only 4 seconds of this video and my brain is already fried 💀💀☠️
Thank you for this tutorial!
One problem with this is that the image is mounted to where the person would be on the normal version of this widget without any custom CSS. that means if more people were to join and it sorts them alphabetically above that person, the image gets pushed down.
hi i followed ur tutorial but it still shows the discord bubbles instead of my pngs. pls help im confused :(
tysm it helps a lot ^-^
keep it up
anytime!!
I have the issue that it doesnt show m,y pnc but it shows that im in call as a small circle
Holly crap didn't know I can apply my coding into this well css isn't really code but still could make so many css templates
thank you! great tutorial
Is there any way to add animations? Like more than 1 frame? And can you create animations for joining and leaving the vc?
Will the Discord stream kit help with the group link? The individual link works fine when I try to add my cousins avatar it doesn't work
its not working for me, i wish i could give more context but I truly dont know what i am doing wrong
Perfect thx for help 😭🥰❤️🔥
Your the best! thank you so much!!!
This was helpful but one thing the chat thing was working but the png tuber thing wasnt
i managed to get it work for a while, but now for some reason the image wont show and the discord name was still on even tho the hide names was ticked on. about the image thing, i tried clicking on the image first and THEN right clicking to copy the link that way, but it would crop out a part of the image. got something for that?
Thank you for this, but unfortunately as of late the CSS structure for OBS (possibly v28 and higher) has changed and the CSS that you linked to no longer works. The CSS now requires the img[class definition. For example,
li.voice-state:not([data-reactid*={USER ID}"]) { display:none; }
is now
li>img[class^="Voice_avatar"]{ display:none; }
li>img[class^="Voice_avatar"][src*="{USER ID}"]{ display:block; }
and
.avatar {
has been changed to
img[class^="Voice_avatar"] {
There are other changes, but it's clear that there have been recent changes to newer versions of OBS that no longer let this video work as listed.
Do you know where I can find the completely new code that I can just copy paste? I’m super new to coding so I wouldn’t know what to change 😅
have u found the new code?
tysm u saved me!
for some reason my inage wont change when i talk, it might be a bad mic or something, i need to buy a new one desprately
arigato jojoooo
Thank you so much
i cant get the custom css to work, ive quadruple checked everything is correct and obs is still just displaying the discord chat bubbles on the browser source
What program do you use for your modelt on this video it is sooo cute
Omg tysm:) >33
It’s cuts off my drawings and only shows a small corner of my drawings in stream labs is there a specific size dimension for the drawing that it has to be or a specific code I need to had for it to not get cut off ? 😭
Can I somehow draw it on mobile or just pc? Cause I did that on mobile and it's really blurry ( I used 2000x2000 )
Really ThankyoÜ so Much☺️❣️
no problem!! happy holidays!! 😊
I appreciated the tutorial. I got it to work but the image is super small and no matter what i do i cant seem to resize it right. It seems to disappear on me. Any advice?
everything is working perfectly, it's just that the screen is only cropping the top left, any way to fix that?
Make the charector small in the canvas then add to obs make the source like BIG, not too big but yeah BIG
i have followed this video step by step and it still didnt work :(
hey i did everything but when i talk my lil png lights up and when im quiet its really dim.. did i do something wrong?
i cant open the css and i had to download it then i still cant figure out what i need to do for there then i had to open obs and i cant find where you opened the chibi file in obs so im really confused.
i actually tried on stream labs but that put up the same thing which is just the discord profile pic that doesn't want to change it if you have any tips on that plz let me know so i can work on that later
How do I do this for my friends cus I'm a streamer and wanna make it when my friend talks it shows
The pngs appear in my obs, but Streamkit seems to not detect any voices other than mine. Any advices?
fore somereason when i paste the CSS it my icon goes invisible for a sec then comes back
for some reason it didnt work for me and my discord profile picture remained instead of changing to my desired picture,,, idk what i did wrong but im pretty sure i followed each step???
will this not work on mac? i just went through the whole process and did a bit of troubleshooting but it still doesn't display the image i made
thx for the video uwu
Thanks a ton!
I'm sorry for leaving a comment asking for help in a 2 month old video, and it's okay if you don't reply. I just cant seem to make it work, my picture appears and everything, but only the idle image, and it doesn't change to the talking image when I talk in the voice chat. (I've checked if i had accidentally posted the same link twice but nope, I did paste the correct image links in their respective spaces)
that's why I'm asking for help, if anyone knows how to solve it, since I couldn't figure out first. thank you for the video tho it was very helpful for everything else ^^ ♡
yeah, it happend with me as well idek what to do
same here, i asked as well but they haven't answered :P
i have a question, if i cant find the thing for the discord user ip what should i do?
I managed to get the code to work... but it doesn't show when I go into a call... how do I fix it?
I don't know what I did wrong, it just shows me the discord bubble
mine has a white background, i dont know what to do.
what did you make your png tuber on?
Hey uuuh I tried everything multiple times, but still doesn't work. HELP ! :c
It doesn’t work for me when I wanna send my chibi self to discord it says its to powerful 😕
if the file is too big, you need to resize it to something more reasonable o: i normally use 1200x1200 PNGs, so try that instead and lower the resolution/DPI so the file isn't exceeding 25MB, there's no reason for picture files to be that big~
I don't get it and I don't think it works on mobile
Is this for laptop or computer only bc i dont have computer or laptop only a phone
does this work with streamlabs?
thanks dai :))
Idk why but the Images are just not changing at all
im not able to get the discord id for my friends idk why
Merci beaucoup. ♥
How do you create a character
hey thanks for this video
no problem! ^^
@@daijojobu it does not work tho nice tutorial tho
when i talk the charater is big and when im not talking its small
hi! when creating your PNG, you need to make sure your picture size are the same dimensions.
example would be that both my idle and my talking files are 1000 px by 1000 px. if your files are different dimensions, they won't have a smooth transition
can i use streamlab?
I'mma make a Canadian from south park
Idk how to put on a browse source :(
Hmmm. Very nice
I got everything but, the part where the png should pop out doesnt work, i still see the dc Icons, pls help
were u able to find the solution for this?
How do i copy my id , it doesnt show
i just wanna cute plush pfp but idk where to find someone who can make them
how do you paste it
its not working for me :(
idk what I did wrong, I see it works for everyone else in the comments
does it work on streamlabs obs
it doesnt work for me
I am not sure what I am doing wrong but mine just shows my bubble from discord no matter what... I followed all the steps: went into developer, I am an admin, I got the code from the kit, made the browser source, updated the code with the links, added the ID, changed in the browser source but no luck. anyone know what the issue could be?
i have the same problem ;-;
My server us up and running fine, but everytime I try to install it for OBS it says it can't connect to the discord client - please make sure you have it installed.
make sure you don't have an ad blocker I had to turn mine off for the website
I cant find the link on mine
hi thanks for the tutorial, think sadly the css doesnt work anymore? browser source only shows my discord pfp
Same I have no idea why :(
I'm a month late but hopefully this still helps. Replace the following:
li.voice-state:not([data-reactid*="X"]) { display:none; }
WITH THIS ⬇
li>img[class^="Voice_avatar"]{ display:none; }
li>img[class^="Voice_avatar"][src*="X"]{ display:block; }
And remember to copy your Discord ID and replace the X with the ID.
Then, you'll also need to replace the following:
.avatar ➡ img[class^="Voice_avatar"]
.speaking ➡ img[class*="Speaking"]
li.voice-state ➡ li.[class^="Voice_voiceState"]
@@dyingbreathlol thanks it works!
@@Saiga9Nr2 good to hear, happy to help a fellow mel enjoyer
how do u do the css thing?
is there a way to stop the character from jumping everytime i talk?
i had the same problem but fixed it: in the code, find "animation-duration: 1s; and change it to
"animation-duration: 0s;"
@@dantegg09 ty
Can I do this on mobile?
it dosent really work for me :(
out of curiosity do the PNGs have to be a specific size?
No
Can you do this on mobile?
it wont show me the URL
It won’t let me copy the link :(
This is a great tutorial but it’s funny because we know what happened to pngtubers
link to the discord pls
It isn't working for me
it not working anymore
why the screen is black?;-;
Images wont show up ;-;
Is there a mobile version?