Wetspot compiled to javascript

Emscripten, WASM, and asm.js related questions
v1ctor
Site Admin
Posts: 3804
Joined: May 27, 2005 8:08
Location: SP / Bra[s]il
Contact:

Wetspot compiled to javascript

Post by v1ctor »

I'm porting FB to Emscripten (Emscript is a C/C++ to javascript compiler).

There are many functions in the runtime and gfx libraries yet to port, but with some small changes, I was able to compile Wetspot 1 (hello Angelo!) to Javascript, making it playable from a browser.

Please run it and report if it worked well! It should run in the latest versions of Firefox, Chrome, Opera, Safari and also IE 11 and Edge, plus the stock Android browser.

This is the link: http://freebasic.net/temp/js-wetspot/WETSPOT.html

Notes:
1. Besides the keyboard, mouse can now be used to control the player. Emscripten maps touch events to mouse events, so the game is somehow playable on mobile devices (tested in Android only)
v1ctor
Site Admin
Posts: 3804
Joined: May 27, 2005 8:08
Location: SP / Bra[s]il
Contact:

Re: Wetspot compiled to javascript

Post by v1ctor »

If you want to try the Emscripten port:

1. Download Emscripten and install it (http://kripken.github.io/emscripten-sit ... loads.html)
2. Get the Emscripten branch from the FB repository and build the compiler as usual
3. Build the rtlib and the gfxlib2 with TARGET=asmjs-unknown-emscripten
4. Compile the sources using: fbc -target js-asmjs myfile.bas
5. Because javascript has a cooperative multitasking model, the application must return the control to the browser, so any loop waiting for user input must be changed to a function that will be called every N milliseconds by the JS runtime
6. Any file accessed by the application need to be embedded by Emscripten to be downloaded later. Pass the "-Wl --preload-file,myfile.ext" option when compiling with fbc
7. Emscripten can't do unaligned memory access, so UDT's by default have natural padding (even in -lang qb mode). If any file is loading directly from a binary file to an UDT, it's necessary to declare the UDT using FIELD=1

Example of a loop converted to a function:

Code: Select all

type em_callback_func as sub
#ifdef __FB_JS__
	declare sub emscripten_set_main_loop cdecl alias "emscripten_set_main_loop" (byval func as em_callback_func, byval fps as integer = 0, byval simulate_infinite_loop as integer = 0)
#else
sub emscripten_set_main_loop(byval func as em_callback_func, byval fps as integer = 0, byval simulate_infinite_loop as integer = 0) 
	if fps = 0 then
		fps = 60
	end if
	
	do
		func()
		sleep 1000/fps
	loop
end sub
#endif

sub mainloop
    var k = inkey
    if( k = chr(27) ) then
         end
    else
         ...
    end if
end sub

emscripten_set_main_loop @mainloop
JohnK
Posts: 279
Joined: Sep 01, 2005 5:20
Location: Earth, usually
Contact:

Re: Wetspot compiled to javascript

Post by JohnK »

Whoa, this is different. Works on under Google Chrome on my Windows 10 x64, runs too fast to manipulate the character accurately but it runs.

I am interested in conversion to JavaScript -- not that I like JS or mobile, just that it is where the bleeping public mindset is heading and Windows desktop looks to be self destructing.

JK and his $0.02 worth
Jonge
Posts: 130
Joined: Jul 17, 2012 17:51
Location: Norway
Contact:

Re: Wetspot compiled to javascript

Post by Jonge »

Nice to see you around here again V1c! =)

Seems to run pretty well in my FireFox. Managed to play 3-4 levels. I don't remember exactly how the original version run, but it seems a bit fast, and the game stops when you loose(without going back to main menu.)

Did you have to change much of the sourcecode to get it to compile and run?
angros47
Posts: 2321
Joined: Jun 21, 2005 19:04

Re: Wetspot compiled to javascript

Post by angros47 »

Wow! That's fantastic!

For the first time I have been able to see a FreeBasic program running on my android smartphone. It's not possible to play, anyway, because there is no keyboard and the virtual keyboard does not pop up (but it's not your fault, of course); programs intended to run on tablet/smartphone will need a different interface.

Keep on that nice work! Are you going to support OpenGL / WebGL, too?
v1ctor
Site Admin
Posts: 3804
Joined: May 27, 2005 8:08
Location: SP / Bra[s]il
Contact:

Re: Wetspot compiled to javascript

Post by v1ctor »

Emscripten supports OpenGL ES (OpenGL for Embedded Systems). It's not too simple to port some OpenGL 1.x demos, though. It also has some emulation for unsupported GL 1.x functions, but it's too slow and unstable.

I had to adapt Wetspot because the cooperative multitasking nature of javascript. Any infinite loop has to be removed and the app/game needs to implement a state machine logic. Also, to not pass every single external sprite file in the command line to the EM compiler, I moved them to a "assets" directory. The modified and original sources are at http://freebasic.net/temp/js-wetspot/wetspot.zip

It's the first time I saw a FB game in Android too. It was pretty cool :). Mysoft sent me a e-mail showing that he had a FB game compiled to javascript over a year ago, using Emscript also, but without porting the compiler and the runtime/gfxlib library (he is using his own libs). So my attempt wasn't the first, just the first public one :)
angros47
Posts: 2321
Joined: Jun 21, 2005 19:04

Re: Wetspot compiled to javascript

Post by angros47 »

v1ctor wrote:Emscripten supports OpenGL ES (OpenGL for Embedded Systems). It's not too simple to port some OpenGL 1.x demos, though. It also has some emulation for unsupported GL 1.x functions, but it's too slow and unstable.

I know too well, unfortunately... this is one of the worse difficulties in development of OpenB3D, too...
I had to adapt Wetspot because the cooperative multitasking nature of javascript. Any infinite loop has to be removed and the app/game needs to implement a state machine logic.
Something like DOS ISRs?

Sorry if my question is silly, but... is there a way to "disguise" a SLEEP instruction to do the trick? I mean... the SLEEP instruction could act as a "return" command, but adding an entry point to the next event, so when the javascript timer call it, it could resume execution from the same point (maybe it's a stupid idea, I don't know)

It's the first time I saw a FB game in Android too. It was pretty cool :). Mysoft sent me a e-mail showing that he had a FB game compiled to javascript over a year ago, using Emscript also, but without porting the compiler and the runtime/gfxlib library (he is using his own libs). So my attempt wasn't the first, just the first public one :)
Actually it was already possible to run a FreeBasic program in javascript/Emscript, with a dirty trick: DosBox has already been compiled with Emscripten, can run in a browser, and it's so stable that the Internet Archive uses it to preserve historical dos games... and FreeBasic programs can work in DosBox ;-)
But I never tried, and I don't know if anybody did.
Last edited by angros47 on Oct 15, 2015 21:22, edited 1 time in total.
sancho2
Posts: 547
Joined: May 17, 2015 6:41

Re: Wetspot compiled to javascript

Post by sancho2 »

Seems to work under Win 7/64.
Jonge wrote:Managed to play 3-4 levels.
How do you get out of the corner? There is no access outside of the lower left. I see some green pill in a corner square that I can't access. I tried shift ctrl etc.
edit: FInally figured it out.
There are some stones that can be pushed using the enter key.
For the love of God, game makers, please just a little info to get us going.
v1ctor
Site Admin
Posts: 3804
Joined: May 27, 2005 8:08
Location: SP / Bra[s]il
Contact:

Re: Wetspot compiled to javascript

Post by v1ctor »

I added mouse control to Wetspot, and as Emscripten maps touch events to mouse events, it is somehow playable now in Android.

It's not really possible to sleep() in JS. Emscripten has an experimental feature that will translate calls to its sleep() to anonymous function and a async call, but there are limitations and i didn't try it yet.
D.J.Peters
Posts: 8586
Joined: May 28, 2005 3:28
Contact:

Re: Wetspot compiled to javascript

Post by D.J.Peters »

Looks like the Emscripten SDK 1.34.1 is 64-bit only :-(

The 32-bit version is 1.13.9 or it's only the installer with a 32/64 backend included ?

Joshy
Tourist Trap
Posts: 2958
Joined: Jun 02, 2015 16:24

Re: Wetspot compiled to javascript

Post by Tourist Trap »

D.J.Peters wrote:Looks like the Emscripten SDK 1.34.1 is 64-bit only :-(
Same as for you, I cant find the 32 bit version unless I dig out the oldies, and then not after version named emsdk-1.12.0-full-32bit.exe... Current version seems to be emsdk-1.34.1-full-64bit.exe.
Landeel
Posts: 777
Joined: Jan 25, 2007 10:32
Location: Brazil
Contact:

Re: Wetspot compiled to javascript

Post by Landeel »

Wow, this looks very promising.
Combining this with Cordova, we'll be able to convert our programs into Android apps.
angros47
Posts: 2321
Joined: Jun 21, 2005 19:04

Re: Wetspot compiled to javascript

Post by angros47 »

I tried it, and I have an issue: I get

Code: Select all

llvm-as: myfile.llvm:1:2: error: expected top-level entity
        .text
        ^
I use this branch of fbc: https://github.com/jayrm/fbc/tree/emscripten
caseih
Posts: 2157
Joined: Feb 26, 2007 5:32

Re: Wetspot compiled to javascript

Post by caseih »

I'm curious. What does Cordova have to do with FB and Emscripten? Looks to me like it's simply another Javascript hybrid app development platform.
Landeel
Posts: 777
Joined: Jan 25, 2007 10:32
Location: Brazil
Contact:

Re: Wetspot compiled to javascript

Post by Landeel »

caseih wrote:I'm curious. What does Cordova have to do with FB and Emscripten? Looks to me like it's simply another Javascript hybrid app development platform.
Cordova can turn HTML/javascript into an Android app. So we could make Android apps using FreeBASIC. Just that.
Sure it's not the best path, as it's better to compile FreeBASIC for Android and use that. The missing piece is fbgfx for Android.
Post Reply