Outside of controlling the flow of the marathon, NodeCG is also responsible for generating the graphical overlays for your marathon. Overlays are provided as web pages and each scene on the Stream OBS includes that overlay as a Browser Source. Each overlay can be viewed in your web browser by using the "Graphics" tab in the top right corner of NodeCG. You can use this page to refresh any graphics, see which graphics are currently in use, and grab the URL for them.Â
If you ever have any issue with any graphics you should attempt the following fixes:
Refresh the graphic on NodeCG.Â
Refresh the graphics Browser Source on the Stream OBS (at present, this can only be done in OBS)
Open the graphic in a web browser, right click on it and click "Inspect". This will open your browser's developer console and show any errors that might be causing the graphic to fail.
It should be noted that any game scene graphics will only function correctly if the current run has the correct number of players. For example, a 2p layout will fail to load correctly if your current run only has 1 player, as it will fail to find the details it needs for a second player.
The video scene plays videos that are added to the assets\stuk-nodecg\videos folder and can be controlled by the Video Player panel.
The interview scene uses VDO.Ninja to put participants straight into the scene and is controlled with the Interview Cams panel.
At this time, STUK is provided with one set of layouts where the positions of items are fixed, but dynamically shift depending on the run. These dynamic changes include:
the webcam area will disappear if a runner's Cam field in the Run Editor is set to "No". In single-player layouts, other elements will shift to cover the space. In multi-player layouts, the camera area is replaced with a graphic.
the four fields that contain the host and commentators will disappear if any of them are left blank, with other fields expanding or shifting to fill the space left behind.
as both the above two parameters change, the space left at the bottom is filled with either square sponsor images or banner sponsor images. Which is used changes dynamically based on the height of the remaining space.
Right now, if you wish to use your own layouts, there is no scope within the package to assist with this - you will need a decent knowledge of CSS and be able to navigate the existing layouts. In the future, there are plans to possibly provide a layout set that doesn't include the above dynamic elements, but with options to easily reposition on screen elements instead.