Ellie Jane

Veteran
Veteran
Joined
Mar 17, 2012
Messages
762
Reaction score
1,514
First Language
English (UK)
Primarily Uses
RMMV

In-Game IRC Chat


 


Introduction


This tutorial is to explain a concept, rather than providing all of the coding for you. It is aimed at experienced users who have knowledge of Javascript and IRC chat and wish to know how to implement the latter within their game.


 


What is it?


IRC, Internet Relay Chat, is the standard protocol for Internet chat rooms.


Why would I want it?


If you are building an MMORPG or other online game you may wish to consider adding some form of chat interface. By integrating IRC you embed a standardised tool, and one which you can use an external client to connect to, so that your player moderators have a much better interface to work with and don't even have to be in the game.


Requirements


You need a server that will allow you to host IRC bots.


You need to be running in a web browser.


You need a chat server to connect to; there are thousands across the web and that's outside the remit of this tutorial. They must however have webirc set up on their end.


Step One: Set up your frames


You need an iFrame, positioned above the game window, where you want the chat box to be. You can use Javascript to manipulate this iFrame later so don't worry about it being a fixed blob.


You can use my tutorial on DOM elements here:




Step Two: Set up KiwiIRC


KiwiIRC is a javascript based client, which is what we need. More importantly it is open source. It needs to be set up on a web server, so make sure your web host allows IRC bots, otherwise you will end up in a heap of kobold.


Here is the guide I used:


https://github.com/KeiroD/furryavalon/wiki/Quickly-set-up-KiwiIRC


Step Three: Test KiwiIRC


Your IRC client should now work at http://your-website:7778


Step Four: Skin your IRC client


You will want to edit the theme files within kiwiIRC, to remove much of the content.


Here's a basic set up:


#kiwi .toolbar {
display: none; !important;
}

#kiwi .right_bar {
display: none; !important;
}

#kiwi .nick {
display: none; !important;
}

#kiwi .memberlists_resize_handle {
display: none; !important;
}

#kiwi .input_wrap {
display: none; !important;
}

#kiwi .input_wrap {
left: 7px; !important;
}

#kiwi .panels {
top: 0px !important;
right: 0px !important;
}


Basically what we are doing is hiding anything which lets us change channel, anything that is unnecessary, because we only have a small space to work with. We whittle it down until we just have a chat box and an input box.


Step Four: add this plugin (to KiwiiRC)


The following plugin merely takes you straight into chat instead of loading the server selection screen.


<script>$('.server_details button').click();</script>.


Step Five: Set up your iFrame


You will want to change the src of the iFrame using Javascript from inside your game once you know the player's name.


You will want to set the src to: http://your-website:7778?nick=%%%%


Where %%%% is their name.


Step Six: Set up your channel


Register for channel services and generally set up your channel as you like it.


Step Seven: Continue to restyle your chat box until it fits your game


As it stands I am left with this.


BWcUEE5.png



As a proof of concept for this tutorial, that's fine. It works and all.


But with a bit of work it can quite easily be made to look like this:


WJDifkw.png



I just need to do the, er, bit of work. But that's styling, which is up to you and unique to your game.


Step Eight: credit and link to KiwiIRC


As I removed the toolbar which contains the link to KiwiIRC, it would be nice to properly credit them and add a link to their website, and then to donate to their funds.


Considerations


IRC nicknames are changeable, so you will want a server with NickServ services enabled.


You could get players to authenticate themselves, or you could do it for them, but you would need their password in plain text for that, which is a no no.


If your player disconnects dirtily they will still be ghosted on the server so will have to pick a new nickname.


Always have permission of the IRC network to open a channel there, and always make sure your web host is happy running an IRC bot.
 

Skunk

Melody Master
Veteran
Joined
Mar 2, 2013
Messages
1,081
Reaction score
416
First Language
English/Slavic
Primarily Uses
RMMV
How has no one commented on this yet, this is amazing!


I didn't even know you could create an MMO style game with rpg maker... I thought it was strictly standalone.
 

??????

Diabolical Codemaster
Veteran
Joined
May 11, 2012
Messages
6,548
Reaction score
3,304
First Language
Binary
Primarily Uses
RMMZ
Probably just as easy to use node.js socket.io. I actually left a post in some request thread somewhere a while back with code that basically does this.


Additionally, on my github there is a barebones node.js, socket.io chat application. It would be VERY easy to use that, upload to heroku or openshift, and then within the iframe in game set the src to the webapp (heroku/openshit ip).


But yea, nice tutorial yo. :D
 

Latest Threads

Latest Profile Posts

Zaj
Hey morning all! I got another quick question..I just switched to RMMZ from VX Ace..so I am wondering why default scripts(is that how u call it) of VXAce is available, but not in MZ's case? How do I figure out ahh I mean could you show me
Sometimes im the biggest fool alive... Ah well, ce la vie
The worst feeling in the world is going for a walk on a nice summer day, seeing an ice cream truck, and realizing you don't have any money with you :(
Mike running through an area that's influenced by his thoughts, thus his drawings are infused into the land.
We're playing Omori by OMOCAT starting at 2pm est :D

Forum statistics

Threads
111,343
Messages
1,060,331
Members
144,669
Latest member
kINGFreak13
Top