Hey all, I’ve started working on the new flowchart.
Originally I intended it to automatically layout the nodes for you. In other words, there wouldn’t be any interactivity other than moving the screen around and clicking on nodes to edit them. I intended this to save time on the part of the author.
Unfortunately, problems arise due to the fact that Choicescript allows for branching across scenes and looping paths back to previous nodes.
There doesn’t currently seem to exist an algorithm for laying out such a complex tree.
Undaunted, I came up with my own algorithm that simply sorts the nodes into rows below their “lowest” parent. It also ignores looping paths so it doesn’t get stuck infinitely moving nodes below each other.
It actually works fairly well and may actually look good when I figure out how to horizontally space the nodes.
It also doesn’t currently know how to handle nodes that don’t have any connections.
However, it just looks plain ugly with lines being drawn all over the screen and crossing each other and generally creating a confusing mass of information. There does exist algorithms to reroute lines so that they don’t cross each other, but it will take time to implement that and I can’t be sure the result will actually look any better.
Considering it more, I’m leaning towards making the flowchart interactive like it is in the desktop version. I plan on making it much more intuitive though.
- Double clicking an empty spot will create a new node at that location
- Nodes can be dragged to the desired location
Simply clicking on them will take you to the node editor
- Nodes can be themed with a color, although to simplify things there will probably only be 5 or 6 colors to choose from rather than a full color picker palette.
- Nodes will be circular in shape with labeled connection handles around the edges.
- Connection handles are draggable to connect them to other nodes.
- Double clicking a handle will remove the connection.
I’m considering combining all scenes into the same flowchart view. They will be areas surrounding the nodes with a darker background and border. Scene names will be listed at the top where the scene currently in view will have it’s name highlighted. Clicking a scene name will jump to its starter node.
Zooming further out will hide the nodes and scenes themselves will be draggable. They will also have “default connection” handles that can be attached to another scene. This will be what happens to nodes without a connection leading out of them (unless the node specifies that it is an *ending). I’m not sure this will be more intuitive or not, but it eliminates the problem of visually representing connections between nodes in different scenes.
As I mentioned before, nodes themselves are merely containers for story text and choicescript actions that end in a link of some kind (*goto/*pagebreak, *if, *choice, etc.)
They will have a searchable “toolbox” on the side containing choicescript text and actions. Each one will have a link to the relevant wiki page for ease of learning and reference.
Components in the toolbox can be dragged into the node’s list or double clicked to immediately append them to the end.
Anyway, that’s it for the progress update. Let me know what you think about these ideas for the new interface. A simple like will be a vote otherwise post alternative suggestions