VN Graphical IDE

[rocket]

Ok, rather than continuing to hijack Sin's kick-ass thread on his kick-ass game maker, I figured I'd open a new thread for the problem that interests me here...

I see 3 related but relatively decoupled (and all really interesting problems):
1. A VN editor - that is to say something that is really optimized for editing works in the style of VNs and is also optimized for one (or more) specific VN engine syntaxes. For example in the Ren'Py case I would want an editor that dynamically recognized all character definitions in the init: blocks and would auto-complete character names as I typed. It would also auto complete Ren'py keywords (my variables and scenes as well) and auto close qoutes and parentheses, etc. Moreover it would also provide a GUI for defining a character and all their myriad attributes including graphics (which would of course just output into an init block.) The GUI supports the structured text editing as a way to get newbies up to speed quickly or maybe to do batch imports of a characters graphics or define a new character derived from another, but you still have full control of the text and whenever you complete editing a line the text is parsed and changes are generated and propagated through out the GUI.

2. A Ren'Py / Generalized VN view/scene editor. Something very much like Novelty, where you can drag an drop assets from a palette onto the stage and thus automatically generate script entries. For simple scene and character transitions this may be slower than typing in the optimized editor, but it is far more accessible to the newbie. Moreover for complex animated events, (such as in Starlight where I have multiple layers of parallax in an event scene) such a tool would be invaluable. (Or come to think of it Ren'Py could just add Pan startpos and endpos attributes that scale to the size of the image rather than absolute pixel coordinates...) Well it would still be invaluable, because you can see things before you preview them (I guess this is really ideal for the eroge artist *^^*). This whole component is hard, but doable, and would be quite a boon for the less programatically inclined.

3. A plot and game structure editor. I.e. my fantasies of editing a story in visual form. Least important and hardest. 'nuff said.

[rocket]

So here's a bunch of ideas thrown together with big gaps:


Key points:
1. Visual layout
I imagine it updates based on the script, but more interestingly also dynamically creates new arbitrary positions when you drag a character sprite to a place. Drag and drop near the "Right" position would snap to it, but drag too far away and "Right" is replaced by "Absolute x,y"

2. Script Editor
Good enough for coding. Syntax color coding. Current line highlighting.
Auto complete character, scene and keyword names. Auto close braces, and quotes.
Tabbed view of documents.
Collapsible logical blocks. Collapsing is "smart" so that Menus collapse but still show their possible selections, etc.
Visual "jump traces" (this is my first step to the magical story graph). Highlight the trace associated with selected line for legibility.
Playback progress indicator (yes I know this could jump back up, but it's good enough).

3. Story Editor
The drag and click counterpart to the Script Editor which is optimized for newbies (yes, this diagram is not done, but if you squint you can get the idea).

[Ren]

Oooh, interesting °w°
I say, go for it, Rocket -san!

[Sin]

Good job on the design ^.^
Looks like the visual studio of ren'py

[Vatina]

Oooh something like this would be nice ^^

[chronoluminaire]

Ooo, that script editor looks like a very interesting concept. I'd be very interested in a Ren'Py-specific text editor... Although that's not that far from current things that exist. There's the Ren'Py mode for SciTE which Py'Tom put together. For those who use emacs, it'd be easy to create a Ren'Py major mode that would do autocompletion, automatic brace insertion, syntax highlighting and so on.

The graphical script greator also looks very interesting, although (as a programmer first and Ren'Py user second) I'd probably still just write my scripts in Ren'Py.

The third task, the plot and game structure editor, seems an impossible pipe dream to me. There are going to be as many different plot structures as there are VN creators, and one tool just can't support all of them, it seems to me.

[Jake]

but more interestingly also dynamically creates new arbitrary positions when you drag a character sprite to a place. Drag and drop near the "Right" position would snap to it, but drag too far away and "Right" is replaced by "Absolute x,y"

Hmm. I like the idea of snap-to points, but I'm not sure about the rest. I know in (for example) Photoshop I find it very irritating that I can't position things with any accuracy anywhere near the edges of the document 'cause it keeps snapping the edges into alignment whether I want to or not, for example.
I guess it's not such an issue with a VN, 'cause it's less likely that someone's going to want to position a character three pixels to the left of the 'right' position, but still... perhaps a modifier key to flip between behaviours or something? 'Alt' seems to be pretty common for that kind of thing in other graphical editors I've used.

Not that this probably isn't a little in-depth for this stage of discussion.

Visual "jump traces" (this is my first step to the magical story graph). Highlight the trace associated with selected line for legibility.
Playback progress indicator (yes I know this could jump back up, but it's good enough).

These parts - and your middle script-editing window coupled with a visual display - are incidentally the 'pretty hard' parts of your design from a coding perspective.
Firstly you need to parse the hand-written script and work out what it's supposed to be doing in order to display it, meaning your editor either exists inside of the engine or more or less completely replicates it. So it's fine for something like Sin's project, but would be a lot more work for a general tool for - say - Ren'Py.
Secondly, and probably more importantly, you'd need to work out what your visual editor was supposed to do when the script broke down - either because someone has done something too complex to represent graphically (say, someone's started coding a curtain-fire shooter in renpygame) or because the script is no longer syntax-correct (which is going to happen all the time if people actually type into the editor window).
Thirdly, because if the underlying language changes at all you'll need to keep up with those changes in your editor

It was the complexities of this task which convinced me that it was far more plausible, when I was speccing out Berlinetta, to skip the direct-code-editing window and only have the 'fluffy view' you've put on the far right, and generate the script files entirely automatically. It seems to me - tying in with Chrono's point as well - that the more usable a tool gets, the more specific a task it has to be narrowed down to. So it would be perfectly plausible to write a plot-outliner for a typical branching-plot VN, but you wouldn't be able to use that outliner for a dating-sim. You could write a structure planner for a dating sim, but it would be hard to use that to write a regular VN. Neither would be any good for something like Magical Boutique.
I guess with enough forward-planning, such a tool could support a plug-in architecture to allow people to add extra outliners for different kinds of game at a later date, but I wonder if any such project wouldn't die of chronic scope-creep before it became usable.

[monele]

I know in (for example) Photoshop I find it very irritating that I can't position things with any accuracy anywhere near the edges of the document 'cause it keeps snapping the edges into alignment whether I want to or not, for example.

Press CTRL while you do that and it should ignore autosnap

[Jake]

Press CTRL while you do that and it should ignore autosnap

I think it's Alt, off the top of my head, particularly since I'm usually noticing it while holding Ctrl to move a selection. But regardless - I know it's possible to get around it, I'm just saying that there ought to be a way to get around it, if you're going to include this kind of behaviour.

[PyTom]

Let me first thank Rocket for the design.

Ooo, that script editor looks like a very interesting concept. I'd be very interested in a Ren'Py-specific text editor... Although that's not that far from current things that exist. There's the Ren'Py mode for SciTE which Py'Tom put together. For those who use emacs, it'd be easy to create a Ren'Py major mode that would do autocompletion, automatic brace insertion, syntax highlighting and so on.

Actually, I have a major mode for Emacs. It doesn't do autocompletion (since I've never seen autocompletion in Emacs work well), but it does do syntax highlighting, automatic indentation, and it scans the buffer to put the various labels and things in the imenu.

SciTE is pretty much maxed out as to what it can do without me doing a lot of Ren'Py specific C programming, which I'd prefer not to do.

I'm considering replacing SciTE with a slightly more powerful editor, one I can extend with Ren'Py specific features. I have a couple of candidates, but haven't picked the winner yet.

[DaFool]

Looks neat.

But it runs into the same problem of scope like with general-purpose character graphics packs / doll packs: It will be limited to a certain set of styles. Trying to expand the flexibility would be nightmare.

Looks good, I don't mean to say many people won't find it useful -- in fact these two project concepts already beat the Blade Engine and Onscripter in terms of useability from the get-go.

But what if , for example, what if someone wanted NVL, as is increasingly the case nowadays? And what if someone wants character speech bubbles in comic style? Will these be added expansion modules, or will these need new editor engines?

I'm just commenting because I can already do what I need to do with Ren'Py scripts (and have had previous years experience in programming, so text code don't scare me), so I may not really have the perspective of someone totally new to programming.

[@berration]

The visual editor looks like a pretty neat idea, and I certainly like the idea of getting a little preview of a scene as I'm assembling it. Here are a couple thoughts I had while looking at this:

While I haven't tried it in RenPy yet (I'm still a newbie, and don't yet know enough to tell RenPy code from Python), I was considering the idea of making paper doll-type characters, where you can swap clothing, change expression, have blinking eyes, etc. Would a visual editor be able to support something like that, or would you be limited to just static images?

The other item deals with getting your script into the game. (Actually, this is a challenge I've run into with RenPy as it is.) Would each line need to be added manually? I tend to write things out in advance in a work processor, so I can spellcheck, or edit things easily until I'm ready to import it. I would have to hate to cut and paste each individual line into text boxes.

I'm also looking at switching regularly between ADV and NVL mode for my project, and since I've been using quotation marks to denote when characters are talking, it means a lot of extra formatting work, putting single quotes around everything, and tracking down all of the apostrophes in the dialogue and making sure they stay there.

It would remove a bit of tedium to be able to take text file, and have it automatically imported and formatted, so that the way it looks in your word processor is the way it looks in-game.

[Jake]

But what if , for example, what if someone wanted NVL, as is increasingly the case nowadays? And what if someone wants character speech bubbles in comic style? Will these be added expansion modules, or will these need new editor engines?

Well, it looks like it would be trivial to do the NVL thing in Sin's case, since he drags the text box out to size himself. In Berlinetta, I was expecting to have an engine-specific config form for each renderer (so one for Ren'Py, one for the MorningStar engine, etc.) which would act like a 'Document Setup' dialog; at the beginning of the project you'd have checked an 'NVL' option in there, and the renderer would remember this and output your dialogue that way.

But yes. Fundamentally, you reach a point where to make things more helpful, you need to be more specific and restraining about their usage. If you want flexibility, you have to use more general (and thus, less usable) tools. iPhoto is far easier to use than Photoshop, but also has a grand total of about six features, where Photoshop has more like six thousand. But for most people, iPhoto is enough, 'cause all they really want to do is crop, rotate, and arrange in albums.

I'm just commenting because I can already do what I need to do with Ren'Py scripts (and have had previous years experience in programming, so text code don't scare me), so I may not really have the perspective of someone totally new to programming.

The other thing that gets quite specific quite quickly is target audience, much like a piece of prose. My goal for Berlinetta was always to make it feasible for people who weren't programmers to make progress creating a visual novel without having to beg for help, 'cause I've had a lot of experience with people who find programming not so much 'hard' as 'frightening'. Ren'Py makes it pretty easy for most people to pick up and run with, but they have to get up the courage to edit text files in the first place - so part of the usage was to provide 'good examples' of guaranteed-working Ren'Py scripts that they'd put together themselves.

[rocket]

Sin
Thanks, it's just a start. I've never even seen Visual Studio, but common design problems often lead to convergent evolution.
Also I don't really consider the design problem to be Ren'Py specific. I'd like to define a core "Story" visualization model that could be displayed out of a number of different languages, so you could have a Ren'Py language module, an ONScripter module or a Novelty module. Likely too ambitious, but I'm just brainstorming right now so it doesn't hurt to look at the big problem.
I would love to have your insight from having actually looked at the problem longer!

chronoluminaire
Yes I know there are lots of editors that could be extended to do most of problem (1). However I think there is great benefit to:
- Having a single cross platform IDE
- Having an editor with an integrated visual editor for noobs
- Having an editor integrated with a solution for problem (2)

Jake
Yes, overriding snap would be a feature, and yes details of how it works are really too low level for this type of exploration. (^_^)

As for the hard parts... (^_^);; Guess I've been spoiled by working in the valley. Around here programers like to say "It's just bits!"

I don't show it yet, but I do plan on having in line blocks in story mode for direct code editing (its a way of dealing with the python and also a way to support language modules with features that the "Story" model does not contain. Errors in parsing the Scripts into a "Story" format would have some similar visualization, so I'll try to put some thoughts down on that next time.

Also I see story mode as really serving 3 use cases:
1) Noobs / Artists who will author only in story mode
2) Folks who want to outline in story mode then do extended feature editing in the editor (so for MagBou its more of a one way transfer)
3) Folks who want to use story mode's summarized view to rearrange major scene linkages in a visual way, knowing that they will likely break code and have to go back to script mode to clean things up. (A variant of case 2 really)

Story mode is supposed to be a simple common subset of all(most) VN scripting features that satisfies the needs of many and can be a planing tool for the hard core. However story mode is not intended to replace the VN optimized editor (or vice versa).

DaFool
Good questions.

My goal #1 is to propose a way to make editing Ren'Py scripts easier (even for experts) and more accessible (for teh n00bz).
My secondary goal is to add visual layout and simple animation scripting in an integrated way.
Beyond that I'd like imagine a universal editor, a script planing rearranging tool, and generalized ways to handle things. NVL mode or speech balloons I think will fit into the concept of stage & story pretty well. However things like Ren'Py's built in menu and save system are much harder (impossible?) to abstract, so maybe that's where a expansion system comes in?

@aberration
Something like layered paper doll characters should be far easier to assemble with a good visual solution for problem (2) than it is right now in Ren'Py (part of my motivation).
For editing in a WP versus the IDE, I imagine we could support an import mode, but the idea is that the Story editor should support "natural typing". i.e. Carriage returns create new "sentences" for the current character, double return pops into a new blank character template (which auto completes) and is uses the OS's spellcheck features and so forth (I'm on a Mac so the idea of having a text edit field that doesn't real time spellcheck is a little strange.. does any computer still do that?). You shouldn't want to write in a word processor any more than you would want to write a screenplay in MS Word once you have screen writing software...

Anyways thanks for the feedback, I hope my ideas are useful at some point! (^_^)

[PyTom]

I'm also looking at switching regularly between ADV and NVL mode for my project, and since I've been using quotation marks to denote when characters are talking, it means a lot of extra formatting work, putting single quotes around everything, and tracking down all of the apostrophes in the dialogue and making sure they stay there.

Actually, Ren'Py has support for this natively. Basically, you can define a character such as:

Code: Select all

init:
    $ m = Character("Mary", what_prefix='"', who_prefix='"')

And now anything "m" says will be surrounded by quotation marks.