HTML What's wrong with most HTML games, how to improve them?

SerokMinmas

Newbie
Sep 6, 2016
54
74
It is far easier to create a good UI in Twine (and in HTML in general) than most other engines used for adult games. I have no idea why decent or even just different UIs are so uncommon, but I think it's just because devs underestimate the vast, easy improvements they can make to the perceived quality of their game and to the player experience with just a bit of HTML and CSS, an amount you could learn in a few evenings or over a weekend.

Compared to other engines which have pre-made UIs like Ren'py and RPGM, Twine is far and away the easiest to alter in significant ways.
It also baffles me that so few people actually take the weekend nescessary to learn BASIC CSS stuff and keep using default twine stuff.

There are GOOD (well, at least decent) games that do this, and the UX would be so much better if they took the time to do it.
 
  • Like
Reactions: stevejackhammer
Sep 4, 2020
91
47
It also baffles me that so few people actually take the weekend nescessary to learn BASIC CSS stuff and keep using default twine stuff.

There are GOOD (well, at least decent) games that do this, and the UX would be so much better if they took the time to do it.
Here's a shot of my attempt. Advanced responsive layout (see examples). Proper CSS3, HTML5, ES6 and other modern web techs. Took about a week or so, and I'm still futzing with it. And it's built on Twine/Sugarcube, swapping out the old UI and wrapping this one around the base Twine engine.

It's very do-able.

Landscape layout:

1639582651488.png

Portrait layout:

1639582977900.png

Mobile layout:

1639582945490.png
 
  • Red Heart
Reactions: SerokMinmas

PTSdev

Member
Oct 21, 2019
102
288
It also baffles me that so few people actually take the weekend nescessary to learn BASIC CSS stuff and keep using default twine stuff.

There are GOOD (well, at least decent) games that do this, and the UX would be so much better if they took the time to do it.
I think lots of people underestimate the amount of work it takes to make a game. When I started developing my project, I quickly stopped using the Twine software. It's beyond bad for games above an even moderate degree of complexity. My game contains over 1100 passages right now, imagine managing that in the Twine software. I do have coding experience, but mostly in C++ and C#, so the whole web design thing was kinda new. But I'm enjoying the ride so far.

The same goes for CSS/UI stuff. You can't really customize important things if you don't look under the hood of Sugarcube. (APIs, JS, etc.) You also have to put some thinking into a project. Structural planning matters. Having a solid object/data foundation is very important. The game should be scalable, i.e. adding new content should always be possible without making changes in the machine room.

One thing that baffles me as well is how navigation is handled in lots of games, this applies to both Ren'py and HTML games. (I don't play RPGM games, so I can't comment on those.) The "realistic" approach of linearily moving through passages is just tedious and repetitive. Some games have at least a world map, but there are many without one. So you just click, click, click until your brain melts.

Another problem in general is the link between crowdfunding and early access. Lots of projects get lost between fan service and bad planning. Imho, crowdfunding is awesome for projects with a clear vision, but it's highly dangerous if you don't know where you're going. Maybe lots of games are being made be very young devs who see the successful games on here and think "hey, I can do that too and make a quick buck", which leads to these copycat incest Daz3D preset dumpster fires. (Don't get me wrong, I like some of these. :D)
 
  • Like
Reactions: stevejackhammer
Sep 4, 2020
91
47
My game contains over 1100 passages right now, imagine managing that in the Twine software.
The Twine software is not a development environment. That's where I expect a lot of people fall down when they start an endeavor like this. I have a WebStorm-based TypeScript-Babel-Dart SASS-Tweego workflow that I put together specifically to manage complexity. 1100 passages is a lot. Then again, most modern software solutions of moderate capability are made from hundreds and hundreds of individual files too. Software people do that to make it less complex -- each file has a well-defined contribution to the overall goal.

I bet your 1100 files are 1100 individual passages. One passage per per dot-tw file. It makes sense. But then you need an IDE to help you track and manage those 1100 files.

Oh yeah, and a Software Configuration Management system (I use Git) to keep track of all the *versions* of those 1100 files. You need to be able to roll changes backward and forward, develop new content on isolated development branches, merge content and fixes in a controlled way -- software engineering has many moving parts.

Naughty games or space station software (and yeah, I've done both), it's complicated.

But honestly, how would anyone know about any of this stuff if the first exposure they've had to modern software development is Twine or Ren'Py?
 
  • Like
Reactions: PTSdev

PTSdev

Member
Oct 21, 2019
102
288
The Twine software is not a development environment. That's where I expect a lot of people fall down when they start an endeavor like this. I have a WebStorm-based TypeScript-Babel-Dart SASS-Tweego workflow that I put together specifically to manage complexity. 1100 passages is a lot. Then again, most modern software solutions of moderate capability are made from hundreds and hundreds of individual files too. Software people do that to make it less complex -- each file has a well-defined contribution to the overall goal.

I bet your 1100 files are 1100 individual passages. One passage per per dot-tw file. It makes sense. But then you need an IDE to help you track and manage those 1100 files.

Oh yeah, and a Software Configuration Management system (I use Git) to keep track of all the *versions* of those 1100 files. You need to be able to roll changes backward and forward, develop new content on isolated development branches, merge content and fixes in a controlled way -- software engineering has many moving parts.

Naughty games or space station software (and yeah, I've done both), it's complicated.

But honestly, how would anyone know about any of this stuff if the first exposure they've had to modern software development is Twine or Ren'Py?
I have a multi-layered directory/file system. One major folder for each branch of development (like "core" for CSS, JS, Sugarcube config, etc.) or "facility" for all the rooms and so on), then each NPC has its own folder with subfolders named by character route, the file names correspond to the NPC's min level when the event occurs. And yeah, each folder / file has a single purpose. It would be impossible to manage the project otherwise. Some passages are "multi-use", e.g. I have a "character screen" passage which gets used every time the player wants to interact with an NPC. This screen shows general information on the character and lets you choose from events if they're unlocked.

For coding, I mainly use VSCode as I like the workflow there. Combined with tweego it also makes test runs / debugging simple.

I think the most important part is planning. I can't emphasize that enough. I think I have added only five main elements since I laid out the general plan for the game. Once you begin to apply bandaids everywhere, things get ugly very fast.
 
  • Like
Reactions: stevejackhammer
Sep 4, 2020
91
47
I have a multi-layered directory/file system. One major folder for each branch of development (like "core" for CSS, JS, Sugarcube config, etc.) or "facility" for all the rooms and so on), then each NPC has its own folder with subfolders named by character route, the file names correspond to the NPC's min level when the event occurs. And yeah, each folder / file has a single purpose. It would be impossible to manage the project otherwise. Some passages are "multi-use", e.g. I have a "character screen" passage which gets used every time the player wants to interact with an NPC. This screen shows general information on the character and lets you choose from events if they're unlocked.

For coding, I mainly use VSCode as I like the workflow there. Combined with tweego it also makes test runs / debugging simple.

I think the most important part is planning. I can't emphasize that enough. I think I have added only five main elements since I laid out the general plan for the game. Once you begin to apply bandaids everywhere, things get ugly very fast.
We got a software developer here!

I like to write in TypeScript rather than raw JavaScript, so my workflow is necessarily more complicated. Drop TypeScript, and that Babel stuff goes away. Then it looks a lot like yours.

One thing that is missing from your system is Software Configuration Management (aka SCM). Consider learning how to integrate Git into your system. VSCode makes that easy enough. I've done it -- pretty much works out of the box after you install Git. With SCM, you can "check in" your code (JS, HTML, CSS, Twee files, images, all of it). You make changes, and check-in again. And repeat. Each change is recorded, and then when you realize something is hopelessly broken, you can easy step back in time to recover whatever file it is that you've messed up from a point in time when it was working.

Also, when you release the game, you'll label your releases (0.1, 0.1.5, 0.2, and so on). While you're working on version 0.3, someone spots a serious bug in 0.2 that is being downloaded from F95. You create a branch from 0.2, fix it, and upload it to F95. There is no 0.3 code in that uploaded release. Then you merge that 0.2-bugfix branch back on 0.3, incorporating the fix into the current code path. The people downloading your game are amazed at your responsiveness and shower your Patreon account with cash, gold bullion, and raw uncut diamonds.
 
  • Like
Reactions: PTSdev

outsider artisan

Developer of Succubus Stories.
Game Developer
Jun 14, 2020
348
591
I think lots of people underestimate the amount of work it takes to make a game. When I started developing my project, I quickly stopped using the Twine software. It's beyond bad for games above an even moderate degree of complexity. My game contains over 1100 passages right now, imagine managing that in the Twine software. I do have coding experience, but mostly in C++ and C#, so the whole web design thing was kinda new. But I'm enjoying the ride so far.

The same goes for CSS/UI stuff. You can't really customize important things if you don't look under the hood of Sugarcube. (APIs, JS, etc.) You also have to put some thinking into a project. Structural planning matters. Having a solid object/data foundation is very important. The game should be scalable, i.e. adding new content should always be possible without making changes in the machine room.

One thing that baffles me as well is how navigation is handled in lots of games, this applies to both Ren'py and HTML games. (I don't play RPGM games, so I can't comment on those.) The "realistic" approach of linearily moving through passages is just tedious and repetitive. Some games have at least a world map, but there are many without one. So you just click, click, click until your brain melts.

Another problem in general is the link between crowdfunding and early access. Lots of projects get lost between fan service and bad planning. Imho, crowdfunding is awesome for projects with a clear vision, but it's highly dangerous if you don't know where you're going. Maybe lots of games are being made be very young devs who see the successful games on here and think "hey, I can do that too and make a quick buck", which leads to these copycat incest Daz3D preset dumpster fires. (Don't get me wrong, I like some of these. :D)
I have more than 2000 passages, and my game is very complex with a focus on mechanics. Good navigation is part of UI, that's hardly the fault of Twine if devs have bad navigation systems.

I think this comment is the perfect example of someone "underestimating" Twine.

It is possible to use a much more programmer-friendly structure by using Tweego and other command line tools. There are very few true structural limitations on what you can actually alter or change, especially when it comes to UI, and the amount of complexity you can have is very deep. I haven't played your game, but I've not played a text-based game that's too complex for Twine.

I don't think it's your fault you reached the conclusion that you did. Twine has a reputation for being simple and having a low bar to entry and for being unsuited to complex games. On top of that, the Twine program itself is a terrible code editor, and the default engine it uses, Harlowe, is extremely bad as far as I can tell. That's a lot do things weighing down your first impression, and even your early development.

Anyway, I'm not saying you should use twine or switch back, just that this is wrong. Most of your criticisms are problems with devs not Twine, and the ones that are directed at Twine are incorrect.

But if I have time I'll try your game sometime, just to make sure. It's hard for be to believe it's too complex for Twine, but you never know. There are very complex Twine games out there, though, mine isn't the only one.
 

PTSdev

Member
Oct 21, 2019
102
288
I think you're missing my point. The Twine software itself is terrible (doesn't matter if Twine 1 or 2), but the underlying "engines" are quite powerful. So you clearly have to differentiate between Twine as a GUI and Twine as a generic term when referring to HTML visual novels. Sugarcube is immensely customizable, especially if you use it in combination with tweego and an editing software like VSCode or sth similar. I did not mean to "hate" on Twine, on the contrary - I was pleasantly surprised by the amount of options I got with Sugarcube.
 
Sep 4, 2020
91
47
The Twine software itself is terrible (doesn't matter if Twine 1 or 2), but the underlying "engines" are quite powerful.
Quite right. Twine as an application for development is a toy -- fine for demos, but not scalable for anything of moderate size or larger. Twine as an SPA scheme is great, and by leveraging off the HTML ecosystem as an application substrate, opens the possibilities for tremendous customization and innovation.
 

outsider artisan

Developer of Succubus Stories.
Game Developer
Jun 14, 2020
348
591
I think you're missing my point. The Twine software itself is terrible (doesn't matter if Twine 1 or 2), but the underlying "engines" are quite powerful. So you clearly have to differentiate between Twine as a GUI and Twine as a generic term when referring to HTML visual novels. Sugarcube is immensely customizable, especially if you use it in combination with tweego and an editing software like VSCode or sth similar. I did not mean to "hate" on Twine, on the contrary - I was pleasantly surprised by the amount of options I got with Sugarcube.
I thought you said you abandoned Twine to move to some sort of C++ codebase. It's possible I misread it. As far as I know, the entire ecosystem of runtime engines and code compilers are all under the Twine umbrella, so a game made with Tweego, for example, is still a Twine game, just using an alternate "compiler" for lack of a better term.

If what you're saying is the actual Twine program itself is generally insufficient for complex projects, I would assume that's true, though I did not use it for very long to put it through its paces.
 

PTSdev

Member
Oct 21, 2019
102
288
I thought you said you abandoned Twine to move to some sort of C++ codebase. It's possible I misread it. As far as I know, the entire ecosystem of runtime engines and code compilers are all under the Twine umbrella, so a game made with Tweego, for example, is still a Twine game, just using an alternate "compiler" for lack of a better term.

If what you're saying is the actual Twine program itself is generally insufficient for complex projects, I would assume that's true, though I did not use it for very long to put it through its paces.
I just mentioned C++, as it is the language I've got the most experience with. Yeah, the actual Twine program is neat for beginners and very small projects as it allows you to visualize the story as a map. The Twine software comes with a very backbones editor window, but lacks lots of necessary dev tools. It also begins to lag like hell once you go above a certain project size. As I've said, for beginners it's perfect, because it lowers the amount of abstraction needed. Advanced users won't have fun with it.

The twine language ecosystem is very well documented and really lots of fun to work with. And there are plenty of great user made macros out there which can be easily implemented.
 
  • Like
Reactions: outsider artisan

Rafster

Bear chaser
Game Developer
Mar 23, 2019
2,010
3,924
I decided to try to migrate to tweego for a third time (I had two failed attempts on the last six months). I finally got to make my first .twee file, which was huge, and used one program to divide it in several .tw, one for each passage. Now I need to figure out how to work from Visual Studio Code and compile back to the .html.

I hope I don't break the game more than I usually do :ROFLMAO:
 
Sep 4, 2020
91
47
I decided to try to migrate to tweego for a third time (I had two failed attempts on the last six months). I finally got to make my first .twee file, which was huge, and used one program to divide it in several .tw, one for each passage. Now I need to figure out how to work from Visual Studio Code and compile back to the .html.

I hope I don't break the game more than I usually do :ROFLMAO:
Though I've switched to WebStorm because I'm more familiar with it, when I was using VSCode, I started a terminal session inside the IDE. In that terminal session I had tweego running in "watch" mode, directing the output html file to a separate distribution directory. I just edited tw files, JS files, and CSS files in that watched directory.
 
  • Like
Reactions: sp3cial and Rafster

PTSdev

Member
Oct 21, 2019
102
288
I decided to try to migrate to tweego for a third time (I had two failed attempts on the last six months). I finally got to make my first .twee file, which was huge, and used one program to divide it in several .tw, one for each passage. Now I need to figure out how to work from Visual Studio Code and compile back to the .html.

I hope I don't break the game more than I usually do :ROFLMAO:
command line:
tweego -o OUTPUTFILE.html SOURCEFOLDER

SOURCEFOLDER = folder to read from. Make sure you have the "storyformats" folder in the same folder as "tweego.exe". Tweego tries to implement everything compatible it finds in the source folder.

Watch mode is also an option!

Read the documentation, there are lots of other very helpful options:
 
  • Like
Reactions: sp3cial and Rafster

Rafster

Bear chaser
Game Developer
Mar 23, 2019
2,010
3,924
In that terminal session I had tweego running in "watch" mode, directing the output html file to a separate distribution directory. I just edited tw files, JS files, and CSS files in that watched directory.
Watch mode is also an option!
Thank you guys! I finally got my first .html made by tweego, using the -w as you told me. VS Code caught some errors I had on my code while I was at it, it's nice to code like that.
 
  • Like
Reactions: sp3cial

sp3cial

Newbie
Oct 21, 2017
20
25
At this stage I can also recommend the sugarvalidator ( ). It finds one or two bugs that you would otherwise only discover when you actually call up the passage. Very useful in combination with Tweego and VSCode.
 
  • Like
Reactions: HiEv and Rafster

HiEv

Member
Sep 1, 2017
384
778
At this stage I can also recommend the sugarvalidator ( ). It finds one or two bugs that you would otherwise only discover when you actually call up the passage. Very useful in combination with Tweego and VSCode.
There's also the page, where you can just drop a Twine/SugarCube HTML file there and it will look for broken macros, depreciated macros, and other common problems.
 
  • Like
Reactions: PTSdev

outsider artisan

Developer of Succubus Stories.
Game Developer
Jun 14, 2020
348
591
I just mentioned C++, as it is the language I've got the most experience with. Yeah, the actual Twine program is neat for beginners and very small projects as it allows you to visualize the story as a map. The Twine software comes with a very backbones editor window, but lacks lots of necessary dev tools. It also begins to lag like hell once you go above a certain project size. As I've said, for beginners it's perfect, because it lowers the amount of abstraction needed. Advanced users won't have fun with it.

The twine language ecosystem is very well documented and really lots of fun to work with. And there are plenty of great user made macros out there which can be easily implemented.
I apologize for misunderstanding you. On rereading your post I now understand it. The issue was indeed me taking the name Twine to mean the entire ecosystem, not the application itself.
 

Tompte

Member
Dec 22, 2017
215
155
I should clarify that I have a pretty strong disdain for the web stack and web development in general and everything I say on the topic should be taken with a big grain of salt.

If someone goes "I want to build a game in the browser using only HTML and Javascript" I can't help but go "Suuure. Go right ahead. Good luck with that."
 

outsider artisan

Developer of Succubus Stories.
Game Developer
Jun 14, 2020
348
591
I should clarify that I have a pretty strong disdain for the web stack and web development in general and everything I say on the topic should be taken with a big grain of salt.

If someone goes "I want to build a game in the browser using only HTML and Javascript" I can't help but go "Suuure. Go right ahead. Good luck with that."
Twine is essentially only HTML and JavaScript (and CSS, of course), so basically everyone in this thread is already doing that with no problems to speak of. For a text driven game especially, the web is a great fit.
 
  • Like
Reactions: Nick33 and sp3cial