NodeCG

ASM 2020

I designed and programmed the graphics for the Australian Speedrun Marathon 2020 online event. Multiple layouts had to be made including: an intermission screen, widescreen, 4:3, Nintendo DS, Gameboy Advanced, 2 player race designs and a transition screen. The event ended up raising over $13,000 which was near double the previous highest of $7,000. The graphic's used nodecg-speedcontrol as the backend handler.

Features
  • Intermission screen
  • Ticker showing current total, next runs and a call to action
  • Widescreen, Standard, Nintendo DS, Gameboy Advanced and race layouts
Libraries used
Video of event
4:3 Race Layout
Widescreen
Intermission Screen

CS:GO

My current personal project is creating a set of CS:GO for use at a tournament. It uses the game state integration system allowing for real time data to be used in displaying information in a different or more informative way than the original hud. As this is being developed it is subject to change. The design has been inspired by future user interfaces such as the Games Done Quick layouts used from 2018-2020.

Features
  • Plant, bomb and defuse progress bars
  • Team logo and name
  • Team economy and grenades
  • Map with all player’s facing direction and vertical location (maps like Vertigo and Nuke)
  • Map shows all grenades including an animation for flash and frag grenades exploding
  • Easily customisable design
Libraries used
  • React
  • TypeScript
  • Styled-components
  • GSAP
  • Material UI
NOTE: This has not been used in an actual tournament. All data from images is being taken from tournament demos.
More images and videos will be made as this is further developed.
Full round video
Mid-Round
Buytime
Pistol Round
Map
Team Controls

Cricket

This was a project I made at the start of 2019 to challenge myself to create a full set of graphics. The main goal was for the operator to press the least number of buttons to operate. The design was inspired by Google’s material/paper UI and avoiding the use of gradients for 3D effects as most designs used.
GitHub

Features
  • Full score bug
  • Mini score bug
  • Full batting scoreboard
  • Toss notification
  • Location nameplate
  • Changable batting order
  • Match day information
Libraries used
  • Polymer 2
  • TypeScript
  • GSAP
  • Polymer Paper Elements
Score Bug
Batter Scoreboard
Location Bug
Main Controls
Setup Controls
Graphics Controls

Livestream

These are layouts developed for my streams (that I rarely do).

Features
  • Countdown screen
  • Follower and Host notifications
  • Spotify song integration
  • Adjustable livesplit element
Libraries used
  • React
  • TypeScript
  • GSAP
  • Sass
Countdown screen
Gameplay screen
Speedrun screen

NCG-Spotify

NCG-Spotify is a NodeCG bundle aimed to handle Spotify song information and for other bundles to use them easier.
GitHub

Features
  • Song name
  • Song artist
  • Album art
  • Playing status
Libraries used
  • TypeScript
  • Spotify‑web‑api‑node
Dashboard panel

NCG-Livesplit

This is a simple element that allows the LiveSplit server addon to talk to NodeCG bundles and vice versa. This allows dynamic background elements to react to splits.
GitHub

Features
  • Send and receive data from LiveSplit
Libraries used
  • Polymer Paper Elements
  • Node‑IPC
Dashboard panel
Video of integration

NodeCG Tutorial

I am planning on releasing a series of tutorials and guides on NodeCG and other aspects of broadcasting.
GitHub