How I used Fungus (How to make a chat messenger in Unity!)

The game I’ve recently been developing, known as ‘Seen’, follows the same general theme as a few of my other games: narrative. As outlined earlier in my ‘An Analysis of Emily is Away’ blog, the game will be themed around Facebook’s web app and the messaging system they use. The messaging system is relevant to the game as it’s designed off of a personal experience of mine, more specifically a romantic interested I was interested in but the feeling wasn’t mutual. So to simulate how I felt (not literally, but with an abstract nature), I wouldn’t have the time to script an entire chat system similar to Facebook’s, so this is why I downloaded Fungus: the narrative tool.

Fungus is useful is an incredible amount of ways. It starts off very similar to something that a JRPG offers in regards to dialogue. The big text box pops up and the words slowly fill it with the typical beeping of letters being typed, with the appropriate image of the character or object behind it.

But since I require it for a chat messenger, I had to go beyond what it’s basics are and add in my own features. Here’s a gif of what my final state looks like:

So to achieve this I required Fungus (obviously) and a short script that alters which line the text will be received on depending on who has sent the last message. This gives us the effect shown above where when a reply is given the text will relocate upwards to the textbox directly above it. To download Fungus you can find it on the Unity Asset Store and import it from there, or from their GitHub repository you can find on their website here: 

When you’ve got that installed you’ll want to click ‘tools’ up the top in the Fungus taskbar create Say Dialogue.

From there you’ll want to delete everything but the Say Dialogue and the Storytext and rename them appropriately to what they’re relevant to, I suggest ‘Youtext1 — Youtext5’. Once you’ve done that you’ll need to duplicate the story text four more times so that your end result looks like this (make sure that you’ve dragged the Say Dialogue into a canvas in world space appropriate to the size of the camera’s view and that the Say Dialogue itself is set to world space):

Next, as per seen in the screenshot above, uncheck ‘Say Dialogue (Script)’, ‘Writer (Script)’, ‘Writer Audio (Script), ‘Dialogue Input (Script)’. Now drag them into a personalized chat box you’ve made that’s appropriate to your desired aesthetic and space them out as per the gif below. Before you continue, duplicate the ‘say’ dialogue and rename it to ‘Themtext1 — Themtext5’ or something similar that contrasts from your side of the text, then flip over to the other side so it’s opposite your text. It should look like this:

From there you’ll then need a flowchart and a menu dialogue, they can be found by accessing the toolbar and going tools > Fungus > create > flowchart/menu dialogue.

In the menu dialogue, you must set it to world space, drag it into the canvas and put it in an appropriate space below the renamed Storytexts, feel free to have as many buttons as you want, depending on the number of dialogue choices you want. Crop and resize the buttons to fit into the box and remove their background to make them look a little more natural. Feel free to edit them further but that’s the basis for what we need.

To get the little ‘seen’ text I have, just duplicate the previous ‘Say Dialogue’, rename it to ‘SeenMessage’ or something similar, and delete all the renamed storytexts but one and rename that last one ‘Seentext’. Place that roughly just under where your most recently sent message will be. For the typing indicator, you’ll want to drag the sprite opposite to the seentext just under where their reply will be given.

Now for the flowchart, the engine that makes all this churn together. My example shows three different paths, but you’ll only need one if you’re only having one button to press. So in the taskbar once again, choose tools > Fungus > Flowchart window. Ensure that you have the intended flowchart selected in the hierarchy. You should be confronted by a blank grid-type page with a ‘new block’ like this:

Now to get the option functional and leading to another block you’re going to need to create a new block. To create one, click the plus up the top left beside the ‘scale’ meter. Once a new block has spawned drag it next to the first block you had and rename it something appropriate. In my case I renamed it block 1/1. Now in the ‘Choice Start’ block make the menu command look something similar this. The “Hello!” can be whatever text you want the button to display, it should resemble what the dialogue will actually be when sent. The ‘Target Block’ will be the one you’ve just created. And for the ‘Set Menu Dialogue’ drag the menu dialogue you made earlier into it. Essentially you’re done the first of three blocks.

Something to put before your dialogue menu options is ‘Show Sprite’, drag your typing indicator sprite into it and set it to show as invisible.

The second block, name 1/1, you will want it to be set at ‘none’ for execute on event. Then for the commands, you’ll want all of these:

To go through all of these quickly:

The ‘Set Text’ will be set to the first text box: Youtext1. This will be its target text box. Then change the ‘text’ to “Hello!”, or whatever you’ve chosen.

The ‘Wait’ will be however long you want it to be before your message will be ‘seen’. Set it to whatever you desire.

The ‘Set Text’ here be similar to the first, except it will be set to your ‘Seentext’ and the text will be “Seen”.

The play music is irrelevant to you, that is an exclusive feature to my game.

The play sound is irrelevant to you, that is an exclusive feature to my game.

Then everything from there is irrelevant until you hit ‘call’.

For the ‘Call’, you’re going to need a new block. Follow the same steps to create one as before but this time name it 1/1 R. Then select it as appropriate in the call command where it says ‘Target Block’.

The for third block, block 1/1 R, you will want it to be set at ‘none’ for execute on event. Then for the commands, you’ll want all of these:

The wait will be the amount of time before the ‘typing indicator’ sprite will appear.

‘Show Sprite’ will be the same as the first block but this time set to ‘visible’.

The wait here will be how long it stays visible.

Then the ‘Fade Sprite’ will give it time to fade out, set appropriately.

Then the ‘Show Sprite’ here you will set it back to invisible.

Now the invoke event piece here is one of the most fundamental parts to this entire thing, you will need a script that makes the messages go up the chat windows in an ordered fashion. Here is a screenshot of the entire script, it’s not much to type up:

To use the ‘Invoke Event’ you’re going to need to make an empty gameobject, call it TextSystem (Mine was called TextInterest), then drag the script onto it. Once the script has been dragged into it, you’re going to need to set the Num Of Your Text Boxes, and Num Of Her Text Boxes to 5, then drag the Yourtext1 — Yourtext 5 in order from 1 to 5 and then do the same for hers. Then drag that gameobject *below* where it says ‘Runtime Only’ then click where it will say ‘no function’, choose the bottom option, then the bottom option again. Now you’re done.

Now you MUST create another Set Text and set it to Yourtext1 and you MUST leave it blank. This is what gives us the blank textbox between each of your messages when they send one.

The stop music is only relevant to my game.

The play sound for me is the ‘Facebook receive message sound’. All you do for that is drag the sound file into where it says ‘Sound Clip’.

The next set text is the text you want your response to be, set it to Themtext1.

Then for this Set Text you’ll set the Seentext to blank manually by leaving it blank.

Then the call from here will take you back to the menu dialogue for your next choice provided you want more than one thing to say.

*Note, any other block after this one, even if it is your side, MUST have the exact same invoke method before the Set Text that will display your desired message. This will ensure that the text is spaced correctly between messages.*