Git Product home page Git Product logo

nshud's Introduction

nshud - A Simple Spectator Hud for CS2

nshud example

Background

This hud is designed for all the CS2 casters that are desperately looking for free a custom spectator hud. I created this hud in my free time and I want to share it with you. It is equipped with an MIT license so that you can use and modify it in any way you want.

Please consider that I am not a web developer and therefore the code is most probably garbage. Nevertheless, it works, so it is good enough for me. If you feel like something could be implemented smarter, please let me know and I will take it in consideration.

Installation and Usage

  • Install node.js
  • Download this project, either by cloning it or just by downloading the zip folder. The latter has to be unpacked then, of course.
  • Copy the file gamestate_integration_nshud.cfg into the config folder of CS:GO. It is usually located at:

C:\Program Files (x86)\Steam\steamapps\common\Counter-Strike Global Offensive\csgo\cfg

See CS:GO Game State Integration for more information on how this works.

  • Open PowerShell or whatever command line tool you are comfortable with and navigate to the project
  • Run npm install
  • Run npm start

The hud runs now as a website at http://localhost:8000.

Telnet (does not work in CS2 anymore ๐Ÿ˜ข)

The CS:GO console can be accessed with the telnet protocol. You need to add the following to your CS:GO Launch Options:

-netconport 2121

Additionally, in config.json the use_telnet option has to be true. The hud uses the console access to read ingame chat messages and display them in the hud. Furthermore, any console command can be triggered by the hud.

The hud can therefore trigger some camera transitions in CS:GO. They are implemented in spec.html. For using them, open the website http://localhost:8000/spec. Press the desired camera transition. Be aware that random triggers multiple, one after another. When going back to spectating players, one should always press the reset button first. This resets the spec_mode and stops the random camera transitions from triggering new transitions every few seconds.

Config & Team Info

There are two important files for customization. One is the config file with some basic settings. The other is the team info. Here, you can enter the names of the teams playing and add team icons.

Steam Web API Key

For showing the player avatars you have to request a Steam Web API Key. More information on the Steam Web API can be found here. You can request a new key by filling out this form.

Please be aware that are these keys are abused by scammers to send you fake trade offers! Do not share this key with anyone and if you don't need it anymore, delete the key!

Unfortunately, for displaying the player avatars you need to get one of these keys. When you have it, add it to config.json and set the show_player_avatars option to true:

"show_player_avatars": true,
"steam_api_key": "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"

Radar

I use the boltobserv radar and added my config to this repository.

Setup for Cast

I use OBS for casting. The hud and radar are added as browser sources. For setting up CS2 I use the caston.cfg/castoff.cfg configs that basically just turn the CS2 hud on and off.

If you have any questions regarding the OBS setup, please let me know.

nshud's People

Contributors

daniel-zint avatar kdev avatar

Stargazers

xtherk avatar Nils avatar Pascal Schiessle avatar  avatar

Watchers

 avatar  avatar

nshud's Issues

Improve installation guide

Hey, thanks for your effort!

I had a small problem when trying to use telnet. There's no guide on how to setup telnet in the CSGO launch options.
It would be great to add this to the guide.
You can find it with some research (it's just -netconport 2121) but adding it would be easier and fitting.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.