AGS engine Web port

Started by eri0o, Wed 26/05/2021 02:45:17

Previous topic - Next topic

eri0o

the web port is now available along AGS 3.6.X releases!

>>any game launcher<<
    single game example
it's AGS, so Alt+Enter will get you in/out of Fullscreen

please report bugs here or in AGS GitHub issue tracker! If you are unsure if it's a bug, ask about problems here in the thread!!!

New: CW did an amazing video and sound refactor and after it, it was possible to get video working on the web port! Download this game to test in the above launcher link!

Old packaging instructions are not needed anymore since it should now be possible to build directly from the Editor by simpling checking the appropriate box in General Settings and selecting the Web as a build target.

Packaging a Game

  • In the AGS Editor, go to General Settings, and under Compiler, there is the Build target platforms entry, select Web!
  • Click Build EXE (f7)
  • in the Compiled/Web/, you can test running locally a web server in the directory (python3 -m http.server or any other tiny local server you have) and opening the address in the browser.
  • Remember that if you use anything beyond left click your game won't be mobile friendly for now.
  • TEST BEFORE SHIPPING
  • zip the contents of the Compiled/Web/ dir and upload it in either itch.io or gamejolt so people can play your web port.

Spoiler

Web packages now are available with AGS Releases in GitHub, with a name similar to ags_3.6.0.17_web.tar.gz, with versions changing accordingly. But they are not needed anymore if you are using AGS Editor since you can now build directly from there!
The old instructions are left here for historical purposes.

  • Download the zip above and extract the files to an empty folder
  • Copy your game files to the same directory. If possible, use the .ags version from Compiled/Data
  • Edit the file my_game_files.js overwriting the array with your game files.
  • Edit the title tag on index.html with your game name.
  • Optionally, test running locally a web server in the directory (python3 -m http.server) and opening the address in the browser.
  • Remember that if you use anything beyond left click your game won't be mobile friendly for now.
  • TEST BEFORE SHIPPING
[close]

Notes: the port won't work in any big ags game (like a game beyond 300MB (unless you are like in charge of the navigator using electron or phonegap or something...)).

itch.io
Spoiler
Itch provides here a small guide on html5 games that might be relevant. Config is something like this (note, the resolution has to match your game resolution).

Only mark web-friendly if your game is Left mouse click only (for now everything else will be difficult to support in the touch only device). You can also use itch's full-screen button for now.
[close]
Gamejolt
Spoiler
is a bit simpler, after uploading the zip file
[close]

If you want to build this binary from source...

Known issues

  • Currently the webport kidnaps all keyboard keys, but I could do focus handling (on HTML canvas), if someone has a need for this tell me about and we can test your use case.
  • If you want persistent save files, ask me about it here in the thread, they are technically possible
  • Won't render correctly LucasFan-Font.ttf
  • Can't play MIDI, if you intend to build for web, avoid it. Use ogg files always.
  • Browser interprets ESC key as exiting of Fullscreen (not sure why yet since it's not a default behavior)
  • Last builds are hitting a Chrome bug in Mobile, the way to avoid is using an old Emscripten when building, but this has it's own issues. THE BUG HAS BEEN FIXED in Chromium upstream, and it will be running flawless in Chrome 100, you can test now by installing Chrome Canary. Chrome 100 will be stable after March 29 , 2022!

Extra Information

  • System.OperatingSystem has an enum for the Web system, if you want to account for differences in your game at runtime
  • leave sprite compression on for your game, it has no perceptible perfomance impact.
  • Port idea originated from the previous topic (here).

If you know JS or CSS, I really need help making the HTML and file loading prettier. Below is current loading:


Mehrdad

Awesome, So useful port. You are amazing @eri0o!!!
My official site: http://www.pershaland.com/

Snarky

Brilliant! I was actually thinking just yesterday about asking if there was a way to integrate a game hosted online with your web engine (I was thinking some way that a file for download could be automatically opened in the player, but this is even better).

Potajito

Brilliant! I'll try to get my game to run with this once I finish Strangeland :D :D :D
Thanks!
PD: Any change to get an updated project for Android Studio? I've been trying to build it with no success :(

eri0o

#4
@Mehrdad thanks! It's been a long road!

@Snarky Yeah! I have been thinking about making an editor plugin to add it to the build menu, but thought that it wasn't THAAAT hard to could just mention it here and see if people can tryout the files! I actually started writing the single game player with archive.org in mind (lots of ags games there). Also GitHub pages I think act as CDN so theoretically people could point to the WASM there to only load once and cache, but turns out Gamejolt and Itch.io recommend to ship all files with no dependencies together to avoid Cross-Origin Request errors.

@Potajito, I PMed about it, but the Web port should be compatible with Mobile browsers.




In the index.html, in the CSS that is embedded in it, under canvas.emscripten {, it may be necessary to adjust min-height and min-width it to your game native resolution too. If someone can experiment and tell me about it would be useful, specially considering Itch.io.
Spoiler
Code: html
      canvas.emscripten {
        position: absolute;
        top: 0px;
        left: 0px;
        margin: 0px;
        width: 100%;
        height: 100%;
        overflow: hidden;
        display: block;
        min-height: 180px; /* set to your game height */
        min-width: 320px; /* set to your game width */
        border: 0 none;
        background-color: #000
      }
[close]

Edit:

Just found a bug I forgot to fix, fixed in the zip file above, should be working now.

eri0o

#5
Fixed a very big bug that makes games crash when tabbing out or getting it out of focus, updated the links above.

Potajito

Working real good with my game, even with speech and save games. Only gripe so far is the shoddy support for multitasking in mobile browsers, but I don't think there is much to do for us there. In the latest version, when returning to the game, it would be in a small frame and not in full screen (or almost full screen, because chrome on mobile doesn't really like full screen pages).
On desktop it works like a charm, very native-like feel.

As for the itch.io settings, I ended up not embedding it and just using the option to "Launch in full screen". It doesn't make a lot of sense, specially on mobile, when the game starts playing in a very small window and you have to press a very small button in order to full screen it. I still want to play around with this for a bit, anyway, as I'm not 100% sure.

Really, really nice job with this port so far, Enrico! As for feature requests, it'd be nice to have some sort of Loading bar/percentage (or just some dots (...) moving) so it doesn't look "stuck" when the game is downloading.
Thanks again!

Hobbes

Wow!!

Just gave this a go and it's working really, really well. My game's playable from start to finish in Safari (on a Mac). Sound effects + music all play.

There are two occasions where I use ScreenShake(5) in my game. And whilst it works perfectly well, it temporarily halts all music whilst the effect is running.

My guess is AGS has a rather peculiar way of doing this effect, since ScummVM completely ignores it instead.  :)

But again, wow!!

Snarky

Next step: a way to embed it into forum posts, so that you could have playable AGS games on the AGS Forums!  8-0 (nod) :-D

eri0o

added a new version of the ags_web.zip on the top post that I think fixes bugs reggarding the correct resizing of the game screen. I also added a percentage number indicating how much of the game files has been downloaded!

(I read the other issues, I am working on them)

arj0n

#10
Awesome!!

Tried out running Desolate which seem to run fine, except there's this 404 line showing up in the debuginfo:
(or is that 404 line simply related to the next line, the favicon which is not present?)

::1 - - [04/Jun/2021 12:41:45] "GET / HTTP/1.1" 200 -
::1 - - [04/Jun/2021 12:41:45] "GET /my_game_files.js HTTP/1.1" 200 -
::1 - - [04/Jun/2021 12:41:45] "GET /ags.js HTTP/1.1" 200 -
::1 - - [04/Jun/2021 12:41:45] "GET /ags.wasm HTTP/1.1" 200 -
::1 - - [04/Jun/2021 12:41:46] code 404, message File not found
::1 - - [04/Jun/2021 12:41:46] "GET /favicon.ico HTTP/1.1" 404 -
::1 - - [04/Jun/2021 12:41:46] "GET /acsetup.cfg HTTP/1.1" 200 -
::1 - - [04/Jun/2021 12:41:46] "GET /Desolate.ags HTTP/1.1" 200 -

eri0o

#11
Yes, it's for the favicon.ico, you can dismiss it!
Spoiler
you can add a favicon.ico file but itch will ignore since it's wrapped in an iframe, but may be useful if you have your own website. If you want to quiet it, add this in the html header. But it's really alright to get it as 404.
Code: html
<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
[close]

Did everything else worked? Any bugs you find are useful!

If you want to handle some web difference, System.OperatingSystem is 8 for the web port
Code: ags
bool is_web = System.OperatingSystem == 8;

Crimson Wizard

#12
Quote from: eri0o on Fri 04/06/2021 12:26:54
If you want to handle some web difference, System.OperatingSystem is 8 for the web port
Code: ags
bool is_web = System.OperatingSystem == 8;


Maybe we could reserve it in script API just in case to make sure it's not overwritten by something?

eri0o

Quote from: Crimson Wizard on Fri 11/06/2021 11:06:10
Quote from: eri0o on Fri 04/06/2021 12:26:54
If you want to handle some web difference, System.OperatingSystem is 8 for the web port
Code: ags
bool is_web = System.OperatingSystem == 8;


Maybe we could reserve it in script API just in case it's not overwritten by something?

That would be good, that was the reason I haven't advanced anything in the FreeBSD support.

Crimson Wizard

#14
Quote from: eri0o on Fri 11/06/2021 11:33:52
That would be good, that was the reason I haven't advanced anything in the FreeBSD support.

Really, why?
I believe the constant may be reserved anytime if that makes sense. In the worst case new system may return something else like Linux, temporarily (this property is not used too often anyway).

eri0o

I use the OS check as a proxy-way to check for differences in features. Like, the web check here can be used so, if you have a chance that the game is played on a touch screen, you can to provide alternative controls.

Crimson Wizard

#16
No, my question was rather, why this was blocking a whole system support? Unless I misunderstood what you mean.

Anyway, there's no problem in adding new constants, for web, freebsd, and so on. They don't have to be in a specific order either.

uma

I'm so excited about this!

Are the links down atm, i'm getting a 404?

eri0o

#18
I switched branches to properly work to merge the work in AGS main repository here: https://github.com/ericoporto/ags/tree/emscripten

and here: https://github.com/adventuregamestudio/ags/pull/1346

But current Emscripten upstream introduced a lot of incompatibilities and I couldn't yet figure out how to navigate it... Changes necessary include


  • Upgrade to at least SDL2 2.0.16 and build from source instead of relying on Emscripten port - fixes audio bugs due to Emscripten upstream port removal of sdl2 internal libc.
  • Need to patch Emscripten OpenAL or there will be a crash due to null buffer - need to materialise a test that convinces Emscripten upstream to merge my one line change or fix bug in AGS audio if one exists.
  • Newer binaryen produces assembly that breaks chrome mobile, but code appears valid, reported to chrome upstream
  • Emscripten current upstream can't run compiler tests through CMake that ran in older versions

If someone is familiar and could tackle these problems upstream it would be great.

I restored previous work linked above. I removed it a long with a lot of things in a time I was having all code I wrote constantly being attacked by a specific person on GitHub.

Hobo

Tested this with my Prelude game, incredible stuff and quite easy to implement.
This will be extremely useful when doing some game jam stuff or the like.

I did have some issues with the itch.io native fullscreen mode, the music stops playing for some reason when switched to full screen, but the in-game switch seemed to work fine. Any idea what that could be about?



Blano

#20
i'm having some issue, can't run my project html, i think is the size (beyond 300 mb) it run when i try on github...

wich files have to include in my_game_files.js? in the array there are just the.ags and cfg file
thank you in advance

Edit:
i noticed that brand new compiled game doesn't run..

eri0o

#21
Hey, I pushed a new version here: ericoporto.github.io/agsjs/

If people could try running their games there, it's based on the latest 3.6.0 release. I haven't yet updated the single game package.  Erh, just updated now the first post!
Quote from: Hobo on Thu 11/11/2021 16:35:44
I did have some issues with the itch.io native fullscreen mode, the music stops playing for some reason when switched to full screen, but the in-game switch seemed to work fine. Any idea what that could be about?

@Hobo, could you give me a game that this happens so I could try to figure it out? (it didn't happen with Prelude in the latest build at least)

eri0o

#22
This is a test EDITOR, please backup your game before trying it!!!!!

Better yet, make a copy of the game you want to test with this.

_edit:removed the experimental editor link since it's now in main AGS builds_

This adds an option in the General Settings, where you can select Web for the Web build. This is in super experimental state.



(I am trying to understand how adding new build targets in the Editor works, code is from here)

Maybe the Editor could have a webserver too for serving the web build (something like this), but not sure yet how it would work in the interface and stuff, so didn't add it.

Mehrdad

#23
Wow!. Export from the editor is an excellent feature. . You are amazing @eri0o. I'll test and if I had questions I'll ask you!
My official site: http://www.pershaland.com/

Andrea1992

Oh wow, this is truly amazing! I used the AgsEditor_3_6_X_WebTest.zip and I could export it to web! My game is huge, build size is 2.68 GB. I still tried and uploaded it to gamjolt and it worked!! it takes like 15 minus to load, but it's perfectly playable on desktop browser (does not load in mobile browser).

Then, I tried with the demo (build size ~900MB) and it only takes ~5min to load on desktop, mobile does not load either:
https://gamejolt.net/?token=UBH7mMV2uy8acabUEyzF5kNJDGktmb

I'm very interested in saved files, would appreciate some insight on this.
Quote from: eri0o on Wed 26/05/2021 02:45:17
If you want persistent save files, ask me about it here in the thread, they are technically possible

I'm working on a very light version of the game, trying to bring it down to ~300MB as you recommended because I'm after a mobile web version.

Thanks so much for this!

eri0o

The whole game has to be loaded in RAM, usually mobile devices have a lot less RAM than desktop - and RAM is used by everything here, the filesystem, AGS, and everything else. Also there's a hard limit on RAM size allowed for the tab that simply depends - I think max it goes is 4GB in perfect temperature and pressure conditions. So reaaally bring down that number. Use sprite compression in AGS, and if possible use lower quality ogg audio, which may not be perceptible to the player and keep the game as nice as is. I think there was even a test for other sprite compression algorithms... Also reminder that the game size is full uncompressed game and not the zip you upload. Also remember that one person on a phone that is not warned before the download may end up spending all their limited data in your game by accident - itch.io warns all the time to keep size of the web game low, and this is one of the reasons.

About persistent savefiles, currently the implementation is a bit tricky, it works like this, the browser has a very limited storage per website, of around 50MB.

The idea is to sync the virtual filesystem save directory (which is mostly smokes and mirrors) to the key and value browser storage. Now the problem is that game savefiles in AGS can get quite big - the main culprit are Dynamic Sprites, if they exist when the game is saved, then we are going to serialize them, and they are serialized as bitmap, so they may take a lot if they are very big. So if you have lots of dynamic sprites you may need a custom save system.

The other thing is that if the user never access your game website after sometime, well, you will keep using that storage for your game in his computer indefinitely until they ever find out how to clean this in their browser. This is something that I don't know any easy solution. I wanted to add at least a sync option somewhere as a button so at least the person clicks this and this should remind them that they may need to delete this. The other possibility is to let people download their savegames, but this would not work with a custom save file. Anyway, there are some design issues I haven't been able to figure out.

Andrea1992

Well, im not using dynamic sprites so no problem with that. I just checked and a completed agssave file is ~500KB (the total folder is 900Kb).
The web game will only be available for students in a school. They use tablets, chromebooks, etc, but they dont always use the same device. So Id like that the game creates the save files so the school can save them in the student user profile (they have their own infrastructure for this).

So I wonder how I could do this?
Quote from: eri0o on Fri 14/01/2022 07:25:34
The idea is to sync the virtual filesystem save directory (which is mostly smokes and mirrors) to the key and value browser storage.

Thankss

eri0o

I have not implemented the file sync, I may eventually but it's not on my priority list right now, I asked people to ask because I need to understand in what order to do things. Right now the biggest problem is unfortunately not in AGS at all, but in Google Chrome Android builds: https://bugs.chromium.org/p/chromium/issues/detail?id=1285389

Other than this I am looking into how to merge my work into AGS codebase so I don't have to rebase and build things by hand - I have just yesterday fixed a bug in emscripten so now I am waiting a new version to be released - should probably happen in a few days.

In between I am looking how to make the HTML nicer - I want to merge both multigame and single game launchers in a single HTML to ease maintenance.

Manu

Hi all
I used the web wrapper in the past without problems. Today I tried to create a web wrapper for my new game demo and it doesn't work. If I upload the .ags compiled game here: https://ericoporto.github.io/agsjs/, it works perfectly, but if I use "ags_web.zip" (both the 0.1.0 and 0.2.0) the page starts loading, it reaches 100%, but then the screen remains black and the game doesn't start. Any idea what could be the reason? For sure it's something stupid but I don't know how to debug it.
Thanks a lot

eri0o

#29
Hey, that's weird. In the browser you are using, it should be possible to load the console by going through the menus (I think AGS will be trying to catch all inputs so something like f12 may not work).

With the developer console, it should hopefully give useful hints as to why it's not working. AGS and the Emscripten "OS" stuff log error messages there.

I am currently in the process of getting the web port into main AGS branch so it should soon be integrated in the AGS Editor, and when that happens it should be easier to get it working.

I am out of home now, but if you send me a link to a build of your game I can check it out tonight what's going on.

Manu

Quote from: eri0o on Thu 27/01/2022 10:40:25
Hey, that's weird. In the browser you are using, it should be possible to load the console by going through the menus (I think AGS will be trying to catch all inputs so something like f12 may not work).
With the developer console, it should hopefully give useful hints as to why it's not working. AGS and the Emscripten "OS" stuff log error messages there.

I just tried. This is what the console says:
Code: ags

11:55:05:047: Adventure Game Studio v3.6 Interpreter
(index):279 11:55:05:048: Copyright (c) 1999-2011 Chris Jones and 2011-2021 others
(index):279 11:55:05:048: ACI version 3.6.0.3
(index):279 11:55:05:048: 
(index):279 11:55:05:049: Initializing backend libs
2(index):283 DEBUG: SDL not built with thread support
printErr @ (index):283
(index):279 11:55:05:051: Initializing game data
(index):279 11:55:05:054: ERROR: Unable to determine game data.
(index):279 11:55:05:055: Engine was not able to find any compatible game data.
(index):279 11:55:05:055: Searched in: /


Consider that this error doesn't happen immediately, first it loads the ags file up to 100%.
Very strange because it's the same .ags file I uploaded to your test page.

This is a link to the ags file if you want to try. Thanks a lot!
https://we.tl/t-uhhRFsghv3






Manu

It works now! Sorry for the false alarm.

I created a new folder on the server, I uploaded again the files from the 0.2.0 version, I just uploaded the .ags file (no config or other things) and changed "my_games_files.js".

It must have been a problem with the browser cache because I had an old version of the javascript and an old version of the game in the previous folder. Starting from scratch it worked. We should find a way to add versioning to the files when you want to update the js or the game.

I'll test the editor with the web build tonight. Thanks again!

eri0o

#32
Hey, I made a new package here in case it's useful

https://drive.google.com/file/d/1DvzbB4u8ihGxPTn8myVwTueNr38symFU/view?usp=drivesdk

I am on a phone right now, so I don't have how to debug much right now.

Edit: ah, now I see it worked. I see you mentioned your own server. I am not sure, but I think some browsers may require https for running Web Assembly.

Manu

Quote from: eri0o on Thu 27/01/2022 11:42:36
Hey, I made a new package here in case it's useful
https://drive.google.com/file/d/1DvzbB4u8ihGxPTn8myVwTueNr38symFU/view?usp=drivesdk

Thanks! I'm using this one now, I like the spinner. I made a few changes to the CSS. I set the size of the canvas to 1366x768 (the resolution of my game) and I centered it in the middle of the page. This way the graphics are not stretched. It works perfectly on the computer but also on my smartphone (in landscape mode). I also removed the black border. I'm attaching the changes in case someone else wants to do the same.


Code: ags

      body {
        font-family: arial;
        margin: 0;
        padding: none;
        background-color:#000;
      }

      .emscripten {
        padding-right: 0;
        margin-left: auto;
        margin-right: auto;
        display: block
      }

      textarea.emscripten {
        font-family: monospace;
        width: 80%
      }

      div.emscripten {
        text-align: center
      }

      div.emscripten_border {
        border: none;
      }

      canvas.emscripten {
        margin: 0 auto;
        overflow: hidden;
        display: block;
	width:1366px;
	height:768px;
        border: 0 none;
        background-color: #444
      }

eri0o

I am not sure, but it should obey the settings from acsetup.cfg, so if you say it should stretch, it will, if you say it should respect the aspect ratio, then it will and so on, I don't remember if the default setup in the Editor writes these, but the file should be easy enough to edit by hand, here's is how acsetup.cfg works: https://github.com/adventuregamestudio/ags/blob/master/OPTIONS.md

I will at some point in the future figure something like winsetup for the web but I haven't yet figured how it should look like.

One thing that I would like to do at some point is merge both the single game launcher and the any game launcher, so that if nothing is specified in the my_game_files.js it would then offer a file drop input so games can be uploaded (and the browse button too since phones don't support file drop). I do could use help with the html, css, js and such of these since those are a bit hard for me.

CaptainD

@eriOo - what would happen with savegames when run as the Web version? I assume it simply go into the current logged in users's >Saved Games folder and not be affected in any way by the browser session it's run in?
 

Manu

Quote from: CaptainD on Thu 27/01/2022 19:13:45
@eriOo - what would happen with savegames when run as the Web version? I assume it simply go into the current logged in users's >Saved Games folder and not be affected in any way by the browser session it's run in?

I don't think the web version can save files on the user's hard disk, not in that folder anyway. But the saved game could be downloaded/uploaded. I'm not sure how difficult is to patch the save/load game GUI to handle web download/upload. Another solution is to save the games in the local storage, but this means you won't find them if you change your browser.

A more complex solution would require the integration of some OAuth (like Google/Twitter) to allow users to login, and at that point saved games could be saved on the cloud. But this could be possible only if we had an official hosting website for AGS games (which would be very cool actually).

eri0o

Hey, I know I need to add more information here and answer some questions, but just a heads up. The Emscripten port has been merged in AGS repository :)

It should be available in a future 3.6.0 release.

eri0o

#38
Two days for the Chrome 100 update which has the WASM fix we need to properly run AGS games. If you are getting the OOM crash, please use either Firefox or Safari until then!

Edit: Chrome 100 is finally released! You should not hit any OOM crashes with Chrome Mobile anymore :D

eri0o

#39
So, I have been thinking/looking into how to manage the storage and save files. I think I have an idea, essentially advertise to the browser the game as a PWA, so the user can click install on the game in the browser - still need to investigate if this will actually work. But assuming I can get it to work, the idea would be that, if the game is installed as PWA, the sync to the browser storage would be automatic and if not then it would not sync. Then when the PWA is uninstalled, the storage would be gone.

The storage would be where config and save files will persist.

Ah, right, through an installed PWA the game would work also when offline, which is cool.

I need to check if the itch.io and gamejolt URLs change on each push or not, if they are always the same for the game, this also means that the installed PWA would auto-update - when you load it while being online.

newwaveburritos

When I use the link from your website (https://ericoporto.github.io/agsjs/) it doesn't work and the console tells me this:

Failed to load resource: the server responded with a status of 404 ()
(index):1 00:03:49:504: Adventure Game Studio v3.6 Interpreter
(index):1 00:03:49:509: Copyright (c) 1999-2011 Chris Jones and 2011-2022 others
(index):1 00:03:49:509: ACI version 3.6.0.24
(index):1 00:03:49:510:
(index):1 00:03:49:510: Initializing backend libs
(index):1 00:03:49:511: Initializing game data
(index):1 00:03:49:513: Opened game data file: game28.dta
(index):1 00:03:49:513: Game data version: 3060021
(index):1 00:03:49:513: Compiled with: 3.6.0.35
(index):1 00:03:49:513: Startup directory: /
(index):1 00:03:49:513: Data directory: /
(index):1 00:03:49:513: Setting up game configuration
(index):1 00:03:49:516: Logging to warnings.log
(index):1 00:03:49:518: Unable to init voice pack 'speech.vox', file not found or of unknown format.
(index):1 00:03:49:519: Initializing TTF renderer
(index):1 00:03:49:519: Initializing mouse: number of buttons reported is 3
(index):1 00:03:49:519: Install timer
(index):1 00:03:49:519: Audio driver: emscripten
(index):1 00:03:49:533: AudioCore: opened device "Emscripten OpenAL"
(index):1 00:03:49:533:
(index):1 00:03:49:537: Install exit handler
(index):1 00:03:49:537: Initialize path finder library
(index):1 00:03:49:539: Game title: 'Saturday Night Jam'
(index):1 00:03:49:551: Game GUI version: 119
(index):1 00:03:49:555: Requested script API: unknown (3060026), compat level: unknown (3060026)
(index):1 00:03:49:555: Warning: this game requests a higher version of AGS script API, it may not run correctly or run at all.
(index):1 00:03:49:594: unresolved import 'Overlay::CreateGraphical^5' in 'SpeechBubble_0.8.0.asc'
(index):1 00:03:49:594: unresolved import 'Character::Animate^7' in 'SpeechBubble_0.8.0.asc'
(index):1 00:03:49:595: Loading game failed with error:
(index):1 00:03:49:595: Script link failed.
(index):1 00:03:49:595: Error (line unknown): in SpeechBubble_0.8.0.asc: 2 unresolved imports (last: Character::Animate^7).
(index):1 00:03:49:595:
(index):1 00:03:49:595: The game files may be incomplete, corrupt or from unsupported version of AGS.
(index):1 00:03:49:599: ***** ENGINE HAS SHUTDOWN

It does work when I upload to itch.io so it's sort of immaterial really but I thought you might want to know about it.  I commented out some other code that also wasn't working that was telling me I had some unresolved imports of GUI buttons which is what led me here.  It's weird though because I had both of those pieces of code in it before and I did manage to make it work.  I was so excited I took a screenshot so I know I wasn't dreaming!!

eri0o

#41
I haven't updated the code in my website for some time, trust the one that comes with the AGS Editor! :)

Btw, if you want have the same behavior locally, just delete that very small js file that lists your game files. If you run the index.html locally, it will now ask for you to place your game files.

Edit: Just updated the website!

eri0o

https://github.com/GimmickNG/agsjs-bundler

More a note to myself, but someone in GitHub created an interesting bundler for ags web port that has two interesting features

  • serving the web port, for local testing
  • zipping the directory, for uploading in websites

I think these are interesting things to keep in mind to add in the Editor at some point - probably zipping is a thing for the future after we migrate building to integrated command line tools.

jumpjack

#43
I see that in the WEB folder two .ags files are created: one is the copy of the .ags game, named as I called my game (for example pacman.ags), the other has the "standard" name my_ags_game.ags . Why are both needed? They differ only by 1KB, but it looks like a waste of space..

eri0o

There's no standard name, if there's an extra .AGS file in the directory either you put there or you put in the Data directory.

jumpjack

Quote from: eri0o on Thu 12/01/2023 08:41:39There's no standard name, if there's an extra .AGS file in the directory either you put there or you put in the Data directory.
I didn't do anything manually, all files have been created by AGS. I also tried deleting all of them, but upon compiling it recreates both .ags files.

eri0o

There's no such file from AGS Editor.

Either you placed files manually in the Editor directories, which I would recommend uninstalling/deleting your editor and getting a new one.

Or you added a file in Compiled/Data dir, any file that is added in Data dir is copied to all targets - there may be exceptions.

Or you are not using the Editor at all and is using something else. The way to build is to mark the platform in general settings and hit f7.

jumpjack

it's even listed in my_game_files.js , and I didn't create it!

https://github.com/jumpjack/Space1999Adventure/blob/main/AGSdebug2/my_game_files.js

I am using 3.6.0 RC4.

jumpjack

I have another installation of AGS 3.6.0 RC4 in another PC (but reading/writing the game in same cloud folder of the other PC), and it does not create the "phantom" my_ags_game.ags , so I don't know what is going on.
In  the AGS-3.6.0.39-RC4.zip file there is no my_ags_game.ags file.
I started with 3.6.0 RC3 but I see it is no more downloadable so I cannot check.

I see that if I put a .ags file in data folder, upon compiling it's copied to web fodler and added to the list of files in my_game_files.js. But why should I add a .ags file in data folder? And can a game be made of multiple .ags files?

eri0o

#49
So, yes, you can make a game of AGS games, you do so using the RunAGSgame command.

https://adventuregamestudio.github.io/ags-manual/Globalfunctions_General.html#runagsgame

I advise against though, unless really needed - say you got together with a bunch of people, each one made a game, and are looking into making a launcher for all games. Or you are making an episodic game and want to make a launcher for each episode. There are other usecases but other than this it is usually not very good idea - there isn't good ways to integrate AGS games.

Now, about Data dir, nowadays AGS can package arbitrary files (in general settings, there is an option in the Compiler section if I am not mistaken) and you can read them later by leveraging the $DATA$ token: https://adventuregamestudio.github.io/ags-manual/File.html#fileopen . Also this data token matching the other data I am going to explain later is just we are bad at naming things problem.

But before this, if someone wanted to send an arbitrary file (say you have a descriptor file for puzzle levels or some other config file you want to have in the same directory of the game or even just a readme), it had to be in the same directory as the game, externally.

So to ease debugging, testing and packaging of games using such approach, the way it works is any file that is not the own game .AGS file that is place in the Compiled/Data directory is then copied to all other Compiled/Windows, Compiled/Linux and so on. At some point before the Compiled/Data was also a different directory (I think in 3.4.1 and before), just the top level, so perhaps it made more sense then.

Any free files in the webport have to be in the same directory as the game, because in the simulated filesystem we have there , there are no directories. You can have "directories" inside AGS packages using the arbitrary file packaging. (But it's read only)

Manu

I have a problem publishing the compiled web version on itch.io. I compiled the game with AGS 3.6.0.41. I zipped the Web folder and uploaded it to my page. The problem is the game is 320x200, but if I set the size 320x200 on itch.io, the game runs in a tiny rectangle in the middle of the page. If I set the size 640x400 on itch, the rectangle is bigger, but the game runs in the center of the rectangle, still at 320x200. How do I set the game so that it scales up?
Thanks a lot!

eri0o

#51
@Manu , there isn't anything much, if the game is not fullscreen, it should follow your windowed game configurations. Can you share me your acsetup.cfg? (specifically the one uploaded in the zip file)

Here is an example config in itch.io itself
Spoiler
[close]

Here is the game from this config (the password is: webtest)

https://eri0o.itch.io/agsjs-test




The acsetup.cfg (I can't use spoilers in code in the forums or the code misses the line ends for some reason)
Code: ini
[misc]
game_width=320
game_height=200
gamecolordepth=32
antialias=0
cachemax=131072
user_data_dir=
shared_data_dir=
titletext=TestWeb Setup
show_fps=0
[graphics]
driver=D3D9
windowed=0
fullscreen=desktop
window=desktop
game_scale_fs=proportional
game_scale_win=round
filter=stdscale
vsync=0
render_at_screenres=0
rotation=0
[sound]
enabled=1
driver=
usespeech=1
[language]
translation=
[mouse]
auto_lock=0
speed=1
[touch]
emulate_mouse=1

Manu

Ok, I fixed it with:

Code: ags
windowed=0
fullscreen=desktop
window=desktop
game_scale_fs=proportional
game_scale_win=round

and setting the viewport to 640x400.

Previously the game was windowed and game_scale_win was 3.
Thanks a lot!

eri0o

@Manu , good thing it worked out! Send a link to the game later so I can play  :-D

Manu

I have another problem. I'm not sure if it's me or if it's a known limitation of the web engine, but the game does not play the OGV video I added.

The video is played with:
Code: ags
  PlayVideo("video/star1.ogv", eVideoSkipAnyKeyOrMouse, 1);

I added the file star1.ogv to the zip file (I tried both in a "video" folder and at the same level as the .ags file.
I added star1.ogv at the end of the array in my_game_files.js like this:
Code: ags
var gamefiles = ['audio.vox', 'speech.vox', 'game.ags', 'acsetup.cfg','video/star1.ogv'];

or

var gamefiles = ['audio.vox', 'speech.vox', 'game.ags', 'acsetup.cfg','star1.ogv'];

In both cases, it doesn't work. The game ignores the video
Are OGV videos supposed to work with the web engine?




Crimson Wizard

OGV should work anywhere, so that's a question of whether a file is found or not.

If I remember right, web port does not support subfolders yet, so you need to place everything in the same dir. The PlayVideo command of course also should not have subfolders in filename.

Alternatively, you may place the video files in the project root folder and compile the game, then the Editor will package them inside the *.ags file automatically.

Manu

Ahh, you are right! I just needed to move the *.ogv to the main folder. Now the video is included in the *.ags file, and the web version works without problems. The only thing to do to play it on itch is to zip the Web folder and upload it.

Great job with this port!


eri0o

Thank you! If a game is mobile friendly you can mark so in itch.io, for the game in question it isn't since it needs a keyboard. Make sure you didn't check this accidentally - usually itch notifies if it detects someone is using a phone and trying to play a non-mobile friendly game, but for your game it didn't.

Manu

Quote from: eri0o on Sat 21/01/2023 20:34:34Thank you! If a game is mobile friendly you can mark so in itch.io, for the game in question it isn't since it needs a keyboard.

I didn't mark the game as mobile friendly; in fact, when I open the page on my iPhone, it says: "This game is not designed to run on your device". Don't you see this warning?

By the way, I have a half-idea about how to make the game playable on mobile/without a keyboard, but it will require some work.

Dungeonation

#60
First off, this is so awesome :D
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

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

#62
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

#63
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!  ;-D

eri0o

#64
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

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

#66
@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

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!! :D

eri0o

@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

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.  ;-D

Dungeonation

#70
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

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

#72
@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

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

eri0o

#74
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

@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

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

#77
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

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

#79
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.

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

#81
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)

QuoteIf 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! :D

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

#85
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

#89
@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

#92
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

Quote from: eri0o on Sun 05/03/2023 14:17:41Edit: 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

Quote from: eri0o on Sun 19/03/2023 02:55:15If 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?

Quote from: Manu on Sun 19/03/2023 16:05:24The 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 ?

Quote from: Manu on Sun 19/03/2023 16:05:24While 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

Quote from: eri0o on Sun 19/03/2023 16:14:28Is 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

eri0o

#100
@Dungeonation , in your acsetup.cfg, what do you have set for game_scale_fs ? I suggest using proportional for both the game_scale_fs and game_scale_win in the webport.

Code: ags
[graphics]
game_scale_fs=proportional
game_scale_win=proportional

@Manu can you try setting your game_scale_win to proportional ? It being small should be related to this I think.

About the stretching in the width, I am not sure what it could be, but this will take a while to figure it out. :/

Ah, the fullscreen button from itch can probably be disabled, and instead it's best to use the one in the engine.

Manu

Quote from: eri0o on Sun 19/03/2023 16:22:40@Manu can you try setting your game_scale_win to proportional ? It being small should be related to this I think.

About the stretching in the width, I am not sure what it could be, but this will take a while to figure it out. :/

Ah, the fullscreen button from itch can probably be disabled, and instead, it's best to use the one in the engine.

Fix2 works too. Which one is better to use?
proportional works, now the game has the same width as the window. Unfortunately, the upscaling quality is very bad, but this is probably inevitable? It's strange because the iPhone has a very high resolution, I suppose there are enough pixels to upscale it better.

I prefer to keep the fullscreen itch button, because it works on desktop, while the toggle full screen ags button doesn't seem to have any effect (at least on Chrome).



eri0o

#102
Quote from: Manu on Sun 19/03/2023 16:44:55Fix2 works too. Which one is better to use?

The second fix is I think closer to how it will be the solution in the end, so probably better to use that one.

Quote from: Manu on Sun 19/03/2023 16:44:55Unfortunately, the upscaling quality is very bad, but this is probably inevitable? It's strange because the iPhone has a very high resolution, I suppose there are enough pixels to upscale it better

There are, but the Safari on iPhone lies about it resolution and you need to use the resolution it says and deviceRatio to calculate the actual resolution.  Other devices usually lie a little less about their resolution, this is why it's usually not as perceptible in them.

But we aren't setting the resolution by hand, this is hidden by SDL and SDL uses Emscripten on top of it. I have been upstreaming fixes I find in these but there's a bug in it's highdpi handling (that is aware of deviceRatio) that causes the canvas size to grow indefinitely on going in and out of fullscreen, until it eventually crashes things. So highdpi handling from SDL is not used because of this.

There are some other things that makes this particular non-trivial, so haven't advanced much here. But right now the css size of the canvas is used to guess the resolution to use inside of it directly.

Quote from: Manu on Sun 19/03/2023 16:44:55I prefer to keep the fullscreen itch button, because it works on desktop, while the toggle full screen ags button doesn't seem to have any effect (at least on Chrome).

Wait, which Chrome? I am using Google Chrome (111.0.5563.65 64 bits) on Windows 10 and it works in your game. Can you tell me specifically what browser and OS you are getting this behavior?

Manu

Quote from: eri0o on Sun 19/03/2023 17:03:02Wait, which Chrome? I am using Google Chrome (111.0.5563.65 64 bits) on Windows 10 and it works in your game. Can you tell me specifically what browser and OS you are getting this behavior?

Ok, sorry, it's not true that it's not working on Chrome. I thought it was not working because:
- you click the gear
- the popup appears, and you click "toggle" -> nothing happens
- then you click inside the canvas (for example I click on New Game in my game) -> switches to full screen

Just tested on Chrome for Windows and Mac.

Instead on Safari for Mac 16.3:
- you click the gear
- the popup appears, and you click "toggle" -> nothing happens
- then you click inside the canvas -> it switches to full screen for a second, then goes back to normal (the itch icon works, instead)


eri0o

The behavior on Chrome is expected, you need to interact to get it to go in fullscreen, it's a bit complicated, but the click interaction doesn't propagate inside the wasm and the fullscreen can only be initialized by user action, so you get this two step thing. There's no way to workaround this as we want to go through this to get SDL internals to sync with the state of the browser - if you go Fullscreen, then click to go to Fullscreen either with the gears button or with some in-game button, the state of SDL will be "wrong" and from there on you kinda get the sizes of things not working correctly. There is a way to workaround this, which would require to render the gears icon and the modal menu inside AGS Engine, if we do this, then the element we are clicking is the canvas and the canvas is the thing going Fullscreen, so this is the only way to have Fullscreen working without this two step. This may be a thing in ags4 at some point, but not right now. If you want to try this, you can edit the index.html to remove the gears button and add a Fullscreen button in-game, using a regular AGS GUI and button.

Fullscreen is a bit problematic that the size of Fullscreen is NOT your monitor resolution or whatever you expected but it's a mystery size that depends on the actual element that is going into Fullscreen (we draw things in a canvas) and if this size is bigger than the maximum that it would be possible, it fails to enter in Fullscreen (but doesn't necessarily reports a failure, it usually simply doesn't work).

So, just to explain a bit more, when using the itch icon what it does is like if your monitor enlarged and the window that the game is ran resizes to the size of this window - but if you query AGS in game it will still report that the game is windowed. The element that is fullscreen in this case is the html document.

Quote from: Manu on Sun 19/03/2023 20:39:20Instead on Safari for Mac 16.3:
- you click the gear
- the popup appears, and you click "toggle" -> nothing happens
- then you click inside the canvas -> it switches to full screen for a second, then goes back to normal (the itch icon works, instead)

I am curious if the in-game Fullscreen button would work in Safari, but it's possible the maximum size for Fullscreen is not calculated correctly there. I can check this later.

Manu

Quote from: eri0o on Sun 19/03/2023 21:18:14If you want to try this, you can edit the index.html to remove the gears button and add a Fullscreen button in-game, using a regular AGS GUI and button.

I can do that, but what is the function to call when the user clicks on the GUI button?

eri0o

#106
You just use System.Windowed, true is windowed and false is full-screen.

I forgot to ask, what happens when you use alt+enter?

eri0o

Hey, the iOS Safari fix for the touch input has been merged and should be in the next AGS Editor release.

Manu

Quote from: eri0o on Mon 20/03/2023 08:31:31I forgot to ask, what happens when you use alt+enter?

Same, it switches to full screen for a while, then returns to the browser window. The itch.io button instead worked on Safari, but it's not easy to go back because option-enter doesn't work, and Esc doesn't work, plus the itch.io icon is not visible anymore on the game screen.
I had to use Cmd+tab to switch to another window, then go back to the itch page. It's a bit of a mess.

eri0o

#109
Thank you for the tests. About iOS, I discovered the fullscreen API is not supported in iPhone, only iPad

https://caniuse.com/?search=fullscreen

There is a Safari specific fullscreen API, but it is also iPad only - and apparently Emscripten doesn't implement it. It appears this api may work better - but need to test this. For your iPad version specifically though, there's a toggle in the experimental toggles of your Safari browser that needs to be turned on.

The Safari specific API looks like is intended to be used only with Videos, but it is this: https://developer.apple.com/documentation/webkitjs/htmlvideoelement/1633500-webkitenterfullscreen

About Emscripten I think I found a way to force it to generate a wasm code that MAYBE can be loaded in the iOS version you have, but I couldn't yet make it work, I can try later so we can test this.

Back to macOS Safari, I don't know yet what is going on. I think I can later try to use the Safari specific API and see if it makes it magically work. Edit: reading the Emscripten source code it looks like it can use the Safari specific API, I may need to set a specific variable at build time to make sure this actually is built in.

Found a really nice API for getting the real pixel size of things

https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/devicePixelContentBoxSize

Unfortunately it's not supported on Safari

Manu

Just for curiosity, checking the stats of my page on itch, I can see the first mobile OS is Android 13, followed by iOS 16.3.1, then Android 12, then iOS version 16.2. Apparently, most of them are smartphones, not tablets. So my old iPad is not really a priority, but I think making fullscreen work on iPhones is important, considering that screens are small and switching to full screen can make a difference.
Let me know if you need more tests. Thanks for your work!

eri0o

Just a minor update, I haven't advanced much in iPhone, it simply doesn't support fullscreen so some workaround is needed. There is one case iPhone supports Fullscreen, which is in a PWA app (installable web app), but the iframe in itch prevents PWA, and apparently there is no known way to circumvent this for itch - this is apparently true for other "web game stores" but I haven't profoundly checked this in non-itch case.

The way to go with iPhone it seems is to load the iframe directly and use some strategy to make sure this uses the most of the browser area - I actually think it should be doing this already but I haven't checked this yet.

About the iPad version you have, I really would need to use an old version of Emscripten because even with the build flags on the newer I thought could generate compatible wasm it didn't work when I tested, it looks like they didn't affect the actual wasm part of the code only the JS, so I think I misunderstood what they mean. So unfortunately what we can do is workout a better error message for the time being on the unsupported browsers.

Overall I don't think I will be able to advance quickly regarding how iPhone is handling fullscreen (Safari doesn't implement the API, except for video only) and resolution.

So what I want to do now is take a step back, create a non-ags minimal SDL demo app, and use it to recreate the minimal reproducible test cases so I can report the issues upstream (SDL and Emscripten) and then later reevaluate what to do.

In the meantime if you want to reshape the html part to move/remove the gears icon (it's covering Uhura), the non-minified html shell is here:

https://github.com/adventuregamestudio/ags/blob/master/Emscripten/launcher_index.html

Dungeonation

Games don't typically go into fullscreen on iOS in the browser anyway, so I'm fine with that not being figured out yet. If we remove the cog wheel icon, can we call a data erase from within the game like we can a fullscreen toggle?

eri0o

There's no API for this currently, so no - we could have one, but at the moment there isn't. Because this is Web specific I would like to take a little time before implementing something - maybe additional web specific stuff will appear.

There's a hacky way you can do this through deleting files using the regular AGS Script file API and after do a write in a small text file, it will save that one file but when it does it will sync the write on the database and it will sync the deleted files as deleted, so they would disappear.

Note the FS library we use in the web port also doesn't have an API to delete all files, so the button uses JS to delete each file in the directory recursively in MEMFS and then syncs the resulting empty dir with IDBFS, causing IndexedDB to clear up. If you open a file in AGS and then don't close it, and then uses the cog wheel button to delete all files the specific file you had not closed I believe should trigger a permission denied exception because it's being used by AGS - I believe I made it generate an error popup later but I don't remember if it says what happened.

(sorry for being overly verbose, but I can use these messages as annotations for myself to remember things later)

Dungeonation

Upon testing all the touch emulation settings, I still can't get GUI buttons to take one tap to press, it still takes two. Could it be something I'm not doing correctly?

Crimson Wizard

Quote from: Dungeonation on Wed 22/03/2023 20:16:24Upon testing all the touch emulation settings, I still can't get GUI buttons to take one tap to press, it still takes two. Could it be something I'm not doing correctly?

To double check, is this your game or someone elses, are these buttons handled normally in script, using regular OnClick event or some other workaround?

Dungeonation

Quote from: Crimson Wizard on Wed 22/03/2023 20:25:37
Quote from: Dungeonation on Wed 22/03/2023 20:16:24Upon testing all the touch emulation settings, I still can't get GUI buttons to take one tap to press, it still takes two. Could it be something I'm not doing correctly?

To double check, is this your game or someone elses, are these buttons handled normally in script, using regular OnClick event or some other workaround?

It's my game, and I use onClick

Crimson Wizard

Yes, apparently this is because of how GUI interaction is coded in AGS, it updates the new cursor position too late, after the "click" event already happened. This is normally not an issue with the mouse (at least not for engine itself, for script maybe), as it's tracked all the time, but this breaks with the touch as with touch it's tracked only when you drag around.

I suspect this probably can even lead to more distinct bugs, like if you first click on button 1, and then on button 2, will button 1 click again? (not sure if that's the case though)

Dungeonation

Just tested, that bug doesn't occur for me.

Crimson Wizard

Quote from: Dungeonation on Thu 23/03/2023 02:28:12Just tested, that bug doesn't occur for me.

Hmm, I actually have it; it also happens if you
1) touch the button
2) touch the empty spot on gui
the button will still be pressed on the second time.

Crimson Wizard

There's an experimental build with a supposed fix, but I do not know what would be the convenient thing to download for test.

Here's a full Editor downloads:
https://cirrus-ci.com/task/6188279393943552

Here's emscripten only part:
https://cirrus-ci.com/task/5906804417232896

Manu

Thanks guys for all the fixes!

Crimson Wizard

Please tell if it works? @Dungeonation

I released a new 3.6.0 update with these fixes last night.

Dungeonation

Quote from: Crimson Wizard on Sun 26/03/2023 19:20:45Please tell if it works? @Dungeonation

I released a new 3.6.0 update with these fixes last night.

Touch on mobile is PERFECT with this, and everything else aside from fullscreen weirdness on iOS (but that's okay!) is working great! This is awesome!

eri0o

#124
Experimental fix to Safari Fullscreen problem (PR link)

ericoporto.github.io/agsjs/ | ags_3.6.1.2_safari_experiment.zip



You can test in the above link and placing a local game or using the downloadeable package at right locally to replace your launcher html, ags.js and ags.wasm.

What it does is, for Safari, it disables the regular AGS handle of Fullscreen (and SDL and Emscripten too), so switching to fullscreen/windowed in game will do nothing. But the button for entering fullscreen has its behavior working differently in Safari, where it should work with macOS Safari.

There is a problem though that for iPhone, even though it doesn't support fullscreen, fullscreen actually works, but it has the default impossible to override behavior of exiting fullscreen on down swipe... Which will make your game exit fullscreen pretty quickly if you do swipe-like gestures in your game. There is also an issue that apparently, on iPhone, this Fullscreen only works in other browser than Safari itself, even though they are all Safari behind the scenes.  ???

I didn't have an iPad to test, but on newer models it looks like the Safari there is a bit between iPhone and macOS in features and it should have the Fullscreen working - but possibly with the swipe down to exit Fullscreen enabled too...

The implementation is not clean, ideally I think this needs to be fixed upstream (SDL or Emscripten), but I can't figure it out where things are wrong...

(about sound on iPhone I am trying to figure it out wth is going on...)

Ah right, the game can't show a keyboard in the web port (for mobile) but you also can't have an in-game keyboard or iPhone will detect and show a pop-up "keyboards are not allowed in Fullscreen" and then exit Fullscreen and show another pop-up asking if the website is trying to ask you for passwords. So avoid any sort of text entry. :/

Dungeonation

Hey, this is a bit of a strange question, but would it be possible to include a .js based API wrapper in a web exported game and write a plugin to call functions from it? And how would I go about it, if so?

eri0o

For now you would need to rebuild ags from source with your plugin added there.

Last time I checked there wasn't a reasonable way to load wasm from other wasm - there is a hacky dynload way in Emscripten that has issues in working crossplatform, and any JS calls need to have been implemented on the main binary (so you can load dynamically for the purpose of saving user bandwidth but you still need to beforehand know everything you can load and have the JS bindings already there). This can be alright if it's a purely logical plugin that does no direct access - e.g. no "filesystem" access -, like agsblend.

Dungeonation

#127
The API wrapper is purely .js files, and the plugin would just be calling its JavaScript functions, it's fairly simple stuff like unlocking achievements on Newgrounds.
Would I still need to rebuild from source to make that possible?

eri0o

#128
So far AGS has no way to communicate to the outside world, and as far as I can tell most people are ok with this - they can play games without depending on a server that may die. So there's a conceptual question there - and also the maintenance of this as platforms keep changing, there's a whole new burden of maintaining this all and cementing them in engine versions often doesn't make sense. There is also the compliance with privacy laws, what does it mean, do we need to ask user permission?

If what you mention is simple, the easiest way to do is to make yourself an AGS plugin, build AGS with it built-in for in the wasm build of the engine and use it. This will make you have it your way and avoid any philosophical discussions.

I don't feel strongly towards it, I am usually the kind of person that blocks cookies, ads and anything that pings home. :/

There is a way to do it that is just a bit of JS for achievements. You get the achievements before the game is loaded and then write in the MEMFS a text file with the said achievements. Later when the player gets an achievement, you edit this file adding a new achievement. Then in JS tou check in the fs sync call for the file.

Use FS.readFile and FS.writeFile from here: https://emscripten.org/docs/api_reference/Filesystem-API.html#filesystem-api

Dungeonation

Looking into it more, I know exactly how Newgrounds API support for Web AGS could be possible.
The API is HTML/JavaScript, you put the .js file for it in what would be your game's .zip, reference it in the index.html body:
Code: ags
<script src="NewgroundsIO.min.js"></script>
...and start using its functions in index.html's javascript...in this case, ags.js is what is used.
Then we start to use WebAssembly (ags.wasm) and run into a bit of a snag. I don't know much about WebAssembly but I wonder if it's possible for ags.js to listen for custom functions being called in the WebAssembly AGS engine, pass the arguments over, and have ags.js then call those API functions...
Some of the API functions return values, too...It would be very hacky but if it's possible to create a WebAssembly-JavaScript bridge like that, it just might work.

And as for the API itself, it's quite benign, if you cannot connect to the API or you're not logged into Newgrounds, the game plays as normal.

Marion

Hi my friends. I am trying to export my game in HTML format in order to make it playable via browser.
But as it's not really a game but an interactive story, it has a lot of big pictures. The compiled file is about 200Mo. And the loading is very slow... I am afraid the players won't have the patience.
Is there a way I can make the loading faster in the browser ? Thank you very much 🙂 (I have already checked the sprite storage optimization and the ressource splitting. I use AGS 3.99)

uma

Hi there thank you so much for your work on this. Ability for build for web is something I've hoped for in AGS and it's fantastic to have the option to build straight from the editor!

I have a couple of questions that I could not find the answer to with a search.

First, could someone advise why game hosted on itch my load correctly on a pc, but on a Mac or android large parts of the graphics don't load? On mine, the rooms and sprite's are not loading, only text and a button (the only elements which are not either black or white, if that's relevant), and the rest the screen is black. Everything else is running.

Secondly, I would really like to make my game work as well as possible on this format. It's currently 140mb and using about 2gb ram to run in either chrome or Firefox. It drags a bit but does eventuall run smoothly on my old x260. I have 5 frames for each room, which are drawn at 1080. Before I start downsizing the graphics, is it more likely the resolution, number of frames, or indeed something else entirely that's the main culprit for things being slow? Apologies if this isn't a thing can be answered like this, I thought I should ask before redrawing everything! Thanks!

eri0o

#132
Which version of the AGS Editor are you using? Can you share a link of your hosted game on itch - you can make it private and share the password.

The memory limit is usually actually lower, around 500MB of "storage" (it's in RAM). And don't expect to change soon - it's at least three years to get 64-bit support in wasm in major browsers.

I don't know what is a x260, is this a phone? For some reason browsers with touch require a resting finger on screen to give more processing priority to the browser.

About resolution, it probably doesn't matter performance wise but it depends how you are building your rooms and everything. The web engine is naturally slower than the native one - there is a big refactor in AGS handling of loops that could unlock a 3x speed up in the web port but that's kinda it. The issue of resolution is more that the resolution that the game runs depends on a few things right now - the browser gives a fake resolution to AGS. Getting the real resolution right now AND keeping windowed/fullscreen toggle working requires a bugfix in Emscripten - and then adjust the SDL code with it. I haven't gone that road, there is a lot of effort to merge things in these things in the upstream.

I am between a place and another and may adjust the text later, but the short is that without access to game and knowing the version there isn't much to do. As an example someone here sent me a private message and for whatever reason their game had a mysterious character in acsetup.cfg that made AGS give a weird error. Rewriting the acsetup.cfg and reencoding it made the game work.

Crimson Wizard

Quote from: eri0o on Tue 26/09/2023 20:29:08The web engine is naturally slower than the native one - there is a big refactor in AGS handling of loops that could unlock a 3x speed up in the web port but that's kinda it.

Could you please elaborate on this, as this is something I was not aware of? By "loops" I presume this has something to do with the game update handled differently depending on the state, but what makes web engine slower there?

eri0o

The web port runs c++ code built to wasm, in the browser wasm VM. The wasm VM has no direct access to the browser, or the DOM, so the way it works it can map to some JavaScript functions in the JavaScript VM.  Then the JavaScript code gets to call the browser stuff. This means the browser can only take input and draw things on the screen when these other things are not running - there are no threads or different process here.

The AGS engine has lots of internal loops, so we can't easily give the priority to the browser and back to the engine - the general idea of Emscripten kinda expects you have only one loop and then you just give control to the browser and back in one place in this single loop - like it gets to a certain line, the wasm VM stops and call JS and then the browser draws updates the frame and return to the VM.

Now AGS has - for now - lots of different internal loops, and there is a port, so how did I do this. So Emscripten has a sort of solution to this, called Asyncify, what it does is it analyzes the code for each time you destruct your app state - like assign a value to a variable - and then it finds points with hints (I am using SDL_Delay for this) to create points where it saves the stack state and then later once it gets called back it rewinds the wasm VM to that state - all of this is actually done adding extra instructions along the code. Later there is an optimization step that tries to recoup a lot of this lost performance, and it's really good at figuring unneeded instructions. Still, all of this gets a performance impact.

If AGS had only a single internal loop (like löve and a few other engines), the port could be done without using Asyncify at all, it would build faster, but above all, it would run faster - not a lot faster, 2 or 3 times of what it performs now.

The idea of the refactoring is the issue #1349. In SDL3, some ports (like the Apple stuff) may support inverted loops (additionally to the current approach), according to SDL#6785, so these platforms would benefit from this too.

Crimson Wizard

#135
Quote from: eri0o on Wed 27/09/2023 00:39:22If AGS had only a single internal loop (like löve and a few other engines), the port could be done without using Asyncify at all, it would build faster, but above all, it would run faster - not a lot faster, 2 or 3 times of what it performs now.

Ah, but 2-3 times may be a massive difference (like 10 -> 30 fps, moving from non-playable to pretty playable). I wish I knew how impactful this is earlier.
Then this should be given a higher priority.

eri0o

#136
@uma , your game use a very high frequency graphics with alternating black and white pixels at full hd, what is happening is in browsers that advertise a lower resolution than their real resolution, the game is rendered in that resolution instead, so the discrete pixels are decimated (or downsampled). This is like, if you go from 1920x1080 to a 960x540 resolution, you get only the even (or odd) set o pixels, but because you use alternated black/white pixels, you will get either only the black or only the white pixels - which makes some graphics disappear. This means that your game will only really work if run at the EXACT resolution it's made - or bigger, but then some moiré pattern occurs when the pixels are resized. I don't have a solution for this, perhaps using bilinear will help - but this means the graphics won't be sharp or look exact like you want it to.

I have an idea to get the full resolution of the device the browser is running ignoring what it advertises, that could maybe help, but this would work by fully getting rid of the in-engine (script API) for alternating between windowed and Fullscreen, instead this would only work by using the external button (the gear engine). What I would do is I would directly use the JavaScript API for Fullscreen instead of SDL and Emscripten (which currently are very buggy).

Now the issue is you mentioned you have the issue on macOS, and this kinda should not happen. Do you get this issue on Safari in macOS? Can you tell me the exact model of your MacBook? Is this using an external monitor? Can you tell me the specific resolution of the monitor?

uma

#137
Quote from: eri0o on Fri 29/09/2023 02:24:11@uma , your game use a very high frequency graphics with alternating black and white pixels at full hd, what is happening is in browsers that advertise a lower resolution than their real resolution, the game is rendered in that resolution instead, so the discrete pixels are decimated (or downsampled). This is like, if you go from 1920x1080 to a 960x540 resolution, you get only the even (or odd) set o pixels, but because you use alternated black/white pixels, you will get either only the black or only the white pixels - which makes some graphics disappear. This means that your game will only really work if run at the EXACT resolution it's made - or bigger, but then some moiré pattern occurs when the pixels are resized. I don't have a solution for this, perhaps using bilinear will help - but this means the graphics won't be sharp or look exact like you want it to.

I have an idea to get the full resolution of the device the browser is running ignoring what it advertises, that could maybe help, but this would work by fully getting rid of the in-engine (script API) for alternating between windowed and Fullscreen, instead this would only work by using the external button (the gear engine). What I would do is I would directly use the JavaScript API for Fullscreen instead of SDL and Emscripten (which currently are very buggy).

Now the issue is you mentioned you have the issue on macOS, and this kinda should not happen. Do you get this issue on Safari in macOS? Can you tell me the exact model of your MacBook? Is this using an external monitor? Can you tell me the specific resolution of the monitor?

thankyou! Where are you referring when you mentioning "bilinear" please? I'm obvious familiar with this for scaling graphics, but ive not noticed it as an option within AGS.
With the problems displaying on mac and android they are both showing the same graphics (i.e things that are anything other than black or white, which completely tracks with what you're saying). On android (Galaxy Note 10+) this is the same for both 1520x720 and for 2280x1080, but with significant load times for the latter. Friends mas is a 2011 MBP, 1080 x800 (this is older than I had expected!)

As a practical solution, am I understanding correctly that re-doing the graphics at a lower resolution will help, at the very least with the load times? I'd really like to keep the 5 frames of bg animation for each room, though I'm sure thats a bit part of the games bloat as I'm not working in a particularly element way.
I could probable change a couple of things and shift to 8bit colour if that would also help.

Crimson Wizard

Quote from: uma on Thu 05/10/2023 09:40:17As a practical solution, am I understanding correctly that re-doing the graphics at a lower resolution will help, at the very least with the load times? I'd really like to keep the 5 frames of bg animation for each room, though I'm sure thats a bit part of the games bloat as I'm not working in a particularly element way.

What are these 5 frames of room animations doing? Usually I suggest to see if these may be broken into separate smaller objects.

uma

Quote from: Crimson Wizard on Thu 05/10/2023 13:18:59
Quote from: uma on Thu 05/10/2023 09:40:17As a practical solution, am I understanding correctly that re-doing the graphics at a lower resolution will help, at the very least with the load times? I'd really like to keep the 5 frames of bg animation for each room, though I'm sure thats a bit part of the games bloat as I'm not working in a particularly element way.

What are these 5 frames of room animations doing? Usually I suggest to see if these may be broken into separate smaller objects.

It's a first person game with only about 40% of the screen used for what I'd think of as the "room" in a regular 3rd person p&c with the rest being UI. The other 60% of those 5 images is mostly empty white space, with some "noise" behind where the UIs sit to give them some life. I knew this was inefficient when I started but I couldn't see how how to get a room background image to be anything other than stretched across the whole screen, and equally wasn't sure how to animate UI elements, so I padded all the backgrounds.

Crimson Wizard

#140
Quote from: uma on Thu 05/10/2023 13:36:08It's a first person game with only about 40% of the screen used for what I'd think of as the "room" in a regular 3rd person p&c with the rest being UI. The other 60% of those 5 images is mostly empty white space, with some "noise" behind where the UIs sit to give them some life. I knew this was inefficient when I started but I couldn't see how how to get a room background image to be anything other than stretched across the whole screen, and equally wasn't sure how to animate UI elements, so I padded all the backgrounds.

Padding also counts when loading or drawing images, as pixels are data regardless of whether they represent anything in the game.

This belongs to the tech help forum section, but from a quick glance this may be resolved by either:
1) having a smaller object or overlay on background, and animating that;
2) configuring room's viewport and camera so that the room is displayed exactly the size you want. This will also allow to have rooms of smaller size than the game itself. (See Viewport and Camera sections in the script API in the manual)

eri0o

@uma , try setting filter = linear in in the Editor, in your project Default setup - I forgot the exact name of the setting. If this doesn't change a thing on macOS, I believe there is a directory where the save files goes, so perhaps an acsetup.cfg is there.

I also think it's valuable to share a full-resolution screenshot of your room in case others have ideas.

@Crimson Wizard I think when downscaling, we always want linear filtering, maybe the solution would be to have a different setting for when upscaling and when downscaling, so they could have different defaults.

kikiMa

Hello, first of all, thank you for this fantastic software. :)

I am currently working on my first game, and unfortunately, I have encountered the following issue. The game is intended to be published on the web, but it is not running on Firefox. I have searched on Google but couldn't find any relevant information. Is it possible that I have overlooked some setting? :confused:

I am receiving the following error message:
"AGS Alert
Unable to initialize SDL library.
Gamepads not supported
Make sure your browser is compatible with SDL2 Emscripten port."

I would greatly appreciate any help with this issue. Thank you! 8-)

eri0o

#143
That sounds like a bug in SDL2, but just out of curiosity, do you have actual gamepads connected to the computer? If you do does disconnecting makes it work? Can you share information that helps identify the exact gamepad you have (a serial number would be sweet, but at least brand and name).

In AGS the issue is we initialize the video, audio, gamepad and all subsystems together - so if any of them fails, ags fails entirely. It would be best to initialize them separately, so we can recover if the system in the particular platform can be dismissed - which I think that gamepad for the web port is one we could survive errors that appears.

But there has to be an error in SDL2 too, because even if your gamepad is not supported, it should not block the gamepad subsystem from initializing entirely - it should be possible to connect later one or more gamepads and those may be supported.

The fix on AGS side should be very easy, but in SDL2 there are two things: add support for your gamepad, and making it not fail the entire system. The gamepad is only relevant for ags4, I don't remember why it's initialized in ags3 too.

kikiMa

Thank you very much for the quick response!

Hmm, that's strange. I'm not using any gamepads, and I've tested it on different PCs. It also works on Chrome, Safari, etc. Is there a way to exclude gamepads in the scripts at some point?

Crimson Wizard

Quote from: kikiMa on Mon 09/10/2023 08:20:31Hmm, that's strange. I'm not using any gamepads, and I've tested it on different PCs. It also works on Chrome, Safari, etc. Is there a way to exclude gamepads in the scripts at some point?

It's not your problem, it's the engine's issue, it has to be fixed in the engine.

kikiMa

hmm Ok.
Thank you nonetheless!

eri0o

@kikiMa , as mentioned by cw, there is an issue in ags and it should be fixed in the next update. Still, I am trying to understand what happened, you mentioned you don't have a gamepad and that it works in different browsers. Does it means it has the same error in different browsers or you only have this error in a specific browser? Do you see this error in other PCs? Sorry for the additional questions, it's just that this may indicate a problem in SDL2 too, so I would like to look into that too.

Regardless, it should work without this issue in the next AGS update.

RootBound

I'm working on a game with an "export text" feature that saves data to an external text file. Does that work in web versions?
J. They/them. Here are my most recent games:

eri0o

You can't download that specific file. If you are saving it in the same directory as saves, they will be persisted - so you can load it from the same place next time the game opens in the same browser.

RootBound

Hmm. I wanted it to be a plain .txt file the player could keep if desired. Sounds like that won't work for the web port.  :-\
J. They/them. Here are my most recent games:

eri0o

I haven't properly tabulated this, but I guess at some point I (or someone motivated) has to inspect the iframe a of the webstores (itch io, gamejolt, Newgrounds, ...) and make a relation of what types of Feature-Policy are allowed in those. This would give a general idea of what is allowed and what isn't.

---

My general feeling towards file download is that it's best to have it inside a Share action instead, which can have files attached to it. This is more portable - in Android these translate to intent. This avoids having to concede file permissions to an app and instead allows to work with these as they are needed - general file access in Android would require blank permission access to files, which is weird for a game.

Unfortunately SDL doesn't include anything similar to a share action so we would have to either maintain our on or contribute some version of this for SDL. I think in this specific case MAYBE maintaining our own is easier, but I would need to think about this.

RootBound

Thanks, good to know. It's not an urgent issue and I may just make that feature available on the download version only.
J. They/them. Here are my most recent games:

kikiMa

Quote from: eri0o on Tue 10/10/2023 15:03:35@kikiMa , as mentioned by cw, there is an issue in ags and it should be fixed in the next update. Still, I am trying to understand what happened, you mentioned you don't have a gamepad and that it works in different browsers. Does it means it has the same error in different browsers or you only have this error in a specific browser? Do you see this error in other PCs? Sorry for the additional questions, it's just that this may indicate a problem in SDL2 too, so I would like to look into that too.

Regardless, it should work without this issue in the next AGS update.
Hi eri0o,
Sorry, I haven't checked in here for a while!
Oh, that would be great if it gets fixed :)
The issue occurred for me only in the Firefox browser. It worked in Chrome, Safari, etc. I work on both Mac and PC, and the behavior is the same on both. So, Firefox is problematic.

Thanks a lot!

kikiMa

it works now on firefox!
Thank you so much  :-*

eri0o

Thanks @kikiMa !

I couldn't reproduce the previous issue you had in my devices, so the approach we went is to in ags3 we removed any Joystick handling there, as it's not yet supported in the engine, and in ags4 we made so if the joystick part of the engine fails to initialize, it reports but the engine keeps working, at least on currently supported platforms, as it may not be an issue.

So you shouldn't see any crash anymore, but in ags4, it's possible it won't work yet with your specific devices if you want to support joysticks in the web on Firefox - the workaround for the time being is using a different browser if such issue occurs. In the meantime I am working in fixing the SDL2 Emscripten port (SDL itself not ags) upstream, so we can update it to a version that hopefully works without this issue.

eri0o

There has been a recent change that may help improve Safari port, WebKit Webassembly now builds and runs on Windows too, this should make it easier to test things going forward. Until now it only built and ran in macOS. :)

SMF spam blocked by CleanTalk