Soccer Mania

Overview

Soccer Mania on the surface is a an arcade soccer game based on Super Mario Strikers, but under the hood is months of work to push Roblox to the limit to make the best soccer experience through clever physics and networking.

It is very hard to make a good physics based game due to Roblox constraints. Physics are not deterministic, and the character is client authoriative. Modern soccer games on Roblox compose of you getting tackled from 10 meters away, delays to hit the ball, and ball lag, as the ball and players are in different positions for everyone.

I wanted to push the boundaries of Roblox physics and networking to create a fun and competitive soccer game.

Example of a Modern Roblox Soccer Game

• This is my game ECL, while minimal, you can see when the ball is hit, there are delays, and stutters.

The primary challenge was being able to sync clients and the server. I decided on the solution of running the ball and players on the server, and having the client send their input to move and control their player. This meant I could control and predict the ball and players, and send that information back to the client, meaning everyone would see the same thing.

This diagram shows how Roblox networking works. The player moves whereever they like, and tells the server where they moved. The server then tells other players. This keeps clients out of sync with each other as you are always ahead on your screen.

This diagram shows my custom networking. The client sends their input to the server, and the server moves the player. The server then tells everyone where they moved. This keeps all players in sync with the server.

There is a tiny input delay depending on the clients connection. This is hidden by friction to turn directions, and charging kicks, but isn't noticable unless the client has a bad connection. In the future I hope to try add lag compensation methods like client side prediction to hide the input delay.

This meant I could control and predict the ball and players, and send that information back to the client, meaning the ball and players are in the same position for everyone. This solves the issue of players getting tackled from 10 meters away and the ball teleporting between clients, as the server is the source of truth, making for super smooth gameplay.

Early Prototype

You can see the ball, and the player is server authorative, as the ping changes, the ball and player remain lag free. The only delay is the input delay which is controlled by the mouse. This prototype uses Roblox physics and not my custom physics.

Making everything deterministic

The two challenges were being able to predict where the ball and all players will be.

To predict where the ball will be I used Roblox physics and tried to predict the ball trajectory. I got very close using the Runge-Kutta method but when it came to predicting ball collisions it was very inconsistent due to Roblox physics. I decided to make my own ball physics instead. This was challenging at the start, but a lot easier to maintain as I had complete control over physics and didn't have to try and keep up predicting Roblox Physics. I spent weeks learning physics from scratch to solve this, which I am very proud of.

Prediction Algorithm

For predicting where players would be, as outlined earlier I went against the traditional Roblox model of client authorative characters, by rendering characters on the server, and having the client send their input to move and control their player. Going against Roblox broke a lot of things and led to a lot of challenges, like having to create my own Mobile Touch Thumbstick and UI for all devices, handling character loading and more, but thankfully I was able to overcome them.

For the core mechanics of the game, the game would run a loop checking for the player who could reach the shortest point on a ball's trajectory. I could predict if a player could reach a ball in time by checking the distance to the ball and the speed of the player. If a player could reach the ball, the server would move them to intercept the ball, similar to titles like FIFA. This made for a super smooth experience.

First Play Test

The first play test was super fun, there was minimal bugs with tackling and inputs, but other than that I proved that the core mechanics worked. What I had was a mini version of FIFA Virtual Pro on Roblox, and it was super smooth!

Version 1 Gameplay

This clip is a video of the public release of the game. The game featured drop-in matches where you were paired with random people for 4 minutes. The game was super fun, but had a lot to add yet!

Game UI

The UI is made in React-Lua, making UI development a lot easier, featuring:

• A shop where you can buy cosmestics with coins you earn from playing matches.
• An inventory to equip your items.
• A leaderboard to see who is the best!

Version 2 Gameplay

Version 2 of the game I took a different direction, from the first release I could see that the game slow, hard to play and dribbling was clunky. I decided to take a different direction to make the game more action packed.

Goalkeeper AI

Here you can see the dribbling is a lot smoother, along with adjustments to the goalkeeper and more.

Gameplay

This clip is some early testing of the new version. The game runs like an arcade FIFA with a new camera angle and smoother dribbling. The game is a lot more action packed and fun.

Future

The next steps would be to add special abilities/powers like being able to throw bombs and freezing your opponents. Other improvements needed would be the Visual Effects, Animations, Sounds, Networking, UI, and so on.

There is a lot more work to be done to make this a full game. I have paused giving this project my full attention, but I hope to come back to it in the future. I am incredibly happy with what I have achieved and the learning experiences from it, and I look foward to my next adventures :)