Tech Used
Roblox Studio: Coding, 3D-Modelling and Animations.
Lua: Roblox programming language.
TypeScript: Used with Next.js and Discord.js
Next.js/React: Team/Role Management APIs.
PostgreSQL: Relational Database for Team/Role Management.
Discord: Communication channels and bot interactions for API communication.
React-Lua: Used for the UI/UX of the Roblox game.
An immersive Roblox experience based on non-league football, created by my friend and me.
With zero coding knowledge in 2017, I changed one line of code to update open-source tools to work with the new Roblox R15 avatar.
That one line of code I changed created a ripple effect that led to me learning how to code and inspired my coding journey.
With 3000 Roblox members and 600 Discord members, ECL has been the hub of friendships and memories for many people, and my playground for learning how to be a developer in all aspects.
My Work Involved
- Gameplay (Lua, React)
- Referee System (Lua, React)
- Team Management System (Next.js, Discord.js, PostgreSQL, Lua)
About ECL
- The game facilitates 7v7 matches with competitive and satisfying gameplay.
- Matches are scheduled on Discord by league staff and hosted by appointed referees using the referee system.
- Fans get involved through watching matches, live streams and media content.
- The league is run by a team of staff who manage the league, clubs, referees and players.
Gameplay
Roblox Studio is a game engine like Unity or Unreal Engine that allows users to create 3D worlds and games. Developers publish their games to Roblox, where over 100 million monthly active users can play them.
The game engine uses Lua, which is a lightweight programming language similar to Python.
Gameplay development involves handling user input, animations, physics, and client/server networking.
Gameplay Example (Player POV)
Gameplay Example (Media Camera)
Gameplay Example (Fan POV)
Gameplay Example (Goalkeeper POV)
The UI/UX is built using React-Lua, which is a direct translation of React into Lua. All elements of the game are customisable, including gameplay settings, lighting, keybinds, and combos, providing accessibility for all users.
Settings UI
Referee system
The system allows referees to host matches.
Features:
- UI built in React to manage the score, time, offsides, and fouls.
- Quick chat commands to manage substitutions.
- Tools to manage the match, such as a whistle, yellow/red cards, and a ball spawner.
Referee Gameplay
- You can see the UI for the scoreboard at the bottom right.
- The offside system highlights players in red who are offside when the ball is kicked.
Team Management System
The ECL Web Service automates the management of teams, player transfers, and more by connecting Discord and the Roblox game servers through REST APIs and a PostgreSQL database. This solves the problem of manually recording data with Google Sheets.
The service has successfully run 2 seasons of the league with over 300 registered players, 16 teams, and 200+ player transfers.
Next.js hosts a REST API used by the Discord bot and the Roblox game servers to manage teams, players, and roles.
The Discord bot acts as a front-facing UI for the service:
- League staff can manage in-game roles via Discord like Referees, Media, Club Owners, Managers, etc.
- Club Owners can hire and sack managers/assistant managers.
- Managers can sign, release, and transfer players.
- Transfer Office staff can approve or reject transfers.
- Hundreds of hours saved in manual work.
Signing a Player
Discord Bot Logs
In the Roblox game, a player's team's logo will appear next to their name on the player list UI.
Player List UI with Team Logos
