The on-stream graphics used during Awesome Games Done Quick 2019.
This is a NodeCG v1 bundle. You will need to have NodeCG v1 installed to run it.
- Video Breakdown
- Automated Builds
- Requirements
- Installation
- Configuration
- Usage
- Interviews
- License
- Credits
We unfortunately do not have time to make a video breakdown for this event's bundle. However, we did make one for AGDQ 2017's graphics package, which still has a few similarities with this one.
If you are using an automated build (which includes everything in one zip file with a single exe), skip to configuration.
Automated builds are made on AppVeyor CI. You can view the list of builds here. To download a build, click the "Artifacts" link in the top right, above that build's log output. Then, download the adgq19-layouts-${HASH}.zip
for that build.
If you just want a direct link to a build that works and don't mind it maybe being slightly out-of-date, here you go.
๐ก Skip this section if you are using an automated build
- Clone (or download & extract) to
nodecg/bundles/agdq19-layouts
. - Install
bower
if you have not already (npm install -g bower
) cd nodecg/bundles/agdq19-layouts
and runnpm install --production
, thenbower install
- Create the configuration file (see the configuration section below for more details)
- This is optional, but a lot of functionality requires it. Many systems will be unavailable unless you configure them.
- Run the nodecg server:
node index.js
(ornodecg start
if you havenodecg-cli
installed) from thenodecg
root directory.
Please note that by default, not all graphics will work. This is because agdq19-layouts
makes use of several non-free plugins for GSAP, which we cannot redistribute. If you wish to use all graphics in their current implementations, you will need to pay for access to Club GreenSock and save the following plugins to the following directories:
- SplitText:
shared/lib/vendor/SplitText.min.js
- CustomEase:
shared/lib/vendor/CustomEase.min.js
- DrawSVGPlugin:
shared/lib/vendor/DrawSVGPlugin.min.js
To configure this bundle, create and edit nodecg/cfg/agdq19-layouts.json
.
Refer to configschema.json for the structure of this file.
If you have nodecg-cli installed, you can run nodecg defaultconfig
from the nodecg/bundles/agdq19-layouts/
folder to generate a nodecg/cfg/agdq19-layouts.json
file with default values derived from the schema.
agdq19-layouts
has a deep, complex integration with OBS Studio. As such, it expects your OBS to be fairly precisely configured.
- Download and extract this custom build of OBS, which includes all the plugins we use.
- Once extracted, OBS can be launched via
bin/64bit/obs64.exe
. - The source code for this build can be viewed here.
- Once extracted, OBS can be launched via
- Go to "Profile > Import", and import the
obs-assets/obs-profile
directory from this repository. Then, ensure that the "AGDQ 2019" profile is selected in OBS. - Go to "Scene Collection > Import", and import the
obs-assets/obs-scenes.json
file from this repository. Then, ensure that the "AGDQ2019 - Localhost" scene collection is selected in OBS. - Locate the "Scene Transitions" dropdown menu in the main interface of OBS (it will be near the bottom right by default). Select "Blank Stinger". Click the gear icon below the dropdown, and select "Properties". Update the "Video File" path to point to your
agdq19-layouts/obs-assets/BlankTransition.mov
path. - Ensure OBS is in Studio Mode.
- Click the gear icon to the right of the center "Transition" button.
- Ensure that "Duplicate Scene" is unchecked.
You may notice that we use a custom plugin called GDQ Crop. This plugin's source can be viewed here.
โ This does not cover the system for interview question tweets, which is a separate system called Lightning Round. This only covers the system for showing Tweets and Fan art on the break and gameplay scenes.
To show Tweets and Fan art on the break and gameplay scenes, you will need to define the twitter
object in your nodecg/cfg/agdq19-layouts.json
config file.
This system has changed. Previously, you'd enter your Twitter API credentials directly into your config, and agdq19-layouts
would handle making all the API requests for you. This is no longer possible, due to Twitter's new API structure.
To resolve this issue, we had to create a small microservice running on Heroku which acts as a middleman between Twitter and the local deployment of agdq19-layouts
. This microservice is called twitter-socket.io-adapter
, and its documentation can be viewed here.
Once you have a deployment of twitter-socket.io-adapter
up and running on Heroku, you can configure your twitter
object in nodecg/cfg/agdq19-layouts.json
like this example:
{
"twitter": {
"enabled": true,
"websocketUrl": "https://YOUR_HEROKU_APP_NAME.herokuapp.com/",
"preSharedKey": "YOUR_SECRET_KEY_FROM_YOUR_DEPLOYMENT_ON_HEROKU",
"debug": false
}
}
Some of the data that agdq19-layouts
fetches from the tracker is private, privileged data. An authorized account is required to access this data. Private data includes:
- Ad schedule
- Interview schedule
- Per-run tech notes
If you wish to access private data on your deployment of the tracker, you'll need to configure your tracker
object in nodecg/cfg/agdq19-layouts.json
like this example:
{
"tracker": {
"username": "YOUR_USERNAME",
"password": "YOUR_PASSWORD",
"eventId": 23
}
}
This bundle is not intended to be used verbatim. Some of the assets have been replaced with placeholders, and most of the data sources are hardcoded. We are open-sourcing this bundle in hopes that people will use it as a learning tool and base to build from, rather than just taking and using it wholesale in their own productions.
To reiterate, please don't just download and use this bundle as-is. Build something new from it.
- Start NodeCG
# From the `nodecg` dir: node index.js
- If you're using an automated build, just run
nodecg.exe
.
- If you're using an automated build, just run
- Open http://localhost:9090
- Click on the "Setup" tab of the dashboard, and connect to OBS using the "OBS" panel.
- By default,
obs-websocket
uses port 4444 and has no password. - The
compositingOBS
tab is for the "compositor" OBS, where the graphics are running. - The
recordingOBS
tab is for the "recording" OBS, where the primary recordings are running.- You do not need to have
recordingOBS
connected, it is optional.
- You do not need to have
- The
encodingOBS
tab is for the "encoding" OBS, where the secondary recordings are running.- You do not need to have
encodingOBS
connected, it is optional.
- You do not need to have
- By default,
agdq19-layouts
listens for donations in realtime, rather than polling the donation tracker for a new donation total. To facilitate testing,
we provide a small script that sends mock donations:
- Add
"donationSocketUrl": "http://localhost:22341"
to yournodecg/cfg/agdq19-layouts.json
- From the
nodecg/bundles/agdq19-layouts
folder, runnpm run mock-donations
- Run NodeCG (
nodecg start
ornode index.js
from thenodecg
folder)
In production, you'd use TipoftheHats/donation-socket-repeater along with the "Postback URL" feature of GamesDoneQuick/donation-tracker.
Lightning Round is GDQ's system for gathering interview questions from Twitter. It exists in two parts: one part running "in the cloud" as a Firebase app, and one part running locally as part of this NodeCG bundle.
Lightning Round is pretty weird and kind of difficult to set up. You can watch these videos for more information but please bear in mind that they are outdated, as they were made for AGDQ 2017, not AGDQ 2019:
Interviews at GDQ events are pre-composited on a Blackmagic ATEM 2 M/E Production Studio 4K. The final program out from this ATEM is then sent into OBS as a single SDI capture input. Interviews are run by a separate team from the rest of the stream, so that setup can continue uninterrupted while the interview is ongoing.
Our ATEM operators sometimes use atem-compositor
to help them more rapidly create compositions of multiple sources on an ATEM, which is notoriously difficult to do quickly and accurately without the use of programs such as atem-compositor
.
agdq19-layouts is provided under the Apache v2 license, which is available to read in the LICENSE file.
Designed & developed by Support Class:
Additional help from: