/YAWO4YARG

Yet Another Widget Overlay for Yet Another Rhythm Game. Compatible with OBS 28.0.1 and newer.

Primary LanguageJavaScriptMIT LicenseMIT

📺 YAWO4YARG - Yet Another Widget Overlay for Yet Another Rhythm Game

A Widget overlay compatible with OBS (28.0.1 and newer) that shows the current song with album artwork and difficulty/source icon being played on Yet Another Rhythm Game.


Banner


📥 How to install

  1. Download and extract this repository. You can do by clicking here.

  2. Copy where the currentSong.json is stored.

    2.1. Open YARG

    2.2. Go to Settings

    2.3. In File Managment Section, click Copy Current Song JSON File Path

  3. On the extracted widget folder, go to settings folder, open CurrentSongFilePath.txt with a text or code editor, paste inside and save it.

  4. Create a new Browser Source on your OBS.

    • On the browser settings, mark "Local file", and locate the extracted widget folder and select YARG Widget.html
    • Set the width as 1920 and height as 260. If it's too big, you can resize the widget on your canvas after you add it.

⚙️ List of settings

DisplaySmallIcon.txt - Change small icon beside the rim.

  1. On the extracted widget folder, go to settings folder, and open DisplaySmallIcon.txt with a text or code editor.

  2. Place what you want to display on the small icon and save it.

Available icons: (not case-sensitive)

instrument (default) - will show the instrument being played along with the difficulty ring.

source - will show the icon for the chart source. (grabbed from YARC-Official/OpenSource)

none - will not show anything on the small icon.

Instrument.txt - Change current instrument.

As for now, the widget isn't able to detect what instrument is being played. In case you're playing an instrument that's not Guitar, you might need to change inside the settings.

  1. On the extracted widget folder, go to settings folder, and open Instrument.txt with a text or code editor.

  2. Place what instrument you'll be playing

Warning This is case-sensitive.

Available instruments:

GUITAR - GUITAR_COOP - REAL_GUITAR - RHYTHM - BASS - REAL_BASS - DRUMS - GH_DRUMS - REALDRUMS - KEYS - REAL_KEYS - VOCALS - HARMONY

  • You can put multiple instruments separated by a comma (example: GUITAR,GUITAR_COOP,RHYTHM,BASS,KEYS) so you don't have to change mid-screen in case a chart doesn't have specified instrument.
  • The order you put the instruments will matter, as the widget will fetch the first instrument with chart available.
  • In case you want to change the instrument mid-stream, just change the Instrument.txt and click Refresh on the Browser Source in OBS. (you can use Streamer.bot + StreamDeck to write the file + refresh the browser source)

TextAlignment.txt - Change text position.

  1. On the extracted widget folder, go to settings folder, and open TextAligment.txt with a text or code editor.

  2. Place the alignment value and save.

Available alignment values: (not case-sensitive)

left (default) - Shows album art and text left-to-right

right - Shows album art and text right-to-left

center - Shows album art and text left-to-right, but widget will be centered on canvas

LastFmAPIKey.txt - Use Last.fm as a fallback when album art isn't available on chart.

  1. Go to https://www.last.fm/api/account/create (you'll need to create an Last.fm account if you don't have)

  2. You'll need to provide an Application Name, feel free to chose whatever name. (the other fields aren't required)

  3. Copy your API key, you'll need it later.

  4. On the extracted widget folder, go to settings folder, and open LastFmAPIKey.txt with a text or code editor.

  5. Paste your API key, and save.

PlayingOBSSceneName.txt - Change OBS Scene to Playing Scene when song is playing.

Warning Still a bit experimental.

  1. On OBS Studio, get the name for the scene used when playing songs. (You can right click the scene, click Rename and copy to clipboard)

  2. Paste on the PlayingOBSSceneName.txt text file.

  3. Right-click on the YAWO4YARG browser source, and go to Properties.

  4. Scrolling to the bottom of the properties, set the Page permissions to Advanced access to OBS. (Needed to widget to change the current OBS Scene)

  5. Refresh the browser source.

NotPlayingOBSSceneName.txt - Change OBS Scene to Not Playing/Song Select Scene when song is not being played.

Follow the same steps on PlayingOBSSceneName.txt - Change OBS Scene to Playing Scene when song is playing., except now it's for the Not Playing/Song Select Scene.