If you put everything into a standalone HTML file and load Phaser from a CDN, you won't need a web server running anywhere. There are three ways you can set up your webpage: Single HTML file If you want a more visual game engine that can still export to HTML, consider Godot, which I made a great course on! Setting up your webpage Phaser itself can be loaded as a single JavaScript file. It's also specifically intended for WebGL games, which means you can just save your JavaScript file as you're working and click 'refresh cache of current page' in OBS to see your changes (as opposed to having to export a build from your game engine). I prefer to use Phaser since it's relatively easy to learn. However, this is where game engines really shine since they're built to handle graphics, animations, and even sounds! As long as the game engine can export to HTML, then you can use it to make overlays. If you wanted something basic enough, you could write a simple HTML file with CSS animations. That means that you 'only' have to make a webpage with your overlay's contents. OBS has a built-in 'Browser' source that lets you show the contents of a webpage:įrom there, you type in a file path or URL, and OBS will render whatever you would see if you had pointed your actual browser at the same page: I use OBS, so I'll talk about its specifics here, but software like XSplit also supports this method. With my streaming software, I only would have been able to render static text on the stream. For example, I made a custom overlay that reads a file from my system, fades in a marquee with that text every so often, then fades it out when enough time has elapsed.

However, it may not allow for event-based triggers or animations. Regarding the dynamic aspect-your streaming software can already render text and graphics. Advertising your social-media platforms.Commands of interest like !game or !help.This post is for people who want a custom, dynamic overlay and know how to program.Īs for why you'd want an overlay in the first place, here are common uses:

How to add strexm overlay to obs