AGS engine Web port

[eri0o]

@Crimson Wizard well, for start, there are no files, we fake things using library_fs.js. This API should be replaced by WasmFS sometime soon. Emscripten itself gives us some pseudo-posix thing in the browser.

Anyway, when files are saved we actually write things (file contents and things like permissions, path, and other stuff) in IndexedDB - this is done through library_fs.js, and not by hand. IndexedDB is basically like a key-value DB with some considerations for the browser - things like domain and isolation of information.

OK, so we have this bunch of information, we want to download these files, now we can't just download, we need to convert these into files, and we can't download a bunch of things in a click, we need to turn all these files in a single file. We need to

• know the game file save dir from JS world
• no one is writing to any of these files, need to make sure of this - or work in the synced files
• we need to zip or pack all the files in there
• we probably need a JS zip library for this or zip capabilities in engine we can link from JS to use to pack these files
• we need some UI for this - seriously, ui is not easy
• need to test and make sure this works in all browsers - Safari really likes to try to open things in a tab instead of triggering a download, so we need to work on that
• need to add documentation to explain what to do with these files

So beyond doing all this stuff - where most time is spent testing on the different platforms and browsers.

My suggestion is wait a bit for showDirectoryPicker, with that, we could just write/read files directly to disk.

[eri0o]

One thing of the webport that I don't like is the loading. If anyone has ideas in either how to make the loading prettier or some alternative way to do it.

I think some engines allow to override the loading with an image, but it would be nice to still show some progress. I don't like how the font is always alien to the game font, but not sure how to fix that either... Overall, I totally would like things to look prettier, but I don't have good design ideas...

Specific to itch: I am still investigating, but it appears that if you add a .gz at the end of the binary file names that are loaded in my_game_files.js and then also gzip them and have the name of the gzipped file be exactly the name as before, with the .gz added at the end, then the deflate happens in transit. (from itch docs)

If the content of the file is detected as gzip compressed, the content-encoding header to gzip. The content-type header of the file will detected and set by the extension, removing .gz if necessary.

According to the same docs, js and wasm is already compressed, so no need to do anything there.

[Dungeonation]

@eri0o late response, but that fixed the fullscreen issue!

[eri0o]

Thanks for the response @Dungeonation , the fixes will be in the next version.

I have been thinking about the file download thing and if only downloading your save files but not being able to upload it back makes sense. I think I can handwrite a zip library that simply uses no compression to generate a zip of the save files.

But I wonder if as soon as make this, people will expect to be able to upload a zip back in. The problem with zip is there are multiple compression algorithms, and supporting them will take precious space in the file download of the game and also coding this to make sure the filed end up in the correct directory. The other thing is games may simply be different, for a game that has a matching web a desktop builds available, I guess it makes sense to download the file, but for a game that is like a web demo that sounds like something that will look unusual.

Overall I want to hold on before adding multiple options and having to maintain all of this, as I am trying to make the code of the JS part not become too complex.

[Dungeonation]

I just noticed when attempting to playtest my game on a mobile device, none of the touch control settings provide any touch input at all, you can't seem to do anything except move the mouse once when you toggle full screen. And idk if it's because I use opera on mobile or not but in landscape mode when I toggle full screen, it squishes the game window vertically inward.

[eri0o]

If you could share the website, it would be perfect for me to figure what is happening.

My guess though is the website is loading in an iframe, and I don't think this is supported on mobile - the guess comes from Itch always running mobile games in their own page, I imagine they had a reason for this approach. Other than this, the website may be injecting some JavaScript that alters the behavior.

I have tested on different devices with Android and didn't have issues, but if it's not the website than it could be something device/os/browser specific.

I would like to note that Chrome is the main target, and then comes Firefox and Safari. Anything beyond those, is really probably not going to work - I note it mostly works in Tizen browser/devices, but Tizen has it's own fork of Emscripten and my guess is there is a reason for this. Afaik, opera is not in the browsers Emscripten is tested with. Emscripten project uses resources from the Chromium project, and their CI only tests with Chrome and Firefox.

[Dungeonation]

It's on Newgrounds, which on mobile, will load the game on a separate page like I assume itch does, on PC it's in an iframe though but all of that works fine, of course.

[eri0o]

Well, I will need to create an account and check it out what is going on. This may take a while.

[eri0o]

@Dungeonation can you give me the specific link for your game?

I tried to make my own little test thing here: https://www.newgrounds.com/portal/view/876170?updated=1677935454

But it worked on my phone.

[Dungeonation]

@eri0o I'll have to add you as a beta tester as it's not public yet. Will do now.
I tried your test there and I think it's an iOS thing, as it does not work, same as mine.

You should receive a notification to enter the beta test now.

[eri0o]

So, specific devices and browsers have different behaviors. For instance, I know SOME versions of Safari in SOME iPad devices lie about IndexedDB support, and despite giving no errors or exceptions, it doesn't store information either. And in SOME Safari in other iPad it does save things in IndexedDB, but deletes things after a seven day period.

If you can say the exactly device and OS version I can try to get my hands on one to reproduce, to investigate what causes the error precisely - there is a lot of places the error may be.

[Dungeonation]

I'm using an iPhone 13 running iOS 16.3.1. No touch input is taken at all.

[eri0o]

So, I briefly played a bit with an iphone but I don't have one at the moment for further debugging. It zooms around like crazy when clicking the gears, or any button in the modal or the close button.

I never saw this before but perhaps is default Safari, I got a feeling it needs some way to tell it that the canvas works and that maybe some css rule is not being respected and something else is grabbing the events. Need to think a bit.

I also used iOS 16.2 iPhone. I tried in an older iOS version (13 something) on a different iPhone and it crashed right at start. So somewhere between these two versions the wasm added got actually stable.

I also noticed that when I inspect an element with the Safari Dev Tools (connect to the iPhone) and leave, then the cursor position updates. Not sure what this means...

Edit: After trying some ideas, I almost think this is something that changed on Emscripten side, need to think if there is a version that would be possible to rollback. I saw a different issue related to timing in iOS Safari on the Emscripten bug tracker and they just suggest waiting for Apple to catch-on sorta, so maybe some breakages are expected. Perhaps seeing how far back I can roll and still keep SDL2 updated and being able to build old Freetype... Need to think a bit here. Edit: ok, so the first release in Emscripten with my sdl2 upgrade is 3.1.26, need to test rolling back to that.

Edit: tried rolling back to Emscripten 3.1.26 and it didn't fix. I tried removing some recent added things and it also didn't fix. I remember using it in iOS in old versions of the web port, but I don't remember which version.

[Manu]

Edit: tried rolling back to Emscripten 3.1.26 and it didn't fix. I tried removing some recent added things and it also didn't fix. I remember using it in iOS in old versions of the web port, but I don't remember which version.

Just checked my game (web version published on itch) on an Android tablet, an iPhone 12, and an old iPad mini.

Android tablet: works perfectly. It opens full screen. You need to touch twice to simulate a click, which is great. You touch and then you touch a second time to click.

iPhone 12: I confirm it's not working. The game loads and the cursor appears in the middle of the screen, but all touches are ignored. It's impossible to click. Additionally, it does open in a small rectangle in the middle of the screen (both in landscape and portrait) and it is also impossible to zoom in or out.
(If it helps, La Colonia, the demo I published on July 2022, was working perfectly on iPhone)

iPad mini iOS 12.5.7: The game does not load. It says "Preparing... (0/1)" and it stays there

[eri0o]

first, I think it was iOS 15.5 that Safari fixed the bug that Chrome fixed in their 100 version - I think some old version of Safari can load but it will crash at some point when running the game. So in the iPad mini you have it would not work - there's a function in ags that is a very big switch clause when it interprets the engine bytecode, and that function would have to either be rewritten or be generated with an old version of Emscripten (up to 2.0.16) where it used an old compiler that generated a less efficient version but that uses less stack memory.

now, on iPhone, finally manage to narrow down the issue

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

Now solving is a different thing, but at least it's understood now.

[eri0o]

@Manu I tried an idea here : https://ericoporto.github.io/agsjs/tst2/

If you want to try, replace your ags.wasm and ags.js files from your game with the ones from here: ags_web_ios_fix.zip

[Manu]

If you want to try, replace your ags.wasm and ags.js files from your game with the ones from here:

Fantastic! The fix works! I was able to play the game on my iPhone 12. I uploaded it to my itch.io page if you want to check. The only problem now is the size of the screen. I configured it 960x600 (the game is 320x200), but it's in a small rectangle in the center of the screen, both in landscape and portrait. The itch full-screen button doesn't have any effect. While the "toggle fullscreen" ags button apparently only stretches the game horizontally. But the touch screen now works; thanks a lot!

[eri0o]

I tried a new approach to fix this here : ags_web_ios_fix_v2.zip

Hopefully it works too?

The only problem now is the size of the screen. I configured it 960x600 (the game is 320x200), but it's in a small rectangle in the center of the screen, both in landscape and portrait. The itch full-screen button doesn't have any effect.

Uhm... Is this anywhere or only in the iPhone Safari? Can you share me your acsetup.cfg ?

While the "toggle fullscreen" ags button apparently only stretches the game horizontally.

Is this anywhere or just in iPhone Safari again?

[Dungeonation]

I was also going to say, that iPhone touch fix works!

As for the horizontal full screen thing, yes I can confirm it for iOS at least, when you're in landscape mode (holding the phone sideways).

[Manu]

Is this anywhere or just in iPhone Safari again?

At the moment I only tested it with my iPhone. Later I should be able to test it with an iPad.
This is the cfg:

Code: ags

[misc]
game_width=320
game_height=200
gamecolordepth=32
antialias=0
cachemax=131072
user_data_dir=
shared_data_dir=
titletext=Star Trek Setup
[graphics]
driver=OGL
windowed=0
fullscreen=desktop
window=desktop
game_scale_fs=proportional
game_scale_win=round
filter=stdscale
vsync=0
render_at_screenres=0
rotation=unlocked
[sound]
enabled=1
driver=
usespeech=1
[language]
translation=
[mouse]
auto_lock=0
speed=1
[touch]
emul_mouse_mode=one_finger
emul_mouse_relative=0