Making a Game with MooClick

by Flava

Introduction

So you want to make your very own online game? Well, with Multimedia Fusion 2 you can do just that. MMF2 comes with a nifty little extension called MooClick. This extension allows you to host or join a server, and then send and receive messages to/from that server (or to/from the players joined to that server). Using these simple baselines, we can create our very own online game. This tutorial will cover the basics - we will create a small little play area in which people can move around.

What objects do I need?

Firstly, start by creating a new game - seeing as this is a practice and your first time making an online game, make it 320x200 in size. There is no need to make it really big at the moment. Now - we're going to need two objects. One that represents yourself, and one that represents another player. I've drawn two smiley faces 16x16. The player of the user will be orange, while the players of other users will be yellow. This is just to make things less confusing for yourself. You'll also obviously need the MooClick object. Now, as you may know, finding a dedicated server that is up 24/7 can be very difficult. So for my articles, we will let people host a server on their PC - and let others join the server via their IP number. Tip: You can find lots of dedicated Moo servers by visiting www.mooserver.com. It's not recommended to use these for this tutorial or for a full online game, but you could use them to practice with later. Seeing as programming a server list can be difficult and require other programming languages, we will just create two edit box objects - one in which you enter the host's IP address, and another for your player name. (Right click these objects and click Name to change the names to something appropriate - makes life a lot easier). Then you're going to need two buttons - a Host button and a Join buttons. These will be explained later in the tutorial Lastly - you will need 4 detectors for your player. These will be used to detect whether your player is colliding with another object. We need to use these collision detectors as we will be creating our own custom movement. Using a built-in MMF2 movement for your online game can work, but it is much easier to create a lag-free movement if your movement is actually created by yourself! Make a top(14x3), left(3x14), right(3x14) and down(14x3) detector like the ones shown below. You should now have something like this:

Preparing your game

Before we start connecting to MooClick and stuff, we need to sort some other stuff out first - such as destroying player objects (as we don't want them appearing at the start of the game, because we don't know whether any players are connected to the server). + Start of frame - Destroy users player - Destroy other users player - String Parser 2: Add delimiter "," Before the player connects - we don't want him/her to be moving around on screen - therefore we need to destroy both the user's smiley, and other user's smiley. We also need to add delimiter of "," to the string parser - which will be explained later!

Hosting a game

Next we need to deal with allowing people to host games on their computers, which other people can join. + Host button clicked - MooClick: Host server on port 1203 - Disable Host and Join button - Dehighlight Username and IP edit boxes - MooClick: Set name to Username edit box - MooClick: Connect to localhost on port 1203 Phew. Okay - firstly, when the host button is clicked, a server is hosted on the person's computer on port 1203. Port 1203 is a usual port for Moo games, other ports can probably be used but just stick with 1203. Obviously, we then disable the buttons and edit boxes as we won't need them after the player has connected to the server. Using MooClick, we then need to connect the player to his/her own server - so we set them a name, and connect to localhost (which connects to their computer) on port 1203. The term localhost refers to the user's own computer system - other players will have to join the host's server through his/her IP address - but the host themselves must join through the "localhost" term.

Joining a game

Similar to the above, only we don't need to host the server on their PC. Instead, we join another person's server by connecting to their IP address on port 1203. + Join button clicked - Disable Host and Join button - Dehighlight Username and IP edit boxes - MooClick: Set name to Username edit box - MooClick: Connect to IP Address edit box on port 1203 Pretty self explanatory really. However, rather than connecting to localhost, we now connect to an IP address. This must be the IP address of a person already hosting a game. You will need the host's IP address in order to connect - tell the host to go to www.ipchicken.com to retrieve their IP address and send it to you (or go there yourself if you're the host).

Player is connected

So you're player is connected - there is still plenty of other stuff to do, such as signing on and other things. I'll explain as we go along! + MooClick: Player - On Connect - Mooclick: Player - Sign on to channel "chat" - String: Set alterable string to "Connecting.." Firstly, when you have connected, we sign the player on to a channel. This is somewhat like a room in a chat room. Kind of. You can basically call the channel whatever you want - for now, call it "chat". If you like, you can create a string to let you know whether your connecting successfully or if you messed something up. + MooClick: Channel - On Sign On - String: Set alterable string to "Signed On" - Create Your Player object at 150,100 - MooClick: Channel - Send Str$( X( "Your Player" ) ) + , + Str$( Y( "Your Player" ) ) on subchannel 0 This is possibly where it gets a little confusing. When the player is signed onto the channel, we first set the string to "Signed On" to let them know. We then create their player (the orange one!) at 150,100 (or any position you want). We then need to send the position of your player to other players who are in the server. We send data to the channel, in the format (X Position),(Y Position). String parser 2 will later split these up with the dilimiter of "," (which you set earlier) so we can set positions of players - more on that later.. We send this data on subchannel 0 - this will be the subchannel that your positions are sent through. + MooClick: User - On user is here - Create Other Player at 150,100 - Set alterable value A of Other Player to PCU_GetID( "MooClick" ) When you join, we need to look for players who are already in the server. If a user is in the server, then an "other player" object is created for them. MooClick assigns an ID number to each player - to make things easier, we set the alterable value A of the other player object to the ID of the player (which is retrieved using PCU_GetID). + MooClick: User - On user joined - Create Other Player at 150,100 - Set alterable value A of Other Player to PCU_GetID( "MooClick" ) - MooClick: Channel - Send Str$( X( "Your Player" ) ) + , + Str$( Y( "Your Player" ) ) on subchannel 0 If a user joins while your in the server, then we create an other player object and set their Value A to their player ID. We also send your position in the format X,Y as before - so that they can see you in the correct position. + MooClick: User - On user left + Value A of Other Player = PCU_GetID( "MooClick" ) - Destroy Other player If a user leaves then we need to find out which object they are. We do this by comparing Value A to a player ID in MooClick. We then destroy that object.

Receiving Data

So you've sent your X and Y positions to other players. But how can we receive this positions and assign them to an object? + MooClick: Player - On Message + P_OnMessage_GetSubchannel( "MooClick" ) = 0 + Value A of Other Player = PCU_GetID( "MooClick" ) - String Parser: Set source string to P_OnMessage_GetText$( "MooClick" ) - Set X position of Other Player to Val( listGetAt$( "String Parser", 1 ) ) - Set Y position of Other Player to Val( listGetAt$( "String Parser", 2 ) ) - Set value B of other player to Val( listGetAt$( "String Parser", 3 ) ) - Set value C of other player to Val( listGetAt$( "String Parser", 4 ) ) Firstly, we need to look for a message. If this message is from subchannel 0, then it is definately somebodies position (as positions are sent through that subchannel). We then again compare Value A to a players ID. If you remember, we sent data in the format X,Y and we added a dilimiter of , at the start of the frame. Therefore the X will be element number 1, and Y position will be element number 2. So we set X pos of other player to element 1, and Y pos to element 2. You must also set Value B and C to elements 3 and 4 - although you have nothing in these elements yet, you will do that later. + MooClick: Player - On Disconnect - Restart the application Simply, if you happen to disconnect from the server, then restart the game.

Making a Game with MooClick - Part 2 >>