diff --git a/README.md b/README.md index ef59b8a..ce90390 100644 --- a/README.md +++ b/README.md @@ -1 +1,70 @@ -# LiveSplitOne-OBS-Layout \ No newline at end of file +# LiveSplit One OBS Layout + +Customised LiveSplit One setup for OBS + +# Description + +LiveSplit One being a web page allows overwriting CSS, thus much more customisation possibilities than original LiveSplit. + +OBS Browser source also has native opacity channel, which allows transparency while keeping font sharp and consistent (unlike Chroma key). + +[TUNIC LiveSplit One AutoSplitter](https://github.com/jeanwll/TUNIC-LiveSplitOne-AutoSplitter) was made alongside this project as an exemple to overcome absence of global hotkeys and AutoSplitting. + +This layout is a personnal proposition, along with some customisable CSS properties. + +Image + +Splits appear progressively with an animation; +- current split is easy to compare with current time +- animations highlight reaching new split +- progressive apparition saves space for game visuals + +Sum of Best, PB and WR appear for 20 seconds in fading cycle below timer. + +# Installation + +1. Add browser source + - Set URL https://one.livesplit.org/ + - Set size to full screen (ex: 1920x1080) + - Apply Custom CSS `@import url('https://jeanwll.github.io/TUNIC.LiveSplitOne.AutoSplitter/style.css');` + +2. Interact source ***(OBS browser import/input window might pop behind OBS application)*** + - Right-click/Left-click to toggle menu + - Import provided **LSOlayout.ls1l**, click save + - Import your splits, click save + - Update WR and PB values in Layout → Edit + +3. *(Optionnal)* Add the blurry timer background + - Install OBS plugin StreamFX https://obsproject.com/forum/resources/streamfx-for-obs%C2%AE-studio.578/ + - Make sure your game and browser source have the same size + - Add "Blur" filter on game source + - Check "Apply a mask", Mask Type: "Source", Source Mask: "your browser source" + - Set Mask Alpha Filter to 5, and Size to 30 + + 4. *(Optionnal)* Set custom CSS properties below the `@import`, those are default values: + ```css +.layout { + --bottom: 290; + --right: 50; + --scale: 100; + --max-visible-splits: 20; + --show-sob: 1; + --show-pb: 1; + --show-wr: 1; + --appearance-duration: 20; +} +``` + +# Additionnal notes + +Exporting splits won't work directly from OBS browser source; if you want to export splits to .lss you can: +1. Copy content from +`%APPDATA%\obs-studio\plugin_config\obs-browser\IndexedDB\https_one.livesplit.org_0.indexeddb.leveldb` +2. Paste to +`%USERPROFILE%\AppData\Local\Google\Chrome\User Data\Default\IndexedDB\https_one.livesplit.org_0.indexeddb.leveldb` +3. Export splits by browsing https://one.livesplit.org/ on chrome + +You could keep a clean record of your game by using **OBS plugin Source Record**. +You can put the filter on a **Source Mirror** of your game if you use the blurry background. + +If you wish to make your own Custom CSS, I recommend enabling *remote-debugging-port*.