Make sure you go to the Position, Size, and Style section to change the width and height to the correct dimensions. Therefore, the asset may look small when you first apply the widget to the overlay. the small graphic was made on a 1920x1080p canvas).
Sometimes, stream overlays are made in Photoshop at the stream resolution (i.e. Resizing your overlay assets can be tricky though. There are a lot of settings for each widget, so we recommend going through each setting and applying what you need to make it look great. You can also adjust how the animation will bring the alert in and out. TextObject = you click the cog icon, you can now add your own video or image, change the volume of the alert, how it’s placed, apply custom CSS, and resize it to how you want. This HTML snippet will float the word "Hello" from the bottom of the screen to the top: 1 On the flip side, it also means that you can't read any files from your hard drive, including JavaScript files, so you'll need to place all of your JavaScript inside the HTML file itself. 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:
Obs studio overlays software#
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.
Obs studio overlays how to#
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:
0 kommentar(er)
