01-12-2019, 10:20 AM
Blog: Direction tools for writing in-game dialogue
<div style="margin: 5px 5% 10px 5%;"><img src="http://www.sickgaming.net/blog/wp-content/uploads/2019/01/blog-direction-tools-for-writing-in-game-dialogue.jpg" width="646" height="423" title="" alt="" /></div><div><p><strong><i><small> The following blog post, unless otherwise noted, was written by a member of Gamasutras community.<br />The thoughts and opinions expressed are those of the writer and not Gamasutra or its parent company. </small></i></strong> </p>
<hr />
<p dir="ltr" id="docs-internal-guid-c88ee43b-7fff-7c20-3e7e-563a4cad743f"><span>Following the research done for “</span><a href="https://www.gamasutra.com/blogs/PietroPolsinelli/20170530/298889/Videogame_Dialogues_Writing_Tools_And_Design_Ideas.php"><span>Videogame Dialogues: Writing Tools And Design Ideas</span></a><span>” (a quite popular Gamasutra post on game dialogue’s user interfaces written by <a href="https://twitter.com/demigiant">Daniele Giardini</a> and myself) when I had the chance to get back to developing the narrative part of Football Drama I decided to create further layout tools for the writer, building upon the research done then.</span></p>
<p dir="ltr"><span>One of the observations of the linked post was how mature and feature rich are dialogues in contemporary comics with respect to today’s games, as in the examples below.<img alt="Comic sample layout" height="423" src="http://www.sickgaming.net/blog/wp-content/uploads/2019/01/blog-direction-tools-for-writing-in-game-dialogue.jpg" width="646" /></span></p>
<p dir="ltr"><img alt="Comic layouts." height="442" src="http://www.sickgaming.net/blog/wp-content/uploads/2019/01/blog-direction-tools-for-writing-in-game-dialogue-1.jpg" width="623" /></p>
<p dir="ltr"><span>Our dialogues in <a href="https://www.open-lab.com/games/footballdrama/">Football Drama</a> were more or less in this format:</span></p>
<p align="center"><img alt="Early Football Drama dialogue layout" height="606" src="http://www.sickgaming.net/blog/wp-content/uploads/2019/01/blog-direction-tools-for-writing-in-game-dialogue.gif" width="342" /></p>
<p dir="ltr"><span>From that <a href="https://twitter.com/pugusel">Pino Panzarella</a> and I started designing possible evolutions, like in this draft:</span></p>
<p><img alt="New Football Drama alternative dialogue layouts" src="http://www.sickgaming.net/blog/wp-content/uploads/2019/01/blog-direction-tools-for-writing-in-game-dialogue.png" /></p>
<p dir="ltr"><span>An obvious fact that makes evolving the design of dialogues in games not that easy is that dialogues are generally at least partially generative (and so is the case for our Football Drama game), so its normal that the dialogues are generated by structures like these:</span></p>
<p><img alt="Aaa" src="http://www.sickgaming.net/blog/wp-content/uploads/2019/01/blog-direction-tools-for-writing-in-game-dialogue-2.jpg" /></p>
<p dir="ltr"><span>This is our internal dialogue editor, Outspoken (developed in Unity by Daniele Giardini). What would be great would be to have the possibility to (1) configure single nodes’ balloon appearance and (2) configure alternative layouts of sequences of nodes.\</span></p>
<p><span>(1) For <a href="https://en.wikipedia.org/wiki/Speech_balloon">single speech balloons</a>, we opted for having four classic layouts: thought, scream, speech, whisper.</span></p>
<p><img alt="Football Drama speech balloons layouts." height="335" src="http://www.sickgaming.net/blog/wp-content/uploads/2019/01/blog-direction-tools-for-writing-in-game-dialogue-1.png" width="612" /></p>
<p dir="ltr"><span>(2) For the alternative layouts, we have three cases, </span></p>
<ul>
<li>
<p dir="ltr"><span>A full-screen layer that sends some message before or between dialogue exchanges</span></p>
<p> </li>
<p> </p>
<li>
<p dir="ltr"><span>A node with a question and then choices (as the first column in the draft illustration below).</span></p>
<p> </li>
<p> </p>
<li>
<p dir="ltr"><span>A couple of dialogue nodes where in the second node we want to zoom in the character (second and third columns in the draft)</span></p>
<p> </li>
<p>
</ul>
<p><img alt="Alternative layouts." height="356" src="http://www.sickgaming.net/blog/wp-content/uploads/2019/01/blog-direction-tools-for-writing-in-game-dialogue-3.jpg" width="646" /></p>
<p><span>You can see our solution in action for both cases (1) and (2) in the following video:</span></p>
<iframe class='youtube-player' type='text/html' width='654' height='368' src='https://www.youtube.com/embed/FUwDxyILWBw?version=3&rel=1&fs=1&autohide=2&showsearch=0&showinfo=1&iv_load_policy=1&wmode=transparent' allowfullscreen='true' style='border:0;'></iframe>
<p dir="ltr"><span>So I hope this gives you some inspiration in designing tools for your game dialogue’s layouts.</span></p>
<p dir="ltr"><em><span>You can follow me on twitter <a href="https://twitter.com/ppolsinelli">here</a>.</span></em></p>
</div>
<div style="margin: 5px 5% 10px 5%;"><img src="http://www.sickgaming.net/blog/wp-content/uploads/2019/01/blog-direction-tools-for-writing-in-game-dialogue.jpg" width="646" height="423" title="" alt="" /></div><div><p><strong><i><small> The following blog post, unless otherwise noted, was written by a member of Gamasutras community.<br />The thoughts and opinions expressed are those of the writer and not Gamasutra or its parent company. </small></i></strong> </p>
<hr />
<p dir="ltr" id="docs-internal-guid-c88ee43b-7fff-7c20-3e7e-563a4cad743f"><span>Following the research done for “</span><a href="https://www.gamasutra.com/blogs/PietroPolsinelli/20170530/298889/Videogame_Dialogues_Writing_Tools_And_Design_Ideas.php"><span>Videogame Dialogues: Writing Tools And Design Ideas</span></a><span>” (a quite popular Gamasutra post on game dialogue’s user interfaces written by <a href="https://twitter.com/demigiant">Daniele Giardini</a> and myself) when I had the chance to get back to developing the narrative part of Football Drama I decided to create further layout tools for the writer, building upon the research done then.</span></p>
<p dir="ltr"><span>One of the observations of the linked post was how mature and feature rich are dialogues in contemporary comics with respect to today’s games, as in the examples below.<img alt="Comic sample layout" height="423" src="http://www.sickgaming.net/blog/wp-content/uploads/2019/01/blog-direction-tools-for-writing-in-game-dialogue.jpg" width="646" /></span></p>
<p dir="ltr"><img alt="Comic layouts." height="442" src="http://www.sickgaming.net/blog/wp-content/uploads/2019/01/blog-direction-tools-for-writing-in-game-dialogue-1.jpg" width="623" /></p>
<p dir="ltr"><span>Our dialogues in <a href="https://www.open-lab.com/games/footballdrama/">Football Drama</a> were more or less in this format:</span></p>
<p align="center"><img alt="Early Football Drama dialogue layout" height="606" src="http://www.sickgaming.net/blog/wp-content/uploads/2019/01/blog-direction-tools-for-writing-in-game-dialogue.gif" width="342" /></p>
<p dir="ltr"><span>From that <a href="https://twitter.com/pugusel">Pino Panzarella</a> and I started designing possible evolutions, like in this draft:</span></p>
<p><img alt="New Football Drama alternative dialogue layouts" src="http://www.sickgaming.net/blog/wp-content/uploads/2019/01/blog-direction-tools-for-writing-in-game-dialogue.png" /></p>
<p dir="ltr"><span>An obvious fact that makes evolving the design of dialogues in games not that easy is that dialogues are generally at least partially generative (and so is the case for our Football Drama game), so its normal that the dialogues are generated by structures like these:</span></p>
<p><img alt="Aaa" src="http://www.sickgaming.net/blog/wp-content/uploads/2019/01/blog-direction-tools-for-writing-in-game-dialogue-2.jpg" /></p>
<p dir="ltr"><span>This is our internal dialogue editor, Outspoken (developed in Unity by Daniele Giardini). What would be great would be to have the possibility to (1) configure single nodes’ balloon appearance and (2) configure alternative layouts of sequences of nodes.\</span></p>
<p><span>(1) For <a href="https://en.wikipedia.org/wiki/Speech_balloon">single speech balloons</a>, we opted for having four classic layouts: thought, scream, speech, whisper.</span></p>
<p><img alt="Football Drama speech balloons layouts." height="335" src="http://www.sickgaming.net/blog/wp-content/uploads/2019/01/blog-direction-tools-for-writing-in-game-dialogue-1.png" width="612" /></p>
<p dir="ltr"><span>(2) For the alternative layouts, we have three cases, </span></p>
<ul>
<li>
<p dir="ltr"><span>A full-screen layer that sends some message before or between dialogue exchanges</span></p>
<p> </li>
<p> </p>
<li>
<p dir="ltr"><span>A node with a question and then choices (as the first column in the draft illustration below).</span></p>
<p> </li>
<p> </p>
<li>
<p dir="ltr"><span>A couple of dialogue nodes where in the second node we want to zoom in the character (second and third columns in the draft)</span></p>
<p> </li>
<p>
</ul>
<p><img alt="Alternative layouts." height="356" src="http://www.sickgaming.net/blog/wp-content/uploads/2019/01/blog-direction-tools-for-writing-in-game-dialogue-3.jpg" width="646" /></p>
<p><span>You can see our solution in action for both cases (1) and (2) in the following video:</span></p>
<iframe class='youtube-player' type='text/html' width='654' height='368' src='https://www.youtube.com/embed/FUwDxyILWBw?version=3&rel=1&fs=1&autohide=2&showsearch=0&showinfo=1&iv_load_policy=1&wmode=transparent' allowfullscreen='true' style='border:0;'></iframe>
<p dir="ltr"><span>So I hope this gives you some inspiration in designing tools for your game dialogue’s layouts.</span></p>
<p dir="ltr"><em><span>You can follow me on twitter <a href="https://twitter.com/ppolsinelli">here</a>.</span></em></p>
</div>