Gamer 369 Overlay

$0.00

Download Gamer 369 Overlay

editable via Interact OBS interface
change texts, images directly from OBS
show/hide  sections – display clock

Read more about this open source template in Product Description below

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

Screenshots

  • Marketerbay.com : Gamer 369 Overlay Away Section
  • Marketerbay.com : Gamer 369 Overlay Games Section
  • Marketerbay.com : Gamer 369 Overlay Online Section

Additional information

Author

Attribution

not required

File Type

, , , ,

Framework

Markup Language

Platform

Local or Hosted

FAQs

Ask question

How to use?

Read the documentation.

Ask a question


Reviews

There are no reviews yet.

Only logged in customers who have purchased this product may leave a review.