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 unless camCovers has been enabled in the stuk-nodecg.json config file, in which case the camera area is replaced with a graphic.
Every single-player layout supports up to four runners, allowing for co-op or multiplayer runs where more than one player is sharing the screen. Runner fields will dynamically hide/unhide depending on how many players are entered in the run editor.
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. When the height becomes too small, the sponsor area is removed entirely.
From this, every single-player layout can support a single webcam, four runners, three commentators, and the host. However, not every layout will fit all of these elements on the screen, particularly layouts with tracker areas, or DS/3DS layouts. These layouts will support a single runner and all other elements, so always check what the layout will look like ahead of time if you're planning on featuring multiple runners, as you may have to compromise on a webcam or some commentators to fit everything on.
Multiplayer layouts are completely fixed (expect for the dynamic host/comms area); you won't be able to have more runner plates than the number of players featured. You can still have relays where the runner name changes as the next player takes over. As there is no sponsor area on the multiplayer layouts, if runners choose not to have cam, these are always replaced by the images in the camCovers folder.
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.