AGS engine Web port

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

• source is here: https://github.com/adventuregamestudio/ags
• Explanations are here: https://github.com/adventuregamestudio/ags/blob/master/Emscripten/README.md
• if you want clarification, just ask!

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

[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
Thanks!
PD: Any change to get an updated project for Android Studio? I've been trying to build it with no success

[eri0o]

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

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! 

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

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]

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]

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]

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]

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]

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]

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?