Jump to content


Photo
- - - - -

Dialogue Box Engine (in-line text formatting, .csv loading, tweening, portraits)


  • Please log in to reply
19 replies to this topic

#1 Juju

Juju

    GMC Member

  • GMC Member
  • 1109 posts
  • Version:Unknown

Posted 23 December 2015 - 03:53 AM

  • Title: Juju's Text Engine v4 "Frilly Knickers"
  • Description: A comprehensive text-drawing and dialogue box system
  • GM Version: GMS
  • File type: .gmz
  • File size: 310kb
  • File link: Get the .gmz here
  • Required Extensions: None
  • Required DLLs: None
 
Doing dialogue boxes in GM can be a bit of a pain. Lots of hard coding, lots of faffing around trying to get antiquated engines to talk to each other properly, lots of time spent doing things other than writing the dialogue and making the game. This is version 4 of this engine, the previous being v3 Fancy Pants.
 
Frilly Knickers removes all that hard coding and replaces it with a comprehensive formatting system and a dialogue database that is lightning fast to prototype and is easily implemented into any game project. There are a lot of features here - get comfy:
 
  1. In-line text formatting using developer-customisable styles. In a similar fashion to reddit/BBCode/HTML formatting, you can use tags in the middle of strings to change how your text looks. Want to highlight a special quest object in your text? Easy. Want to emphasise *how sarcastic* your bard character is? Easy.
  2. Typewriter character-by-character text reveal like old-school console games. How fast text is revealed is flexible (including more than one character per step) and you can customise exactly what sound is played as text is revealed. Text reveal is skippable by press any key on the keyboard, clicking the mouse, or pressing a button on a gamepad - this, of course, is also customisable.
  3. Autosize text to fit text boxes. This works alongside the typewriter mechanism and in-line formatting and makes putting text into your game that little bit easier.
  4. Text can be stored in a .csv file and recalled at will. This is fantastic for localisation and very useful for spell checking and find-replace across the entirety of your game's text content.
  5. Easy-to-use dialogue box engine that reads from a .csv file. All dialogue options are also defined in the .csv file and allow for an entire dialogue tree to be created with the minimum of friction.
  6. Comes with a tidy little tweening system that allow for text boxes and text itself (and any object at all) to be smoothly tweened in-game.
  7. In-line script execution allows for specific developer customisable code to be executed as text is revealed. This means you can create interesting special effects that are created at certain points during text reveal.
  8. Native support for portraits and in-line manipulation of portraits sprites and images. Portrait sprites can be animated and you can add all kinds of facial expressions to add extra weight to your writing.
 
I've probably forgotten some stuff - This is a feature-packed engine! There's a lot of places you can jump in and edit. The documentation is exhaustive and gives you all the information you need to bend this engine into a shape that fits to your purposes. Behold my programmer art. Everything here can be swapped out for something else.
 
Enjoy! Tweet @jujuadams if you make anything with it.

Edited by Juju, 13 March 2016 - 12:33 PM.

  • 1

Come find me @jujuadams

 

Try out my open-source 3D globe terrain generator!

How about a fancy-pants text engine?

Adding dialogue boxes to your games is now super easy. Also localisation. Also tweening.


#2 chance

chance

    GMC Member

  • Global Moderators
  • 8762 posts
  • Version:GM:Studio

Posted 23 December 2015 - 12:08 PM

Juju, are you sure this is the correct link?  The .gmz file is named "fancy pants text v3" -- the same as the previous version.   It looks like the same file from the earlier example.

 

Once we're sure the download is correct, I'll move this back to Tutorials.  And we can remove the previous version if you want.

 

EDIT:  OK, you fixed it, so back to tutorials.  I'll check this out and comment shortly.


  • 0

#3 Burasto_267964

Burasto_267964

    GMC Member

  • New Member
  • 4 posts
  • Version:GM:Studio

Posted 01 January 2016 - 06:24 AM

Hey, thank you very, very much for making this great engine! This is the best one I have seen (and I have seen quite a few dialogue engines). I made an account just to thank you, haha.
 
Keep up the good work!

Edited by Burasto_267964, 01 January 2016 - 05:05 PM.

  • 0

#4 Juju

Juju

    GMC Member

  • GMC Member
  • 1109 posts
  • Version:Unknown

Posted 01 January 2016 - 05:18 PM

That's quite alright  ^_^

 

I'm working on a GUI engine next that generalises most of the functionality that's here.


  • 0

Come find me @jujuadams

 

Try out my open-source 3D globe terrain generator!

How about a fancy-pants text engine?

Adding dialogue boxes to your games is now super easy. Also localisation. Also tweening.


#5 Burasto_267964

Burasto_267964

    GMC Member

  • New Member
  • 4 posts
  • Version:GM:Studio

Posted 01 January 2016 - 08:05 PM

I have a question, though, if that's not too much trouble. I'm currently using views (with a player controller, npcs, etc), so when I move around a room and a dialog box comes up, it sticks to the position relative to the room, rather than the view. I replaced some values into view_xview and view_yview, but so far only the dialogue box (not the text or the options or the portraits) keeps its position relative to the view.

 

(For reference, I'm going for the typical visual novel layout, with the dialogue box using the lower 1/3 of the screen)

 

Thanks for your time and good look with that new GUI engine!


Edited by Burasto_267964, 01 January 2016 - 08:06 PM.

  • 0

#6 Juju

Juju

    GMC Member

  • GMC Member
  • 1109 posts
  • Version:Unknown

Posted 01 January 2016 - 08:26 PM

Ah, I see.

 

You'll probably want to swap all the Draw events over to Draw GUI events. Alternatively, and this will take a bit of time, you can find all the draw commands and add { +view_xview, +view_yview } to the position.

 

Alternatively alternatively, you can use a d3d_transform on all the GUI components to bulk translate them to the correct position. Not... 100% sure on how best to set that up but might save you a few headaches if you crack it.

 

This is a big oversight on my part and I apologise for that. I'll add in native functionality to follow views into v5.


  • 0

Come find me @jujuadams

 

Try out my open-source 3D globe terrain generator!

How about a fancy-pants text engine?

Adding dialogue boxes to your games is now super easy. Also localisation. Also tweening.


#7 YanBG

YanBG

    GMC Member

  • GMC Member
  • 217 posts
  • Version:GM:Studio

Posted 10 January 2016 - 12:35 AM

Hey, can you show screenshots, how it looks?


  • 0

#8 Juju

Juju

    GMC Member

  • GMC Member
  • 1109 posts
  • Version:Unknown

Posted 10 January 2016 - 02:58 AM

The engine isn't showy, it's a deeply functional system with customisability in mind.

 

That having been said, behold my programmer art. Everything here can be swapped out for something else. The engine provides the backend formatting for text and interactivity (including gamepad control) for dialogue options.


  • 0

Come find me @jujuadams

 

Try out my open-source 3D globe terrain generator!

How about a fancy-pants text engine?

Adding dialogue boxes to your games is now super easy. Also localisation. Also tweening.


#9 hoyakim

hoyakim

    GMC Member

  • New Member
  • 1 posts
  • Version:GM:Studio

Posted 03 February 2016 - 04:10 PM

I want to write a different language. For example, Japanese or Korean.
I tried the font broken. CSV or Unicode Is it a problem?
What should I do.

Edited by hoyakim, 03 February 2016 - 04:11 PM.

  • 0

#10 Juju

Juju

    GMC Member

  • GMC Member
  • 1109 posts
  • Version:Unknown

Posted 03 February 2016 - 04:46 PM

GameMaker apparently doesn't support "RTL" encoding. Try using "LTR" encoding.

 

Edit: It appears that Korean breaks this forum's text editor as well. Not amusing.


Edited by Juju, 03 February 2016 - 04:49 PM.

  • 0

Come find me @jujuadams

 

Try out my open-source 3D globe terrain generator!

How about a fancy-pants text engine?

Adding dialogue boxes to your games is now super easy. Also localisation. Also tweening.


#11 Ruub

Ruub

    Finn The Human

  • GMC Member
  • 762 posts
  • Version:GM:Studio

Posted 15 February 2016 - 01:39 PM

I downloaded the .exe and my first impression is *blown away*

 

Your 3d globe is amazing so I'll just assume this got plenty of horse power too:D

 

ps: The twitter link opened a .doc + error for me (?!).


Edited by Ruub, 15 February 2016 - 01:43 PM.

  • 0

#12 Juju

Juju

    GMC Member

  • GMC Member
  • 1109 posts
  • Version:Unknown

Posted 15 February 2016 - 03:13 PM

Oh, that probably means the url_open function isn't pointing towards a browser on your system. Could you check that function in a test project for me?

 

(By the way @jujuadams :D)


Edited by Juju, 15 February 2016 - 03:14 PM.

  • 0

Come find me @jujuadams

 

Try out my open-source 3D globe terrain generator!

How about a fancy-pants text engine?

Adding dialogue boxes to your games is now super easy. Also localisation. Also tweening.


#13 Ruub

Ruub

    Finn The Human

  • GMC Member
  • 762 posts
  • Version:GM:Studio

Posted 15 February 2016 - 09:41 PM

Still happens, I've found a topic where it says the stable version has this bug that does that. Nothing to worry :) 


  • 0

#14 Juju

Juju

    GMC Member

  • GMC Member
  • 1109 posts
  • Version:Unknown

Posted 16 February 2016 - 01:11 AM

Ah! I built the .exe in 1.4.1567 so that'd explain that.


  • 0

Come find me @jujuadams

 

Try out my open-source 3D globe terrain generator!

How about a fancy-pants text engine?

Adding dialogue boxes to your games is now super easy. Also localisation. Also tweening.


#15 TonyBase

TonyBase

    GMC Member

  • GMC Member
  • 143 posts

Posted 05 March 2016 - 11:01 PM

Is there a way to tell the engine to "hover" the first option by default? I'm trying to set up your engine so that key presses will switch between options and select them. I'm mostly just borrowing from the gamepad code by using gamepadOver. I haven't 100% studied the engine yet and it's a lot of scripts and groups of scripts so it's a bit of a challenge to go through it all and understand it.

 

Edit: Figured it out, and I usually share my results, but it would be better if Juju handled it, as he's the better programmer. My fix is very "quick fix" and it would not be helpful to share my fast-and-dirty noob code here hahaha. Definitely add the feature in your release version 5, man!

 

Yeah, actually, I have to add this. Juju? I thought to add text boxes to my game and the first thought I had was how to actually *make* a textbox engine *really good* and give it lots of features. "How complex and full-featured can text boxes get? What does an *awesome* textbox engine look like?" Because when I thought of textboxes, I imagined a parallelogram with text and you can continue. But dude, you spent a very impressive amount of time taking it further and further. I can manipulate my entire game using referenced scripts *on the fly,* literally with a single word, have dramatic delays, change character portrait expressions, like, wow, man, this is so good. I really appreciate this because I have all of these features right away, and I learned quite a lot of what you can do with textboxes, something that I don't see a lot of conversations about, and I have watched a lot of Youtube videos about game design in general! Kudos to you, Juju, this is a great engine. Please keep going!


Edited by TonyBase, 06 March 2016 - 04:02 AM.

  • 2

#16 Juju

Juju

    GMC Member

  • GMC Member
  • 1109 posts
  • Version:Unknown

Posted 06 March 2016 - 08:31 PM

Please do share your innovations - I learnt from other people and there's no reason that would change now  ;)


  • 0

Come find me @jujuadams

 

Try out my open-source 3D globe terrain generator!

How about a fancy-pants text engine?

Adding dialogue boxes to your games is now super easy. Also localisation. Also tweening.


#17 radioactivetoy

radioactivetoy

    GMC Member

  • New Member
  • 2 posts
  • Version:GM:Studio

Posted 13 March 2016 - 12:31 PM

Hello Juju, thanks for the great engine. I'm trying to use it with my game and being such a programming noob I'm still overwhelmed by its complexity, but I'm learning something new everyday ^_^ . I've been writing some code so I can get the drawn text to scale up/down with resolution so that the text is always fitting the screen proportionately. I threw this chunk of code inside scr_juju_text_draw_event:

 

var xScaleFactor, yScaleFactor; 


//for 16:10 
if display_get_gui_width() / display_get_gui_height() = 1.6
    {        
        xScaleFactor = display_get_gui_width() / 1920;
        yScaleFactor = display_get_gui_height() / 1200;      
    }


// for 4:3 
else if display_get_gui_width() / display_get_gui_height() = 1.33
    {
        xScaleFactor = display_get_gui_width() / 2048;
        yScaleFactor = display_get_gui_height() / 1536;       
    }     


//for 16:9    
else
    {
        xScaleFactor = display_get_gui_width() / 1920;
        yScaleFactor = display_get_gui_height() / 1080;        
    }

and changed the draw_text line into 

draw_text_transformed( x + xx, round( y + yy + textLineSpacing * 0.5 ), string_copy( str, 1, textPos - textSegmentPos ), xScaleFactor, yScaleFactor, 0 );

So the text tag being drawn is now scaled, but everytime it jumps to a new line inside the dialogue box, the previously drawn line gets scaled back to the original size. I can't wrap my head around this, think you can give me some clues? Thanks


  • 0

#18 Juju

Juju

    GMC Member

  • GMC Member
  • 1109 posts
  • Version:Unknown

Posted 13 March 2016 - 12:35 PM

You need to change line 29 as well as line 40.


  • 0

Come find me @jujuadams

 

Try out my open-source 3D globe terrain generator!

How about a fancy-pants text engine?

Adding dialogue boxes to your games is now super easy. Also localisation. Also tweening.


#19 radioactivetoy

radioactivetoy

    GMC Member

  • New Member
  • 2 posts
  • Version:GM:Studio

Posted 13 March 2016 - 01:35 PM

Right, I must be blind or something. On a different note, is there a way I can set a different option spacing between the dialogue text and the first dialogue option and between dialogue options themselves? I'd also like the dialogue text to appear in typewriter mode and the dialogue options to be drawn instantly afterwards, could you point me in the right direction? Thanks again :wink:


  • 0

#20 TonyBase

TonyBase

    GMC Member

  • GMC Member
  • 143 posts

Posted 21 March 2016 - 01:44 PM

Yeah, scaling is a pretty common request, here. I'm working on a vector game where the camera does some zooming, so I'm trying to set the instances' coordinates to view_xview + (an old variable that basically is just the previous step's ( x - view_xview ) / view_wview ) * view_wview. The text not only needs to change coordinates but also autosize width and general scaling (font size and spacing between lines).** Plus the portraits are somewhat needing to be the same way.

 

Sorry I didn't get back to you on the code. It's a little iffy to remember exactly where I put my code but I basically made my keyboard presses akin to gamepad presses and somewhere in the code set the first child of the dialog options to gamepad_selected or whichever it was. You wouldn't have any trouble implementing it. I'm pretty sure I went to scr_juju_dialogue_populate and just stuffed in a variable.

            if ( prevInst == noone ) {
                optInst.dialoguePrevInst = optInst;
                optInst.gamepadOver = true;
            } else {

No reason to make a second thing for a thing that already works, right? Made a quick script for menu presses.

switch( argument0 )
{
 case 0: { return ( keyboard_check_pressed(kSp) || keyboard_check_pressed(global.kZ) || keyboard_check_pressed(global.kJ) ); break; }
 case 1: { return ( keyboard_check_pressed(global.kUp) || keyboard_check_pressed(global.kW) )
        - ( keyboard_check_pressed(global.kDn) || keyboard_check_pressed(global.kS) ); break; }
 default: break;
}

and uhhhhh I think in the object step code for obj_juju_dialogue_option I commented out the mouse code and added this in its place:

switch( scrGetMenuPress( 1 ) )
      {
       case 0: default: { break; }
       case 1:  { gamepadOver = false; dialoguePrevInst.gamepadOverEndStep = true;  break; }
       case -1: { gamepadOver = false; dialogueNextInst.gamepadOverEndStep = true;  break; }
      }
      if( scrGetMenuPress( 0 ) ){ scr_juju_dialogue_clicked( id ); }

Sorry man, haha, my code is obnoxious and dirty.

 

** Actually, I'm new to GM:S, isn't there a way to draw these things to be independent of view size??

 

--

 

More on that today: found the Draw GUI event, and for the most part just changing the Dev Editable script scr_juju_dialogue and changing the objects to having Draw GUI events pretty much works with a little elbow grease, but the portraits are represented by objects without draw GUI events. I could just use the engine's scripting power to manipulate a variable and have it switch in the GUI event, but the !scr commands would be lost. Hmm...

 

--

 

Got it. I'm laughably cheating now. I am not even trying to be professional, now, I'm just all over the place just no clue what is up or down. I created a blank Draw event (yes, seriously) so that the sprites wouldn't be drawn under the Draw GUI event. Then, in the newly created Draw GUI event for the portrait objects:

draw_set_alpha(image_alpha);
draw_sprite( sprite_index, image_index, view_xport[0] + myx, view_yport[0] + myy );
draw_set_alpha( 1 );

Yeah, it's pretty hilarious. 10% of the time when I'm coding really is this, just, "Oh hell, no no nNO NO NO NO" ahahaha

 

My create event looks like this:

myx = x - view_xview[0];
myy = y - view_yview[0];
image_alpha = 0;
image_speed = 0;
sprite_index = spr_portrait_green;

And then I squirt this little nugget into the step event:

myx += sign(x - xprevious);

Obviously do the same if you're gonna have portraits ascending in from the heavens but yeah.


Edited by TonyBase, 24 March 2016 - 01:28 PM.

  • 0