Wetspot compiled to javascript

For other topics related to the FreeBASIC project or its community.
v1ctor
Site Admin
Posts: 3798
Joined: May 27, 2005 8:08
Location: SP / Bra[s]il
Contact:

Wetspot compiled to javascript

Postby v1ctor » Oct 12, 2015 3:00

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: 3798
Joined: May 27, 2005 8:08
Location: SP / Bra[s]il
Contact:

Re: Wetspot compiled to javascript

Postby v1ctor » Oct 12, 2015 3:06

If you want to try the Emscripten port:

1. Download Emscripten and install it (http://kripken.github.io/emscripten-site/docs/getting_started/downloads.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

Postby JohnK » Oct 12, 2015 6:11

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: 129
Joined: Jul 17, 2012 17:51
Location: Norway
Contact:

Re: Wetspot compiled to javascript

Postby Jonge » Oct 12, 2015 11:09

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: 1444
Joined: Jun 21, 2005 19:04

Re: Wetspot compiled to javascript

Postby angros47 » Oct 12, 2015 12:06

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: 3798
Joined: May 27, 2005 8:08
Location: SP / Bra[s]il
Contact:

Re: Wetspot compiled to javascript

Postby v1ctor » Oct 12, 2015 18:55

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: 1444
Joined: Jun 21, 2005 19:04

Re: Wetspot compiled to javascript

Postby angros47 » Oct 12, 2015 20:37

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

Postby sancho2 » Oct 12, 2015 22:22

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: 3798
Joined: May 27, 2005 8:08
Location: SP / Bra[s]il
Contact:

Re: Wetspot compiled to javascript

Postby v1ctor » Oct 14, 2015 23:20

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: 7717
Joined: May 28, 2005 3:28

Re: Wetspot compiled to javascript

Postby D.J.Peters » Oct 15, 2015 8:12

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: 2756
Joined: Jun 02, 2015 16:24

Re: Wetspot compiled to javascript

Postby Tourist Trap » Oct 15, 2015 12:53

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: 689
Joined: Jan 25, 2007 10:32
Location: Brazil
Contact:

Re: Wetspot compiled to javascript

Postby Landeel » Oct 16, 2015 11:49

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

Return to “Community Discussion”

Who is online

Users browsing this forum: No registered users and 3 guests