AGS Development > Engine Development

AGS engine Web port

(1/8) > >>

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: ShowHide
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

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: ShowHideItch 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.

Gamejolt
Spoiler: ShowHideis a bit simpler, after uploading the zip file


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 :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:
@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: ShowHide
--- Code: Adventure Game Studio ---      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      }

Edit:

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

Navigation

[0] Message Index

[#] Next page

Go to full version