https://github.com/gigili/tanks-overlay-game

Tanks overlay game made with PixiJS and TypeScript to be used as a browser source in obs
https://github.com/gigili/tanks-overlay-game

browser-game game overlay pixijs twitch tyescript

Last synced: 17 days ago
JSON representation

Tanks overlay game made with PixiJS and TypeScript to be used as a browser source in obs

• Host: GitHub
• URL: https://github.com/gigili/tanks-overlay-game
• Owner: gigili
• Created: 2020-10-21T17:58:14.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2020-12-18T07:54:46.000Z (almost 4 years ago)
• Last Synced: 2023-08-05T17:07:56.780Z (over 1 year ago)
• Topics: browser-game, game, overlay, pixijs, twitch, tyescript
• Language: TypeScript
• Homepage:
• Size: 2.76 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Tanks overlay game

This is a simple 1 v 1 tank shooter game which is totally automated. It will pick random players from a streamer's chat.   

It will only pick viewers that have sent a message so that it does not expose people that are only lurking and maybe don't want to be seen.

# Thank you / Credits 

 * Big thank you to [Jay](https://github.com/justJay-dev) for creating bullet assets.

# Adding it as an overlay

To add this game as an overlay for your own stream you can do so by using the link:

`https://gigili.github.io/tanks-overlay-game/?username=` 

and filling in your twitch username. 

If you don't want to have a background you can also pass an argument `&nobg=1` and it will remove the background color from the game.

# Game setup

 * Clone the repo

 * `cd repo`

 * `npm install`

 * Update the `tmi.js` configs in the `utils/tmi.ts` file

 * `npm run dev`

 * Copy assets folder to the dist folder 

 * Open `http://localhost:5050` see the game running or add it as an OBS source

 

# TODOS:

   * [ ] Add a GIF of a sample gameplay

   * [x] Create new design for leaderboard

   * [ ] Align player names and health info to be center with the tank asset

   * [ ] Adjust font sizes according to the available screen space