We’ve decided that an important feature to have is the ability for players to enter a nickname when they begin play. This feature will be used to enhance the game in two ways:
- I will render the player name just below the ship that they are controlling. This way, players will be able to identify other players while they are playing.
- I will also start keeping track of some basic statistics as players are playing so that I can render a leader board in the UI.
Both of these are very standard features on these types of games so I wanted to get them in. Below are some of the things that need to be done that I had not really considered until getting started. Glad I gave myself a week! :-0
Right now, there is really only one game mode, PLAY. From the exact moment that the page loads in the browser, communication is established with the server and the playerID is requested from the server. I call it playerID but it is really clientID because the player has not even identified themselves yet.
Anyway, at this point the browser starts receiving all updates from the server. So what the player is seeing on their screen is actually the live game being played. They just don’t have a ship yet. Once they hit the Enter button, their ship is created and they are thrown into the fray. Once they die, nothing really changes. The HUD remains the same and they still see the game being played out in real time.
But now I want to build out proper modes for how the UI should behave in three cases:
- START_MODE: This is the default mode the game will be in when first loaded. It is also the mode the game will be in after a player leaves the END_MODE screen.
- PLAY_MODEL: This is the main mode where the player is playing. It begins when the player leaves the start screen and ends when the player dies.
- END_MODE: This is the screen that appears when the player dies. When they leave this screen they go to the start screen.
All of these modes will actually use the same canvas element. I just plan to use a variable to understand what mode the game is currently in and render the UI elements appropriately.
For example, when the player is in START_MODE, the game name, version, social media links, player nickname text box, instructions, etc… will all be visible. And keys will be mapped differently to accommodate being able to type the name in. Once they hit enter, the loading screen elements will fade away as they enter PLAY_MODE. When they die, the landing page elements will fade back in. Except for the name test box. Instead, you will see a brief summary of your game stats. Once you hit enter those will go away and you will se the nickname again.
Rendering the Different Modes
In order to render the different modes, I’ll do one of two things:
- Most likely I’ll just have one canvas and fade the appropriate UI elements in and out when the mode changes.
- The other possibility is that I might have one canvas for each mode use CSS to fade and hide the canvases as needed.
I’ll just have to wait until I start implementing to figure that part out.
Handling Input in Different Modes
Once I have different modes, I’ll need to update the keyboard event handlers because the same key might mean different things based on the current mode. For example, “W” means “Fire Main Thruster” in PLAY_MODE but just means “W” in START_MODE when the player has the option to type their nickname into the input box.
The Input Box
It turns out that as simple as this sounds, it is actually relatively complex. Because to do this all in canvas, you literally have to draw the box, the cursor and text as it is being typed. You also have to reposition the cursor as it is being moved and make it blink. Basically, it turns out that just using the “input” in HTML actually does a lot for you.
Now, using a standard html input element IS an option. I have code examples on how to create the element and then use CSS to position it above the canvas in the proper position over the canvas.
However, I wanted to take a crack at doing it all in native canvas. I think it will look better and I will need to learn this kind of stuff once the ship controls get more complex anyway.
Loading the Nickname
Once I figure out how to render and wire-up the new canvas input control, I still need to do something with the nickname:
- I’ll have to write a new server method that accepts a nickname for the player
- Save the nickname on the server, probably in the existing player array
- Add the nickname to the game updates that are sent down to the clients
Rendering the Nickname
So, with all the that in place, I will still need to actually render the nicknames for all the ships in the game. In order to do that, I’ll need to makes sure that the player array that comes down in the updates does in fact associate players to ships on the object array. I’m assuming it does.
Then I just need to update the rendering code for ships to render the name in text just below the ship. Will probably have to experiment a fair amount to get that right!
Also, I’ll probably just always render bot controlled ships with the name “Bot” or something like that.