HTML Showcasing UI in Twine + questions

[MindX_]

You must be registered to see the links

Yo!

I've got this little showcase of my work (heavily inspired by apple's keynote about the Vision Pro not gonna lie) using Twine that I want to share with you. But before I dive in, I want to be upfront: this isn't part of any future game or anything like that. I'm not particularly skilled in 3D or other types of art, so creating visually stunning experiences for players isn't exactly my forte.

Now, let's shift gears and talk about something that's been on my mind—the development of visual novels (VN). Specifically, why do most visual novels use Ren'Py? It might seem like a dumb question, but I'm genuinely curious about the reasons behind it. Is it because Python is much easier to work with compared to something like JavaScript? Or is there something entirely different at play here?

I understand that Ren'Py is a fantastic tool for creating visual novels and what I'm about to say might just be a naive thought, but I've often felt that Twine-SugarCube, with a solid boilerplate, offers more flexibility and fewer constraints than Python, given that it primarily involves HTML, CSS, and basic JavaScript, unless you're attempting something particularly complex.

Of course, it's entirely possible that I'm just babbling and that Ren'Py is actually quite open to customization and allows you to achieve whatever you desire. I don't have much experience with it beyond creating some UI, which, to be honest, wasn't the most enjoyable endeavor.

That being said, I'd love to engage in some kind of friendly debate on this topic. If you have any insights or simply want to discuss the matter, please share your knowledge with me.

P.S.: If you have any questions about the showcase itself, feel free to ask away. I'm here to help and provide further details if needed.

 

[MissFortune]

Specifically, why do most visual novels use Ren'Py? It might seem like a dumb question, but I'm genuinely curious about the reasons behind it.

In broad strokes, Ren'py is a lot like Twine in that it offers an ease of use for someone that doesn't know how to code at all, but can grow with the dev themselves. They just do two different things well, and at the end of the day, it depends on what you're trying to achieve. Ren'py vs Twine is very much a contextual conversation.

Also, nice UI. Super clean/modern. Rare you see something like that done with Twine around here. If you're making a game, having that with good writing is good a lot for you.

 

[Feebs]

In my limited experience, I find one of the major differences is in how text-heavy they are.

Ren’py is built with classic VNs in mind. The visual part of that being the larger sum of the parts. "Slides" of text appearing over the imagery.

Twine however tends to be more text heavy. Rather than single "slides" of text, you'll get full conversations on screen and less visual content to match it.

As I say, that's not every game, but I think it's fair to say that's the norm.

I think beyond that, it's just what you're comfortable with. A lot of creators, especially the 3D stuff, are creative types as MissFortune alluded to, with little if any coding experience. Ren'py is simply easier for them to pick up and get on with, better known, synonymous with Visual Novels and easier to integrate with Steam for those looking to go that route. You can download it and with no coding experience create a visual novel using your renders without having to learn much of anything. It also has, imo, better controls for the player, keyboard shortcuts and even just mouse scrolling.

Twine is for "interactive stories" according to their site, and while the traditional visual novel aesthetic and system is entirely possible within it, it doesn't achieve it out of the box and needs quite a bit of work to get it interacting with the Steam SDK (though I haven't looked at Twine specifically, I assume it can use NW.js and greenworks to integrate like HTML games without Twine). It can achieve the shortcuts and what not I mentioned as an advantage to Ren'py too, of course, but it's not uniformed across the platform.

Of course, in either scenario, if you want to create something more complex, you need to put in the work. Both are great tools, both can create amazing games, but I have to say Ren'py has Twine beat when it comes to accessibility for never-before coders and familiarity for the end user. I might add I'm saying all this while actually using Twine for my own project.

Your UI is beautiful btw and will definitely set it apart from other HTML games.

 

[MindX_]

In broad strokes, Ren'py is a lot like Twine in that it offers an ease of use for someone that doesn't know how to code at all, but can grow with the dev themselves. They just do two different things well, and at the end of the day, it depends on what you're trying to achieve. Ren'py vs Twine is very much a contextual conversation.

Of course, in either scenario, if you want to create something more complex, you need to put in the work. Both are great tools, both can create amazing games, but I have to say Ren'py has Twine beat when it comes to accessibility for never-before coders and familiarity for the end user. I might add I'm saying all this while actually using Twine for my own project.

That's the idea I had in mind, but I was a bit uncertain about it. Thanks a bunch for sharing your insights!

Also, nice UI. Super clean/modern. Rare you see something like that done with Twine around here. If you're making a game, having that with good writing is good a lot for you.

Your UI is beautiful btw and will definitely set it apart from other HTML games.

Thanks a lot for the kind words! Honestly, though, I don't trust my storytelling abilities enough to make players forget about the lack of custom art and characters. So, for now, it's all about making these kind of "prototypes". However, I'm considering creating some cool interactive assets like what I just showed and sharing them, it'll probably be something like phones, tablets, and who knows what else.

 

[guest1492]

I've only done a little modding, not full on game game development, and also I have limited experience in Twine formats other than SugarCube. (Note that each story format for Twine is basically a different programming language.)

The main difference I see between the two is that Ren'Py games display text line by line, while Twine games display everything at once. Of course, you could also make Twine games display text a line at a time, but it doesn't work that way out of the box. You need to add some third party code (Cyrus' click-to-proceed macro) or write it yourself.

Another major difference I notice is that things don't update in Twine games in response to user interaction. Text on the screen (eg stats display on the side bar) stay the same until a passage transition. You could force it to update by rendering the element again, but again that is not something that works out of the box, nor does the engine do it automatically for you. I'm not sure how Ren'Py does it, but I hope it's not by constantly re-rendering everything on the screen every 100ms or something.

There are many other minor differences as well. For example, due to security concerns JavaScript is unable to read files on your computer. That means it can't walk through your directory and then pull a random image to display in the game, you have to actually code it in. I assume that you can do it in Ren'Py because you can walk through directories using python. Another difference is that when you load a game in Twine, music doesn't play right away until you click your mouse or press a button. Videos also need to be muted if they are to be autoplayed (think of advertisements blaring at you when you browse random websites before these browser changes).

 

[Myscra]

Thanks a lot for the kind words! Honestly, though, I don't trust my storytelling abilities enough to make players forget about the lack of custom art and characters. So, for now, it's all about making these kind of "prototypes". However, I'm considering creating some cool interactive assets like what I just showed and sharing them, it'll probably be something like phones, tablets, and who knows what else.

I stumbled on this thread while looking for ways to improve my UI for my game. I'm actually coming from the opposite end of the spectrum. I'm a decent storyteller with little programming ability. That UI is awesome and those transitions are so smooth I'm a little jealous. Is the phone a separate passage or more like a custom pop up type deal (sorry if I'm missing the mark completely with that question).

 

[MindX_]

Is the phone a separate passage or more like a custom pop up type deal (sorry if I'm missing the mark completely with that question).

Hey!

Thanks for the kind words and no worries, I absolutely love answering these kinds of questions. So, here's how it works—it's all about custom JavaScript. What I mean by that is, while the UI is built using HTML and CSS, instead of creating a passage in Twine, I injected the HTML of the phone directly into the page (or the body element in the DOM to be more specific). This approach allows the phone to be completely independent of Twine's story element, meaning it can be opened, blocked, or interacted with at any time. You can achieve this by appending a child to the body element with your custom HTML.

Now, let's talk about the animation. It's actually a basic "addEventListener" that I implemented. In this particular case, I used a combination of keys, like Ctrl+M, but you can also trigger it with the mouse or a button. When the specified keys are actioned, a new class is added or removed from the element, such as "open". Thanks to this class we'll be able to trigger an animation.

For example, by default, your phone might have a "left: -50%" position, but the "open" class sets it to "left: 20px." To achieve a smooth transition, all you need to do is add a CSS transition to the default class for the phone. This way, when the "open" class is added or removed, the transition will be as smooth as butter.

It might not be the best way to do it but since I don't know much about Twine I went with what made the most sense for me.

I hope this clarifies things for you! If you have any more questions or need further details, feel free to ask.

 

[osanaiko]

Twine would only be considered to have "more flexibility and fewer constraints than Python, given that it primarily involves HTML, CSS, and basic JavaScript" to someone who was already familiar with web development technology.

Anyone coming in without that background would face challenges of similar magnitude with either Renpy or Twine. The exact nature of the challenge would depend on what they are trying to do with their game - something more "html game" like (lots of text and a few pics, and more of a choose you own adventure style moving between locations), or more VN like (renpy images with small text box to click and click and click). As another poster said, it's possible to create many different things in both frameworks, but a beginner would need a lot of time and help to go outside the basic pattern.

Regards your UI example video--- VERY nice! I can tell you are an experienced frontend designer/dev. Do you need a real-world job (lol)? my company might be hiring...

 

[MindX_]

Hey!

My bad on that one—I considered HTML, CSS, and basic JavaScript to be "simpler" than Python. But you're right, when you're a complete beginner, it makes sense to go with what's more popular and has abundant resources to help you achieve your goals. And most of the time, that would probably be Ren'Py for a VN.

As for the UI I really appreciate your kind words! Even though I have limited time nowadays, as I'm focusing on practicing Go and diving a bit into Rust, it's still a pleasure for me to work on these little projects. As for the job hunt, who knows what the future holds? I'll be starting to look soon, but unfortunately, I'm far away in France, haha.

Anyway, thanks again for your insights and the kind words about the UI. Right now, I'm actually working on a more intriguing prototype where you can buy apartments, interact with a phone and a bunch of applications, and have a dialog system similar to Ren'Py. I hope it piques your interest! Have a fantastic day/night!