Stroke text + workaround tip

Lenwe

New Member
Hi

Among the awesome features of OBS we have the text incrustation. However, it's now always very easy to read, especially when the background is of the same color than the text.

It would be great to have a "stroke" option for text to make it readable regardless to the background color. Some other effects such as "drop shadow" would be appreciated to improve text readability.

However, I found a way to add stroke text in OBS. It's a bit complex but I got the result I needed. The trick is to create 8 copies of the original text of a different color placed under it with a slight offset (top left, top, top right, left, right, bottom left, bottom, bottom right) to mimic a stroke effect

ONNeBwp.jpg


Here is how to do.
  1. First of all, you need to create your text as a global source (let's name it My text). Configure it to use an external file as content source.
  2. Close OBS and duplicate My Text in the scenes.xconfig file then name it My text stroke. Save.
  3. Open OBS and choose My text stroke's color, that will be your stroke color (Captain Obvious to the rescue).
  4. Place your My text instance in your scene then close OBS
  5. Open scenes.xconfig then find the code for your My text instance within your scene
  6. Duplicate the text's code 8 times (you must have your text instance followed by the 8 copies)
  7. Rename the 8 copies to give them unique names (My Text stroke top left, My Text stroke top, My Text stroke top right etc.)
  8. Edit the global source of the copies to set My text stroke.
  9. Uptate the global source of the 8 copies to user My text stroke instead of My text.
  10. Ensure you have your original text before the stroke copies in the code so that it will show up above them.
  11. Now, let's assume you want a 2 px thick stroke effect and your text is placed at coordinates x : 100 y : 200. Just add or substract 2 to the x and y coordinates to set the offset of each stroke copy. Your code should look like this :
Code:
scenes : {
  My scene : {
    class : Scene
    sources : {
      My text : {
        render : 1
        class : GlobalSource
        data : {
          name : My text
        }
        cx : 640
        cy : 120
        x : 100
      }
      My text stroke top left : {
        render : 1
        class : GlobalSource
        data : {
          name : My text stroke
        }
        cx : 640
        cy : 120
        x : 98
        y : 198
      }
      My text stroke top : {
        render : 1
        class : GlobalSource
        data : {
          name : My text stroke
        }
        cx : 640
        cy : 120
        x : 100
        y : 198
      }
      My text stroke top right : {
        render : 1
        class : GlobalSource
        data : {
          name : My text stroke
        }
        cx : 640
        cy : 120
        x : 102
        y : 198
      }
      My text stroke left : {
        render : 1
        class : GlobalSource
        data : {
          name : My text stroke
        }
        cx : 640
        cy : 120
        x : 98
        y : 200
      }
      My text stroke right : {
        render : 1
        class : GlobalSource
        data : {
          name : My text stroke
        }
        cx : 640
        cy : 120
        x : 102
        y : 200
      }
      My text stroke bottom left : {
        render : 1
        class : GlobalSource
        data : {
          name : My text stroke
        }
        cx : 640
        cy : 120
        x : 98
        y : 202
      }
      My text stroke bottom : {
        render : 1
        class : GlobalSource
        data : {
          name : My text stroke
        }
        cx : 640
        cy : 120
        x : 100
        y : 202
      }
      My text stroke bottom right : {
        render : 1
        class : GlobalSource
        data : {
          name : My text stroke
        }
        cx : 640
        cy : 120
        x : 102
        y : 202
      }
    }
  }

Now, all you have to do is edit your text file to update the text :)
 
Top