Alright folks, I’ve came up with the first mockup design of the Chronicler 2.0 interface!
Obviously colors and shapes need some work, but let me know what other kinds of improvements could be made.
The icons next to the Story, Choice, etc. tools will be their respective icons in the current version (Illustrator just really didn’t like vectorizing them).
For the new design I’m really trying to go for quick navigation, and an interface that resembles how your game will look while you are editing it.
As for additional features that are difficult to present visually or are missing from the mockup:
- There will be links to parent nodes that connect to the current one.
- Choices that aren’t yet connected will have a + icon to allow you to add a new node or link to an existing one.
- Similarly, conditional statements will allow you to embed actions or link to new/existing nodes.
- These icons can be clicked on to open them in the current tab, or shift+click to open in a new tab.
- Easily customizable themes for the interface written in CSS.
- A new CS compiler/interpreter will allow for on-the-fly interpretation of your game. This means that Chronicler will be able to simulate the routes taken to get to the currently selected node, and can provide you with the combinations of variables. (No more manual guessing in the “debug bubbles”).
- More and better keyboard shortcuts. (F5 to debug and Ctrl+F5 to start the game from the beginning for example)
- Perhaps the most controversial change is that the flowchart view will no longer be editable (or at least not to the extent that it is currently). Instead it will be automatically generated based on the connections in the nodes. You will be able to scroll around and navigate using either the mouse or keyboard, and can quickly zoom in to edit bubbles and zoom back out to see the big picture.
For keyboard navigation, it will be mainly based on the arrow keys. The down arrow will go to the first child, the left and right arrows will cycle through children, the up arrow will go back to the parent node. The Ctrl and Shift keys will be to zoom in and out, and the enter and/or tab keys will enter the highlighted node for editing. While editing a node, the esc key will take you back to the flowchart view.
How will this be accomplished? Well, I haven’t fully made up my mind yet, but I’m leaning heavily towards Electron which is essentially a way to make web apps into native desktop apps. This will give me all the glorious powers of HTML5, CSS, and JavaScript, not to mention all the tools and libraries that come with those technologies. This will greatly speed up UI development which has been the most time consuming thing to do with Qt. Going the Electron route also means that I will no longer have to rely on others for generating the Mac builds, and automatic updating will be a builtin feature.
For the new CS interpreter, https://pegjs.org/ looks like a very promising scanner/parser generator for JavaScript.
Another issue with Qt is that the version of it I am running is now deprecated. Many things have been changed in the latest version, and it would take a significant amount of time to update my existing code to work with these changes. In fact, this issue has caused problems with the Mac version of Chronicler.
Let me know what you think about the new interface. Suggestions and criticism are most welcome!
-BenSeawalker