Play AGS Games via browser

Started by Sledgy, Sun 04/10/2020 20:13:08

Previous topic - Next topic

Sledgy

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

You can put all AGS games to such site.

Blondbraid

Quote from: Sledgy on Sun 04/10/2020 20:13:08
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

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

Quote from: Stupot on Mon 05/10/2020 23:49:05
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

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

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

QuoteJust "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

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

Quote from: Crimson Wizard on Wed 28/10/2020 15:19:40
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 :P

Quote from: Creamy on Wed 28/10/2020 15:31:02
That's great! I tried several games and they all worked (just some issues here and there with MIDI files or phylactere module).

QuoteJust "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.

Quote from: Hobo on Wed 28/10/2020 19:46:16
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

#13
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 :)

Quote from: selmiak on Thu 29/10/2020 15:07:27
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!! ;)
My official site: http://www.pershaland.com/

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

#16
QuoteCan 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  :smiley: 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

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

SMF spam blocked by CleanTalk