Skip to main content

ตั้ง Overlay ใน OBS Studio

Overlay คือกล่องแสดง donation ที่ลอยอยู่บนสตรีม — ชื่อผู้โดเนท, จำนวนเงิน, ข้อความ พร้อม animation คู่มือนี้พาคุณตั้งให้เห็นใน OBS ได้ภายใน 5 นาที

แอปรองรับ overlay 2 โหมด:

  • Compact — กล่องขนาดคงที่ ลากตำแหน่งใน OBS ได้อิสระ (แนะนำ)
  • Fullscreen — เต็มจอ 1920×1080 ตั้งตำแหน่งจาก Settings

สิ่งที่ต้องเตรียม​

  • OBS Studio ติดตั้งและเปิดอยู่
  • เชื่อม source อย่างน้อย 1 ตัวแล้ว (Streamlabs / YouTube / Twitch)
  • ทดสอบ TTS ใช้ได้แล้ว (ถ้าเปิดใช้)

ขั้นที่ 1 — เลือก Preset และปรับ Style​

  1. ไปที่ Settings → Overlay
  2. ในส่วน Preset เลือก style ที่ชอบจาก 12 ตัว (เริ่มต้นแนะนำ Classic Box หรือ Banner)
  3. ปรับ:
    • Font — เลือกจาก 10 ฟอนต์รวมไทย, ขนาด, สี, น้ำหนัก
    • Background — สี + ความโปร่งใส
    • Border — สี, ความหนา, มุมโค้ง
    • Donor name color, Amount color
    • Animation — slide / fade / bounce / zoom / none

ดู Live Preview ทางขวาเพื่อเห็นผลทันที (กด Pin เพื่อยึดให้แสดงค้าง)

ขั้นที่ 2 — เลือก Display Duration Mode​

ในส่วนเดียวกัน:

  • Fixed Time — overlay แสดงนานคงที่ (เลือก 3–30 วินาที)
  • TTS Sync — overlay ซ่อนเมื่อ TTS อ่านจบ + delay ตามที่ตั้ง

ถ้าใช้ TTS แนะนำ TTS Sync เพื่อให้ overlay หายตอนเสียงจบพอดี

ขั้นที่ 3 — Copy Compact OBS URL​

  1. เลื่อนไปส่วน OBS Browser Source URL
  2. มี 2 URL: Fullscreen และ Compact — แนะนำ Compact
  3. กดปุ่ม Copy ข้าง URL Compact

URL ตัวอย่าง: http://localhost:3001/overlay?mode=compact&width=500

ขั้นที่ 4 — เพิ่ม Browser Source ใน OBS​

  1. เปิด OBS Studio
  2. ในกล่อง Sources กด + → เลือก Browser
  3. ตั้งชื่อ source (เช่น "Donation Overlay") → OK
  4. ในหน้าต่าง properties:
    • URL — วาง URL ที่ copy มาจากแอป
    • Width — ใส่ตามค่า width ใน URL (default 500)
    • Height — 200–300 พอ (Compact mode ไม่กิน full)
    • ✅ ติ๊ก Shutdown source when not visible เพื่อประหยัด CPU
  5. กด OK

ขั้นที่ 5 — ลากตำแหน่งและทดสอบ​

  1. ลาก browser source ใน Preview ของ OBS ไปวางตำแหน่งที่ต้องการ
  2. กลับเข้าแอป → ไป Test Panel (/test)
  3. กรอก donor + amount + message → กด Send Test
  4. Overlay จะโผล่ใน OBS preview ทันที

:::tip Pin overlay เพื่อจัดตำแหน่ง ใน Test Panel กด Pin Overlay — overlay จะค้างไว้จนกว่าจะ unpin ทำให้ลากตำแหน่ง / resize ใน OBS สะดวก :::

Tips & Troubleshooting​

  • Browser source ขาว/ว่าง: ตรวจว่าแอป Mor9an เปิดอยู่ + URL ถูก ตรวจว่า port 3001 ไม่โดน firewall block
  • Overlay เด้งเร็วเกินไป: เพิ่ม Display Duration หรือเปลี่ยนเป็น TTS Sync
  • อยากเปลี่ยน preset แล้วไม่ต้อง redo OBS: ไม่ต้อง — URL เดิม ใช้ preset ใหม่อัตโนมัติทันที (Socket.io sync ให้)
  • Multiple scenes: copy browser source ใน OBS แล้ว paste แบบ Reference ในแต่ละ scene — ใช้ source เดียวกัน

ดูเพิ่มเติม​