Targetting WebAssembly from FlashDevelop?

Hi, I’m pretty excited about the WebAssembly output and would like to try it. How can I target it from a standard FlashDevelop OpenFl project?

First, you will need the Emscripten SDK installed.

The installer (for me) on Windows installed an old version of Emscripten, you will need Emscripten 1.17.1 (if I remember the version right) for WebAssembly with OpenFL to work properly.

Due to the evolving nature of the WebAssembly specification, we do not include binaries inside of Lime, currently, so you will need to go to https://github.com/openfl/lime and follow the instructions for setting up a development build of Lime. With a development build ready, use lime rebuild hxcpp emscripten then lime rebuild emscripten to compile binaries.

Then in FlashDevelop, you can edit the target drop-down to a custom value. The target is emscripten -webassembly, or webassembly/wasm as an alias. You can also test emscripten -asmjs as well :slight_smile:

3 Likes

Would you please build OpenFL/Lime version that has support for WASM alongside with the regular OpenFL/Lime?
I’m too lazy to build it myself :wink:

1 Like

There is NO Emscripten 1.17.1 release. At least not in the emsdk archives. There is a 1.7.1 and a 1.7.8 which more closely aligns with the Lime tickets from 2014 which seem like the last activity on reconciling OpenFL and Emscripten build pipeline. But those no longer build with the current version of SDL being used by Lime.

Remarkably, the latest version of Emscripten as of this writing builds smoothly, but when the browser launches there is a only a blank teal canvas and errors at runtime.

Sounds like Lime needs to be updated?

WebAssembly is going to be HOT

check out the Funky Karts demo. it boots so fast, runs so smooth!
60FPS fullscreen on my 2560x1440 display
near 60fps on my Android Chrome mobile browser
they have builds for it on iOS, Android native and Desktop native, and its in Steam lol

those look like amazing vector graphics too

I must have mis-written the version number. I have version “1.37.13” installed on my Linux system, which worked when last tested recently.

1 Like

I just tried “DisplayingABitmap” and it worked in both ASM.js and WebAssembly output. It must have been at least “1.37”, not “1.17” like I incorrectly remembered :slight_smile:

1 Like

Went to search for the development build but the link on the page is 404.
http://www.openfl.org/builds/lime

Edit 1: guess it is http://builds.openfl.org/ now

Also, the “haxelib local filename.zip” will it interfere with the current lime installed and being used, does it have to be installed inside emscriptem dir… or magic ?

It will install it locally, based on the version. If you already have the same version (we don’t always update our development builds to a newer version before release) it will overwrite what you have already

Thanks for clearing that up singmajesty. Webassembly here I come! :smiley:

Do I need python installed for this ?
Any recommended version ?

doing : lime rebuild hxcpp emscripten
throws :
Compiling group: std
python “/emcc” -c -fvisibility=hidden -O1 -fpic -fPIC -DEMSCRIPTEN -Wno-overflow -Wno-parentheses -Wno-unknown-warning-option -Wno-null-dereference -Wno-unused-value -Wno-format-extra-args -Wno-bool-conversion -Wno-warn-absolute-paths -DSTATIC_LINK(static) -DHXCPP_VISIT_ALLOCS(haxe) -DHXCPP_API_LEVEL=0(haxe) -IC:/HaxeToolkit/haxe/lib/hxcpp/3,4,188/include … tags=[haxe,static]

  • Xml.cpp

  • Process.cpp

  • Random.cpp

  • String.cpp

  • Sys.cpp

  • File.cpp
    Process creation failure : python

  • Socket.cpp

Also : haxelib local lime-5.9.1-22-ga454265.zip
shows :
Warning: Command local is deprecated and will be removed in future. Use haxelib install <file> instead.
Installing lime…
Current version is now 5.9.1
Done

and looks like isn’t installing locally, now as for locally, I took it that it would make a copy inside the current directory, but it doesn’t look like it. It is going to haxe\lib\lime\ with everything else.
I’m doing this in windows 10.
hxcpp 3.4.188
lime 5.9.1

EDIT 1: Turns out I didn’t have emscripten in the path so python couldn’t be reached.
Create PiratePig example and opened in Haxedevelop though getting:
Running process: D:\TEMP\INST\Haxe\HaxeDevelop-5.3\Tools\fdbuild\fdbuild.exe “D:\WORK\HXPROJECTS\PiratePig\Pirate Pig.hxproj” -ipc 49575641-bed7-42eb-8050-581c225013a2 -version “3.4.4” -compiler “C:\HaxeToolkit\haxe” -notrace -library “D:\TEMP\INST\Haxe\HaxeDevelop-5.3\Library” -target "webassembly -emscripten"
Building Pirate Pig
Running Pre-Build Command Line…
cmd: “C:\HaxeToolkit\haxe/haxelib” run lime build “project.xml” webassembly -emscripten -release -Dfdb
Error: You must define EMSCRIPTEN_SDK with the path to your Emscripten SDK
Build halted with errors.
Done(1)

I have set:
EMSCRIPTEN_SDK=D:\TEMP\INST\Haxe\emscripten\emscripten\1.37.26

though no luck yet. It does create the bin directory but stops.

EDIT2: tried emsdk_env.bat but that doesn’t help and somehow EMSCRIPTEN_SDK isn’t defined in there but some other like envs are set. Still the same from HaxeDevelop. No EMSCRIPTEN_SDK that it can find though I am defining it just before starting the IDE. Weird.

EDIT3: Added as instructed. WASM/EMScripten Build error
and that fixed the EMSCRIPTEN_SDK that made me think it was a setenv problem.
Getting: ERROR:root:C:/HaxeToolkit/haxe/lib/lime/5,9,1/ndll/Emscripten/liblime.a: No such file or directory (“C:/HaxeToolkit/haxe/lib/lime/5,9,1/ndll/Emscripten/liblime.a” was expected to be an input file, based on the commandline arguments provided)
Build halted with errors.
Yep, the file isn’t there… checks.

EDIT 4: Main problem is lime rebuild emscripten isn’t generating any files, it seems. And I don’t know why that is.
With -verbose I can see it stops after: “Running command: REBUILD” and nothing else happens unlike when I do lime rebuild hxcpp emscripten where it goes on to actually build some files.
Had to "add to config.xml in .lime inside windows user directory to fix that.

EDIT 5: Had to git clone lime and was able to generate the .a file needed.
Project now builds in HaxeDevelop with webasm -emscripten
but comes up pitch black in the browser.
It shows the following, related to opengl maybe:
emcc ApplicationMain.o -s WASM=1 -s NO_EXIT_RUNTIME=1 -s USE_SDL=2 -lpthread -lopenal -s DISABLE_EXCEPTION_CATCHING=0 -O2 -s ALLOW_MEMORY_GROWTH=1 --preload-file assets -o …/bin/PiratePig.js
warning: unresolved symbol: glBeginQuery
warning: unresolved symbol: glBeginTransformFeedback
warning: unresolved symbol: glBindBufferBase
warning: unresolved symbol: glBindBufferRange
warning: unresolved symbol: glBindSampler
warning: unresolved symbol: glBindTransformFeedback
warning: unresolved symbol: glBlitFramebuffer
warning: unresolved symbol: glClearBufferfi
warning: unresolved symbol: glClearBufferfv
warning: unresolved symbol: glClearBufferiv
warning: unresolved symbol: glClearBufferuiv
warning: unresolved symbol: glClientWaitSync
warning: unresolved symbol: glCompressedTexImage3D
warning: unresolved symbol: glCompressedTexSubImage3D
warning: unresolved symbol: glCopyBufferSubData
warning: unresolved symbol: glCopyTexSubImage3D
warning: unresolved symbol: glDeleteQueries
warning: unresolved symbol: glDeleteSamplers
warning: unresolved symbol: glDeleteSync
warning: unresolved symbol: glDeleteTransformFeedbacks
warning: unresolved symbol: glDrawRangeElements
warning: unresolved symbol: glEndQuery
warning: unresolved symbol: glEndTransformFeedback
warning: unresolved symbol: glFenceSync
warning: unresolved symbol: glFramebufferTextureLayer
warning: unresolved symbol: glGenQueries
warning: unresolved symbol: glGenSamplers
warning: unresolved symbol: glGenTransformFeedbacks
warning: unresolved symbol: glGetActiveUniformBlockName
warning: unresolved symbol: glGetActiveUniformBlockiv
warning: unresolved symbol: glGetActiveUniformsiv
warning: unresolved symbol: glGetBufferParameteri64v
warning: unresolved symbol: glGetBufferPointerv
warning: unresolved symbol: glGetFragDataLocation
warning: unresolved symbol: glGetInteger64i_v
warning: unresolved symbol: glGetInteger64v
warning: unresolved symbol: glGetIntegeri_v
warning: unresolved symbol: glGetInternalformativ
warning: unresolved symbol: glGetProgramBinary
warning: unresolved symbol: glGetQueryObjectuiv
warning: unresolved symbol: glGetQueryiv
warning: unresolved symbol: glGetSamplerParameterfv
warning: unresolved symbol: glGetSamplerParameteriv
warning: unresolved symbol: glGetStringi
warning: unresolved symbol: glGetTransformFeedbackVarying
warning: unresolved symbol: glGetUniformBlockIndex
warning: unresolved symbol: glGetUniformuiv
warning: unresolved symbol: glGetVertexAttribIiv
warning: unresolved symbol: glGetVertexAttribIuiv
warning: unresolved symbol: glInvalidateFramebuffer
warning: unresolved symbol: glInvalidateSubFramebuffer
warning: unresolved symbol: glIsQuery
warning: unresolved symbol: glIsSampler
warning: unresolved symbol: glIsSync
warning: unresolved symbol: glIsTransformFeedback
warning: unresolved symbol: glMapBufferRange
warning: unresolved symbol: glPauseTransformFeedback
warning: unresolved symbol: glProgramBinary
warning: unresolved symbol: glProgramParameteri
warning: unresolved symbol: glReadBuffer
warning: unresolved symbol: glRenderbufferStorageMultisample
warning: unresolved symbol: glResumeTransformFeedback
warning: unresolved symbol: glSamplerParameterf
warning: unresolved symbol: glSamplerParameteri
warning: unresolved symbol: glTexImage3D
warning: unresolved symbol: glTexStorage2D
warning: unresolved symbol: glTexStorage3D
warning: unresolved symbol: glTexSubImage3D
warning: unresolved symbol: glTransformFeedbackVaryings
warning: unresolved symbol: glUniform1ui
warning: unresolved symbol: glUniform1uiv
warning: unresolved symbol: glUniform2ui
warning: unresolved symbol: glUniform2uiv
warning: unresolved symbol: glUniform3ui
warning: unresolved symbol: glUniform3uiv
warning: unresolved symbol: glUniform4ui
warning: unresolved symbol: glUniform4uiv
warning: unresolved symbol: glUniformBlockBinding
warning: unresolved symbol: glUniformMatrix2x3fv
warning: unresolved symbol: glUniformMatrix2x4fv
warning: unresolved symbol: glUniformMatrix3x2fv
warning: unresolved symbol: glUniformMatrix3x4fv
warning: unresolved symbol: glUniformMatrix4x2fv
warning: unresolved symbol: glUniformMatrix4x3fv
warning: unresolved symbol: glUnmapBuffer
warning: unresolved symbol: glVertexAttribI4i
warning: unresolved symbol: glVertexAttribI4iv
warning: unresolved symbol: glVertexAttribI4ui
warning: unresolved symbol: glVertexAttribI4uiv
warning: unresolved symbol: glVertexAttribIPointer
warning: unresolved symbol: glWaitSync
INFO:root:Enabling --no-heap-copy because -s ALLOW_MEMORY_GROWTH=1 is being used with file_packager.py (pass --no-heap-copy to suppress this notification)

EDIT 6: It throws in browser console:
exception thrown: TypeError: Module.Pointer_stringify is not a function,ASM_CONSTS<@http://127.0.0.1:3000/PiratePig.js:1:35014 _emscripten_asm_const_ii@http://127.0.0.1:3000/PiratePig.js:1:40402 wasm-function[34277]@http://127.0.0.1:3000/PiratePig.js:5993148:1 wasm-function[34107]@http://127.0.0.1:3000/PiratePig.js:5868675:1 wasm-function[34211]@http://127.0.0.1:3000/PiratePig.js:5980912:1 wasm-function[34471]@http://127.0.0.1:3000/PiratePig.js:6049448:1 wasm-function[34762]@http://127.0.0.1:3000/PiratePig.js:6126400:1 Module.dynCall_iiiiiii@http://127.0.0.1:3000/PiratePig.js:1:407342 invoke_iiiiiii@http://127.0.0.1:3000/PiratePig.js:1:354387 wasm-function[2839]@http://127.0.0.1:3000/PiratePig.js:284400:1 wasm-function[34812]@http://127.0.0.1:3000/PiratePig.js:6127648:1 Module.dynCall_viiiiii@http://127.0.0.1:3000/PiratePig.js:1:413238 invoke_viiiiii@http://127.0.0.1:3000/PiratePig.js:1:363193 wasm-function[2840]@http://127.0.0.1:3000/PiratePig.js:284549:1 wasm-function[745]@http://127.0.0.1:3000/PiratePig.js:160229:1 wasm-function[30385]@http://127.0.0.1:3000/PiratePig.js:4854118:1 wasm-function[23505]@http://127.0.0.1:3000/PiratePig.js:3912612:1 wasm-function[17918]@http://127.0.0.1:3000/PiratePig.js:2890510:1 wasm-function[11045]@http://127.0.0.1:3000/PiratePig.js:2085330:1 wasm-function[19448]@http://127.0.0.1:3000/PiratePig.js:3158182:1 wasm-function[10997]@http://127.0.0.1:3000/PiratePig.js:2077715:1 wasm-function[10992]@http://127.0.0.1:3000/PiratePig.js:2077367:1 wasm-function[10408]@http://127.0.0.1:3000/PiratePig.js:2026015:1 wasm-function[34777]@http://127.0.0.1:3000/PiratePig.js:6126825:1 Module.dynCall_v@http://127.0.0.1:3000/PiratePig.js:1:409208 invoke_v@http://127.0.0.1:3000/PiratePig.js:1:357401 wasm-function[9431]@http://127.0.0.1:3000/PiratePig.js:1920479:1 wasm-function[650]@http://127.0.0.1:3000/PiratePig.js:153746:1 Module._main@http://127.0.0.1:3000/PiratePig.js:1:400661 callMain@http://127.0.0.1:3000/PiratePig.js:1:415689 doRun@http://127.0.0.1:3000/PiratePig.js:1:416429 run/<@http://127.0.0.1:3000/PiratePig.js:1:416597

EDIT 7: On FireFox DevEd it actually throws in console:
wasm streaming compile failed: TypeError: Response has unsupported MIME type
BunnyMark.js:1:8689
falling back to ArrayBuffer instantiation
BunnyMark.js:1:8689
Use of Mutation Events is deprecated. Use MutationObserver instead.
Just before the stringify thing.

Apparently this has nothing to do with openfl but has to do with SDL2 not getting proper exports when generating bytecode. https://github.com/kripken/emscripten/pull/5945 https://github.com/kripken/emscripten/issues/5940

And it runs, just had to place https://github.com/kripken/emscripten/blob/1f8766c6932a50e7c8523489ca90328cb36c543c/tools/ports/sdl.py in the proper directory in emscripten. The file has fixes for SDL exports that were getting cut. This is on emscripten 1.37.26. So it is working. :smiley:

1 Like

PS Sorry for old thread…

Now it looks common :frowning: I think @Franky says like promised but now it doesn’t work for me :confused:

I have tried emscripten 1.37.26 = DisplayingABitmap is black in browser.

I can’t understand where is current version of emscripten if it works 100 % without warning unresolved symbols…

Is that the latest dev, or latest haxelib? Asm.js, or WebAssembly?

1 Like

I am using latest Openfl and hxcpp from haxelib and lime from github