วิธีทำงานกับรูปภาพปฏิกิริยาที่ไม่ลงรอยกันในฐานะมือใหม่ [2022]

เผยแพร่แล้ว: 2022-09-13

สมมติว่าคุณต้องการเข้าร่วมกลุ่ม VTuber (Virtual YouTuber) และร่วมมือกับเพื่อนเกมเมอร์และแฟน ๆ ของคุณใน Discord ในกรณีนั้น คุณอาจต้องการพิจารณาใช้ Discord Reactive Images การสตรีมด้วยอวาตาร์ PNG VTuber แบบรีแอกทีฟเป็นวิธีที่เป็นมิตรกับผู้เริ่มต้นและราคาไม่แพงที่สุดในการเริ่มต้นใช้ งาน VTuber

discord reactive images

ด้วยแอนิเมชั่น 2D และ 3D ที่ดีขึ้น VTubers กำลังกลับมาทุกหนทุกแห่ง โดยทำงานร่วมกันบนแพลตฟอร์มต่างๆ เช่น YouTube, Twitch และ Discord สามารถสร้างและปรับแต่งโมเดล VTuber หรือ PNGtuber เพื่อสะท้อนสิ่งที่ตัวละครพูดและทำในสถานการณ์ต่างๆ ได้ ลองใช้ Discord Reactive Images หากคุณต้องการเปลี่ยนกล้องหน้าสำหรับการสตรีมหรือใช้ในการสนทนาที่ไม่ลงรอยกัน

ในโพสต์นี้ คุณจะได้เรียนรู้วิธีที่ผู้เริ่มต้นสามารถตั้งค่าและใช้ Discord Reactive Images ได้หลายวิธี

สารบัญ

รูปภาพปฏิกิริยาที่ไม่ลงรอยกันทำอะไรกันแน่?

รูปภาพตอบโต้ช่วยให้อวาตาร์ออนไลน์ของคุณเคลื่อนไหวตามเสียงหรือปฏิกิริยาของคุณขณะสตรีมหรือเข้าร่วมการโทรใน Discord นอกจากนี้ยังช่วยให้คุณไม่เปิดเผยตัว สำหรับช่วงเวลาที่คุณไม่อยู่ในอารมณ์ที่จะอยู่หน้ากล้อง VTubing เป็นวิธีที่ยอดเยี่ยมในการทำให้สิ่งต่างๆ มีชีวิตชีวาและมีส่วนร่วมสำหรับผู้ชมของคุณ

ช่วยให้คุณสร้างวิดีโอด้วยอักขระหรืออวาตาร์ PNG ดิจิทัล ซึ่งสร้างภาพเคลื่อนไหวแบบเรียลไทม์โดยใช้ซอฟต์แวร์บันทึกเสียงและแสดงตัวละครที่สวม ซึ่งปกติแล้วจะอยู่ในรูปแบบของแอนิเมชันญี่ปุ่น ไม่ว่าคุณจะกำลังถ่ายทอดสดบน Discord หรือโฮสต์เซิร์ฟเวอร์พัดลมส่วนตัว คุณสามารถให้โมเดล PNG, 2D หรือ 3D ของคุณแสดงอารมณ์ของคุณได้

การทำงานกับภาพปฏิกิริยาที่ไม่ลงรอยกันและข้อกำหนดเบื้องต้นที่จำเป็น

Discord ช่วยให้สตรีมเมอร์ใช้เซิร์ฟเวอร์ของแฟนๆ เพื่อแชทกับสมาชิกและสร้างสายสัมพันธ์กับชุมชนของพวกเขาทั้งในเกมและนอกเกม หากคุณเป็นผู้ดู Twitch คุณสามารถเข้าร่วมและแชทกับสตรีมเมอร์คนโปรดของคุณบนเซิร์ฟเวอร์ Discord ซึ่งรวมเข้ากับช่อง Twitch ของพวกเขา ในฐานะสตรีมเมอร์ คุณสามารถทำให้สมาชิกเซิร์ฟเวอร์ของคุณยุ่งอยู่กับช่องข้อความ ช่องเสียง แยกข้อความตรงกลุ่ม บอทเกม สตรีมมิงแบบสดไปยังผู้ชมที่เลือก และอีกมากมายบน Discord

ขึ้นอยู่กับการปรับแต่งและความรู้ทางเทคนิคที่คุณต้องการใส่ลงในภาพปฏิกิริยา Discord ของคุณ คุณสามารถเลือกจากตัวเลือกมากมาย คุณสามารถเริ่มต้นเป็น PNGtuber แล้วจึงพัฒนาเป็น 2D หรือ 3D rigging เมื่อคุณได้รับประสบการณ์มากขึ้นกับ Vtubing และส่วนที่ดีที่สุดคือคุณไม่จำเป็นต้องลงทุนในซอฟต์แวร์ติดตามใบหน้า ระบบแสง หรือกล้องระดับไฮเอนด์

การเป็น PNGtuber นั้นต้องมีการตั้งค่าเพียงเล็กน้อย สิ่งที่คุณต้องมีในการตั้งค่าภาพปฏิกิริยา ได้แก่:

  1. รูปภาพ PNG อย่างน้อยหนึ่งภาพและไม่เกินสองภาพเพื่อใช้เป็นภาพปฏิกิริยา Discord ของคุณ
  2. ไมโครโฟนสำหรับบันทึกเสียงของคุณด้วยคุณสมบัติลดเสียงรบกวนเพื่อขจัดเสียงรบกวนรอบข้าง
  3. OBS หรือซอฟต์แวร์ Open Broadcast เพื่อเพิ่มแหล่งที่มาของเบราว์เซอร์สำหรับการสตรีมสดและการบันทึกวิดีโอ

จะหาภาพตอบสนองส่วนบุคคลได้ที่ไหน

มีหลายวิธีในการรับภาพ PNG สำหรับอวาตาร์ Discord ของคุณ คุณสามารถสร้างโมเดล PNG ของคุณเองจากซอฟต์แวร์วาดรูปฟรีหรือจ่ายเงิน เช่น FireAlpaca, Procreate, Inkscape หรือซอฟต์แวร์วาดภาพยอดนิยมอื่นๆ เพียงตรวจสอบให้แน่ใจว่าได้ส่งออกรูปภาพเป็น PNG แบบโปร่งใสก่อนที่จะอัปโหลดไปยังเซิร์ฟเวอร์ Discord เมื่อคุณสร้าง PNG แล้ว คุณสามารถใช้เครื่องมือออนไลน์ เช่น Removebg เพื่อลบพื้นหลังเพื่อให้ได้ภาพ PNG แบบโปร่งใส

คุณยังสามารถซื้อหรือว่าจ้าง PNG ที่คุณกำหนดเองได้ผ่าน Etsy, Instagram หรือ Fiverr ซึ่งคุณจะพบกับศิลปินดิจิทัลมากมายที่สามารถสร้าง PNG ที่ปรับแต่งได้ตามข้อกำหนดของคุณ หากคุณพร้อมที่จะจ่ายเงิน อย่าลืมขอตัวอย่างผลงานของพวกเขา และยืนยันว่าคุณจะเป็นเจ้าของลิขสิทธิ์ภาพทั้งหมด เพื่อไม่ให้ผู้อื่นลอกเลียนแบบหรือนำไปใช้

วิธีการเพิ่มรูปภาพปฏิกิริยาที่ไม่ลงรอยกัน

มีหลายวิธีในการเพิ่ม PNG แบบโต้ตอบในการโทรและการทำงานร่วมกันที่ไม่ลงรอยกันของคุณ แต่เพื่อความเรียบง่ายสำหรับผู้เริ่มต้น เราจะเน้นที่สองวิธีง่ายๆ ที่จะไม่ใช้เวลามากเกินไป

discord reactive images fugi tech + streamkit overlay

นี่คือวิธีที่เราจะพูดถึงในโพสต์นี้:

  1. การใช้ Reactive by Fugi ซึ่งเป็นเครื่องมือซอฟต์แวร์ที่ผสานรวมกับ Discord เพื่อสร้างอวาตาร์ PNG ที่ตอบสนองต่อเสียงของคุณโดยอัตโนมัติ
  2. การเพิ่ม CSS แบบกำหนดเองด้วยตนเองเพื่อสร้างโค้ดสำหรับ Discord Reactive Images ซึ่งคุณสามารถแก้ไข ปรับแต่ง หรือปรับขนาดได้ตามต้องการ

หมายเหตุ: วิธีการเหล่านี้อาจใช้ไม่ได้กับอุปกรณ์มือถือ ดังนั้น คุณจะต้องดาวน์โหลดแอป Discord บนคอมพิวเตอร์เดสก์ท็อปแทน

เราจะพูดถึงแต่ละขั้นตอนข้างต้นโดยละเอียดด้านล่าง

วิธีที่ 1: การเพิ่มรูปภาพปฏิกิริยาด้วยรูปภาพปฏิกิริยาที่ไม่ลงรอยกันของ Fugi

รูปภาพ Discord Reactive ของ Fugi เป็นเครื่องมือที่ได้รับความนิยมและง่ายที่สุดที่ใช้โดย Discord PNGtubers สำหรับสิ่งนี้ คุณจะต้องมีแอป Discord ที่เชื่อมต่อกับช่องเสียง OBS และไมโครโฟน

คำแนะนำทีละขั้นตอนโดยละเอียดมีดังนี้:

  1. ดาวน์โหลดและติดตั้งแอป Discord บนเดสก์ท็อปและ OBS (บทช่วยสอนนี้ใช้ OBS Studio ฟรีและโอเพ่นซอร์ส)
  2. ตอนนี้เปิดแอป Discord แล้วเลือกไอคอน การตั้งค่า ถัดจากชื่อผู้ใช้ของคุณที่มุมล่างซ้าย
    discord reactive images- settings
  3. ในหน้าต่างการตั้งค่า เลื่อนลงไปที่ ขั้นสูง จากแผงด้านซ้ายและสลับเป็น โหมดนักพัฒนาซอฟต์แวร์ ภายใต้ ขั้นสูง
    discord developer mode
  4. จากแผงด้านซ้าย ให้เลือก เสียงและวิดีโอ เลือกไมโครโฟนของคุณภายใต้ การตั้งค่าเสียง และทดสอบเพื่อให้แน่ใจว่าใช้งานได้ คลิกปุ่มดรอปดาวน์ใต้ส่วน กล้อง ของเมนู การตั้งค่าวิดีโอ จากนั้นเลือก OBS Virtual Camera (หากคุณติดตั้ง OBS Studio)
    discord reactive images - obs virtual camera
  5. ไปที่เว็บไซต์ Fugi's Reactive แล้วคลิก เข้าสู่ระบบ ถัดไป คุณจะต้องลงชื่อเข้าใช้ Discord อีกครั้งและให้สิทธิ์แอปที่จำเป็นในการอนุญาตแอป
    fugi discord reactive images
  6. ซึ่งจะนำคุณไปยังหน้าหลักสำหรับการตั้งค่าสิ่งต่างๆ หากคุณมี PNG ทั้งคู่พร้อมแล้ว (อันหนึ่งปิดปากและอีกอันเปิดปากสำหรับอวาตาร์พูดของคุณ) ให้คลิกไอคอนกล้องใต้ " ตั้งค่ารูปภาพที่ไม่ใช้งาน" และเลือก PNG แรกโดยปิดปาก จากนั้นทำซ้ำขั้นตอนภายใต้ " ตั้งค่าภาพการพูด ” และเลือก PNG ที่สองโดยอ้าปาก เมื่อเสร็จแล้ว คลิก บันทึก
    fugi reactive images - upload PNGs
  7. ทางด้านซ้าย คุณสามารถเปลี่ยนบางสิ่งได้ เช่น การจัดตำแหน่งรูปภาพและการเว้นวรรค และเอฟเฟกต์ Bounce ระหว่างการเปลี่ยนภาพ เมื่อเสร็จแล้ว ให้คลิกนำไปใช้ จากนั้นภายใต้ลิงก์ ให้คลิกไอคอนคัดลอกที่อยู่ถัดจากแหล่งที่มาของเบราว์เซอร์ส่วนบุคคลเพื่อคัดลอก URL
    fugi discord reactive images - browser source
  8. ตอนนี้เปิด OBS แล้วคลิกไอคอนเครื่องหมายบวก ( + ) ใต้ Sources คลิก เบราว์เซอร์ จากนั้นภายใต้ สร้างใหม่ ตั้งชื่อแหล่งที่มาของคุณ แล้วคลิก ตกลง
    discord reactive images - add browser source to OBS
  9. ในหน้าต่าง คุณสมบัติ ให้วางลิงก์ที่คุณเพิ่งคัดลอกไว้ข้าง URL แล้วคลิก ตกลง
    discord reactive images -- copy links to obs
  10. ตอนนี้ Reactive Image ปรากฏขึ้นที่ด้านบน การลากรูปภาพ คุณสามารถเปลี่ยนความกว้างหรือความสูงของรูปภาพได้
    discord reactive image obs
  11. ในการเริ่มสตรีม Discord ให้คลิก Start Virtual Camera ภายใต้ การควบคุม ใน OBS
  12. สุดท้าย ให้กลับไปที่แอป Discord และเชื่อมต่อกับช่องเสียง (สร้างช่องเสียงส่วนตัวเพื่อทดสอบก่อน) ที่ด้านซ้ายล่าง ให้คลิก วิดีโอ จากนั้น เปิดกล้อง
    reactive png vtuber obs

ณ จุดนี้ รูปภาพปฏิกิริยาของคุณควรปรากฏบน Discord และคุณสามารถลองใช้ได้โดยการพูดใส่ไมโครโฟน ตอนนี้ภาพปฏิกิริยาพร้อมที่จะใช้สำหรับการสตรีมและทำงานร่วมกันผ่านการโทร Discord

วิธีที่ 2: การใช้โอเวอร์เลย์ OBS StreamKit เพื่อเพิ่มอิมเมจรีแอกทีฟ

หากคุณต้องการวิธีอื่น คุณสามารถใช้ StreamKit Overlay ของ Discord ได้ ซึ่งช่วยให้คุณสามารถเพิ่มโค้ด CSS ที่กำหนดเองได้ แทนที่จะอัปโหลดภาพสองภาพด้วยตนเอง

คำแนะนำทีละขั้นตอนโดยละเอียดมีดังนี้:

  1. ไปที่เว็บไซต์ Discord StreamKit และเลือก Install for OBS หรือ Install for XSplit ทั้งนี้ขึ้นอยู่กับซอฟต์แวร์การสตรีมของคุณ
  2. หากคุณลงชื่อเข้าใช้ Discord แล้ว ระบบจะแสดงหน้าวิดเจ็ต มิเช่นนั้นระบบจะแจ้งให้คุณลงชื่อเข้าใช้
  3. ไปที่ Voice Widget และเลือกชื่อเซิร์ฟเวอร์และช่องสัญญาณเสียงจากเมนูดรอปดาวน์ถัดจาก Server และ Voice Channel ตามลำดับ หากคุณต้องการซ่อนชื่อผู้ใช้ของคุณในขณะที่โทร Discord ให้เปิดใช้งานตัวเลือก ซ่อนชื่อ
    pngtuber streamkit overlay
  4. คัดลอกโค้ดเบราว์เซอร์จากด้านล่างขวาของหน้าภายใต้ Voice Widget
    discord vtuber - streamkit overlay
  5. เปิด OBS แล้วเลือกไอคอน + (เพิ่มแหล่งที่มา) จากเมนูแหล่งที่มา คลิก เบราว์เซอร์ > ตกลง จากนั้นวาง URL ที่คุณเพิ่งคัดลอกถัดจาก URL แล้วคลิกตกลงในที่สุด
  6. ตอนนี้ เปิดแอป Discord ของคุณและสร้างช่องข้อความส่วนตัวซึ่งคุณสามารถบันทึกภาพ PNG และอัปโหลดทั้งสองไฟล์ได้
เคล็ดลับ:
คุณสามารถขุด GitHub หรือ Reddit เพื่อค้นหาตัวสร้างโค้ดและรหัสที่กำหนดเองที่ Vtubers คนอื่นทำ หนึ่งที่เราแนะนำคือโฮสต์ที่ CodePen และสร้างโดย Vtuber ชื่อ Kukushie
  1. เปิดลิงก์ตัวสร้าง CSS ในเบราว์เซอร์
  2. กลับไปที่ Discord และคลิกขวาที่ชื่อผู้ใช้ของคุณจากมุมล่างซ้าย จากนั้นเลือก Copy ID วาง ID ข้าง ID ผู้ใช้ Discord ในตัวสร้าง CSS
    discord reactive PNG - custom CSS
  3. เปิดช่อง Discord ที่จัดเก็บ PNG ของคุณ คลิกขวาที่แต่ละภาพ เลือก Copy ID จากนั้นวาง ID ข้างส่วน "URL ของรูปภาพ" ในหน้าต่าง CodePen
  4. ตรวจสอบลิงก์รูปภาพ จากนั้นคลิก สร้าง CSS เพื่อสร้างโค้ดของคุณ ซึ่งคุณจะแก้ไขและแก้ไขได้ คลิกปุ่ม คัดลอก CSS
    discord reactive png vtuber - copy custom CSS
  5. ตอนนี้ กลับไปที่ OBS และคลิกขวาที่แหล่งที่มาของเบราว์เซอร์ที่คุณสร้างด้วย StreamKit จากนั้นเลือก Properties
  6. เลื่อนลงไปที่ Custom CSS วางโค้ดที่คุณเพิ่งคัดลอก แล้วคลิก ตกลง

ตอนนี้คุณควรเห็นภาพตอบสนองที่พร้อมใช้งานที่ด้านบน ซึ่งสามารถลากและปรับขนาดได้ หากต้องการเชื่อมต่อกับ Discord ให้ไปที่ Controls ใน OBS แล้วเลือก Start Virtual Camera

คุณสามารถเริ่มสตรีมได้ด้วยการแชร์ทั้งหน้าจอหรือเพียงแค่หน้าต่างแอปพลิเคชันเกมผ่าน OBS คลิก + ใต้ Sources และเลือก Game Capture (Windows) หรือ Display Capture (Mac) เพื่อจับภาพหน้าจอเกมของคุณ หรือ หากคุณกำลังเล่นเกมเบราว์เซอร์ คุณสามารถใช้ Windows Capture เพื่อแชร์หน้าต่างเบราว์เซอร์กับสมาชิกของช่องเสียง Discord ของคุณได้

วิธีเชื่อมต่อ Twitch หรือช่อง YouTube ของคุณกับ Discord

สตรีมเมอร์สดและชุมชน Vtuber ใช้ Discord อย่างกว้างขวางเพื่อเพิ่มการมีส่วนร่วมของผู้ชมและการเติบโตเป็นเวลาหลายปี นี่คือเหตุผลที่การรวม Discord กับแพลตฟอร์มสตรีมมิ่งอื่น ๆ เป็นความคิดที่ดี โดยเฉพาะอย่างยิ่งสำหรับผู้ที่ยังใหม่กับฉากการสตรีม คุณสามารถให้ช่องและเซิร์ฟเวอร์ต่างๆ แก่สมาชิกเพื่อให้พวกเขาทั้งหมดสามารถรับชมสตรีมของคุณได้ในเวลาเดียวกัน ช่วยให้คุณสร้างฐานแฟนๆ ที่เหนียวแน่น มอบสิทธิประโยชน์และคุณสมบัติพิเศษ และแจ้งชุมชนของคุณเกี่ยวกับการอัปเดตในอนาคต

discord reactive image - connect twitch or youtube

หากต้องการเชื่อมต่อ Discord กับ Twitch หรือ YouTube ให้เปิด Discord แล้วคลิกไอคอนรูปเฟืองการตั้งค่าที่ด้านขวาของชื่อผู้ใช้ของคุณที่มุมล่างซ้าย ไปที่ Connections คลิกไอคอนสำหรับ Twitch และ YouTube จากนั้นให้สิทธิ์สำหรับแต่ละบริการเพื่อเชื่อมต่อกับ Discord คุณสามารถกำหนดค่าบทบาทและสิทธิ์ของเซิร์ฟเวอร์ รวมทั้งเพิ่มบอท อีโมจิที่กำหนดเอง กิจกรรมในชุมชน และอื่นๆ สำหรับสมาชิกของคุณ เพื่อให้ประสบการณ์นี้เป็นประสบการณ์ที่สนุกสนานสำหรับทุกคน

คำถามที่พบบ่อยเกี่ยวกับ Discord Reactive Images

Loader image

Discord Reactive Images คืออะไร?

ฉันจะสร้าง Discord Reactive PNG ได้อย่างไร

คุณสามารถสร้างโมเดล PNG ของคุณเองได้โดยใช้ซอฟต์แวร์วาดรูปฟรีหรือจ่ายเงิน เช่น FireAlpaca, Procreate, Inkscape และอื่นๆ จากนั้นส่งออกรูปภาพเป็น PNG แบบโปร่งใสก่อนอัปโหลดไปยังเซิร์ฟเวอร์ Discord

ฉันจะเพิ่มรูปภาพปฏิกิริยา Discord ลงใน OBS ได้อย่างไร

วิธีที่ง่ายที่สุดในการเพิ่มภาพปฏิกิริยา Discord ลงใน OBS คือการอัปโหลดภาพ PNG ทั้งสองภาพไปยังเครื่องมือ Reactive Fugi จากนั้นคัดลอกลิงก์แหล่งที่มาของเบราว์เซอร์และวางลงใน OBS เป็นแหล่งที่มา

ทำไม Discord Reactive Images ไม่ทำงาน

หาก Discord Reactive Images ไม่ทำงาน ให้ออกจากระบบและลงชื่อเข้าใช้ใหม่ ตรวจสอบให้แน่ใจว่ารูปภาพอยู่ในรูปแบบ PNG ตรวจสอบชื่อผู้ใช้และ ID รูปภาพของคุณ และตรวจสอบว่าคุณอยู่ในช่องสัญญาณเสียงที่ถูกต้องและเชื่อมต่อกับกล้องเสมือน OBS ของคุณ

ทำไม Discord Reactive Image จึงไม่ซ่อนชื่อผู้ใช้ของฉัน

หากต้องการซ่อนชื่อผู้ใช้ Discord ของคุณ ให้เปิด Discord ไปที่ การตั้งค่า > บัญชีของฉัน คลิก แก้ไข ถัดจากชื่อผู้ใช้ จากนั้นวางสัญลักษณ์ (ลิงก์) ลงในช่องชื่อผู้ใช้แล้วคลิกเสร็จสิ้น

อ่านเพิ่มเติม:

  • วิธีเพิ่มบอทในเซิร์ฟเวอร์ Discord [คู่มือ]
  • บอท Discord ที่มีประโยชน์ 10 อันดับแรกในการจัดการเซิร์ฟเวอร์ของคุณในปี 2022
  • แหล่งข้อมูล 4 อันดับแรกเพื่อค้นหาเซิร์ฟเวอร์ Discord เพื่อเข้าร่วมในปี 2022