Ah there's been quite a few articles here about MooClick. But I couldn't find many showing how to actually make a decent game and stuff - so here we go! Part one of my tutorials.


Introduction
I plan on writing a total of 3 tutorials to help you guys with making an online spiffy game! Part 1 will deal with actually connecting to a server, and making little characters move around and stuff! Parts 2 and 3 will teach you how to make server lists with PHP, and tips of cutting down on lag and making things a little more efficient. For this article, I will be making a mini online game with smiley faces - I suggest you do the same, just as some kind of warm up.


What the hell do you need?
Firstly, start by creating a new game - seeing as this is a practice type thing, make it 320x200 in size. No need to make it really big at the moment is there?

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 - other players are yellow and yourself is orange.

You'll also obviously need the MooClick object. Now, as you may know, finding a dedicated server that is up 24/7 is VERY difficult. So for my articles, we will let people host a server on their PC - and let others join the server via the server list (will be explained in part 2).

Seeing as programming a server list takes ages, for now 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 name - makes life hell of 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. Custom movement is less laggy, and is generally better anyway. Make a top(14x3), left(3x14), right(3x14) and down(14x3) detector

You should have something like this:

Image

(You'll also need string parser 2!)


Preparing your game
Before we start connecting to MooClick and stuff, we need to sort some other stuff out - such as destroying player objects.

+ 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 button is clicked, a server is hosted on the person's computer on port 1203. Port 1203 is usual for games, other ports can probably be used but just stick with 1203. Obviously, we then disable the buttons and edit boxes. 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 themselves) on port 1203. Pretty easy to understand.. I think..


Joining a game
Similar to the above, only we don't need to host the server on their PC for obvious reasons.

+ 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. In part 2 I shall explain ways of getting your app to retrieve the correct IP address (for now, just go to www.ipchicken.com).That's the started stuff over with!


Player is connected
So you're player is connected - there is still plenty of other crap to do, such as signing on and stuff. 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 buggered 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

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 , 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 a 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, you will do later (this will be explained in part 2!)

+ MooClick: Player - On Disconnect
- Restart the application

Simply, if you happen to disconnect from the server, then restart the game.


In Part 2:-
- Creating a decent enough movement engine
- Retrieving usernames of players
- Using text blitter to display names

Part 2 will be up within a week. For now, if you have any questions or if you didn't understand a bloody word, post a comment here please. (Sorry that I ended the article rather bluntly - my hands are hurting).