Stream Overlay

Show your Pokémon TCG Pocket deck on stream in HD instead of a blurry screenshot. The overlay is a web page with a transparent background that your streaming software draws on top of your scene. There is nothing to install.

1. Get your overlay link

  1. Open your deck on DeckGym.
  2. Click Share, then Stream Overlay.
  3. Pick a layout and a theme. The preview updates as you choose.
  4. Click Copy Overlay Link.

The link contains your deck, so you do not need to sign in.

  • Layout: Bar is one row of 20 cards. Grid 2×10 is two rows of 10. Grid 4×5 is four rows of 5, a block that fits beside your game capture.
  • Theme: Transparent shows only the cards. Dark and Light put a solid panel behind them.
  • Deck name and energy: each can be turned on or off. Turn both off for a cards-only overlay.

2. Add it to your streaming software

OBS Studio

  1. Select the scene you stream from.
  2. In Sources, click + and choose Browser.
  3. Choose Create new, name it "DeckGym Deck", and click OK.
  4. Paste your link into URL.
  5. Set Width and Height to the size in the table below (the HD columns, unless you turned HD off).
  6. Leave Custom CSS as it is. It already keeps the background transparent.
  7. Click OK, then drag the source into place.

Streamlabs Desktop

  1. In your scene, click + next to Sources.
  2. Choose Browser Source and click Add Source.
  3. Name it "DeckGym Deck" and add it.
  4. Paste your link into URL, set Width and Height from the table below, and click Done.

Other software

Twitch Studio, Meld, vMix and most other tools have a "Browser", "Web page" or "Web" source. Add one and use the same link and size. If your software has no browser source, open the link in a browser window and capture that window. A window capture cannot be transparent, so choose the Dark or Light theme.

Browser source size

The overlay fits its cards exactly, with no empty margin. Use these sizes, then scale or crop the source in OBS to fit your layout.

Overlays are HD by default: everything is drawn at twice the standard size so the cards stay sharp. Set the source to the HD size, then scale it down to 50% in OBS (right-click the source, then Transform, then Edit Transform). OBS shrinks images more cleanly than a browser does. If you would rather use the smaller source, turn off HD (2× size) when you copy the link and use the standard sizes.

LayoutHD with name or energyHD cards onlyStandard with name or energyStandard cards only
Bar3832 × 3283832 × 2561916 × 1641916 × 128
Grid 2×103832 × 11283832 × 10561916 × 5641916 × 528
Grid 4×51912 × 21921912 × 2120956 × 1096956 × 1060

Changing decks

Each link shows one deck. To switch, copy a new link from DeckGym and paste it into the source's URL. Or add one source per deck and show the one you are playing with the eye icon.

Troubleshooting

  • A box shows behind the cards: use the Transparent theme and reset Custom CSS to its default.
  • Cards are cut off or there is empty space: Width and Height do not match the table above.
  • Cards look blurry: scale the source with Edit Transform instead of changing Width and Height.
  • Nothing shows: paste the link into a normal browser to check the deck, then right-click the source and choose Refresh.