Monday 25 July 2011

Dialogue system [COMPLETE]

So yeah, I've finished the dialogue system yesterday.
(I wanted to post this yesterday, but Past Sins as well as Antipodes were updated and I couldn't keep myself from reading the new chapters!)

Anyway, on to the interesting part of the post: Dialogue!

I posted some previews a few days ago and after some useful comments I've decided to add faded cutiemarks to the background to make it look better. Thanks Crystopher!

Some in-game screenshots and code after the break!



Features:

- Background colour will match the personality of the pony
- Three dots (...) in the corner indicate follow-up text
- Cutiemarks to make the background look less dull
- Typewriter effect on the text to make it look less static and boring


In-game screenshots:

Spitfire tutorial preview:







Random Conversation:






Some code:

(Boring stuff if you're not interested in how the game is made)

Well, I've never actually made a dialogue system before and I couldn't really find a coded example on the internet. So I made my own system.

First, I'd like to get something off my chest.

*clears throat*
<rant> FLASH! WHY U NO HAVE METHOD OVERLOADING?! </rant>

For those of you who don't know what method overloading is:
http://en.wikipedia.org/wiki/Method_overloading

Anyway, that means I had to create a work-around. So that's the reason it took me so long to create the dialogue system.

And for the code, it's quite simple actually.
(5 lines of code to create the dialogue as seen on the in-game screenshots)
var dialoguepreview:Dialogue = new Dialogue("[TITLE]","[TEXT]",0xffffff,0x000000,"",null);
dialoguepreview.addDialoguePony(new TwilightSparkle, 'What does this mean? "Pillow Fight"?',"twilightsparkle00.png");
dialoguepreview.addDialoguePony(new Rarity, "Oh please. I am not at all interested in participating in something so crude.", "rarity00.png");
dialoguepreview.addDialogue("", "*Rarity hit by Applejack's pillow*", 0xFFFFFF, 0x000000, null, null);
dialoguepreview.addDialoguePony(new Rarity, "OH! IT! IS! ON!", "rarity_itison.png");
First you create your dialogue variable with some random values. (that's due to the work-around)
And then you can easily add a next dialogue to the whole conversation by simply using the function addDialogue() or addDialoguePony()

Where's the magic? In addDialoguePony().

This simple method allows me to add a new dialogue that comes from a certain pony.

For example:
dialoguepreview.addDialoguePony(new Rarity, "OH! IT! IS! ON!", "rarity_itison.png");
This function allows me to create a new dialogue for Rarity. She will say "OH! IT! IS! ON!" with rarity_itison.png as the image in the dialogue.

Behind the scenes, my Dialogue class will map Rarity with a background colour, a font colour, a cutiemark, ...

You can also see that I load the reaction images separately, they are not embedded in the flash file. This is because I want to keep the flash file as small as possible. And you're able to edit the reaction images without always having to re-upload the flash file.

You can also create your own custom dialogue with the addDialogue() method.

For Example:
dialoguepreview.addDialogue("TITLE", "TEXT", BACKGROUND COLOUR, FONT COLOUR, "REACTION IMAGE", CUTIEMARK);
Here you can specify the title, text, background colour, font colour, reaction image and the cutiemark.

This example is used for the *Rarity hit by Applejack's pillow* dialogue.

One last thing! Credits for the typewriter effect goes to:
http://www.prosoxi.com/2010/05/28/flash-as3-typewriter-effect/

I hope this has been somewhat interesting.

Your Brony,
Michiel De Mey

3 comments:

  1. That was really interesting and the dialogue looks great so far! (I love the OHMYGOSH with Rainbow Dash!)Now that I see how complicated certain aspects are, I appreciate your work even more. Keep it up!

    ReplyDelete
  2. Cool! (My name is big and bold! Double cool)!

    It looks very spiffy, nice and smooth! I like the coding. It's a bit bulkier (would drive me crazy typing all that out every time!), but that means it's going to be very accessible to anyone who would want to make a level. Very cool :)

    On the other hand, I'm really only familiar with Perl, maybe it just spoiled me, haha.

    ReplyDelete
  3. Well, you are correct about the code being a bit "bulky". But it does allow others to create their own dialogue easily.

    I've thought about adding support to load and read .xml files to create the dialogue. But that's something I can add later.

    ReplyDelete