Twine to Unity (Easy Branching Dialogue System)

Video Statistics and Information

Video
Captions Word Cloud
Reddit Comments

This method is how I recently converted a game I made on twine into a Unity game on itch. https://mrventures.itch.io/22nd-street-traffick This system could run just the dialogue of a game or the entire game as I did. The premise of the approach is to convert twine into an easily parse-able entweedle format and then write a basic parser that can read in the text data for use in a larger engine like Unity. I included the source code for that as well within the text version of this guide: http://www.mrventures.net/all-tutorials/converting-a-twine-story-to-unity

👍︎︎ 2 👤︎︎ u/mrventures 📅︎︎ Apr 17 2020 🗫︎ replies
Captions
I love story based games particularly those where you have different choices and I feel like the branching dialogue allows my choices to impact the story however that can be a little bit hard to write if you don't have software that's explicitly made for that and one of my favorite ways to write these kind of stories is using this free tool called twine and twines amazing and it has this online editor where you can create these different nodes and then set up which other nodes it could bring you to depending on what options you choose so for example if I choose this option here it'll take me down to this node where I can go on a little side conversation and then maybe return this method is also very useful when you're creating branching dialogue where you're gonna face a similar difficulty where it's again a nonlinear story where you're going back and forth and so twine is a great solution for that however there are some limitations when you want to play this story it's gonna look something like this which is really great for playtesting it allows you to click the different responses and bring you to the different sections however it's not really great for exporting into working into a larger game like unity for example if you're just creating a text story it might be fine to give somebody an HTML file that you create through twine however if you want to incorporate it into a larger text stack for your Unity game a few extra steps are needed mainly if you save this page which you can do by right-clicking and saving the page as and I'll overwrite my previous one but if we if we pop this open for a second and I'm just going to use notepad plus plus here you'll see that the file it creates is really yucky okay there's a whole bunch of HTML crap in here that creates a huge file size and all we really need is the text data and the sort of branching logic that you've written so this kind of section is all we really want however the default story format which is usually a flavor of harlow and we can see the the story format here is it's just really dense there's way too much information there's an alternative though we can download a different story format called in tweedle and if we use that story for and we play it will see that it reduces our twice story down to just the bare essentials you'll see that here we have the name of a given note the text and then the different response options printed very neatly once per line this is a way better option when it comes to exporting your story format however it does require some steps to set up for twine to add this new story format let's go to twines main menu by clicking the homepage and then clicking over here story formats then we'll click add a new format and paste this string into that section and then click Add I've got a little error here because the story format is already added but this will allow you to add it and now we can select it here as the default story format now let's see how I can use my story format to export a story which I wrote called 27th Street traffic or 22nd Street traffic sorry so inside 22nd Street traffic you're gonna want to go here click expand change your story format and now you want to select and tweedle I use Harlow for playtesting when I'm inside the twine editor when I'm ready to export it to unity I select and tweedle simply push play and then copy this text and then save it in a text file here's my story which I've saved in unity called twine story and I've saved it as a dot txt here are my scripts for this project as you can see there's not a lot most of them are actually just for the visuals so for example shaker shakes the words and slow typer slowly types the words but the ones that we'll need are the dialog object and the dialog controller and those are both available in the description here's the dialogue object file this is a public class and it includes several definitions which allow us to convert our story into an object oriented programming representation within the code so the first object is going to be the response then we have the node and then we have the dialog object itself and that's it so let me show you what those look like if we're comparing them with twine so for example this would be the dialogue itself it's your whole story then the node is one the single boxes and let's pop that open so this will have something like a title here it'll have text which is this section and it may have tags so for example this is tagged memory and then finally it'll have a list of responses one per line so that's what's represented here then finally each one of those responses will link us to a different destination node and might also have some display text which is what the user will see as an option so in my final version of the Unity game I actually only have twine as this game so you might normally have twine as some way to integrate dialogue into a larger game but in this example you'll see that this main menu is actually just a node itself so this is completely twine when it comes to this unity game and here you'll see the title the text and then three response options which come from this node over here where again it's the title the same exact text and then these three response options however you'll notice that while it says begin story learn and credits the nodes that it's actually linking to our San Francisco you can help and credits and the reason for that is because I don't always want to display the text of the destination node so for example even though I want to send them to the you can help node which means the title is gonna say you can help I want it to show as the text learn and so in order to do that I've modified the paradigm for twine oh I've modified the paradigm for twine just slightly where you can type in text before the response option here and so while that might look a little weird in the traditional harlow format this allows me to parse out if I want to instead of seeing San Francisco 2050 it'll just show begin story but it will bring me to the node which is titled San Francisco 2050 which looks like it's right here likewise it will say they let your city rot but bring you to the title that says they did this okay so that's one additional optimization that I've made and the only other thing to note is that in your story you don't want to tag your start node with the tag start in all caps so here we'll look at some methods basically the response just has this a constructor here the node class just has a check here which can determine if it's the end node I started working on a print method but it doesn't look like I quite finished and then the dialogue class over here doesn't really have anything to interesting besides the parsed wine text and so this is really where the meat of the algorithm comes in so let's expand that slightly and this will show you that it's just going line by line and it's reading in all the information to create this dialog object which is composed of many different nodes and responses now I won't go through this code line by line but you could see it's pretty well commented explaining how in some cases we might see different formatting for the lines so for example here's a format for a line that doesn't include a tag or sorry that does include a tag so you can see it's tags here then it's comma separated and then here you'll see on the format for a non tag line similarly I need to extract the title the tags the messages here and then we just have to consider that edge case I mentioned which is whether or not we have some display text to override what we should show when we're displaying an option for different responses so that's our first class completely described the dialogue object and now we'll jump into the only other class you'll need which is the dialog controller this dialog controller has public events for the node entered handler which allows whatever your viewer system is to subscribe to when a new node is encountered it can also show you what's the current node it can give you responses for the current node it has an initialization method which is going to call the on entered on your start node and then finally it has a method called choose response which given a response index it will progress the dialogue in whatever direction your user has desired so these are the only two classes that you need to implement twine into your unity system using the end tweedle format however I thought it might be interesting to show you my dialogue viewer which again it's going to be highly specialized for whatever you're trying to create but for my case you know a lot of the effects here are just visual effects on top of the dialog back-end so for example here on start I'm just going to subscribe to the controllers on entered node event then I'm going to initialize the dialog and then I'm going to just set up some button press delegates I have a helper method here called kill all children which basically takes a transform and removes all the children below it which is a little violent but it gets the job done then we have on node selected which is going to be just a helper method that's going to tell the controller I'm now ready to choose a node of a given index and then I have the on node entered so again this is the method that's going to be called whenever the controller triggers that event on entered node and so within here you can see that I'm just resetting the displays I clear the title I clear the message I kill the response children and then I have three different delegates which are set to fire one after another with some delay so they actually go backwards so if we're gonna read this we'll read it from the end to the beginning so basically it's gonna print the title and then it's going to either show a memory it's gonna either show a memory after the title or it's gonna show a message after the title so for my game a memory is just image being displayed and then showing the message is then showing the actual text of a node so we're going to call either of these delegates either show memory after title or show message after title and then finally if we were going to show a message it's now going to type the different response options after that message when it creates each of these responses it's going to spawn a response button which is going to be wired to a delegate of the on node selected so that we can print whatever the desired responses and then go to that new node finally I just have another helper method here which converts a texture 2d to a sprite and then another method which will show the continue button after you've view a memory which again is just an image in my game okay so here's the final product this is a game that I've created completely using twine creating in unity and then exporting and as you can see here it's showing you the title then the text of a message and then have the different response options which come below here as different buttons and here we could see we just triggered a memory where it's going to show you a picture and ask you to continue and then the picture slowly fades away well I hope this video helped you in exploring how you can use the twine format and exporting it into your unity game whether you're creating a game that's just a story like mine or you want to include that twine system into the perhaps a dialogue system within a much larger game this could be an option for you again it's maybe not the most performant it's not something that I would use for a huge game like an assay in turn but for something like no stranger this is a really good solution because it's just so easy to understand and it's really incredibly lightweight as always all the code is in the description of this video if it helped you out please consider giving it a like and if you want to see more videos like this hit subscribe let me know if you're gonna use this in a future upcoming game I'd love to play it good luck
Info
Channel: Matthew Ventures
Views: 12,115
Rating: undefined out of 5
Keywords: unity, unity3d, beginner, easy, how, to, howto, learn, course, tutorial, tutorials, fix, tip, game, development, develop, games, programming, coding, basic, basics, C#, unity vs unreal engine 4, unity tutorial, u3d, unity free assets, unity beginner friendly, unity3d college, brackeys, how to make a game, unity best tips, unity 3d, c#, beginners, making a, game development, gamedev, developer, game development unity, quill18, intermediate, unity tutorials, twine, branching, dialogue, conversation, free, twinery
Id: cmafUgj1cu8
Channel Id: undefined
Length: 12min 2sec (722 seconds)
Published: Fri Apr 17 2020
Related Videos
Note
Please note that this website is currently a work in progress! Lots of interesting data and statistics to come.