Skip to content
Craftium

Setup guide: Comic Throw

About ten minutes. You need OBS Studio 28 or newer, a free StreamElements account and your personal files from our license page (link in your Etsy download, have your order number ready).

Before you start

  • OBS Studio 28 or newer. The widget talks to OBS through the built-in OBS WebSocket. Streamlabs Desktop and Meld Studio do not have it.
  • A free StreamElements account, logged in with the channel you stream on.
  • The setup on the license page: after your order number and channel, it shows a copy button for every tab (HTML, CSS, JS, Fields). Your license key is already in the code. Everything is also there as a ZIP (backup).

Prepare OBS

In OBS Studio open Tools → WebSocket Server Settings, tick Enable WebSocket server, keep port 4455, click Show Connect Info and copy the password. Keep it private.

Your webcam source stays as it is, small or big, anywhere in your scene. The widget finds the first visible camera of the current scene by itself and follows when you move it or switch scenes. Your camera image stays on your computer.

Set up the widget in StreamElements

  1. Open Overlays

    Log in at streamelements.com and click Overlays in the menu on the left. Already using our Comic Chat, Spin Wheel or Alert? Put the throw widget into the same overlay and go on with step 3.

  2. Create a new overlay

    Click New overlay, choose 1080p (1920 × 1080) and click Start.

  3. Add a custom widget

    Click Add widget (the + button), then Static / Custom and Custom widget.

  4. Open the code editor

    With the new widget selected, click Open editor on the left.

  5. Replace all four tabs

    For HTML, CSS, JS and Fields: press the matching button on the license page (for example Copy HTML) or copy the file from the ZIP, click into the tab, select all with Ctrl + A (Mac: Cmd + A), delete and paste. Leave Data as it is and click Done.

    Replace all four, even if a tab looks fine. StreamElements fills CSS and JS with an example widget.

  6. Stretch it over the whole overlay

    Open Position, size and style and set the box to 1920 × 1080 at position 0, 0. The throws then land on your camera wherever it sits.

  7. Password and camera

    Under OBS connection paste the password into OBS WebSocket password. Camera source name can stay empty. VTuber model or background removal? Set Silhouette from to transparency.

  8. Save and test

    Click Save, then Test: throw a tomato or Test: throw a salvo. If the editor cannot reach OBS, it shows a drawn demo streamer and a hint what is missing.

    Want a counter (hit, dodged, returned)? Add the widget a second time, set What this widget shows to the counter and place it anywhere.

Your throws

Throw rounds: by default chat throws only during a round (When can chat throw?). Start one with !throw start or !throw start 90, with a channel point reward whose title says “throw round”, with a wheel field like “Throw round 45 s” or automatically every few minutes. !throw stop ends it. A crosshair warns before each throw, and at the end the hits, dodges and the best thrower show up. The texts are yours to change.

Events: under Events pick object and number for follows, subs, gift subs, bits, tips, raids and channel points: tomato or sticker (they stick), ball or emote (they bounce) or a mix. From 10 throws a countdown 3, 2, 1 runs first.

Chat: viewers write !throw and the emotes in their message fly at you. Who may throw and the cooldowns are up to you.

Comic Spin Wheel: wheel fields that mention tomatoes, stickers, balls or a throw, like “15 tomatoes”, throw at you when the wheel stops. Or list exact field names in Comic Wheel fields that throw.

Mod commands: !throw pause, !throw resume, !throw clear, !throw reset. While paused, paid throws are collected and come after !throw resume. Pause and counter survive an OBS restart.

Add the overlay to OBS

  1. In your list of overlays on StreamElements open the menu … of the overlay and click Copy URL. Keep this link private: it contains a key to your account.
  2. In OBS Studio click + under Sources and choose Browser. Paste the link as URL, set Width 1920 and Height 1080 and put the source above your camera.
  3. For sound switch on Control audio via OBS.
  4. Leave Shutdown source when not visible and Refresh browser when scene becomes active switched off.

Streamlabs Desktop and Meld Studio have no OBS WebSocket: the widget cannot see your camera there.

More settings

Click the widget in the StreamElements overlay editor; the settings appear on the left. Click Save after changes.

SettingWhat it does
Comic styleBundle only: Pop Art, Manga or Neon. Switch anytime.
Language of the textsEnglish, Deutsch, Español, Português or Français.
Color themeClassic, night or pastel colors of your style.
Crosshair warning before each throwSeconds a crosshair shows before each throw; 0 = no warning.
Seconds sticky things stayHow long tomatoes and stickers stay before they fall off.
Silhouette updates per secondLower it on weaker PCs; detection only runs while something flies or sticks.
Show detected silhouetteShows in red what the widget sees as you, for setup.
Camera positionAutomatic from OBS, or manual with sliders (for example for a camera inside a nested scene).

Help

Nothing flies at me
  • WebSocket server on in OBS and the password in OBS WebSocket password?
  • Open the widget in the StreamElements editor: a hint says what is missing.
  • Chat only throws during a round: type !throw start.
  • Paused? Type !throw resume.
Throws land beside me

Several cameras? Enter the exact name in Camera source name. Show detected silhouette shows what the widget sees as you.

My PC gets slow

Lower Silhouette updates per second.

Still stuck?

Write to us via Etsy messages or at craftium.berlin@gmail.com. Tell us your style, your OBS version and what you see. Never send us your overlay link or OBS password.

Updates

Updates for version 1.x install themselves when the overlay loads, and your settings stay. Only if the editor shows an update note:

  1. Open the overlay in StreamElements, click the widget and then Open editor.
  2. Replace HTML, CSS, JS and Fields with the new files, exactly as in step 5.
  3. Click Done and Save.

Current version: 1.0.0