AGS engine Web port

[Blano]

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]

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!

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]

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]

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!

[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.

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?

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]

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]

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]

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]

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]

@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]

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

[eri0o]

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.