Gamer 369 Overlay

Author	MarketerBay
Attribution	not required
File Type	.JPEG, .PNG, .SVG, HTML, ZIP
Framework	Markup Language
Platform	Local or Hosted

Description

Gamer 369 is an open source project for OBS and intended purpose is to be used as full screen overlay

Interested in knowing a little bit more about this project? Scroll down then.

How it works and what features are available within this overlay?

It a browser based source file which can be added in OBS software to display a bunch of stuff.

Let’s take each section and see what this amazing project can do …

1. Header section

– avatar image in the left side which can be changed via Interact OBS interface. Supported file types? SVG, GIF, PNG, JPEG

– user name is also editable via Interact OBS interface. Simply type in your text

2. Side Menu

– shows 4 buttons triggering additional sections. Games, Stats, Team, Social

2.1 Games

Once triggered from side menu a custom section show up displaying 8 “slots” with changeable image and editable text visually defied by Game Name here

Animated by CSS. Upon hover of Games box, the perspective and position of the box changes. To close this box, click on X button or simply navigate to other tab from Side Menu

2.2 Stats

visibility triggered from Side Menu and will display 2 icons (non editable/can’t be changed via OBS interface) and 6 editable Achievements slots with editable hours

To close this box simply click on X or trigger another box from Side Menu

2.3 Team

Shows editable text-based content and 3 generic images which can be changed. Simply click on top of the image to swap it with yours. SVG, GIF, PNG, JPEG file types supported. Default are using SVGs.

2.4 Social

by now you’ve already figured out, it is triggered by the Side Menu link and shows a box with a bunch of SVG icons and editable text. 9 icons can be hidden or not if click on (X) icon from left side of the slots

3. Bottom Bar

3.1 – from left to right, 2 arrow icons used to change between to backgrounds

3.2 – type field. Looks like a message box and can hold your own (short text)

3.3 – clock. Shows your local time. Can’t be edited

3.4 – on click of eye icon, the Side Menu visibility is set to on/off

3.5 – panel icon is triggering visibility for the Away Screen (on/off)

4. Away Screen

4.1 – left editable box . Type to change text

4.2 – right box is showing (by default) an image which can be changed

4.3 – below right box there’s a toggle icon. On click display or hide clock

The original version had more animations to show off but I had to optimize as much as possible these SVG animations because they were using CSS instead of repeatCount=”indefinite” . One optimization solved.This overlay is also using javascript in the same HTML page. Used to allow image change, trigger buttons show/hide elements. Unfortunately I’m not a programmer so this programming language is something I can’t optimize, but feel free to give it a try.

PS: This is an open source project available for download and hosted online version. If you want to contribute and develop further, link in download section