AGS engine Web port

Dungeonation · Wed 08/02/2023 07:30:59

First off, this is so awesome

I understand why persistent saves haven't been really implemented yet, though my current adventure game project targets the web and plans to have auto saving in it. Instead of using AGS's built in save system, I was going to write my own save system that just saved to a .dat file (it's only one autosave slot with a little bit of information needed for it), however the web build obviously doesn't support File functions either.
Would it be possible to have the File functions behave like saving and loading in browser local storage in the Web build of AGS?

eri0o · Wed 08/02/2023 09:47:58

ok, enough people asked already I am looking into this. I was waiting if WasmFS would be finished so I could use that, but it still did not happen, so I need to use the current FS implementation.

My general idea is to leverage IndexedDB through Emscripten, using FS.mount passing the IDBFS specifier, on the save game directory, and then we fsync with populate true. This has to happen before the game starts.

Now, the problem is when a FS sync occurs for the reverse, which is saving the game files in the IndexedDB, need to think about this. The other thing is probably some of those ⚙️ menu need to be superposed to the game on bottom right so people can delete these files if they want. Just noting things for myself for the time being.

eri0o · Tue 14/02/2023 23:03:17

Hey, I updated the engine built in ericoporto.github.io/agsjs/ to sync save games! (I am using your browsers IndexedDB support)

Please test and see if it works. Make sure to refresh your browser cache.

I am trying to figure out a ui that is simple enough to embed and doesn't suck to be able to also delete the files, but UI is like super hard and this will take me a bit.

Edit: I am going for a minimal approach now of just a button that reads Clear Persistent Files that is in a modal that is loaded clicking a gear-like button on bottom right. I think anything beyond this is too much code right now for the JS. I can't yet add config options there as the engine doesn't support starting again in the wasm environment yet.

Dungeonation · Wed 15/02/2023 05:01:54

The workaround for file erasing sounds good, everything else is working like a charm so far, thank you so very much for this, and the web port of AGS as a whole!

eri0o · Mon 20/02/2023 19:18:37

Hey I added support for also deleting the files that are persistent through a ui in the bottom right corner.

I also added a Fullscreen toggle that can be used on mobile. You can test in the agsjs website.

Implementation details are in the PR here.

Manu · Mon 20/02/2023 21:17:06

Quote from: eri0o on Tue 14/02/2023 23:03:17Hey, I updated the engine built in ericoporto.github.io/agsjs/ to sync save games! (I am using your browsers IndexedDB support)

This is absolutely fantastic! Thanks a lot for the amazing web engine!

eri0o · Mon 20/02/2023 23:08:02

@Dungeonation , the last version on the agsjs website supports arbitrary file writes to the save game directory and will sync those too. It will be in the next release of the AGS Editor too.

@Manu thanks!

There is a small caveat that I think iOS Safari may delete the contents of IndexedDB after seven days of not visiting the website. I haven't found any concrete docs on the matter only user reports. Chrome and Firefox in Android and elsewhere appears to just hold it up as long as you wish.

If anyone can design some menu that looks prettier and works with touch and mouse let me know, I made the simplest design I could come up.

Next things I want to look at, in no particular order, if you need/want any of these or something else, please write here so I can know - it doesn't have to be a feature, there may be some bug or rough edge I forgot/didn't pay attention to.

copying USER.ico as favicon.ico (very easy)
PWA installation for offline usage ~~(easy)~~ (super hard, because itch and other game stores simply doesn't support, it's easy through your own host/GitHubPages)
full engine clean up on exit - allows restarting the engine (hard)
config gui (hard, requires full engine clean up)
~~fix font rendering by patching the the freetype in AGS repository to work with Emscripten (hard)~~ turns out keeping up with Emscripten versions paid off, this is now done, and it was very easy, no patching needed
on-screen keyboard support on mobile (very very hard, probably need to make one in-engine)

Dungeonation · Tue 21/02/2023 00:04:22

Quote from: eri0o on Mon 20/02/2023 23:08:02
on-screen keyboard support on mobile (very very hard, probably need to make one in-engine)

For this I made an in-game keyboard for touchscreens, but the way the mouse works on mobile, you have to tap to move the mouse first, and then tap the button to type a letter - so it's two taps per key.

The save stuff here is a godsend though, and I look forward to the next beta/full release with this in it!!

eri0o · Tue 21/02/2023 01:29:06

@Dungeonation A heads up that on-screen keyboard is not something that will be done quickly or soon, I would like to explore ideas and all, but it's the hardest of the above items. I will be honest, I forgot about this entirely until I went to play the current pick of the month and realized I could not enter the save game name to start the game.

Spoiler

I looked up how this was solved in RenPy and they implemented their own on-screen keyboard - this is hard because it usually look out of place from both the game and the native ui, and has the difficulty internationalization aspect, but it looks like a possible approach. In GameMaker it gives some API so that you can make up your own keyboard areas and then you draw separately in-game. I haven't figured what other engines are doing.

[close]

About touch screen to mouse simulation, the options in default setup should give some minimal options there - relative vs absolute mouse movement, and two different mouse emulation modes. I also notice that increasing hotspot areas and interface fonts in general helps - I hope the new Fullscreen button helps on mobile.

I think in ags4 it should be possible to roll in some sort of touch API, which would enable constructing your own multi-touch stuff by leveraging the existing GUI system in AGS.

For now approach the existing limitations as a design problem - but still, it's good to explain what you are facing here as it helps figure out how to prioritize time on each task, as they all require testing. It also helps me to think about the development problems to write things down in general.

eri0o · Tue 21/02/2023 20:16:10

Hey, the new stuff is in the AGS Editor released today! Also the Freetype used by the web port now matches the one used by AGS engine in all ports (Windows, Linux, ...), so I hope we have less issues with text rendering on the web port now.

Dungeonation · Wed 22/02/2023 03:09:30

Thank you so much again for these new features and the web exporter in general! <3

I've run into some visual weirdness when I run my game in an iframe though, when I enter and then leave fullscreen, this happens to the game window:

And when you open the cog wheel, this is how the text shows:

Also, the cog wheel doesn't appear to show up on mobile? I'm hosting the game on Newgrounds so on mobile it doesn't load in an iframe, it directs to the whole page/HTML for the web game. Not sure why it wouldn't show up though.

eri0o · Wed 22/02/2023 15:25:49

OK, so these are three things

return of Fullscreen in iframe may leave canvas with wrong "size" (this is probably something in the difference of the width and height and the style width height, need to take a look)
cog wheel doesn't appear in a page - the cog wheel doesn't appear when in Fullscreen, but when non-fullscreen it should always appear, my guess is it's there but scrolled out of sight, some css to positioned it absolutely should fix it.
options menu may cut the text of the buttons in it on small sizes

I will take a look into those.

I am trying to figure this other thing out, already discussed it with CW, it's more a design problem

https://github.com/adventuregamestudio/ags/issues/1930

eri0o · Thu 23/02/2023 01:42:31

@Dungeonation can you test this ags_htmljswasm_v01.zip ? In your game Compiled/Web directory, just copy the files from the zip over the ones there. This should fix the missing cog wheel, and MAYBE the buttons and the fullscreen, but not sure on those.

I pushed the change of those and an additional change for high DPI screens in the AGS JS website. The fix was this commit, and it fixes downscaling artifacts in high-dpi devices - an image show like this instead of this. EDIT: unfortunately this fix breaks fullscreen completely when the game is run from inside the iframe, I think the bug is in SDL, so can't do that.

I am still looking into the coming back from fullscreen resize fix when the page is in an iframe.

Ages ago someone told me that keyboard wasn't working for them but I could not reproduce it. Thinking about it now, this is probably related to the iframe, I need to figure it out what is the difference when the game runs inside an iframe for the keyboard.

Dungeonation · Fri 24/02/2023 06:07:29

As you said, the only thing not fixed with that was fullscreen leaving in an iframe, everything else is fixed!

eri0o · Fri 24/02/2023 11:44:19

Hey, I know exactly what the problem is there - there is a bug in SDL and it is setting the size of the fullscreen canvas (the internal size not the css size), so when your Fullscreen and iframe aspect ratio doesn't match, the black bars appears.

I am trying to find a way to workaround this but so far haven't found an attempt that doesn't break mobile - there is a different bug there that SDL simply ignores screen rotation.

So far the best workaround I have is to query the size of window.innerWidth and window.innerHeight once per frame and issue a resize if those changed, but I am trying to see if I can do something else first - I am almost settling on this though.

Investigating this I also found out it's not possible to have a PWA (installable for offline usage) version of a game on Itch, Gamejolt and online game stores in general - they want to maximize site interaction so they don't want people to not use the website through installable web apps apparently.

eri0o · Sat 25/02/2023 23:31:52

@Dungeonation I think I got it, please try, the files are here ags_htmljswasm_v02.zip, should work like the other time, please test. It looked promising in my tests.

If you have trouble with the size, make sure both game_scale_fs=proportional and game_scale_win=proportional are set in acsetup.cfg.

The PR for the fixes in the files above is here: https://github.com/adventuregamestudio/ags/pull/1932

Manu · Sun 26/02/2023 17:40:21

I have a question about the persistent save games in the local storage. Is it possible to "extract" them from the local storage to open them with the Windows version of the game? Alternatively, is it possible to transfer them to another computer (maybe same browser) to open them with the web version of the game?
Thanks a lot!

eri0o · Sun 26/02/2023 17:45:07

Currently no, and I don't plan to give this option soon, there are some complexities involved when doing something like this that makes not easy to support right now. I really don't think investigating this is a good use of my time facing all the other tasks to do.

At minimum I need to add zip support, which takes on a new dependency and need to take license in consideration. There's also UI design issues to think, and beyond this, need to check the online store frontends what's the practice there. Then there is maintaining this. Overall, I prefer to keep desktop and web separate things.

There's a Browser file API in development in the web standards, it's experimental in Chrome and once the API settles down in theory would be possible to just use the default directory on Windows - you would just give AGS in the Web access to it through a prompt. I would like to implement it in this way, once that is available.

Manu · Sun 26/02/2023 18:13:47

Quote from: eri0o on Sun 26/02/2023 17:45:07here are some complexities involved when doing something like this that makes not easy to support right now.

Very clear. I imagined it wasn't easy, but you never know

Thanks again for the amazing web port. Just for you to know, my Star Trek game had an unexpected "success", and this is also thanks to the web version. It appears users prefer web version rather than downloading, at least for small games like this one (1500 downloads vs 7300 browser plays). Amazing!

Crimson Wizard · Sun 26/02/2023 18:41:17

Quote from: Manu on Sun 26/02/2023 18:13:47
Quote from: eri0o on Sun 26/02/2023 17:45:07here are some complexities involved when doing something like this that makes not easy to support right now.

Very clear. I imagined it wasn't easy, but you never know

Frankly, on contrary, I'm quite surprised that this is complicated, but I do not know alot about how the web port works.
How do these saves work exactly at the moment, is there any docs to read on this? How are these files stored, where and in which form?

Not being able to transfer saves somewhere else seem to be a serious issue, in my opinion.