From start to Finish: Qt & QML Online Multiplayer Game

As a sneak preview, I recorded this video after all the other videos in this course to demonstrate what we will end up with after completing the course

In this section, we'll go over where the inspiration for the game came from and preview the UI Mockup screens that we will be implementing in the course! Complete screens have been attached to this section for download

In this section, we will begin working on our Server side application which is a Qt Console Application that hosts a Web Socket Server via QWebSocketServer. By the end of the section, you will have an application that listens for WebSocket connections, keeps track of client connections, and receives text messages via websockets.

In this section, we will begin working on the Client Application which is a Qt Quick Application. The backend is implemented with Qt/C++ and the front end is done in QML. By the end of this section, you will have a Qt Quick Application that implements a WebSocket in C++ that is accessible via its QML front end. The WebSocket portion will be able to connect to a websocket server and listen/print out text messages that are received from the server.

In this section, we will take our two separate Qt Projects and merge them into one project for better project organization and accessibility. We'll also go over how to modify our Qt Creator environment in order to allow both projects to run concurrently so that we can start testing the Web Socket connection in the next section.

In this section, we will connect our Client Application with our server Application via websockets and test out sending a text message. The web socket text messaging is very important as it is the backbone for this project.

In this section, we will start taking our Figma mockup and develop it in QML. We'll start out with the first screen, which is our MainMenuScreen and show how we take the different elements from the mockup and develop them in QML. We'll also go over how to create a custom button component which will be used throughout our project

In this section, we will continue taking our Figma UI Mockup and creating QML screens from it by implementing the second screen, the Game Select Screen. We'll go over how we can traverse through different QML files in our application by using a QML Loader.

In this section, we will modify our Server's Web Socket to assign unique ID's to new client connections as well as use a QMap in order to keep track of connected clients and their Unique ID's. This will become important later when managing clients from the server application.

In this section we will first create our GameLobbyHandler which for now will hold client ID's that are added to the Game Lobby. We'll do more work on implementing it later on in the course. We also create a MessageProcessHandler in this section that will take websocket messages from our clients and parse/process them.

In this section, we will create a Message Processor for our client in order to start processing and parsing messages that our client application receives from the Server. We will also have the server send our client application the unique ID created (from Lecture 8), process the message via the client's message process handler, and then have our client application store that Unique ID. This will become important later so that he client application can attach it's unique ID to messages that it sends to the server.

In this section, we will implement the code in our Server's Message Processor that will handle parsing of Creating and Joining Game lobbies from our client messages. We also go over how our Server's Game Manager will create a new Game lobby, create and assign the game lobby with a Unique Lobby ID, and then associate the client that created the lobby with the lobby itself.

In this section, we will implement the joining functionality on the Server's Game Manager in order to associate clients with an existing game lobby. We also add the ability to send text messages from the Server's web socket to communicate with our connected client sockets.

In this section, we will first make our Client application automatically join our server when it starts. We'll then implement the code in order for the Client to send requests to the server to Create a Game Lobby or Join an existing Game lobby

In this section, we briefly make a placeholder for our LobbyScreen.qml, then we go into creating a Game Manager for our client side application. The Game manager will act as the main logic controller for our Client application so that the application can react to messages and go to the proper QML screens accordingly. We'll create an intial Q_PROPERTY for use in QML, move the MessageProcessor into the Game Manager, and forward text messages from our client's web socket handler to the Message Process Handler.

In this section, we will go over implementing the Figma UI mockup for our GameLobbyScreen.qml. We'll be creating the major UI elements in QML in this section and then in the next few sections, we'll add the C++ backend functionality and tie it in into the QML.

In this section, we will go over QML ListView and how to implement the current client list in the Game Lobby Screen. In order to support this, we will also add a QStringList Q_PROPERTY within our client's Game Manager and make the necessary changes to our game websocket packets to support a Client requesting to create a new game lobby as well as adding a clientList.

In this section, we will take our Figma UI Mockup and develop the JoinLobbyScreen.qml. This screen will be used in order for clients to enter in an existing lobby's game code so that they can join the game.

In this section, we will add the "business logic" behind allowing a client to join an existing game lobby in both the C++ and QML. By the end of this video, the client applications will be able create a game lobby and join a game lobby, and the server will notify all clients in a lobby when a new client joins, which the client will show within its game lobby list.

In this section, we'll implement the text messaging within a Game Lobby. While implementing this, we'll run into some common pitfalls, bugs, mistakes, etc. and how we can follow our application debugs to track down issues within our code. By the end of this video, clients will be able to send messages within a lobby and see messages from other clients in the same lobby. Buckle up, this one will be a doosie!

In this section, we'll go ahead an implement the Ready button within our Game Lobby. By the end of this section, clients will see whenever a client hits ready indicating they're ready to play!

In this section, we'll implement the logic behind starting a game when all users in a Game Lobby have hit ready to play.

In this section, we'll implement our DoodleScreen.qml and demonstrate how we can use the QML Canvas component to draw doodles!

In this section, we will go over how to save our QML Canvas to an image file, then construct a packet containing the doodle to send to the game server

In this section, we'll go over the first part of our server application handling the Doodle data packets and begin work around handling when our Game Lobby Server receives clients from all participants.

In this section, we'll make our GameLobbyServer implement the logic on how to distribute doodles to other players, select a random drawing word, and construct the packet to send to our clients.

In this section, we'll implement the required code for our Client Application to receive the distributed doodles and drawing instruction from the Server Application.

In this video, we'll go ahead and implement the Drawing Instruction Screen, which loads the doodle and drawing instruction by the server onto a canvas so the player can complete the drawing!

In this section, we'll implement sending player drawings (similar to doodles) to our server and what happens when the server receives all drawings from clients within a game lobby.

In this section, we'll go over how to implement the Voting screen portion of our UI!

In this section, we'll implement the final QML screen, the winnerscreen.qml. We'll try it out a few times and fix a couple bugs that show up, and wrap it all up! Check the resources here and there should be a zip containing the entire source for this course. Please reach out to me if you have any issues!