Readek's Web Portfolio

Stream Tool

The Stream Tool makes it possible for anyone with or without production experience to set up a competent tournament stream in no time, and it's meant to be used alongside streaming software like OBS.

Using the powerful features of Electron for the GUI, everything is built on a combination of vanilla HTML, CSS, and Javascript, making an effort to use as few external libraries as possible to keep everything performant and lightweight.

This project is not only fully open-source, but built to be as customizable as possible, so everyone can modify it and give their own flavour to just about everything!

All Stream Tool versions are avaliable for both Windows and Linux with full feature parity.

The Stream Tool has been adapted to three games:

RoA ST

The Rivals of Aether Stream Tool is the most advanced of them all, having plenty of features. It has been used in a large amount of events run both by the game's community and the official RoA dev team.

GUI

The GUI manages what's being displayed on stream. In it, you can easily set up player player info, scores, characters, round, commentators, and more. With big features like 1v1 and 2v2 support, player/caster presets, and many settings, the GUI has everything you need to run your streams smoothly.

A remote GUI can also be opened by any device within the local network to control your stream from anywhere, including mobile devices, thanks to using WebSockets and HTTP servers!

SCOREBOARD

The Scoreboard is shown on top of the tournament gameplay. It displays player info, as well as score, character and current round. It includes original designs for both 1v1 and 2v2, and different scoring modes, all while having smooth animations!

VS SCREEN

The VS Screen is meant to be shown whenever we are waiting for the next match. In it, we can clearly see the players that are playing now or are about to start playing, as well as round, tournament and commentator info, with of course different designs for 1v1/2v2 and different scoring modes.

BRACKET VIEW

The Top 8 Bracket View displays current tournament data for the players who made it to the top. Supports character icons next to the players as well as sponsor tags, and colors winners and losers so everyone can see each round's results clearly!

The Super Smash Bros. Melee Stream Tool is by far the most popular one, with simple but effective and customizable designs to allow just about everyone to have a consistently good looking tournament stream.

GUI

The GUI covers all your basic needs, like modifying player info, characters, scoring, and of course match info like round, tournament and commentator names/socials, with a couple of optional settings.

SCOREBOARD

The Scoreboard is shown on top of the tournament's gameplay. Its design is adapted for a centered, 4:3 game feed with all the info being on both sides of the screen, where it displays player info, scores, round and even current commentators.

VS SCREEN

The VS Screen is meant to be shown whenever we are waiting for the next match. In it, we can clearly see the players that are playing now or are about to start playing, as well as round, tournament and commentator info, with a design inspired by the game's arcade mode VS screen.

The Rushdown Revolt Stream Tool is an official commission from the very developers of the game itself.

GUI

The GUI helps you set up everything you need quickly, be it player info, characters, scoring, round/tournament, and commentators, with the ability to switch up the gamemode to 1v1, 2v2 and 3v3!

SCOREBOARD

The Scoreboard is shown on top of the tournament gameplay, designed to look like it's part of the game itself. In it, we can display the player names and tags, as well as the score, character and current round. Includes support for [W]/[L] indicators, different score modes, and designs for 1v1, 2v2, and 3v3 games!

VS SCREEN

The VS Screen is meant to be shown whenever we are waiting for the next match. In it, we can clearly see the players that are playing now or are about to start playing, as well their scores, round, tournament and commentator info. It includes designs for 1v1, 2v2, and 3v3 games!

RECOLORER

As a Rushdown Revolt ST exclusive, the built in recolorer tool allows you to give a personal touch to the assets displayed on the stream, being able to change the colors of overlays and characters. Built with WebGL2 and no external libraries!

Poke Stream Tool

As a separate entity from the projects above, this is a work in progress project that aims to be a solution for anyone wanting to stream any Pokemon game! With a GUI made in Electron, users can have plenty of control over the data sent to the overlays.

This tool is able to read the game's memory in real time and decrypt this data to auto update all information in real time so users don't even have to bother managing overlay info!

You can check the current state of the repo here.

X & Y OVERLAY

An overlay for Pokemon X and Pokemon Y with designs inspired by the game's UI. Pokemon can show their nicknames, species, LVLs and even their health, that will update in values and colors depending on their HP.

The overlay also has a "Player Info" widget that displays current badges as well as some stats, which transforms into a display of pokemon stats whenever the user is fighting against a wild pokemon.

And of course, everything is responsive and animated!

An overlay for Pokemon Black and White with designs inspired by the game's UI. Pokemon can show their nicknames, species, and LVLs. Colors around a pokemon will change depening on the pokemon's status.

The overlay also has a "Player Info" widget that displays current badges as well as some stats, which transforms into a display of Pokemon stats whenever the user is fighting against a wild pokemon.

And of course, everything is responsive and animated!

An overlay to be displayed before a stream starts, showing all the Pokemon the user has caught up until this moment and selecting a random sprite for each.

The pokemon will be hiden for a short while until they are eventually revealed with their species name along with their nickname. Useful to keep the audience engaged while waiting for the stream to start!

RoA Custom Colors

As an official commission for the Rivals of Aether website, this is a complete reimplementation of the game's Custom Colors menu, trying to be as close as possible to the source material. In it, you are able to create your own colors for your characters with a generated code that you can then use in the game itself.

This web app uses WebGL2 to be able to change the colors of a character's image in real time, and has a heavy use of responsive CSS designs to support as many screen sizes as possible, while being as lightweight as possible by only using vanilla CSS and JS. You can try it out right now here, no download required!

RoA Skin Recolorer

As a more personal version of the project above, this web app uses WebGL2 to generate a recolored image of not only any character from the game Rivals of Aether, but also from any image you may want to upload, with support to dive deep into the WebGL shader data within the web's GUI to do so. It generates a code that you can save and share, and an image you can download at any time, and has plenty of features to play around by yourself!

This web app has extensive documentation and capabilities. You can try it out here, no download required!

RoA Replay Reader

This web app built entirely with ReactJS is able to read and parse a .roa replay file and read its contents instantly, so users can know what the replay contains, like player names and characters, scores, match info, and even read skin names and their color codes for each player.

You can try it out here, no download or even replay file required!

ABOUT ME

I first started programming on 2019, but it wasn't until Feb 2020 that I started learning javascript by myself mainly as a way to create programs that would help me with my stream work. It quickly became my main way of creating apps, becoming a web developer as I improved with each new project.

Most of the projects above are personal work, but to this day, I have done freelance work for a multitude of clients, including the developers of the games Rivals of Aether and Rushdown Revolt.

That being said, I do more than web development! I'm also a Videogame Localizer, Youtuber, Streamer, and I sometimes dabble on stream production for live tournaments, as well as being the owner of RoA's Spanish and European communities.

You can find me on: