# Welcome to NarrativeFlow! Hello, fellow narrative designer, and welcome! This is your starting line to learn how to visually create interactive, non-linear, limitless video game experiences with NarrativeFlow! If you've just signed up for NarrativeFlow and have never used it before, or perhaps you're wondering if it's the perfect fit for you, you're in the right place. And if you prefer to watch instead of read, you can watch this video on YouTube: <a href="https://www.youtube.com/watch?v=4mDk_p6UUao" target="_blank"> <img src="https://narrativeflow.dev/DocsImages/Getting%20Started%20Video%20Thumbnail.webp" alt="Getting Started With NarrativeFlow Video Thumbnail"> </a> There are two sections to the docs for NarrativeFlow: - Walkthrough - Reference Guide The Walkthrough section takes you step-by-step through using NarrativeFlow and teaches you all of its features. That's the best place to start! If you need to better understand how something works, what a button does, what a specific element is for, or how some aspect of NarrativeFlow helps you, the Reference Guide is a great place for that. I'm just as excited to jump in and start visually designing your powerful narrative as you are! I do want to make sure though that your experience with NarrativeFlow is smooth and easy-to-understand. A confused mind always says no, after all. Don't worry, this will probably only take about an afternoon (or less!) to get the hang of things, and then you'll be ready to design your stellar narrative without any limits or confusion! So, let's start by getting familiar with the interface of NarrativeFlow and how each component will help you design more captivating narrative, faster. > [!important] > While I've done my best to be thorough, detailed, and as step-by-step as possible in writing these tutorials and docs, there may still be something that doesn't make sense or wasn't explained in an easy-to-understand way. > > Please [reach out to me](https://narrativeflow.dev/lets-talk) in this case. > > I'll be happy to help explain in more detail to help you accomplish your narrative goals with NarrativeFlow. > > And you'll be helping others because I'll then know how to improve these tutorials and docs. > > Thanks for your help, and have fun with your narrative! ![[01 - UI Overview.webp]] - [[#1 - The Menu Bar]] - [[#2 - The Left Panel]] - [[#3 - The Workspace]] - [[#4 - The Stats Bar]] - [[#Keyboard Shortcuts]] ## 1 - The Menu Bar Across the top of the UI, we have the Menu Bar. Let's talk about the buttons there first (from left to right): **Dashboard:** This takes you to your NarrativeFlow account dashboard. **Open:** This will open an "open file" dialog for you to choose a NarrativeFlow project file to load and continue working on. **Save:** Clicking this opens a "save file" dialog for you to choose where you'd like to save the current project on your computer. These will be saved with the `.narrativeproj` (i.e. Narrative Project) file extension. This is just a file extension to help you know which files were created with NarrativeFlow. NarrativeFlow will ***never*** use proprietary file formats or ever be encrypted. Your data is always saved in plaintext in the JSON data format **Undo and Redo:** This allows you to undo and redo actions. **Quick Access:** Clicking this opens the [Quick Access modal](Reference%20Guide/Quick%20Access%20Modal.md), where you can enter frequently-used snippets of text, such as character, area, or item names. **Variables:** This will open the [Variables modal](Reference%20Guide/Variables%20Modal.md), where you can define variables to store information related to your narrative. Variables are the heart of dynamic, non-linear narrative. Don't worry, they're way simpler than coding. **Text Styles:** This opens the [Text Styles Modal](Reference%20Guide/Text%20Styles%20Modal.md) where you can define any custom text-styling tags, which can signal to your engine/game code to give contained text any style, animation, or effect you define there. **Data Table:** This opens the [Data Table modal](Reference%20Guide/Data%20Table%20Modal.md). Often, in video games, there are potentially hundreds (or even thousands) of items, areas, characters, etc. that each need some descriptive text. For example, a description of an item in the player's inventory, the description of a character or area on the map, quest descriptions or journal logs, etc. This is where you'll enter that information. **Compile:** When you're ready to [export your project](Using%20NarrativeFlow%20With%20Your%20Game%20Engine.md) for testing or packaging, you'll use this button. Compiling will remove all data that's unnecessary for your game engine, giving you a smaller file size and faster processing by your game engine. Compiled files are saved with the `.narrative` file extension. Don't worry, just like with your saved projects, NarrativeFlow will ***never*** use proprietary file formats or ever be encrypted. Your data is always saved in plaintext in the JSON data format. ## 2 - The Left Panel To the left of the main workspace, we have the left panel. The left panel has six tabs (from left to right): **Experiences:** This tab is a list (or tree) of all the Experiences you've created in your project. You can create folders to organize and group your Experiences however is convenient for you. **Experience Notes:** Here, you can write any notes you'd like associated with the currently open Experience. These notes are for your reference and won't be exported when you compile. Feel free to put reminders, scene direction notes, guidelines, or anything else that would be helpful for you here. **Search and Filter:** This tab allows you to search for text within any node either in the currently open Experience or in all Experiences in your project. There are also options here to fade specific node types either to clear the noise and focus only on certain node types, quickly see how many nodes of a certain type are in your project, or finding a specific node of a specific type somewhere in your project. **Node Presets:** Every Node Preset you've created will show up here, allowing you to quickly create a node based on that Preset into the currently open Experience. Node Presets speed up your workflow by allowing you to create templates (called presets) of nodes and then quickly make a copy of that node anywhere else in your project. For example, you could create a Preset for each character in your game, with the information unique to that character already entered in the Preset. This way, when you'd like to create a node for that character, rather than manually entering their name and any relevant properties every time, you can simply create a node from that character's Preset and then simply enter the dialogue or other information unique to that node. **Node Bookmarks:** Without bookmarks, it'd be pretty easy to lose your place when reading a book, right? The same is true when designing dynamic, non-linear narrative. You can bookmark nodes and they'll show up in this tab across all Experiences, allowing you to never lose track of where you were working or other important places in your narrative. **Problems:** NarrativeFlow automatically looks for any errors or potential problems in your project, saving you time and effort (and many migraines) tracking down logical errors in your narrative. This button's icon will be colored red when an error is detected, and yellow when there are no errors but one or more warnings. As you're designing your narrative, this icon may frequently be colored red. Don't worry. This isn't you doing something wrong. It's simply notifying you of errors that need to be fixed before you would want to compile your project for testing or publishing. Once you're done designing a piece of your narrative, simply check this tab occasionally and consider fixing any Problems that have accumulated. ## 3 - The Workspace The Workspace is where you'll be clicking your mouse and typing the most. There are two different View Modes for this space: Nodes and Script. Each view mode has a toolbar along the top of the workspace, with some similarities and some differences. For both the Nodes and Script view, along the left of the toolbar, there's a button to collapse the Left Panel, giving you more space to work in, and a toggle button to switch between the Nodes and Script view. ### Nodes View ![[02 - Nodes.webp]] The Nodes View is where you'll visually design the logic and flow of the narrative for the currently open Experience. We've already talked about the buttons that are common between the Nodes and Script View, so now let's talk about what makes the toolbar unique in the Nodes View. After the Left Panel Collapse/Expand button and View toggle buttons, we have buttons to zoom your workspace in or out, with the current scale percentage displayed between. Next, we have the "Create Node" button. When clicked, a menu will show allowing you to select which Node you want to add to the currently open Experience, as well as an option to select all Nodes or paste any Nodes you've copied or cut. You can also right-click anywhere on the Nodes View background/surface (i.e. the blank area) to open this same menu, which if often far more convenient than clicking the "Create Node" button every time. #### Working with Nodes Go ahead and create a Dialog Node right now using one of the above methods. You'll see it appear in the workspace. Nodes can be moved simply by holding left-click on a Node and dragging your mouse around. Nodes can be linked together by left-clicking and dragging from any output (the yellow circle on the right of Nodes) to any other Node's input (the yellow circle on the left of Nodes). To remove a link, simply hover over it with your mouse and right click. > [!tip] > To learn all about Nodes, how they work, and how they'll help you design your narrative, [go here](Nodes.md). To pan your view, click and hold either the right or middle mouse button and move your mouse around. If you're using a touchpad or a regular mouse isn't accessible, you can also pan your view with the left mouse button when holding shift or the spacebar. ### Script View ![[03 - Script View.webp]] The Script View is an alternate way to view and interact with your narrative. While the Nodes View is the place to design the flow, state, and structure of your narrative, the Script View allows you to view your narrative from a different perspective. The Script View is designed to help you edit and review your narrative in more of a book-like or document-like experience, or simply to correct typos and grammar easier than opening each node individually in sequence. The Script View allows you to focus on just the content of your narrative (the Dialog and Choice Nodes) rather than having to mentally sort through all the other Node types, branches, and complex linking at the same time. You'll learn more about how to use the Script view [in part 3 of the walkthrough](Part%203%20-%20Using%20Advanced%20Capabilities%20For%20Sophisticated%20Narrative.md). You can also learn more in its [Reference Guide page](Reference%20Guide/Script%20View.md). > [!info] > Translation features are planned for NarrativeFlow which will allow you to easily enter translations of each line of text in your narrative for any number of languages. > > You'll then easily be able to switch which language is displayed for your player, all without reloading the game or having to load different language packs. ## 4 - The Stats Bar The stats bar is a great way to see just how much progress you've made on your narrative. On the left, you'll see the Node and word count of your entire project. If an Experience is currently open in the main workspace, you'll also see the Node and word count for that. On the far right of the stats bar, you'll see the current version of NarrativeFlow that you're using. ## Keyboard Shortcuts ![[04 - Keyboard Shortcuts.webp]] NarrativeFlow has a few keyboard shortcuts available for you to use to speed up your narrative design workflow. While undo and redo work pretty much everywhere except for inside the Node Editor, the rest are only intended for use with Nodes in the Node View workspace. **Undo and Redo `ctrl+z, ctrl+y`:** allows you to undo or redo actions/changes to the current Experience and your project. **Copy, Paste, Cut `ctrl+c, ctrl+v, ctrl+x`:** exactly like your document editor, you can copy, paste, and cut Nodes from any Experience into any other, or simply elsewhere in the same Experience. **Duplicate `ctrl+d`:** duplicates the currently selected Nodes, offsetting them down and right for clear feedback that they've been duplicated (two Nodes layered directly on top of another can be a great way to lose track of one for hours...). **Select All `ctrl+a`:** selects all Nodes in the currently open Experience, allowing you to then easily copy, cut, duplicate, or remove all Nodes in the Experience. **Remove `Delete`/`Backspace`:** removes all selected Nodes. Other than an undo, this is permanent. Losing data is never fun, so be sure only unnecessary Nodes are selected when using this option. # How To Use NarrativeFlow - From Prologue To Epilogue As mentioned near the top, these docs are split into two sections: the Walkthrough and the Reference Guide. I recommend going through the walkthrough next. The reference guide is only there if you need to quickly remember something or want to understand a feature better. Other than that, you really don't need to read it. In just a three-part walkthrough, you'll learn how nearly every feature of NarrativeFlow works and how to use it. Then, if there's something specific you want to learn more about or if there's something you want to refresh your memory about, that's where the reference guide comes in. Besides the walkthrough and reference guide, there are a few pages that you may want to learn from once you're ready to [export your project and use it in your engine](Using%20NarrativeFlow%20With%20Your%20Game%20Engine.md). For now, let's get started with [part one of the Walkthrough](Part%201%20-%20NarrativeFlow%20Basics%20-%20Your%20First%20Steps.md)!