esoadamo / dialog-tree-creator

Easy way to organize your in-game dialogs

Dialog tree creator

Allows you to easily organize your in-game dialogs into easily readable tree and then export them using JSON

This example produces {"0":{"title":"Mr. A","text":"Hello! How can I help?","options":[{"title":"Who are you?","link":4},{"title":"How old are you?","link":6},{"title":"Leave"}]},"4":{"title":"Mr. A","text":"My name is not important.","options":[{"title":"Sure."},{"title":"I think it is."}]},"6":{"title":"Mr. A","text":"45. And you?","options":[{"title":"21","link":10},{"title":"11","link":11}]},"10":{"title":"You","text":"I am 21.","options":[]},"11":{"title":"You","text":"My mom told me not to tell my age to the strangers.","options":[]}} as a result

How it works

The dialog tree consists of Frames and Options. Every dialog tree must have at least only one frame - the root frame with index 0.

Frame can have unlimited options which users selects. Every option can have up to one Frame linked.

Result format

Result is saved into JSON.

For example:

produces

{
  "0": {  -- index 0 means root frame
    "title": "Root dialog title",  -- every frame has its title
    "text": "Root dialog text", -- every frame has its text
    "options": [  -- the list of child options for this frame
      {
        "title": "First option",  -- every option has its title
        "link": 3  -- index of frame that will be opened if user clicks on this option. Optional.
      },
      {
        "title": "Option without frame"   -- every option has its title
  		-- no link here. This means that the dialog will end after selecting this option
      }
    ]
  },
  "3": {  -- another frame. Every frame has its index.
    "title": "Second frame", -- every frame has its title
    "text": "", -- every frame has its text
    "options": []  -- this frame has no options.
  }
}

TODOs

I know that there is still a lot to do, if you wanna help me, please check out the issues or submit your own ideas 😉

dialog-tree-creator's Issues

Add comentaries

A code without proper comments is not a good code

Link options to already existing frames

Make a way so the option will not lead to a new frame, but will link to an existing one instead. Useful when the dialog has a main window in which are questions and you want users to be able to read them all.

Visual (the red line is my enhancement idea):

Fix lines when scrolling down

When user scrolls down, the lines will begin to draw on incorrect locations.
The cause of this issue may be in this line createLine(child_offsets.left + (child_offsets.width / 2) + scroll_left, (child_offsets.top * 1.1) + scroll_top, parent_offsets.left + (parent_offsets.width / 2) + scroll_left, parent_offsets.top + (parent_offsets.height * 0.9) + scroll_top);

Images for README.md

Remove unused block

There are some parts which are useless/unused and should be removed.
Gotta catch 'em all!