Fast-paced online multiplayer combat!
UPDATE 1: The basics
Here’s the login screen for Circles. It’s pretty basic but there’s no need to over-complicate it. You have a username textfield and password textfield to enter your credentials. At the bottom there’s a server status indicator that does indeed work. It will read “Server Is Offline” if the client was unable to establish a connection to the server.
After logging in successfully, you are met with the room selection screen. Here you will see the list of currently available rooms to join. With each room, you can see the title of the room, the player who created it, whether or not there is a password requirement to join the room, the current number of players in the room and, finally, the capacity of players the room can hold.
After pressing OK, I am fully inside a room. At the top right, you’ll see basic debugging information including my player ID, radius, position and velocity. This will obviously be removed upon release.
That blue circle is me. Pressing the arrow keys will move me within the boundaries of the screen. The bottom is my UI. For now, it only has my name on the left and my HP bar on the right. Pretty basic for now.
Now comes the fun part. Another player, Billy, has joined my room! I am given a dialog so I am aware of the newcomer. He gets added to the debugging information on the right as well.
Here is how it looks from each perspective. The client renders itself as a blue circle with no name or HP bar, because your own name and HP bar is at the bottom of your screen, so there is no need to indicate it twice.
As for every other player, they are rendered as a red circle with both their name and HP within that circle. This keeps every other player self-confined and keeps the overall look of the game simple and clean.
Upon exiting the room as Billy, I am thrown back into the room selection screen. However, this time, you can see there is 1 player in “Circles dungeon”, which would be the player named Alan. This is to show that the server state does indeed update itself whenever somebody joins and leaves rooms. Of course, there is still 2 players online since Billy is still online, despite not being in a room.
I’m not too far off from a playable game. For the bare minimum, all I need to implement is working registration and the remaining gameplay mechanics including shooting at enemy circles, killing them and then a respawn system. Once you are able to kill and respawn, the core basics of the game is complete.
Of course, after the basics are working, I can then move on to focus on other things including minimizing the effects of a sub-par internet connection, working more on the UI/how the game looks graphically, adding music/sound effects, and additional features like a chatbox, friend system and player customization functionality.
UPDATE 2: Spawning and shooting
I got a couple more things done. Below is the spawning mechanism. Upon every death, this window appears, allowing you to select a gun or view the players in the room.
The images are left blank for now but that is easy to fill in later. On the bottom you can click on the arrow to view more guns. On the bottom there is the spawning timer. It counts down from 3 with a small white bar increasing from the left to the right. Since you cannot currently spawn, the SPAWN button is in red.
I selected a new gun, the Crucifier, to show the effect of selecting a new gun. After 3 seconds passed, you are able to spawn, hence why the SPAWN button is now green with the text on the left.
Here is the way the Players tab looks like. It’s basically a room scoreboard that displays all the every player’s name, score, kills, assists, deaths and ping. Your own row is highlighted so you know where you are. If the room has more than 6 players, the rest of the players will be on another page.
This is how bullets look. They’re small blue dots for the player who shot it and red dots for the enemy.
More bullets being shot.
You can almost have an entire full match with other players now that you can shoot, kill, switch guns, respawn and check the room’s leaderboard. My next steps are implementing a chat system so players can communicate, add icons to the select a gun screen and adding visible guns to the players. Long term, I need to add support for larger maps and the “create a room” feature.
UPDATE 3: Chatbox, database and the kill feed
In the below screen, you can see some more of the game’s features. On the right, you can see the stats for that specific player. Various different pieces of information are shown. Rank is the status that the player has achieved. The higher your level is, the better your rank. Your level is determined by your score. The higher your score, the higher your level. In addition, there is the usual kills, assists, deaths and the kill/death ratio.
Here we have the chatbox. It’s simple, transparent, and works great. You press enter or click to activate it, and press enter to send your message. Not much more to say about this.
Here’s where it gets more interesting. I’ve added special packets that correspond to the room’s “kill feed”. Basically it just tells the entire room whenever one person kills another. In this case, player Alan killed player Bobby and despite getting the same information, the client makes the distinction between the two and displays a separate message that makes sense.
I added a third client, player Jimmy. As expected, all 3 clients received the same packet but displayed the correct message.
Lastly, the chatbox has a neat way to removing old messages. Instead of just expiring, they slowly fade out. It’s a nice effect. The entire text was “This is to test the transparency of messages after an extended period of time” and I let the beginning fade to demonstrate the effect.
I finally moved away from hard-coded values. Everything you see now has been loaded from a database. I’m using SQLite because I felt MySQL would be overkill for something that won’t require many queries. It only establishes a connection to the database upon logging in and exiting a room. Below you can see what data I plan to keep and maintain in the database.
UPDATE 4: UI overhaul, new info, GameMasters
This update was mostly visual. Not too much changed for the login screen though. Some of the text was made to be thinner, and now there’s a green bar under the “Server Is Online” text. That becomes red when it’s not online. At the top right corner you have the client version.
Here is how a new OK dialog looks like. Instead of it being a box, it is now white text over a bar of transparent black. It is a lot more visually appealing and cleaner.
Buttons now are highlighted when the mouse hovers over them. You don’t see it in the picture but my mouse is over the OK button.
Here we have the massively overhauled main menu screen. If you scroll back up, you would see that it was basically redesigned from the ground up.
Speaking of scrolling, the room list now has a scroll bar. The same for the
chatbox when the messages overflow.
At the very top you have a nice scrolling message that displays whatever information the server owner deems is important. For now it only reads “Hello and welcome to Circles!”
Under the gray bar you have the server information. This includes the version that the game is on, what server you are currently connected to, the region in which the server is located, and the number of players currently connected.
Under the golden bar is your stats. This includes your level, kills, deaths, score, assists and ratio. Next to your name is your rank.
Under the red bar is the lobby. This just tells you the number of players logged in but not currently in a game. Everybody who is currently at the main menu, will be part of that lobby. Right now, there is only one client connected so I am the only person in the lobby.
Under the green tab you have the rooms. Even that was visually improved significantly.
Under that you have the nice big blue “Create New Room” button which allows any player to make a custom room to their liking.
Here’s some example text in the main menu chatbox. It’s a nice golden color when it’s your own text, although I might make GMs have their own specialized text color in the future.
Here is the dialog that opens up when you attempt to create a room. You have all the settings needed to create a room. You can name the room, give it a password if desired, and set the maximum size of the room.
Upon pressing OK, you are met with an additional dialog asking you to confirm the creation of the new room.
I am still working on revamping this dialog but this is the slightly improved spawn dialog. It features the same transparent black bar design, with a new SPAWN button that actually changes color. That green bar at the bottom actually changes from red to green over time, notifying you when you may spawn.
The color of the HP was also changed from a harsh green to a nice subtle green.
Back at the main menu, you can see that the server messages carry throughout, as they should. They also include a timestamp now.
Opening another client shows how things change with another player. The lobby populates with that extra client, and both the lobby size and players online increment. When you highlight over other players, you have an option of adding them as a friend or message them directly (also known as whispering). Neither system is coded and I might scrap friends completely, but it’s there for now.
Back in-game, you can see how GMs look to other players. Instead of the usual red and blue, GMs are yellow.
So there you have it. That is update 4 to the game. As you can see, it’s coming along quite nicely.
Coming up next are more changes to the in-game UI, dialogs and gameplay.