Ren'Py Alternatives to dialogues on bottom covering the pictures

[Gunizz]

Hi,
I find very annoying that all Ren'Py games have the dialogues covering important parts of the renderings with the human figures, while ample spaces with background scenery could be used to show text boxes. It seems to me there is no much flexibility in RenPy, am I wrong? In HTML+CSS is quite easy to place a dialogue wherever you want in the screen, and create boxes. Also the options for decorating the text seem very limited, (I refer to shadows, background and outlines). Why we don't see variance in RenPy games as we see in web sites? Is it too difficult to implement or simply impossible?
Are there Visual Novels that use non-default approach to showing dialogues, like speech bubbles or similar, placed according to the best location for each scene? I've never seen one, and I played so many VNs.
I wonder if HTML+CSS+JS would be a better choice for a visual novel instead of RenPy.

 

[osanaiko]

Yes, you are completely wrong about " there is no much flexibility in RenPy "

Technically it is just as simple to move the Ren'py dialogue box as it is in HTML+CSS - look into the "Screen language" subpart of Ren'py. Screen language is a hierarchical layout language just like CSS.

If you are already familiar with HTML+CSS you would of course find it easier to get started at first. But HTML+CSS is purely a visual solution and gives you none of many other support features that are built into Ren'py. You would need to write your own VN engine in JavaScript - and you will certainly not be the first to try that! If you want to do a project making a game engine, go ahead, but do not imagine that is the same as making a game.

The *actual* problem with dialogue boxes covering important parts of the image is 100% due to the graphics creators NOT taking into account the true focus area of the image when the dialogue box is present. if they designed the images with the focus of the view in a 16x7 box, leaving the bottom 16x2 for background image only, then the "problem" you described with default Ren'py UI layout is solved.

I won't call game creators lazy - it is an enormous amount of work to make a game and even more to make a high quality game, but sadly many of them do not take into account the screen layout when making the art.

BTW, for an example of a quite good (but short) Ren'py game that uses a non standard dialogue box location try https://f95zone.to/threads/reconnect-v1-0-l8eralgames.118423/ by L8ERALgames

 

[anne O'nymous]

It seems to me there is no much flexibility in RenPy, am I wrong?

Yes, you are totally wrong, Ren'Py is as flexible as an engine like Unity or Unreal. Less performant of course, but really as flexible.

Also the options for decorating the text seem very limited, (I refer to shadows, background and outlines).

Here, it's partly true. But only partly since there's outlines and, by the way they are done, there's also shadows. The only thing effectively missing is the background ; yet it's not something that can't be done, just not as easily.

Why we don't see variance in RenPy games as we see in web sites?

Because Ren'Py games are not web sites, and we aren't anymore in the 00's with personal websites that need their mandatory dose of flash effects ?

Is it too difficult to implement or simply impossible?

It's not impossible and relatively easy to implement. In fact, if you were attentive, you would have seen that around half Ren'Py games use outlines for the dialogs. But, and it's probably the reason why you haven't noticed it, most of the time the effect applied to texts are here to increase the visibility, not to turn the game into a teenage girl fashion show.

Are there Visual Novels that use non-default approach to showing dialogues, like speech bubbles or similar, placed according to the best location for each scene?

Yes, there's some. But they aren't numerous, nor popular, for a really good reason: It's a really poor and bad design.
To my knowledge, all the authors who tried such approach have abandoned their game, not because of the difficulty to make them, but because of the lack of players.

I wonder if HTML+CSS+JS would be a better choice for a visual novel instead of RenPy.

It wouldn't, and it's not a question of coding, even HTML+CSS+PyScript wouldn't be a better choice. Ren'Py offer the same flexibility than an engine like Twine, with only really few limitation in regard of CSS, and to this it add a tons of features that can't really be done with Twine, or not be done as easily ; among them there's all the image manipulations by example.

 

[Gunizz]

Because Ren'Py games are not web sites, and we aren't anymore in the 00's with personal websites that need their mandatory dose of flash effects ?

Thanks for misquoting me and all this passive-aggressive tone in your answers. I never talked about Flash or fancy useless moving effects. I talked about styling and modifying the aspect of the UI, in particular in the dialogues. I just asked why all the games look the same and all the textual dialogues occupy relevant portions of the visual content. That's a UI issue in my book.

It's not impossible and relatively easy to implement. In fact, if you were attentive, you would have seen that around half Ren'Py games use outlines for the dialogs. But, and it's probably the reason why you haven't noticed it, most of the time the effect applied to texts are here to increase the visibility, not to turn the game into a teenage girl fashion show.

While playing, I often modify games myself using text outlines to better visualize the underneath image, but the result is not comparable to the one I could easily get with CSS. In Ren'Py the final result simply sucks, visually. Font kerning is so bad. My skills in Ren'Py are really basic. So I wondered if I am missing some tricks or it's very difficult to redesign the UI for each frame. Can you set the font as relative, can you create flexible boxes?

It's a really poor and bad design.

Well, I think it's poor and bad design to block the view of important content with text or useless decorations. But probably you are a usability expert working at Nielsen Norman so you know more than me.

among them there's all the image manipulations by example.

What image manipulation is not easily achieved with CSS+JS that can be done by Ren'Py? You can set alpha channels, move objects, change an image to B&W on the fly, redefine the colour palette, or simply resize it or show a different image according to screen resolution. Can you do that in RenPy?

 

[anne O'nymous]

Thanks for misquoting me and all this passive-aggressive tone in your answers.

You're welcome... to imagine whatever you want.

I never talked about Flash or fancy useless moving effects. I talked about styling and modifying the aspect of the UI, in particular in the dialogues.

Something that is mostly nothing more than fancy useless effects. But yeah, they are statics, so it's surely the difference that change everything.
The priority is always the readability, and effects rarely increase it ; it's more often the opposite. The sober is an User Interface, the better it is. What doesn't mean that it should be bland, but there's a whole world in between those two extremes.

I just asked why all the games look the same and all the textual dialogues occupy relevant portions of the visual content. That's a UI issue in my book.

Yet it's the design used by Visual Novels since they exist, therefore decades before the very first version of Ren'Py.
Oh, and by the way, it's not an UI issue, the fault rely on the artist, not on the game designer ; even if they often are the same person. In the same way than, for a comic, a scene is built by taking count of the amount of dialog that will have to be shown, games' CGs should be built by taking count of the dialog box.

In Ren'Py the final result simply sucks, visually. Font kerning is so bad.

Before accusing the font kerning, perhaps starts by learning what happen behind the scene. The result isn't always good because each screen is resized to match the display window. And obviously the anti aliasing that will then happen will sometimes lead to approximate result.

My skills in Ren'Py are really basic. So I wondered if I am missing some tricks or it's very difficult to redesign the UI for each frame.

What you are missing isn't tricks, it's the basis. You drawn your conclusion before even starting to understand what you are talking about.

Can you set the font as relative, can you create flexible boxes?

There's strictly no interest to have relative font size, and all boxes are flexible by default.

Well, I think it's poor and bad design to block the view of important content with text or useless decorations. But probably you are a usability expert working at Nielsen Norman so you know more than me.

No need to works for Nielsen Norman. It just need to be old enough to have witnessed four decades of software design, most of this time past being yourself the one that contribute to this design. It's called "experience".

And by the way, as I said, you blame the engine and UI designer for something that don't fall under their responsibility.

What image manipulation is not easily achieved with CSS+JS that can be done by Ren'Py?

This by example:

Spoiler

You don't have permission to view the spoiler content. Log in or register now.

100% real time processing over 4 statics images.

Can you do that in RenPy?

Of course you can, you can also deform the image, and more.

 

[Winterfire]

You do not want the dialogue to fly around the screen when reading.
Aside from devs taking into account that portion of the screen being covered by the dialogue box/text, when you really need to use that part of the screen, you should make use of the Hide feature. That's what it is there for.

 

[Domiek]

Definitely would rather a player use the middle mouse button to hide the dialogue box rather than making all of my renders some ultra wide weird dimension where I don't take advantage of 1/3 of the available screen.

As long as the dialogue box is mostly transparent, I haven't been bothered by it as a player.

 

[L8ERALgames]

i got mentioned. thanks osanaiko

for the record, i hate the UI taking up the lower part of the screen because it annoyed me trying to squeeze sex senes in. i find it easier to fit them into a relative square shape, so do move the UI to the right:



for me, it feels easier to fit the important parts of a scene into the area to the left so i don't have to try squeezing it into some long thin line.

i don't like the whole "hide the ui" thing. i feel (and this is personal) if the player needs to hide the UI to see the "meat" of the image you composed, then either it's bad composition or bad UI. hiding the UI for screenies is one thing. hiding it to actually see what's going on is another.

and for full admission, i've done bad composition as much as anyone. but i just find this easier.

 

[L8ERALgames]

side note:
when you put your UI to the right, you can then fit your spellbook in.

 

[MissFortune]

It seems to me there is no much flexibility in RenPy

No. You're really just lacking in knowledge of Ren'py itself. Ren'py is as flexible and capable as the person doing the coding/designing is. It's like driving a car; if you suck at driving, the car isn't going to make you a better driver. You get better by practicing driving the car, the same applies to coding in Ren'py.

There's quite a few games around here that just use Ren'py as an engine while completely reformatting the UI. The most significant example of it being Summertime Saga. It's Ren'py but looks like nothing like it outside of a few smaller elements, namely the save/load menus.

Though, I have to ask...how does asking for alternatives for the dialogue box in Ren'py lead to a whole tangent about HTML/CSS/JS vs Python and how one is superior to the other?

 

[tomcire]

Renpy is a very powerful engine, most of its features are unknown to the majority of people.
If you are interested in a VN engine who uses web technologies (js + html + css) here to you

You must be registered to see the links

 

[crabsinthekitchen]

Speech bubbles are definitely possible, I played around with them about a month ago. And I understand why they aren't used often. Making a short scene was fun but fuck it is annoying to explicitly position each text line

 

[FranceToast]

i got mentioned. thanks osanaiko

for the record, i hate the UI taking up the lower part of the screen because it annoyed me trying to squeeze sex senes in. i find it easier to fit them into a relative square shape, so do move the UI to the right:

View attachment 2004062

for me, it feels easier to fit the important parts of a scene into the area to the left so i don't have to try squeezing it into some long thin line.

i don't like the whole "hide the ui" thing. i feel (and this is personal) if the player needs to hide the UI to see the "meat" of the image you composed, then either it's bad composition or bad UI. hiding the UI for screenies is one thing. hiding it to actually see what's going on is another.

and for full admission, i've done bad composition as much as anyone. but i just find this easier.

Have you gotten a lot of feedback (positive or negative) for this approach?

 

[osanaiko]

Have you gotten a lot of feedback (positive or negative) for this approach?

From the reviews of Reconnect (https://f95zone.to/threads/reconnect-v1-0-l8eralgames.118423/):

"The dialogue box being on the side threw me off at first, but the developer did a great job of directing to focus of the renders so you can easily pay attention to both it and the renders, and I liked it a lot by the end. "

and from a comment in the discussion thread:

" There is also a reason why most authors have text at the bottom, having it on the right side is an abomination. "

But 95+% of comments or reviews didn't even mention it - they talk about characters or image quality or moaning about black metal or cheering because black metal. Which reinforces my own opinions that the layout simply doesn't matter very much.

 

[FranceToast]

From the reviews of Reconnect (https://f95zone.to/threads/reconnect-v1-0-l8eralgames.118423/):

"The dialogue box being on the side threw me off at first, but the developer did a great job of directing to focus of the renders so you can easily pay attention to both it and the renders, and I liked it a lot by the end. "

and from a comment in the discussion thread:

" There is also a reason why most authors have text at the bottom, having it on the right side is an abomination. "

But 95+% of comments or reviews didn't even mention it - they talk about characters or image quality or moaning about black metal or cheering because black metal. Which reinforces my own opinions that the layout simply doesn't matter very much.

Thanks! I'm struggling with the decision a bit. I am sure there are usability/UI reasons Ren'py does default to the bottom strip text-and I'm concerned about the scansion of a column of text vs a 'length' of text, if you know what I mean.
But, and this is just personally, I find that in text heavy games (which I do prefer), I don't focus enough on the graphics when there is such a long bar of text on the bottom, and tend to tab thru the text. I'm going to try one of your games to see if my attention focus changes for the better, or...just changes, lol.

 

[osanaiko]

Thanks! I'm struggling with the decision a bit. I am sure there are usability/UI reasons Ren'py does default to the bottom strip text-and I'm concerned about the scansion of a column of text vs a 'length' of text, if you know what I mean.
But, and this is just personally, I find that in text heavy games (which I do prefer), I don't focus enough on the graphics when there is such a long bar of text on the bottom, and tend to tab thru the text. I'm going to try one of your games to see if my attention focus changes for the better, or...just changes, lol.

To clarify, it's not my game I'm just a fan of L8ERALgames' work.

My thoughts regarding the design decision:
- dialogue at bottom is the default choice and used by the vast majority of games because it works pretty well.
- Doing "dialogue at side" is more work to customise the screens, and you need to lean into it to get a good result. The same energy might be better spent on other things and you'd still have a success.

If the main concern is the renders getting covered, then either pay attention when composing images, and/or make good use of hiding the dialogue box (and possibly using alternate UI for e.g. sex scenes) when you want to make an impact with a specific image/images set.

In order of importance of various concerns when making a game according to me:

• scratching your own itch so you are motivated to continue
• engaging story (both interesting/wanna read more AND sexiness)
• FUN game mechanics, not a repetitive chore, but also not too easy like a snooze-fest KN
• sexiness of foreground images
• don't fucking abandon it
• readability (English, motherfucker, do you write it or at least get someone to proofread?)
• quality of foreground images <--- can't speak for others but I can get my rocks off to relatively poor art if the scenario is sexy enough
• music and sound effects
• quality of background of images
• user interface customisation <---- importance of dialogue at bottom/side decision literally all the way down here
• user interface visual polish

 

[anne O'nymous]

- Doing "dialogue at side" is more work to customise the screens, and you need to lean into it to get a good result.

Yeah, you can't just put the dialog wherever you want. If it's not at the bottom of the screen, where our eyes will naturally fall, you've to design the whole game, including the CG, in a way that will direct the eyes to the dialog.

Plus, when it's a vertical dialog box, you've to put extra attention to the dialogs themselves. There's apparently between 16 and 20 characters that can fit in L8ERAL's dialog box, it limit the words you can use and will also limit the impact of the punctuation in the pace it give to the text.
But in the same time it's small enough to not need eyes movement, what it a good point. A bigger dialog box would lead to eye strain due to the constant need to reach the start of the next line.

The same apply even more for bubble dialogs. It works for comics because it's small enough for our eyes to catch all the text in a panel without effective movement. But on a computer screen, our eyes would be always in movement, what would soon become a constraint, before becoming a discomfort.

 

[L8ERALgames]

Have you gotten a lot of feedback (positive or negative) for this approach?

had only one comment negative.

most people don't care.

so long as things fit nicely on a screen and the UI is cohesive, i think most people get used to anything fairly quickly in a game. i took my "inspiration" from mmos which frequently (used to) place the dialogue/questing info to the right of the screen, so it's not exactly a unique approach.

 

[L8ERALgames]

From the reviews of Reconnect (https://f95zone.to/threads/reconnect-v1-0-l8eralgames.118423/):

"The dialogue box being on the side threw me off at first, but the developer did a great job of directing to focus of the renders so you can easily pay attention to both it and the renders, and I liked it a lot by the end. "

and from a comment in the discussion thread:

" There is also a reason why most authors have text at the bottom, having it on the right side is an abomination. "

But 95+% of comments or reviews didn't even mention it - they talk about characters or image quality or moaning about black metal or cheering because black metal. Which reinforces my own opinions that the layout simply doesn't matter very much.

i actually loved the moaning about the music a lot. i loved how everyone assumed i'm a metalhead. that killed me.

my discord, meanwhile, frequently trades links to folk punk...

 

[L8ERALgames]

Plus, when it's a vertical dialog box, you've to put extra attention to the dialogs themselves. There's apparently between 16 and 20 characters that can fit in L8ERAL's dialog box, it limit the words you can use and will also limit the impact of the punctuation in the pace it give to the text.
But in the same time it's small enough to not need eyes movement, what it a good point. A bigger dialog box would lead to eye strain due to the constant need to reach the start of the next line.

i put a bit of thought into that, to be honest, and the reason there's only 16-20 characters is mostly because i upped the font size more than the default ren'py size because i wanted it to not feel "cramped".

i find my writing style is usually short sentences/paragraphs (i do that as a deliberate thing to maintain the reader's attention and to force myself to be concise), and i find i am more challenged to FILL the dialogue box than be restrained by it.

for me, the long sprawling dialogue boxes which were default in ren'py were annoying to me. i came from an rpg/mmo field at the time and was really enjoying a more square shaped side box UI in a couple of games and wanted to replicate it as i found it neater and opened up the majority of the left side. i thought, for static images it'd just give me more room to be creative with.

but i definitely had to think about it a lot before implementing and expected more negative feedback than i got. i expected people to hate my first game.

i wouldn't do bubble dialogue, though. at that stage you may as well make a comic and just remove all interactive UI from the page. which might work... hmm.

at the end of the day, i think it's a creative choice which needs to be practical and anything can work if you implement it with care. hell, i even considered putting it at the top of the screen. if the ui looks nice, most players will go with it.