Banter

A Free Dialogue Editor.

Short tutorials, so you can get productive within 30 minutes.

JSON is used to load, save, and export work.

Randomly generate character traits so you can focus on the dialogue.

New

Node Details

Character's name Show Branches
Root Node

Load



Save


Export

A root node must be set. Export strips out data not needed for the game engine and reorganizes the dialogue tree.



Scene Details

When the scene title is set, saved or exported files will conventiently use the scene title as the file name. Setting, locale, and dependencies are optional and do not do anything.

Names

Testing

Temporarily disabled

Characteristics


Explanation

Depending on who is listening, a character may reveal information about themselves that are: public, private/ personal, or secret. Focus on public information, the author should know this information like the back of their hand. Private and secret information is similar to a story's theme, malleable like concrete, yet providing structure over time. Like theme, private and secret information does not have to be flushed out initially, but an over arching concept should be in mind.

Public

This character sheet only generates public facts. A character's public information is easily discoverable, either by internet search, physical observation, or a couple of chats. The audience will not mind if public information is revealed out of the blue. Strangers, coworkers, and acquaintances have access to a character's public information.

  • Names = random: 5000 first and 10,000 last names.
  • Adjectives = random: 17,553
  • Personality Traits = random: 234 positive, 292 neutral, and 292 negative traits
  • Dates of birth = random: depend on calendar system: Gregorian calendar or Cotsworth. This calculator does consider leap years. Young age = 1 - 30, prime = 31 - 60, elderly = 61 - 90.
  • Height & Weight = ignore
  • Education = random: drop out, standard, college, vocational
  • Outgoing = random: 0 - 100, least outgoing to most outgoing
  • Friends = random: 1 - 10
  • Salary = random: rich, middle, poor
  • Allure = statistic: 10% are gorgeous, 80% are good/normal looking, 10% are ugly looking.
  • Dominate hand = statistics: 90% right handed, 10% left handed, and 1% ambidextrous.
  • Eye color = random: brown, hazel, blue, grey, green, and amber.
  • Hair colors = statistics: black, brown, blonde, and red. 11% chance for dyes: orange, green, blue, purple, and grey are picked

Private

Private matters are limited to family, close friends, and lovers. A close friend is anyone who has made meaningful sacrifices for the character: assisted in personal issues, paid for events (birthday, road trips, restaurant), loaned money, did free work, and so on. Private information should rarely be revealed. The audience will cringe if private information is given away freely.

The harmless or white lies we tell strangers in order to conform tend to be private information. For example: body alterations (tattoo, piercing, scars), children, health problems, family members, family problems, gender, sexual preference, living habits, sexual partners, wealth, debt, dreams, religious views, and political views.

Secrets

Any information that is taboo in society would qualify as a private secret.

  • Excessive lying.
  • sex = rape victim or perpetrator, incest, adultery, necrophilia, pedophilia, bestiality, and homosexuality.
  • food = meat, cannibalism.
  • death = abortion, murder, grave digging, contribution to someone's death.
  • torture = slavery, solitary confinement, dismemberment, sleep deprivation, bullying, starvation

A character's deepest secrets are only known to them and cannot be easily discovered through observation. Secrets tend to be revealed near the end of stories, because realistically, the only time someone reveals their secret is to a very close friend. The story needs ramp up time to give audience proof of this close friendship.

Even if two character's are close friends in the beginning, revealing secrets will still seem fake to the audience, because they have no previous proof. Valid proof is any sacrifice the two characters did for each other's sake. If needed, flashbacks and confessing moments before death are a quick ways to build proof.

Find Node


Wordalyzer

By default, the current dialogue tree you are working on is analyzed. To load other dialogue trees, use the load button. This is very useful for loading multiple banter files that are in the same folder, allowing Wordalyzer to analyze the entire story, rather than just one scene.

Total Words

Total words can help verify who the important characters of the story are. It could potentially be odd for the main character to speak less words than a supporting character. Likewise, it could equally be strange if a supporting character spoke less than a minor character.

Total Sentences

People who are charismatic tend to speak more, meaning, even among minor characters, the most charismatic one should have more words than the rest. Bad listeners also tend to talk a lot or talk over people. When in groups, the act of speaking more can also imply a character thinks highly of themselves.

Average Letters In A Word

Average word length can help determine a character's education level. Uneducated people tend to use simpler and shorter words. In contrast, someone with a PhD may use excessive jargon or speak in a flowery way.

Average Words In A Sentence

In writing, the average sentence length is 14 - 25 words. In conversation, I would guess 7 - 12 words are more accurate. Average sentence lengths could hint at a character's personality. People who are head first, stoic, shy, or are impatient will use shorter, < 7 words long, sentences. Characters who speak less (can be determined by total sentences stat), but have a longer sentence average, can give off an aura of deliberateness or wisdom. Characters with an unusually high sentence average may explain topics or tell allegories too often.

Mentions

If a character mentions another character, that other character may be important to them. This could be useful for ranking which character is most important to another character. It can also help lead or mislead the audience into believing who is important to who.

Updates

January 2018

  • added keyboard shortcuts, including Vim inspired movement
  • added find node tool
  • improved file, tools, and help menu drop down position
  • improved tutorial wording

December 2017

  • removed navigation buttons
  • added navigation by clicking on grid and dragging mouse
  • removed URL states
  • fixed spelling and grammar in tutorial
  • fixed spelling and grammar in updates
  • removed statistics and test tool as they seem pointless
  • improved save and export, file name is filled in
  • improved background color from azure to light cyan
  • improved dialogue tree rendering by switching from retained to immediate mode

September 2017

  • fixed Chrome being very, very slow, not sure why this problem didn't occur in Firefox.
  • removed branching IDs inside dialogue box as that information can already be seen via the drawn branch lines.
  • added an emotions option to the node menu
  • improved tutorial, it now includes details about the emotion option

August 2017

  • screenshot
  • added a names tool which lets you enter all character's names in the scene. When editing a node, the names set in the names menu will appear as options.
  • removed manual naming from node menu, use names tool instead
  • removed the protagonist's name from scene
  • added the protagonist's name to names menu
  • improved tutorial, images are linked instead of displayed to speed up loading
  • added menu bar with file, tools, and help options
  • removed tool bar
  • added tool bar to menu bar
  • fixed issue where active tab style is not removed when state is changed
  • fixed issue where moving a node over another node causes the highest id node to become selected.

August 2017

  • screenshot
  • added ability to give the save or export file a name. If no file name is entered, the scene title is used as the file name. If the scene title name is empty, then a generic name is used.
  • added menu animations
  • improved hover effect over nodes, changes the text color instead of the background color
  • improved export to re-indexing node ids
  • removed save and export via copy and paste
  • removed load via copy and paste
  • removed testing tool temporarily
  • removed button on home page that returns back to creversely.com. This is to prevent accidentally pressing it and losing all work.
  • removed exit editor button from grid
  • added exit edit button to file menu
  • added a delete node option to the node panel
  • added a locale and dependency option to the scene panel
  • improved tutorial load time by moving it from a web link to the main application.
  • improved the way the node panel is opened, double-left to single left click
  • fixed issue where selected node would not highlight after moving the grid.
  • fixed issue where saving a node's details would not work after moving the grid.
  • fixed issue where page does not re-render when zooming in or out or on page resize
  • fixed issue where after loading a file, a render down is done

May 2017

  • added the option to load save files, rather than just copy and paste text from saved files
  • added an option to save Banter files directly to your computer
  • added characteristics tool randomly generates traits about a character.
  • added Wordalzyer to analyze dialogue and reports various statistics on them.

March 2017

  • improved front end code size by dumping AngularJS for normal JavaScript
  • removed collision detection
  • removed account creation
  • removed characteristics tool
  • removed back end: mongoDB, account management
  • improved frame rate to 30-50 FPS on my dual-core CPU with no graphics card installed

December 2016

Minor update, I'm thinking of spending the next 2 months getting my C++ and Qt skills on par with my web development skills.

  • added a character sheet generator
  • improved performance
  • added name drop down list on node panel
  • added new scene button (can't believe I missed this the first time)
  • added scrollbar to scroll through more than 5 load files
  • fixed, when moving a node, the node's previous position no longer causes a collision
  • improved color of branch, originally, it was same color as grid lines

September 2016

One day, I thought back to my university days where I had to learn Bash, MySQL, C++, GDB, make, and other mature technologies, and remembered why JavaScript appealed to me originally. Learning about the web stack never felt like a chore, concepts were easy to understand, and lessons could be applied immediately to making web apps. Usability is king on the web, and that mentality shows when web developers create web technologies. HTML, CSS, and JSON, all ridiculously simple to learn.

With my love for JavaScript rekindled, I tried out MeteorJs, but decided to stick to the MEAN (mongoDB, ExpressJs, AngularJs, and NodeJs) stack, because I was already familiar with Angular 1, and popular NodeJs modules (LESS, Jshint, Uglify, etc.).

  • screenshot
  • improved UI
  • fixed case where deleting a node causing animation bug
  • fixed case where deleted node would still cause collisions
  • improved performance, only redraw when branches have changed
  • added mongoDB database to allow for saving dialogue trees on Banter's servers
  • added meta data: scene name, setting, and protagonist
  • added history page
  • added auto fill of protagonist name in node, if one is provied in scene panel
  • added export, load, save, and test will open in the same page as the tree editor
  • improved export and save to pretty print JSON, rather than keep it minified
  • improved help page with up to date information about UI
  • improved usability by automatically setting the root node to the first node created
  • added, if nodes are not descendants of the root node they are not drawn, makes it easier to detect separated nodes

June 2016

After this update, I spent all of July relearning C++ and built Wordalyzer with Qt. My love for JavaScript was crumbling. The more I learned about C++, the more I realized that the node and JavaScript community was essentially reinventing the wheel, repeating history, relearning lessons of software development. For every innovation in the node ecosystem there was an equivalent one in the past: Grunt or Gulp = Make, server side JavaScript = C or C++, ExpressJs = Apache, NPM = apt or yum, mongoDB = MySQL, and on and on.

On top of this, the new standard for JavaScript (ECMA 6) was nearly implemented in browsers. ECMA 6 adopted features that were standard in mature programming languages like: scope, constants, class syntax, inheritance syntax, export (include in C++), and so on. I felt like a hipster, and seriously considered moving the development of Banter to C++.

  • screenshot
  • added collision detection for when creating nodes
  • added deleting nodes back, but it caused animation issues
  • improved code for better maintenance

February 2016

Feeling competent in my programming and art skills, I took writing and storytelling seriously. I found Banter too bare-bone for iterating on my dialogue. Since I wasn't focusing on art and programming, I also decided to learn music theory, and published my first song on SoundCloud in April.

  • screenshot
  • improved UI
  • added an export option
  • added highlighting of currently selected node
  • added node border color change when it has dependencies or no children
  • removed moving the node via dragging to fix performance issues
  • added moving the node by clicking a button
  • added automatically drawing of branches every 3 seconds.
  • removed delete node button, because it didn't work properly
  • improved UX, node panel opens when a node is clicked.

November 2015

I don't remember exactly when I built Banter, but before hand, I used GIMP to write/draw the dialogue trees. To convert the dialogue to JSON, I hand typed the data again. I didn't have to do this often as I spent my first 2 years focusing on my art and programming skills in attempt to figure out the art and game design of SE2063.

  • screenshot
  • added save, load, and test dialogue trees
  • added node controls: move via dragging, branches, delete

Tutorial

Download this example dialogue. Once the file is downloaded: open Banter in a new tab, go to File->Load, click browse, and select the downloaded file to load. Play with the example while going through this tutorial.

Menu Bar

The menu bar is located on the top left of the screen. It has 3 options: file, tools, and help. The file menu contains options to create, save, load, export, and exit a project. This tutorial primarily goes over the tools options.

Scene Menu

To bring up the scene menu go to Tools->Scene. At the very least, type in the scene title. Doing so will automatically name any save or export file after the scene title. Typing in a setting, locale, and dependencies are optional. In the loaded example, the scene title is set to Welcoming, setting to INT. Lisa's Apartment, and locale to home.

Writing Dialogue

Start writing dialogue by clicking anywhere on the grid to create a dialogue box or node. To move the dialogue box: left-click, hold, and drag the mouse. Left-click on the dialogue box to bring up the node menu, where its details can be edited. To move or pan around the grid: left-click on the grid, hold, and drag the mouse.

Node menu

  • character's name = drop down list of names that were created in the names menu
  • character's emotions = optional, I use this to select portraits in my game
  • character's line
  • branches = see branching
  • dependencies = see dependencies
  • show branches = hides or shows branching lines on the grid
  • root node = sets the starting point for the test tool and export

Adding Names

To bring up the names menu go to Tools->Names. This is where the character names are managed. Changing the character name here will update to the old name with the new name. Try changing the name from Roxi Vanderbelt to Jane. Names menu screenshot.

The first name is always the protagonist or main character. Entering the protagonist's name will automatically set all new dialogue boxes to the protagonist's name. This is convenient since the protagonist has the most lines. It is not possible to have multiple protagonists in the scene. Clicking the add button will add additional non-playable character (NPC) names. There is a limit of 10 names.

Can't Create Node

There are invisible boundaries. The grid is 10k x 10k pixels big. Banter places you near the top of the boundary, try moving the grid down to get out of it. I plan to make that area gray to show it is empty space.

Branching

To create a branch or dialogue option, click the node to open the node menu, then fill in the branches form with ids to other nodes. A node's id can be found 1) in the dialogue box 2) in the title of the node menu. There are 4 kinds of branches: non-playable character (NPC) to NPC, NPC to protagonist, protagonist to NPC, and protagonist to protagonist. Example of various type of branches.

NPC to protagonist is the most common type of branch. The NPC makes a statement and the protagonist gets multiple choices to respond with.

Protagonist to NPC is the second most common type of branch. The NPC typically has one choice. An advanced technique is to give the NPC multiple choices. This topic will be covered at the end of the dependencies section.

NPC to NPC occurs when 1) one NPC monologues, 2) when there are multiple NPCs in the scene speaking. People rarely monologue, so it should be avoided.

Protagonist to protagonist has 2 main uses: protagonist monologues or rapid action. Again, monologues should be avoided. If a character is in an action sequence, like a chase scene, it could be beneficial to chain the protagonist's actions. The example does not have a protagonist to protagonist branch.

Dependencies

Hubs are groups of dialogue that must be explored by the player before moving on to the next section of dialogue. Role-playing games (RPGs) often employ hubs to dump lore on the player. I tend to avoid hubs, because lore is boring without context.

The hub in the screenshot forces the player to explore node 10 and 11 before they can continue to node 14. Node 14 has a dependency on 10 and 11 as shown in the details panel.

An NPC can also respond to the protagonist's previous choice via dependencies. Step 1) give the NPC multiple choices 2) priority is determined by listing dependencies from left to right. Which ever NPC dependency is met first gets automatically selected. If an NPC has choices a,b,c and only b's and c's dependency are unlocked, then the leftmost is picked or b. If an NPC has choices a,b,c,d,e,f,g, and only a,e,f,g are unlocked, then a is picked.

For more dialogue writing tips check out my blog posts, 6 tips for writing dialogue and 6 more tips for writing dialogue.

Keyboard Shortcuts

About

Banter is a dialogue editor. It was created by David Ly in the fall of 2015. Send questions and feedback to dkly@protonmail.com