Wetspot compiled to javascript

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

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]

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]

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]

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]

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]

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.

[sancho2]

Seems to work under Win 7/64.

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]

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]

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]

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]

Wow, this looks very promising.
Combining this with Cordova, we'll be able to convert our programs into Android apps.

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

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]

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.