Author: Wobbles

The code for this game is now available on GitHub under the GNU Public Licence v3.0. All paid-for assets have been removed but the code is fully functional.

You can download it from https://github.com/Collywobbles007/FootballOnline

I’ve added some pitch boundaries to the game so when the ball leaves the pitch either behind the goal, in the goal or out beyond one of the side lines it will be detected. At the moment, the ball just returns to the centre circle after a short delay.

I also added a keeper with a basic idle animation to the pitch. He doesn’t do anything for now, but he has his own animator which I can develop later.

You might also notice that the scenery has changed a little. There is now a new sky and some hills in the background. Also, the perimeter fence has been moved out a bit further. This is mainly because it was interfering with the camera when the player is close to the side lines. I’m guessing this is one of the reasons why the original Football Superstars had so much space between the pitch and the stands!

Below is a short video showing the result of the ball leaving the pitch in various ways. As well as some goals being scored.

I encountered multiple issues with the dribbling animation shown in the previous version so I removed it. I’ve created a new simpler one which at least moves the ball as if it’s being dribbled but there’s no turn animation as yet.

The other major change is to the player controller. I was using a fairly basic one which didn’t allow for more complex functions such as a free look camera, so I developed a brand new more advanced one which is far more flexible. Free look with the right mouse button is now in use. It’s also possible to adjust the zoom level on you player now (not shown in video) and the vertical pitch is clamped so it doesn’t disappear below ground as was noticeable in previous videos.

I discovered several bugs related to kicking which was causing the server and client to get out of sync in terms of the ball position. I’ve now resolved all of these and haven’t noticed any others so far.

Here’s a short video of two players logged in. I switch back and forth between the two but only the view from player one is shown.

Something I wanted to try and add to this new multiplayer version of the game was more accurate dribbling. The original Football Superstars had quite nice dribbling animations which you couldn’t fully appreciate until watching a replay in slow motion. At the moment, my game just snaps the ball to whatever direction the player is facing – which works but doesn’t look that great.

It took me a few days to come up with something that looked half decent. I first created a new animation state machine for dribbling which also meant I had to create some animations of the player turning with the ball. Again, they aren’t as good as the old Football Superstars ones but it’s a start.

It’s fairly basic, but now the ball lerps (moves smoothly over a period of time) from its old position to the new position and is triggered by an event fired from the animation itself. It certainly looks better than having the ball snap to position but there’s a lot of room for improvement!

Here’s a clip of the new turning animation in action. It includes a few seconds of slow-motion video so you can see the turning animation a bit better.

After a lot of trial and error (and plenty of pain and suffering), I managed to get the two clients to share the server-controlled ball whilst looking and feeling lag free. In reality, only the server knows the true state of the game and position of the ball, but with a small sprinkling of fairy dust you can make it appear that a client is playing with a local ball.

Basically, this is achieved by switching to a local ball whenever the client takes possession. If you don’t do this the ball will feel very laggy when you try to run with it as there is always a delay in what you see coming from the server.

The client and the server each use their own physics engine when kicking the ball. Now, in extreme circumstances this will lead to a desynchronization of the ball position between the client and the server. However for this type of game it is extremely unlikely that there will be enough of a difference for it to be noticeable. Particularly since whenever someone takes possession synchronization is restored.

The client will continue to see the local ball until another player takes possession. At that point, the client will turn off it’s local ball and start viewing the server ball once again. So, when you are out of possession you are seeing what’s actually happening on the server, all be it with a slight delay which will be approximately as long as your ping to the server.

Here’s a short video of this in action.

I have finally decided to revisit this game with the intention of making it multiplayer. I will be using the fairly new Photon Fusion multiplayer add-on for Unity as it is the most recent and supports a dedicated server host which is what I’m looking for.

I’m re-writing the code from scratch since multiplayer is a whole different ball game (pun intended) from an offline game. However, I will certainly be learning a lot from my previous offline version and will reuse most of the graphics and 3D models.

The first major hurdle in creating a game like this is to try to hide the lag as much as possible. Lag is obviously unavoidable in a server-based game as it takes time for what’s on the server to reach each player. So, the trick is to make it feel like a local game when it really isn’t.

The game is server authoritative, so the server always contains the correct situation in the game, so the true ball position is on the server. If you just show the server ball position to the player it will feel very laggy and unresponsive. So, to get around this I created a local ball which the player uses and sees which mimics the actual server version. This removes any sense of lag when controlling the ball. The actual collisions with the ball still happen on the server and are reported to the clients.

Here’s a quick look at how my initial code looks. I’m running two clients side by side. They are both connected to the dedicated server which isn’t shown. As you can see the local controls (player on the right) are very responsive. Player two is just observing him. If you are very perceptive you will see that player two’s view is ever so slightly behind player one as he is seeing the game as reported by the server.

I wanted to add some match notifications, similar in style to the ones in Football Superstars. Now, when it’s a goal, goal kick, kick-in etc, a message will flash on to the screen indicating what has happened. This makes it clearer to the user about what is happening in the game.

I also added kick-in functionality. This meant some further tweaks to the AI, so I also added in some AI passing while I was at it. It’s a bit haphazard at the moment but they at least attempt to pass the ball rather than just running towards the goal every time when in possession.

To take the overall gameplay a bit further I added a match clock and half-time. These are controlled by a ‘Referee’ class. The match clock is now displayed on the screen above the score. Once it reaches 0:00 the referee will blow for half-time and all the players will automatically leave the pitch.

I still haven’t taught the AI how to kick-off, so I take all the restarts in the game. The video below shows all this in action. It’s a full, unedited, 3-minute match half.

For this release I have added some sound effects which I got for free from Videvo. There’s applause for when the players enter the pitch followed by a general looping crowd sound effect. There’s also effects for kicking the ball, the ball bouncing and hitting the back of the net. The referee will blow his whistle at appropriate times.

I’ve also added a gaming sequence. It will now start with the players entering the pitch and moving to their starting positions. The AI players will also return to their starting position after a goal is scored. The player will lose control of his character whilst he automatically returns to the centre circle. The player always kicks off at the moment as I haven’t taught the AI how to do it yet!

I made some additions to the AI but they are still pretty basic. The AI has the ability to pass, but I haven’t coded any logic for it yet. I’ve also disabled tackling for now as it’s too buggy.

I created some new stadium seating in Blender and hung some images of Serene (former Football Superstars team) players on the wall as an example of a themed arena.

Here’s the latest video.

I wanted to add an animation to pass the ball backwards using a back-heel. Unfortunately, there was no animation for this on the Mixamo website so I had to create my own. I don’t have much experience in creating animations but I know how to use the tools in Blender. I took some screenshots from a YouTube video of Ronaldo doing a back-heel and used these as a basis for the animation frames. The results actually isn’t too bad!

Since I was working in Blender I took the opportunity to update the indoor Futsal Arena as well. I added some colours to the goalkeeper areas, some Futsal logos on the pitch and my own Virtual Football League logo to the centre circle. I also hung some country flags on the walls to make the arena look a bit more interesting.

As a side note, the VFL was a league I created for the original Football Superstars game, but it only ran for one season as the Football Superstars developers finally started an official league themselves shortly after offering in-game credits as prizes.