Play AGS Games via browser

[Sledgy]

It's possible? Like NES games (there're some sites with NES emulation).

You can put all AGS games to such site.

[Blondbraid]

It's possible? Like NES games (there're some sites with NES emulation).

You can put all AGS games to such site.

Sounds like an intriguing idea, but what of longer games where you might want to save your progress and come back to play later?

[Kastchey]

Browser games do save progress via local storage or cookies. It's super easy to delete them by accident but they do nonetheless.

[Crimson Wizard]

An example of a regular engine ported to browser, here's a site that allows to play number of ancient games in browser using something called EM-DosBox; I guess this may be a Emscripten port of regular DosBox:
https://archive.org/details/softwarelibrary_msdos_games

There are old adventure titles, and even games like Doom 2.

[Stupot]

What happened to the Xage project? Wasn’t that trying to do just this?

[Crimson Wizard]

What happened to the Xage project? Wasn’t that trying to do just this?

Progress is announced here: https://www.adventuregamestudio.co.uk/forums/index.php?topic=57389.0
I know it runs on desktop and some mobile devices, but unaware of its running in browser.

Also, it does not natively run existing AGS games, you must actually port game source, often with manual corrections.

[eri0o]

I gave a shot here:  ericoporto.github.io/agsjs/

Firefox and Chrome, Mobile and Desktop. Desktop can run slightly bigger games. The game file has to fit a limited RAM available for the javascript vm of your browser, along with others uses of RAM to actually run the game, so some slow downs may happen.

Just "upload" everything there and it should work  - if it doesn't work, tell me which game you are trying to run. Games are not actually uploaded so it should run pretty fast. 

Make sure to include all files needed, if your game depends on .vox packages, upload those too.

Plugins are not YET supported. If there are stubs they will be used instead.

There's a limit of the size of the game, it will probably load a jam or mags game but it will definitely not run some big commercial ags game.

[selmiak]

this is so awesome. I tried with Hobo's new short game...

[Crimson Wizard]

I wonder how it renders stuff, does it actually use existing renderers from engine? but then, how do they translate to browser?... this is confusing.

[Creamy]

That's great! I tried several games and they all worked (just some issues here and there with MIDI files or phylactere module).

Just "upload" everything there and it should work  - if it doesn't work, tell me which game you are trying to run. Games are not actually uploaded so it should run pretty fast.

If the games were uploaded, would it be possible to play on mobile devices?

[Hobo]

What is this witchcraft? Can it really be or are my mortal eyes deceiving me...

Incredible stuff! This looks like it could be really useful for AGSers participating in different game jams, because browser-playable games often seem to get more traction and are easier to quickly try out and if it works on mobile as well then that's double amazing.

[eri0o]

Hey, this is the build result of a sketch experimental branch I built here (the magic is on the CMake files): https://github.com/ericoporto/ags/tree/ags3-emscripten

I used this tool: https://emscripten.org/
After activating it (on Linux, it's source ./emsdk_env.sh, a similar bat is provided for Windows), building is done using emcmake cmake .. && make in the ags project directory.

I plan to make it a single game launcher version and make it be a little prettier. I am just out of the computer this week.

I wonder how it renders stuff, does it actually use existing renderers from engine? but then, how do they translate to browser?... this is confusing.

Yes! The code is here for the renderer, I use opengles2 and use flag on the build so it's WebGL compatible: https://github.com/ericoporto/ags/blob/ags3-emscripten/Engine/gfx/ali3dogl.cpp

Except for the renderer, the rest of the code doesn't have many changes from the engine future code. I am using some of your current port code CW

That's great! I tried several games and they all worked (just some issues here and there with MIDI files or phylactere module).

Just "upload" everything there and it should work  - if it doesn't work, tell me which game you are trying to run. Games are not actually uploaded so it should run pretty fast.

If the games were uploaded, would it be possible to play on mobile devices?

They work on my Chrome Mobile on my phone. It also works on Firefox Nightly. I don't have an iOS device. I haven't done a way to press alt+enter on mobile so Fullscreen needs the game having an in game setting (System.Windowed = false). I also found a bug that in some games resting the finger on the screen makes the game run faster.

Can you pass me a game link that uses phylactere or MIDI so I can check it? I need to investigate how to make them work.

What is this witchcraft? Can it really be or are my mortal eyes deceiving me...

Incredible stuff! This looks like it could be really useful for AGSers participating in different game jams, because browser-playable games often seem to get more traction and are easier to quickly try out and if it works on mobile as well then that's double amazing.

Yes, my target was having something for the AdvX Jam, but some stuff happened afk :/. I hope I can still make something so people could use this on itch.io or other of those sites that allows HTML5 games.

And again, yes it should work on Mobile (just remember that there's no right click or keyboard there!)

[selmiak]

so naturally I wonder now, can this codebase be used within the ags editor/engine/compiler to compile some file(s) that can be uploaded to itch or the creator's own homepage and the game can just be played in the browser?
Or maybe an extra tool that converts the game.exe to a file that can be uploaded to a server and then be played in the browser?

[eri0o]

I gave a try to launching a single game here:

https://ericoporto.github.io/agsjs/single_game_test/

(It's 20MB download! It's Tea for Two.)

It will take a little while to load and you probably should use .ags instead of .exe to shave 2MB of download.

You need to copy the HTML here and change this line to include your own game files.

They all need to be in the same directory of ags.js and ags.wasm. If testing locally, you will need a local server (like python -m SimpleHTTPServer) to load the files.

It's probably a good idea to add a loading bar to inform the user of the loading progress, but this works for a first concept. It also needs the overall page to look prettier, also it's a good idea to change the page title too xD Anyway, I wrote that HTML on the phone right now, so it has rooms for improvement...

Ah, right the canvas min-height and min-width css attributes probably are better to be tailored per game canvas! Anyway, nothing else changes, just the HTML has to be adapted. I am not good with HTML looking good, so if anyone wants to jump in feel free

so naturally I wonder now, can this codebase be used within the ags editor/engine/compiler to compile some file(s) that can be uploaded to itch or the creator's own homepage and the game can just be played in the browser?
Or maybe an extra tool that converts the game.exe to a file that can be uploaded to a server and then be played in the browser?

For now, an improved version of this single html should suffice. By zipping it with ags.js and ags.wasm and the game files, you can upload on itch.io, according to their info here: https://itch.io/docs/creators/html5 .

As a test I added Tea for Two HTML build on Game Jolt: https://gamejolt.com/games/teafortwo/421342

[Mehrdad]

Perfect @eri0o like always!!

[scotch]

Just wanted to say this is nice work. As someone that's worked on a browser optimized implementation of AGS engine off and on over the years, it is really nice to see running so well transpiled and with WebGL rendering.
When I get some time I will look at where any web platform performance issues are â€" maybe I can hybridize the approaches and add some of the things I've implemented.

I'd love to see all the back catalog playable on the web archive some day.

[Creamy]

Can you pass me a game link that uses phylactere or MIDI so I can check it? I need to investigate how to make them work.

The MIDI tunes from Oh du lieber Augustin are playing but with incorrect samples.

Freak Chic uses Phylactere for dialogs. They are skipped instantly.

I tried Tea for Two on my phone. Works great  The only problem is that the background doesn't adjust to my screen so I can only see half of the picture.

[eri0o]

@Mehrdad Thank you!

@scotch Thanks! Hey, you did an awesome work, people messaged me and showed your work and YOU REWROTE EVERYTHING IN JS! Amazing! If you have any interest I can explain every pieces, this Emscripten port is not very complicated and JS AGS plugins in it are super doable! I have difficult with JS and CSS so this leads to the canvas not correctly adjusting in all mobiles that needs to be figured out... Anyway, if you have interest I can totally explain all the pieces!

@Creamy Thanks for the games! I will look into them and see what I am doing wrong! About the canvas not adjusting correctly to the phone, yeah, the way it adjust on the screen is CSS, I could not figure it out correctly... I don't have an iOS device but people told me in iOS the browser is not allowed to go full screen, if it was I could just make the browser be full screen first which makes easier to juggle the AGS black border and resizing - depending on what is written on acsetup.cfg file uploaded.

[cat]

This is absolutely amazing! Works on my PC with Firefox and on my Android Phone with Firefox Klar and on my phone with DuckDuckGo browser (but took quite long to load there).

Edit: Can I somehow get translations to work?

[eri0o]

@cat, hey, I never used translation in a game before, so I don't know how they work. Does it needs to be switched in winsetup or can it be switched in game? If you add all game files it should work (I think), but there is no winsetup here (win is for Windows :/). So if the game doesn't allow changing translation in game, you need to configure it manually in acsetup.cfg before and pass the acsetup.cfg along with other game files when you add then.

I believe you need to write the ini (acsetup.cfg) the value in the item translation, under language, as specified here : https://adventuregamestudio.github.io/ags-manual/RuntimeEngine.html

[Crimson Wizard]

Do command line args work in browser version, or it's a non-thing there?

[cat]

I mostly noticed because I have an in-game option to switch language in two of my games.
I just realised that I can upload multiple files with your link - I also uploaded the translation file and it works 

This is so amazing! Just to understand what you did - you took the engine source code and just used a tool to compile it to web assembly?

[eri0o]

Do command line args work in browser version, or it's a non-thing there?

Yes, I can pass command line things there. The game starts "windowed" because I pass the windowed option

Calling main and passing parameters has helping functions, but technically any function from the cpp code can be exposed and called and it's possible to pass objects between JS and cpp. The call to main can be seen  here and here. Passing parameters to other functions requires a bit more work but they are doable too.

I mostly noticed because I have an in-game option to switch language in two of my games.
I just realised that I can upload multiple files with your link - I also uploaded the translation file and it works 

This is so amazing! Just to understand what you did - you took the engine source code and just used a tool to compile it to web assembly?

Basically, there are some other minor adjustments but the gist was that.

[Crimson Wizard]

Yes, I can pass command line things there. The game starts "windowed" because I pass the windowed option

Calling main and passing parameters has helping functions, but technically any function from the cpp code can be exposed and called and it's possible to pass objects between JS and cpp. The call to main can be seen  here and here. Passing parameters to other functions requires a bit more work but they are doable too.

No, I mean, is it possible to do for end-user (player)?

I guess for better experience it needs some kind of setup overlay though.

[eri0o]

Uhm. Then in this case no. I can add my agsconfig thing and use it or just redo winsetup using one of the Engine renderers at some default resolution, then it would run - either with current Engine GUI components or adding ImGui.

Alternatively, I could create a JS/html Gui for editing acsetup.cfg, before running. It's mostly about figuring out what would work best - which I am not sure, but open to any ideas. (I think the biggest problem with the JS/HTML GUI is I am not good at it)

[eri0o]

The MIDI tunes from Oh du lieber Augustin are playing but with incorrect samples.

Hey Creamy, do you have this game somewhere? The download link is not working for me!

[arj0n]

@eri0o: archive.org

[Monsieur OUXX]

Can you briefly explain wat we're supposed to see in @eri0o's thing when the upload works? I don't get it. I click upload, I get some debug logging on the right side of the screen, and then nothing. I tried a few games, always the same.


That was some time ago. Today I just tried and it works!!! (Too bad our game cannot actually run on this as it relies on mandatory translation files :/ )

[arj0n]

Is OpenGL or DX set as driver for the game mandatory to get it working with https://ericoporto.github.io/agsjs/?
When using Software Renderer as driver it doesn't seem to work:

Code: ags

14:16:28:980: Adventure Game Studio v3.5 Interpreter
14:16:28:986: Copyright (c) 1999-2011 Chris Jones and 2011-2020 others
14:16:28:986: ACI version 3.5.1.0
14:16:28:987: 
14:16:28:987: Initializing allegro
14:16:28:990: Initializing game data
14:16:28:991: Opened game data file: game28.dta
14:16:28:992: Game data version: 50
14:16:28:992: Compiled with: 3.5.0.27
14:16:28:993: Setting up game configuration
14:16:28:995: Logging to warnings.log
14:16:28:995: Data directory: /
14:16:28:997: Setting up window
14:16:28:998: Initializing TTF renderer
14:16:28:999: Initializing mouse: number of buttons reported is 3
14:16:28:999: Install timer
14:16:29:056: Opened "Emscripten OpenAL"
14:16:29:058: Install exit handler
14:16:29:059: Initialize path finder library
14:16:29:061: Game GUI version: 119
14:16:29:063: Requested script API: v3.5.0.7 (7), compat level: v3.5.0.7 (7)
14:16:29:088: Game title: 'Barahir-8-bit'
14:16:29:089: Checking for disk space
14:16:29:090: Game native resolution: 320 x 240 (8 bit)
14:16:29:091: Graphic settings: driver: OGL, windowed: yes, screen def: scaling, screen size: 0 x 0, match device ratio: ignore, game scale: max_round
14:16:29:091: Failed to init gfx mode. Error: OpenGL driver does not support 256-color display mode
14:16:29:092: There was a problem finding and/or creating valid graphics mode for game size 320 x 240 (8-bit) and requested filter 'StdScale'.
14:16:29:092: (Problem: 'OpenGL driver does not support 256-color display mode')
14:16:29:093: Try to correct the problem, or seek help from the AGS homepage.

[arj0n]

<double post, sorry>

[Crimson Wizard]

arjon, it's only OpenGL (or WebGL?), because it runs in browser.

[arj0n]

arjon, it's only OpenGL (or WebGL?), because it runs in browser.

Ah, thanx for the clarification.

[eri0o]

@Monsieur OUXX, what you mean? Have you tried adding all files in it, including the translation files? What happened? Translation has to be selected by handwriting it in the acsetup.cfg for now.

@arj0n, behind the scenes it uses WebGL, but there are both the OpenGL renderer and the Software renderer ported. I am not familiar with 256 bit games, can you link me one of them so I can try it? Also thanks for the other game. If you want to try to force Software, just write driver = Software (I think that is it at least) in the  acsetup.cfg file and add it toget with your game when uploading and it should work.

There will be soon an update to this JS version of the Engine using a better code with less of my adaptations that will hopefully work better.

The idea of the one to push games (launcher) is to test own games, and find bugs, and the single game version would be to release said games (if they work).

[Snarky]

I just wanted to say that this is very cool!

[Bòógieman]

this is soooo awesome! 
just tried it with my old AGS2.7.2 game and it works great (Firefox and "Samsung Internet" on Android)
except for MIDI, I can hear something but it is way to slow and completely out of tune 
also the "fade out - fade in" effect I used for room changes seems to just invert the colors before leaving the room
this is the game if you want to try it yourself: Maniac Mansion Mania Episode 53

[eri0o]

@Snarky Thanks! 

@Bòógieman, the fade out and fade in inverted colors is my error, I will fix it. Thanks for spotting it!

I recommend not using MIDI in new games. There are other formats that AGS supports that ship their own soundfonts on the track if tracker format is absolutely desired - next version will have some fixes for modplug tracker too. The midi errors, so far from my tests, appear to be in JS code, I think I will endup modifying Emscripten (the JS libraries part) to use a different backend for midi, but need more testing yet. But it should be possible to fix eventually - just a lot of work.

[Manu]

Hi @eri0o
This is simply fantastic! I just tried my (work-in-progress) mini-game, I played it for a while and it works perfectly.
I just have one problem with the initial cutscene. It seems like the js version does not wait when the characters are talking, and it just skips to the end of the cutscene.

The code is like that:

Code: ags

function room_AfterFadeIn()
StartCutscene(eSkipESCOrRightButton);
cBene.SayAt(10, 40, 300, "bla bla bla");
cBene.SayAt(10, 40, 300, "bla bla bla");
 ...
EndCutscene();
mouse.Visible=true;
gIconbar.Visible=true;
gStatusline.Visible=true;
player.ChangeRoom(1, 164, 170);
cBene.ChangeRoom(1, 280, 170);

On Windows, it's working: room appears, the character says everything, and then the game opens the main room. But on the JS version, the cutscene room appears for a second, and then the characters go room#1, you don't see her talking. Do you know why? Is there any workaround?
Thanks!

[eri0o]

Hi @emabolo!

I have some guesses, I can try to offer a different build of this in the weekend to see if it's fixed. AGS has a bunch of inner game loops that make a bit hard to properly sync the engine and the browser so I use a tool that unrolls this to fake having a single game loop - it mostly works fine though. I wonder if this may be a problem.

Not that long ago, Creamy reported a similar problem with Phylactere module. I am currently working on an Android build of the Engine using the SDL2 port, once it's done, I will start more serious work on this JS/WASM/WebGL port.

About the cutscene may I ask how it's being skipped? I mean, are you actually using Start and End cutscene commands around the cutscene or when you say cutscene you mean just a game dialog? My guess is if it accepts any key, some key is fakely being sent by accident, so if it's the case, I would ask to try to accept only mouse clicks.

@Creamy the MIDI problem has been tracked down, but not sure when a fix will be available - it's in the library in use for playing the sound files for all formats (the good news is the library is still in active development and fixes are being worked on). :/

Spoiler

[close]

[Manu]

I tried to comment StartCutscene and EndCutscene and it's the same. The room fades in and fades out, the character doesn't even start talking.

I discovered that the reason is the room has the property ShowPlayerCharacter = FALSE. If I set it to TRUE, everything works normally (apart from the fact that I didn't want the character to appear
With False, it seems the code ignores everything and goes to the end.

EDIT: I solved it by setting ShowPlayerCharacter = TRUE, and adding "cEgo.on=0;" inside room_Load(). Now it's perfect!

I hope you will continue working on it, this is a great way to distribute the games, for small ones like mine, probably the best way.
Thanks a lot!

[eri0o]

Hey, since people really liked this (thanks for the award everyone!) I decided to do a new port.

AGS Web Player (3.6.0 Alpha) ericoporto.github.io/agsjs/3_6_0/index.html

Above is based on code synced with the 3.6.0 Alpha version instead (a comparison here, the repo is github.com/ericoporto/ags/tree/ags3--sdl2--emscripten.

The Software Driver Fullscreen mode is broken but this should not be a problem if your game uses the OGL driver. The software driver is working embedded - there's a lot of change on the fullscreen handling and AFAICT is the only thing that broke (I will eventually fix...) , nevermind, Crimson Wizard fixed it!

As before Alt+Enter toggles fullscreen - same as normal AGS. I will try to revamp the HTML so it's prettier and add some sort of preferences menu, but the idea of this build was to sync to current SDL port that is a bit different on how it was in this version.

building from source note: Building with Emscripten 2.0.16 it works everywhere but has slightly performance issues and has "resting finger bug" (game runs faster when finger is touching the screen), this is the version available above.
Building with latest Emscripten (Tip of Tree), fixes the "resting finger bug" and performance is much improved, but crashes on Chrome Mobile (works everywhere else apparently), so this is why I am not building with the latest version of Emscripten.

notes:

• this version apparently has a bug that eventually crashes my chrome browser on my phone, but I can't reproduce this on my desktop and the crash on the phone also crashes the chrome debug tools so I can't pickup what's going on :/ It doesn't crash on Firefox mobile so I can't use it's tools instead fixed
• Also, apparently there's some change in the FreeType used by AGS, unfortunate building FreeType to WASM is super hard and I can't figure out, for now I am using a prebuilt FreeType from Emscripten itself, but it's an older version that is different from the one used by AGS and some fonts will render wrong.
• The game FreakChic is working on this version, the dialog from Phylactere is no longer automatically skipped (previous bug reported by Creamy here).
• MIDI output is mute in the games I tested, probably need a sound font but using one makes the size huuuge, so I probably won't fix this.
• resting finger bug, previous version would run slightly faster if the finger was resting on the mobile screen than if wasn't, this one doesn't have this bug. I haven't tracked down why it happened but I think it may be related to the crash on Chrome mobile that is happening in this version. got this bug back
• why is audio not using multithread?, multithread in JS (pthreads) will require https and some server header configs (coop and coep), I explain a bit here on itch.io, I could not get answer for GitHub pages though. So for now it would be best to make the audio single thread for maximum host compatibility.
  
  
  • commit with single threaded audio change: 5147a7839e11aee485cad366b640342867847f45

There are currently some out of AGS bugs that needs to be fixed. If you try to build the ags js code locally and it doesn't work, it's probably one of these. I applied all fixes for the issues below manually for now.

• SDL Sound requires SDL2 fails with Emscripten SDL2 port, need to manually remove the find package line after fetching it.
• SDL2 Emscripten Port doesn't export SDL_exp symbol , this is used by SDL_sound so it will produce an error, the fix is to remove the line the macro that replaces C exp() by it, letting the code use exp instead. Fixed on upstream!
• Emscripten Open AL has a bug, it's really simple one line fix and you can pick my code to apply it, otherwise it will crash sometimes when playing audio - yeahp, not always, sometimes. Couldn't figure any test that reproduced this error consistently so I can't get the fix accepted upstream for now.

Because I am using GitHub Pages, the caching is agressive, so if you tried the previous version that crashed on mobile before, you will need to refresh a lot or load with an anonymous session to update to the newer version.

[eri0o]

Hey, worked on a bunch of fixes and I think I got it working in a reasonable state, if someone wants to try again. 

AGS Web Player (3.6.0 Alpha) ericoporto.github.io/agsjs/3_6_0/index.html

sorry for bumping. Details on previous post here: https://www.adventuregamestudio.co.uk/forums/index.php?topic=58470.msg636635317#msg636635317

[Bòógieman]

great to see that you carry on!, thx for that! 

tested again with my game Maniac Mansion Mania Episode 53, looks like the game runs just a bit slower than normal 
the speech font's outline is out of place, but I think this has something to do with "newer AGS running older AGS games", so not directly a problem of the browser port

MIDI output is mute in the games I tested, probably need a sound font but using one makes the size huuuge, so I probably won't fix this.

sad to hear that, this means the web player will not support a lot of older games 
is there an optional way to put the sound font to the game files, so that the web player uses it when its found?

[Crimson Wizard]

• Also, apparently there's some change in the FreeType used by AGS, unfortunate building FreeType to WASM is super hard and I can't figure out, for now I am using a prebuilt FreeType from Emscripten itself, but it's an older version that is different from the one used by AGS and some fonts will render wrong.

To double check, the one in browser version is older than one that comes with AGS? (I think AGS does not use newest FreeType either)
There were couple of reports of broken fonts in older games (e.g. https://github.com/adventuregamestudio/ags/issues/835), which happened probably after we switched to using one version of FreeType universally on all ports.

tested again with my game Maniac Mansion Mania Episode 53, looks like the game runs just a bit slower than normal 
the speech font's outline is out of place, but I think this has something to do with "newer AGS running older AGS games", so not directly a problem of the browser port

Idk if related, but we had this old hack for Maniac mansion mania games, it got to be enabled during compilation:
https://github.com/adventuregamestudio/ags/blob/master/Common/font/ttffontrenderer.cpp#L111

• The game FreakChic is working on this version, the dialog from Phylactere is no longer automatically skipped (previous bug reported by Creamy here).

Does this happen only in a browser port or everywhere in latest AGS?

[eri0o]

is there an optional way to put the sound font to the game files, so that the web player uses it when its found?

I haven't tested yet, but theoretically if you put the soundfont with the game it should work. The problem is the soundfont size will occupy RAM of the JS/WASM VM, so ideally one should use a soundfont that is as small as possible.

tested again with my game Maniac Mansion Mania Episode 53, looks like the game runs just a bit slower than normal

This may be a bug, I will check it. If you can report the platform you used to test I will use the same and see what I can find.

To double check, the one in browser version is older than one that comes with AGS?

It's, it's FreeType 2.0.6, from 2015, directly from Emscripten FreeType port. AGS version is much newer, I think 2.1.13 or something similar.

According to my own notes for myself I built FreeType from AGS repositories for WASM in the past, but I don't see how, I tried to build with the exact same machine, tools and got known errors. So I think my notes are misleading. But I don't have some errors with font rendering in the old build. I can't build the exact same WASM I did in the past unfortunately. Anyway, I will look into FreeType with the people from FreeType itself and see how far I get - the build errors are in the C macros.

I will look more into this and try to figure out what happened, but the problem is either in Emscripten or my code (or FreeType), not ags.

Does this happen only in a browser port or everywhere in latest AGS?

It doesn't happen on the new SDL2 port, it was a bug on the old SDL2 port (the original Sonneveld code), which was the one the previous browser port was based on (so it happened there too).

[Bòógieman]

tested again with my game Maniac Mansion Mania Episode 53, looks like the game runs just a bit slower than normal

This may be a bug, I will check it. If you can report the platform you used to test I will use the same and see what I can find.

Firefox 88 64bit, on Win10 Pro 64bit, 20H2

[Blano]

sorry for necroposting but the link to the player is broken.. can anybody give me a valid link?
thx you!

[Hobo]

You can find the latest AGS web port stuff from this thread: https://www.adventuregamestudio.co.uk/forums/index.php?topic=59164.0
The first post should have everything you need to get your game running in a browser.