├── .gitignore ├── .gitmodules ├── Dockerfile ├── LICENSE ├── README.md ├── bootstrap ├── LinkerConfig.xml ├── WasmBuild.csproj └── index.html ├── docker-compose.yml ├── docs ├── bsol.png └── fna-wasm-instructions.md.txt ├── lib └── fnalibs │ ├── README.txt │ ├── lib64 │ ├── libFAudio.so.0 │ ├── libFNA3D.so.0 │ ├── libSDL2-2.0.so.0 │ └── libtheorafile.so │ ├── osx │ ├── libFAudio.0.dylib │ ├── libFNA3D.0.dylib │ ├── libMoltenVK.dylib │ ├── libSDL2-2.0.0.dylib │ ├── libtheorafile.dylib │ └── libvulkan.1.dylib │ └── vulkan │ └── icd.d │ └── MoltenVK_icd.json └── src ├── .env ├── FnaWasm.sln └── FnaWasm ├── .dockerignore ├── FnaWasm.csproj ├── Program.cs └── WasmGame.cs /.gitignore: -------------------------------------------------------------------------------- 1 | ## Ignore Visual Studio temporary files, build results, and 2 | ## files generated by popular Visual Studio add-ons. 3 | ## 4 | ## Get latest from https://github.com/github/gitignore/blob/master/VisualStudio.gitignore 5 | 6 | # User-specific files 7 | *.rsuser 8 | *.suo 9 | *.user 10 | *.userosscache 11 | *.sln.docstates 12 | 13 | # User-specific files (MonoDevelop/Xamarin Studio) 14 | *.userprefs 15 | 16 | # Mono auto generated files 17 | mono_crash.* 18 | 19 | # Build results 20 | [Dd]ebug/ 21 | [Dd]ebugPublic/ 22 | [Rr]elease/ 23 | [Rr]eleases/ 24 | x64/ 25 | x86/ 26 | [Aa][Rr][Mm]/ 27 | [Aa][Rr][Mm]64/ 28 | bld/ 29 | [Bb]in/ 30 | [Oo]bj/ 31 | [Ll]og/ 32 | [Ll]ogs/ 33 | 34 | # Visual Studio 2015/2017 cache/options directory 35 | .vs/ 36 | # Uncomment if you have tasks that create the project's static files in wwwroot 37 | #wwwroot/ 38 | 39 | # Visual Studio 2017 auto generated files 40 | Generated\ Files/ 41 | 42 | # MSTest test Results 43 | [Tt]est[Rr]esult*/ 44 | [Bb]uild[Ll]og.* 45 | 46 | # NUnit 47 | *.VisualState.xml 48 | TestResult.xml 49 | nunit-*.xml 50 | 51 | # Build Results of an ATL Project 52 | [Dd]ebugPS/ 53 | [Rr]eleasePS/ 54 | dlldata.c 55 | 56 | # Benchmark Results 57 | BenchmarkDotNet.Artifacts/ 58 | 59 | # .NET Core 60 | project.lock.json 61 | project.fragment.lock.json 62 | artifacts/ 63 | 64 | # StyleCop 65 | StyleCopReport.xml 66 | 67 | # Files built by Visual Studio 68 | *_i.c 69 | *_p.c 70 | *_h.h 71 | *.ilk 72 | *.meta 73 | *.obj 74 | *.iobj 75 | *.pch 76 | *.pdb 77 | *.ipdb 78 | *.pgc 79 | *.pgd 80 | *.rsp 81 | *.sbr 82 | *.tlb 83 | *.tli 84 | *.tlh 85 | *.tmp 86 | *.tmp_proj 87 | *_wpftmp.csproj 88 | *.log 89 | *.vspscc 90 | *.vssscc 91 | .builds 92 | *.pidb 93 | *.svclog 94 | *.scc 95 | 96 | # Chutzpah Test files 97 | _Chutzpah* 98 | 99 | # Visual C++ cache files 100 | ipch/ 101 | *.aps 102 | *.ncb 103 | *.opendb 104 | *.opensdf 105 | *.sdf 106 | *.cachefile 107 | *.VC.db 108 | *.VC.VC.opendb 109 | 110 | # Visual Studio profiler 111 | *.psess 112 | *.vsp 113 | *.vspx 114 | *.sap 115 | 116 | # Visual Studio Trace Files 117 | *.e2e 118 | 119 | # TFS 2012 Local Workspace 120 | $tf/ 121 | 122 | # Guidance Automation Toolkit 123 | *.gpState 124 | 125 | # ReSharper is a .NET coding add-in 126 | _ReSharper*/ 127 | *.[Rr]e[Ss]harper 128 | *.DotSettings.user 129 | 130 | # TeamCity is a build add-in 131 | _TeamCity* 132 | 133 | # DotCover is a Code Coverage Tool 134 | *.dotCover 135 | 136 | # AxoCover is a Code Coverage Tool 137 | .axoCover/* 138 | !.axoCover/settings.json 139 | 140 | # Visual Studio code coverage results 141 | *.coverage 142 | *.coveragexml 143 | 144 | # NCrunch 145 | _NCrunch_* 146 | .*crunch*.local.xml 147 | nCrunchTemp_* 148 | 149 | # MightyMoose 150 | *.mm.* 151 | AutoTest.Net/ 152 | 153 | # Web workbench (sass) 154 | .sass-cache/ 155 | 156 | # Installshield output folder 157 | [Ee]xpress/ 158 | 159 | # DocProject is a documentation generator add-in 160 | DocProject/buildhelp/ 161 | DocProject/Help/*.HxT 162 | DocProject/Help/*.HxC 163 | DocProject/Help/*.hhc 164 | DocProject/Help/*.hhk 165 | DocProject/Help/*.hhp 166 | DocProject/Help/Html2 167 | DocProject/Help/html 168 | 169 | # Click-Once directory 170 | publish/ 171 | 172 | # Publish Web Output 173 | *.[Pp]ublish.xml 174 | *.azurePubxml 175 | # Note: Comment the next line if you want to checkin your web deploy settings, 176 | # but database connection strings (with potential passwords) will be unencrypted 177 | *.pubxml 178 | *.publishproj 179 | 180 | # Microsoft Azure Web App publish settings. Comment the next line if you want to 181 | # checkin your Azure Web App publish settings, but sensitive information contained 182 | # in these scripts will be unencrypted 183 | PublishScripts/ 184 | 185 | # NuGet Packages 186 | *.nupkg 187 | # NuGet Symbol Packages 188 | *.snupkg 189 | # The packages folder can be ignored because of Package Restore 190 | **/[Pp]ackages/* 191 | # except build/, which is used as an MSBuild target. 192 | !**/[Pp]ackages/build/ 193 | # Uncomment if necessary however generally it will be regenerated when needed 194 | #!**/[Pp]ackages/repositories.config 195 | # NuGet v3's project.json files produces more ignorable files 196 | *.nuget.props 197 | *.nuget.targets 198 | 199 | # Microsoft Azure Build Output 200 | csx/ 201 | *.build.csdef 202 | 203 | # Microsoft Azure Emulator 204 | ecf/ 205 | rcf/ 206 | 207 | # Windows Store app package directories and files 208 | AppPackages/ 209 | BundleArtifacts/ 210 | Package.StoreAssociation.xml 211 | _pkginfo.txt 212 | *.appx 213 | *.appxbundle 214 | *.appxupload 215 | 216 | # Visual Studio cache files 217 | # files ending in .cache can be ignored 218 | *.[Cc]ache 219 | # but keep track of directories ending in .cache 220 | !?*.[Cc]ache/ 221 | 222 | # Others 223 | ClientBin/ 224 | ~$* 225 | *~ 226 | *.dbmdl 227 | *.dbproj.schemaview 228 | *.jfm 229 | *.pfx 230 | *.publishsettings 231 | orleans.codegen.cs 232 | 233 | # Including strong name files can present a security risk 234 | # (https://github.com/github/gitignore/pull/2483#issue-259490424) 235 | #*.snk 236 | 237 | # Since there are multiple workflows, uncomment next line to ignore bower_components 238 | # (https://github.com/github/gitignore/pull/1529#issuecomment-104372622) 239 | #bower_components/ 240 | 241 | # RIA/Silverlight projects 242 | Generated_Code/ 243 | 244 | # Backup & report files from converting an old project file 245 | # to a newer Visual Studio version. Backup files are not needed, 246 | # because we have git ;-) 247 | _UpgradeReport_Files/ 248 | Backup*/ 249 | UpgradeLog*.XML 250 | UpgradeLog*.htm 251 | ServiceFabricBackup/ 252 | *.rptproj.bak 253 | 254 | # SQL Server files 255 | *.mdf 256 | *.ldf 257 | *.ndf 258 | 259 | # Business Intelligence projects 260 | *.rdl.data 261 | *.bim.layout 262 | *.bim_*.settings 263 | *.rptproj.rsuser 264 | *- [Bb]ackup.rdl 265 | *- [Bb]ackup ([0-9]).rdl 266 | *- [Bb]ackup ([0-9][0-9]).rdl 267 | 268 | # Microsoft Fakes 269 | FakesAssemblies/ 270 | 271 | # GhostDoc plugin setting file 272 | *.GhostDoc.xml 273 | 274 | # Node.js Tools for Visual Studio 275 | .ntvs_analysis.dat 276 | node_modules/ 277 | 278 | # Visual Studio 6 build log 279 | *.plg 280 | 281 | # Visual Studio 6 workspace options file 282 | *.opt 283 | 284 | # Visual Studio 6 auto-generated workspace file (contains which files were open etc.) 285 | *.vbw 286 | 287 | # Visual Studio LightSwitch build output 288 | **/*.HTMLClient/GeneratedArtifacts 289 | **/*.DesktopClient/GeneratedArtifacts 290 | **/*.DesktopClient/ModelManifest.xml 291 | **/*.Server/GeneratedArtifacts 292 | **/*.Server/ModelManifest.xml 293 | _Pvt_Extensions 294 | 295 | # Paket dependency manager 296 | .paket/paket.exe 297 | paket-files/ 298 | 299 | # FAKE - F# Make 300 | .fake/ 301 | 302 | # CodeRush personal settings 303 | .cr/personal 304 | 305 | # Python Tools for Visual Studio (PTVS) 306 | __pycache__/ 307 | *.pyc 308 | 309 | # Cake - Uncomment if you are using it 310 | # tools/** 311 | # !tools/packages.config 312 | 313 | # Tabs Studio 314 | *.tss 315 | 316 | # Telerik's JustMock configuration file 317 | *.jmconfig 318 | 319 | # BizTalk build output 320 | *.btp.cs 321 | *.btm.cs 322 | *.odx.cs 323 | *.xsd.cs 324 | 325 | # OpenCover UI analysis results 326 | OpenCover/ 327 | 328 | # Azure Stream Analytics local run output 329 | ASALocalRun/ 330 | 331 | # MSBuild Binary and Structured Log 332 | *.binlog 333 | 334 | # NVidia Nsight GPU debugger configuration file 335 | *.nvuser 336 | 337 | # MFractors (Xamarin productivity tool) working folder 338 | .mfractor/ 339 | 340 | # Local History for Visual Studio 341 | .localhistory/ 342 | 343 | # BeatPulse healthcheck temp database 344 | healthchecksdb 345 | 346 | # Backup folder for Package Reference Convert tool in Visual Studio 2017 347 | MigrationBackup/ 348 | 349 | # Ionide (cross platform F# VS Code tools) working folder 350 | .ionide/ 351 | -------------------------------------------------------------------------------- /.gitmodules: -------------------------------------------------------------------------------- 1 | [submodule "lib/FNA"] 2 | path = lib/FNA 3 | url = https://github.com/FNA-XNA/FNA 4 | -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | # Automated FNA to WASM building, based on: 2 | # See: https://gist.github.com/TheSpydog/e94c8c23c01615a5a3b2cc1a0857415c 3 | 4 | # DOCKER_BUILDKIT=1 for use in CI pipelines. 5 | # See: https://docs.docker.com/develop/develop-images/build_enhancements/ 6 | 7 | FROM ubuntu:18.04 AS fna-wasm-build 8 | 9 | RUN apt-get update --fix-missing 10 | 11 | # Install build dependencies 12 | RUN apt-get install -y wget 13 | RUN apt-get install -y git 14 | RUN apt-get install -y python3 15 | RUN apt-get install -y make 16 | RUN apt-get install -y cmake 17 | 18 | # Install mono (required by Uno.Wasm.Bootstrap) 19 | RUN apt install -y gnupg ca-certificates 20 | RUN apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv-keys 3FA7E0328081BFF6A14DA29AA6A19B38D3D831EF 21 | RUN echo "deb https://download.mono-project.com/repo/ubuntu stable-bionic main" | tee /etc/apt/sources.list.d/mono-official-stable.list 22 | RUN apt update 23 | RUN apt install -y mono-devel 24 | 25 | # Install ninja (required by Uno.Wasm.Bootstrap) 26 | # See: https://github.com/unoplatform/Uno.Wasm.Bootstrap/blob/main/doc/runtime-execution-modes.md#required-configuration-for-aot-mixed-mode-or-static-linking-on-linux 27 | RUN apt-get install -y ninja-build 28 | 29 | # See: https://docs.microsoft.com/en-us/dotnet/core/install/linux-ubuntu#1804 30 | RUN wget https://packages.microsoft.com/config/ubuntu/18.04/packages-microsoft-prod.deb -O packages-microsoft-prod.deb 31 | RUN dpkg -i packages-microsoft-prod.deb 32 | RUN rm packages-microsoft-prod.deb 33 | RUN apt-get update; \ 34 | apt-get install -y apt-transport-https && \ 35 | apt-get update && \ 36 | apt-get install -y dotnet-sdk-5.0 37 | RUN apt-get update; \ 38 | apt-get install -y apt-transport-https && \ 39 | apt-get update && \ 40 | apt-get install -y aspnetcore-runtime-5.0 41 | 42 | # See: https://emscripten.org/docs/getting_started/downloads.html 43 | RUN git clone https://github.com/emscripten-core/emsdk.git 44 | WORKDIR /emsdk 45 | RUN ./emsdk install latest 46 | RUN ./emsdk activate latest 47 | 48 | # For some reason, using bash 'source' or sh '.' has no impact when setting PATH, 49 | # so we have to do it manually by copying out the text and running it with ENV 50 | # here. 51 | # 52 | # RUN ./emsdk construct_env > vars.sh 53 | # RUN . ./vars.sh 54 | ENV PATH="/emsdk:/emsdk/upstream/emscripten:/emsdk/node/14.18.2_64bit/bin:${PATH}" 55 | ENV EMSDK="/emsdk" 56 | ENV EM_CONFIG="/emsdk/.emscripten" 57 | ENV EMSDK_NODE="/emsdk/node/14.18.2_64bit/bin/node" 58 | 59 | WORKDIR / 60 | RUN mkdir fnalibs 61 | WORKDIR /fnalibs 62 | 63 | # SDL2 64 | RUN git clone https://github.com/libsdl-org/SDL 65 | WORKDIR /fnalibs/SDL 66 | RUN mkdir emscripten-build 67 | WORKDIR /fnalibs/SDL/emscripten-build 68 | RUN emconfigure ../configure --host=wasm32-unknown-emscripten --disable-assembly --disable-threads --disable-cpuinfo CFLAGS="-O2 -Wno-warn-absolute-paths -Wdeclaration-after-statement -Werror=declaration-after-statement" --prefix="$PWD/emscripten-sdl2-installed" 69 | RUN emmake make 70 | RUN emmake make install 71 | WORKDIR /fnalibs 72 | 73 | # FNA3D 74 | RUN git clone --recursive https://github.com/FNA-XNA/FNA3D 75 | WORKDIR /fnalibs/FNA3D 76 | RUN mkdir build 77 | WORKDIR /fnalibs/FNA3D/build 78 | RUN emcmake cmake .. -DSDL2_INCLUDE_DIRS=/fnalibs/SDL/include -DSDL2_LIBRARIES=/fnalibs/SDL/emscripten-build/emscripten-sdl2-installed/lib/libSDL2.a 79 | RUN emmake make 80 | WORKDIR /fnalibs 81 | 82 | # FAudio 83 | RUN git clone https://github.com/FNA-XNA/FAudio 84 | WORKDIR /fnalibs/FAudio 85 | RUN mkdir build 86 | WORKDIR /fnalibs/FAudio/build 87 | RUN emcmake cmake .. -DSDL2_INCLUDE_DIRS=/fnalibs/SDL/include -DSDL2_LIBRARIES=/fnalibs/SDL/emscripten-build/emscripten-sdl2-installed/lib/libSDL2.a 88 | RUN emmake make 89 | 90 | # Copy artifacts to output 91 | WORKDIR / 92 | RUN mkdir -p /var/output 93 | RUN cp /fnalibs/SDL/emscripten-build/emscripten-sdl2-installed/lib/libSDL2.a /var/output/SDL2.a 94 | RUN cp /fnalibs/FNA3D/build/libFNA3D.a /var/output/FNA3D.a 95 | RUN cp /fnalibs/FNA3D/build/libmojoshader.a /var/output/libmojoshader.a 96 | RUN cp /fnalibs/FAudio/build/libFAudio.a /var/output/FAudio.a 97 | 98 | # Copy game source to output 99 | RUN mkdir -p /var/lib/fna 100 | COPY ./bootstrap /var/output 101 | COPY ./src/FnaWasm /var/output 102 | COPY ./lib/FNA /var/lib/FNA 103 | 104 | # Ensure output directory is usable by Uno.Wasm.Bootstrap 105 | RUN /bin/bash -c 'chmod -R 777 /var/lib/fna' 106 | RUN /bin/bash -c 'chmod -R 777 /var/output' 107 | 108 | # Build game 109 | RUN dotnet build /var/output/WasmBuild.csproj -c Release 110 | 111 | # Host game 112 | RUN apt-get install -y nodejs 113 | RUN apt-get install -y npm 114 | RUN npm install -g live-server 115 | WORKDIR /var/output/bin/Release/net5.0/dist 116 | EXPOSE 8080 117 | CMD ["live-server"] 118 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Wattsy 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Automated FNA to WASM builds 2 | 3 | This project contains a simple "Blue Screen of Life" game built in FNA. 4 | 5 | It also contains a Docker image that will automatically take the source code for the game, build it for WASM, and host it in a local server. 6 | 7 | This takes the guess-work out of @TheSpyDog's excellent [FNA-to-WASM tutorial](https://gist.github.com/TheSpydog/e94c8c23c01615a5a3b2cc1a0857415c) so you can focus on your game and built it for the web when you're ready. 8 | 9 | ## Build steps 10 | 11 | - From the project root, run `docker compose up` or right-click `docker-compose.yml` in VS Code 12 | w/ the Docker extension installed, and click "Compose Up" 13 | 14 | - Wait for the Docker container to finish building and boot up 15 | 16 | - Navigate to `http://localhost:3030` to run your game! 17 | 18 | ![BSOL](/docs/bsol.png) 19 | -------------------------------------------------------------------------------- /bootstrap/LinkerConfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /bootstrap/WasmBuild.csproj: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Exe 5 | net5.0 6 | InterpreterAndAOT 7 | index.html 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /bootstrap/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 54 | 55 | $(ADDITIONAL_CSS) 56 | $(ADDITIONAL_HEAD) 57 | 58 | 59 |
60 |
63 | 64 | 65 | 68 | 69 | 70 | 71 |
72 |
73 | 74 | 78 | 81 | 82 | -------------------------------------------------------------------------------- /docker-compose.yml: -------------------------------------------------------------------------------- 1 | version: "3" 2 | 3 | services: 4 | 5 | fna-wasm: 6 | build: . 7 | image: fna-wasm-build 8 | ports: 9 | - "3030:8080" 10 | volumes: 11 | - ./dist:/var/output/bin/Release/net5.0/dist -------------------------------------------------------------------------------- /docs/bsol.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wattsyart/fna-wasm/991a838d42044af2aa3c64ba8d4dd6eb0c89a194/docs/bsol.png -------------------------------------------------------------------------------- /docs/fna-wasm-instructions.md.txt: -------------------------------------------------------------------------------- 1 | ## How to build your FNA game for WebAssembly 2 | 3 | **WARNING: This process is EXTREMELY experimental and not officially supported yet!** 4 | 5 | Thanks to the ongoing work on .NET WebAssembly support, it is now possible to build FNA games for the web! 6 | 7 | If you decide to give this a try, be sure to tell us about it in the [FNA Discord](https://discord.gg/fna-xna)! I'm happy to help if you run into problems or have any further questions that are not answered here. 8 | 9 | # The Basics 10 | 11 | **How does it work?** 12 | 13 | FNA browser games run on .NET 5 with the help of [Uno.Wasm.Bootstrap](https://github.com/unoplatform/Uno.Wasm.Bootstrap). As per usual, all of the platform-specific code on the native side is handled by SDL2. For the graphics backend we use FNA3D's OpenGL ES3 renderer, which Emscripten helpfully translates to WebGL 2. 14 | 15 | Just like all the other platforms FNA supports, the WebAssembly platform does not require a special version of FNA. It's just the regular old FNA.dll that you've come to know and love. Single-assembly portability, now on the web! 16 | 17 | In order to remain performant (and to statically link with the Emscripten-compiled native libraries), FNA browser games must be AOT compiled. However, reflection-heavy games are still feasible thanks to "mixed mode" compilation that enables the .NET interpreter on top of the AOT'd code, just for dynamic special cases! 18 | 19 | .NET's WebAssembly AOT support is still very much a WIP, so it's almost certain you'll run into runtime bugs. Thankfully there's almost always a workaround if you're willing to persevere, but still beware -- there be dragons. 20 | 21 | **What works?** 22 | * Graphics (via WebGL 2) 23 | * Sound Effects 24 | * Mouse / Keyboard / Gamepad Input 25 | * Asset loading (Content.Load<>, TitleContainer.OpenStream, File.Open) 26 | 27 | **What doesn't work?** 28 | * [Anything with threads.](https://github.com/unoplatform/Uno.Wasm.Bootstrap#threads-support) (XACT, threaded resource loading, etc.) 29 | * Calling `GraphicsDeviceManager.ApplyChanges()` in the game constructor. Because of [a bug in Emscripten](https://github.com/emscripten-ports/SDL2/issues/92), this will break mouse input. 30 | * APIs and assembly references that aren't compatible with .NET CoreCLR. 31 | * ContentReaders that use generics, such as `ListReader`. (There is a workaround though, which I'll describe in the Q+A.) 32 | * WebGL 1, since FNA3D does not have a GLES2 renderer. 33 | * Probably a lot of other stuff. 34 | 35 | **What's untested?** 36 | * Video, since I can't get Theorafile to build with Emscripten... 37 | 38 | # Prereqs 39 | 40 | The first thing you'll need is a compatible build OS. Currently only Linux and [Windows 10 + WSL](https://docs.microsoft.com/en-us/windows/wsl/install-win10) are supported by Uno.Wasm.Bootstrap. I've personally been using WSL with Ubuntu 18.04 LTS. 41 | 42 | Next, [download, install, and set up Emscripten on Linux / your WSL partition](https://emscripten.org/docs/getting_started/downloads.html). **Don't** use a package manager! Use the officially recommended method of cloning from git! 43 | 44 | You will also need to install [.NET 5 on Linux/WSL](https://docs.microsoft.com/en-us/dotnet/core/install/linux). 45 | 46 | And finally, you'll need a basic FNA game to test with. I suggest you build the ol' reliable [Cornflower Blue sample app](https://gist.github.com/flibitijibibo/1ce4b7899b3cf1805a420330f0d2faf3#the-first-game-object) first to make sure everything's in order, before you try to build your own game for WebAssembly. You can do this part on Windows or on Linux. 47 | 48 | Now that's out of the way, let's build the fnalibs. 49 | 50 | # Building fnalibs 51 | 52 | EDIT: Thanks to clarvalon, we now have [automatically-built fnalibs](https://github.com/clarvalon/FNA-WASM-Build) that you can grab and use instead of building them yourself! But if you do want to build them manually, here's how you can do it. 53 | 54 | All of these steps must be done on Linux (or your WSL instance). 55 | ```bash 56 | # First, make sure you've added the emsdk to your path, per the Emscripten instructions! 57 | 58 | # Create the fnalibs repo directory 59 | mkdir fnalibs 60 | cd fnalibs 61 | 62 | # SDL2 63 | git clone https://github.com/libsdl-org/SDL 64 | cd SDL 65 | mkdir emscripten-build 66 | cd emscripten-build 67 | emconfigure ../configure --host=wasm32-unknown-emscripten --disable-assembly --disable-threads --disable-cpuinfo CFLAGS="-O2 -Wno-warn-absolute-paths -Wdeclaration-after-statement -Werror=declaration-after-statement" --prefix="$PWD/emscripten-sdl2-installed" 68 | emmake make 69 | emmake make install 70 | cd ../.. 71 | 72 | # FNA3D 73 | git clone --recursive https://github.com/FNA-XNA/FNA3D 74 | cd FNA3D 75 | mkdir build 76 | cd build 77 | emcmake cmake .. -DSDL2_INCLUDE_DIRS=/include -DSDL2_LIBRARIES=/emscripten-build/emscripten-sdl2-installed/lib/libSDL2.a 78 | emmake make 79 | cd ../.. 80 | 81 | # FAudio 82 | git clone https://github.com/FNA-XNA/FAudio 83 | cd FAudio 84 | mkdir build 85 | cd build 86 | emcmake cmake .. -DSDL2_INCLUDE_DIRS=/include -DSDL2_LIBRARIES=/emscripten-build/emscripten-sdl2-installed/lib/libSDL2.a 87 | emmake make 88 | cd ../.. 89 | 90 | # Theorafile 91 | # Uh, instructions coming soon...? 92 | ``` 93 | 94 | Now that you have all your libraries, it's time to copy them over to your FNA game project directory, like so: 95 | ```bash 96 | # Assuming WSL, remove the /mnt/c/Users/ if you're running native Linux. 97 | cp ./SDL/emscripten-build/emscripten-sdl2-installed/lib/libSDL2.a /mnt/c/Users///SDL2.a 98 | cp ./FNA3D/build/libFNA3D.a /mnt/c/Users///FNA3D.a 99 | cp ./FNA3D/build/libmojoshader.a /mnt/c/Users///libmojoshader.a 100 | cp ./FAudio/build/libFAudio.a /mnt/c/Users///FAudio.a 101 | ``` 102 | 103 | Notice something very important in that command -- we are _renaming_ the SDL2, FNA3D, and FAudio libraries when we copy them! (e.g. `libSDL2.a` to just `SDL2.a`) This is unfortunately necessary for DllImport to work correctly. 104 | 105 | That's it for the fnalibs! Now to set up the project. 106 | 107 | # Setting up the C# project 108 | 109 | In your game's project directory, make a new .csproj file and copy-paste the following into it: 110 | 111 | ```xml 112 | 113 | 114 | 115 | Exe 116 | net5.0 117 | InterpreterAndAOT 118 | index.html 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | ``` 147 | Much of this should be self-explanatory, but for more information on what these various attributes do, please see the very descriptive [Uno.Wasm.Bootstrap readme](https://github.com/unoplatform/Uno.Wasm.Bootstrap#readme). 148 | 149 | Additionally we need to create the index.html file that's referenced in the .csproj: 150 | ```html 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 204 | 205 | $(ADDITIONAL_CSS) 206 | $(ADDITIONAL_HEAD) 207 | 208 | 209 |
210 |
213 | 214 | 215 | 218 | 219 | 220 | 221 |
222 |
223 | 224 | 228 | 231 | 232 | 233 | ``` 234 | And finally, we need our [LinkerConfig.xml](https://github.com/mono/linker/blob/main/docs/data-formats.md#xml-examples) file, which makes sure that the .NET linker doesn't get too excited and rip out stuff we actually use. 235 | ``` 236 | 237 | 238 | 239 | 240 | 241 | 242 | ``` 243 | 244 | And with that, we're done with the setup! 245 | 246 | # Building the game 247 | 248 | To run your game, you can either use Visual Studio or call `msbuild /t:restore` then `msbuild` directly in the command line in your project directory. I recommend the latter, as it gives you far more descriptive info about the build, so if something goes wrong you'll get an actual error message. 249 | 250 | You may encounter a build error that starts with: "The Windows subsystem for Linux dotnet environment may not be properly setup, and you may need to run the environment setup script." If you see this, just follow the instructions it gives you. 251 | 252 | Once the build is complete (which might take a while), we need to test the game! 253 | 254 | If you used the VS IDE to build+run it, it will automatically start up a local server. Don't put too much faith in it though. Its server has a habit of caching and running old builds, which can lead to a lot of confusion and frustration when debugging. (Speaking from experience here...) 255 | 256 | Instead, I recommend starting up a local server manually. My personal favorite is [live-server](https://www.npmjs.com/package/live-server), but you're welcome to use whatever you like. (I know `python -m http.server` is another popular one.) The path you'll want to serve on your server is `./bin/Debug/net5.0/dist/`. 257 | 258 | Finally, open up the browser and visit the address given by your server. With luck, you'll see the Cornflower Blue screen of life! 259 | 260 | ## Content 261 | 262 | To include Content in your game, add this to your WasmShellExtraEmccFlags Include string in the .csproj file: 263 | `--preload-file /mnt/c/Users///Content@Content` 264 | 265 | (If you're on Linux, remove the /mnt/ junk.) 266 | 267 | This will compile your whole Content directory into an asset bundle called "dotnet.data". Note that the path is relative to WSL. The "@Content" part of the string [re-maps the directory's name in the virtual file system](https://emscripten.org/docs/porting/files/packaging_files.html#packaging-files-packaged-file-location) so that we can use "Content/" as our root directory, just like on PC builds. 268 | 269 | By default, Emscripten will generate the dotnet.data file inside the `bin/dist/package_xxx` folder, but we need it to be in `bin/dist/` instead. To fix this, add this little MSBuild task into your .csproj. This automatically moves the content bundle to where it's supposed to go, saving you the trouble of manually dragging it into the right directory. 270 | ```xml 271 | 272 | 273 | 274 | ``` 275 | 276 | Try adding some text files, images, or audio files into your Content directory and build! See what happens! 277 | 278 | ## Q+A 279 | 280 | **My builds take forever. Is that normal?** 281 | 282 | Yup... I've seen builds take upwards of 15 minutes for large projects. For smaller games, you should expect build times along the lines of 1-5 minutes, which is much more reasonable. But of course you'll probably want to stick with PC builds for rapid, iterative development. 283 | 284 | **My project hit a build error, but it doesn't actually say what the error is...?** 285 | 286 | If you're using Visual Studio, try using msbuild on the command line instead. It will be much more verbose. 287 | 288 | If the error came relatively early in the build cycle, try re-building. In rare cases, msbuild only spews the error message on the second run. 289 | 290 | If the error came very late in the build cycle, it's probably a linker error. Its output can be pretty cryptic sometimes, but if you study the msbuild output hard enough it might contain some clues as to what's gone wrong. If you're totally stumped, ask for help on the Discord. 291 | 292 | **Why can't we just use the Emscripten port of SDL2?** 293 | 294 | Because the Emscripten version of SDL2 is forked from upstream for no apparent reason and is perpetually out of date. As a result it's currently incompatible with FNA. 295 | 296 | **Why am I getting a mysterious "Uncaught: (some number)" exception without a stack trace in the JS console?** 297 | 298 | Most likely there's something in your code (or in FNA) that has the following structure: 299 | ``` 300 | try { Foo(); } 301 | catch (SomeSpecificException e) { /* deal with the exception */ } 302 | ``` 303 | without a generic `catch` block at the end that can handle any exception. Foo() might not be throwing the exception you expected to catch, and as a result the exception isn't properly caught by anything. This causes the .NET runtime to freak out, resulting in the indescipherable message you see here. Unfortunately, without better debugging support, the best thing to do is just start plopping Console.WriteLine statements around the codebase to see where it goes haywire. 304 | 305 | **How do I work around the generic ContentReader type limitation?** 306 | 307 | Modify FNA's source, of course! Print the name of the type it's trying to load so you know what it's called internally (see https://github.com/FNA-XNA/FNA/blob/master/src/Content/ContentTypeReaderManager.cs#L196) and then edit the code like so: 308 | ``` 309 | Type l_readerType = Type.GetType(readerTypeString); 310 | if (l_readerType == null) 311 | { 312 | if (readerTypeString == "The.Type.You.Want`1[[whatever]]") 313 | { 314 | l_readerType = typeof(The.Type.You.Want); 315 | } 316 | } 317 | ``` -------------------------------------------------------------------------------- /lib/fnalibs/README.txt: -------------------------------------------------------------------------------- 1 | This is fnalibs, an archive containing the native libraries used by FNA. 2 | 3 | These are the folders included: 4 | 5 | - x86: 32-bit Windows 6 | - x64: 64-bit Windows 7 | - lib64: Linux (64-bit only) 8 | - osx: macOS (64-bit only) 9 | - vulkan: MoltenVK ICD for macOS 10 | - Place this at Game.app/Contents/Resources/vulkan/ 11 | 12 | The library dependency list is as follows: 13 | 14 | - SDL2, used as the platform layer 15 | - FNA3D, used in the Graphics namespace 16 | - FAudio, used in the Audio/Media namespaces 17 | - libtheorafile, only used for VideoPlayer 18 | -------------------------------------------------------------------------------- /lib/fnalibs/lib64/libFAudio.so.0: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wattsyart/fna-wasm/991a838d42044af2aa3c64ba8d4dd6eb0c89a194/lib/fnalibs/lib64/libFAudio.so.0 -------------------------------------------------------------------------------- /lib/fnalibs/lib64/libFNA3D.so.0: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wattsyart/fna-wasm/991a838d42044af2aa3c64ba8d4dd6eb0c89a194/lib/fnalibs/lib64/libFNA3D.so.0 -------------------------------------------------------------------------------- /lib/fnalibs/lib64/libSDL2-2.0.so.0: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wattsyart/fna-wasm/991a838d42044af2aa3c64ba8d4dd6eb0c89a194/lib/fnalibs/lib64/libSDL2-2.0.so.0 -------------------------------------------------------------------------------- /lib/fnalibs/lib64/libtheorafile.so: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wattsyart/fna-wasm/991a838d42044af2aa3c64ba8d4dd6eb0c89a194/lib/fnalibs/lib64/libtheorafile.so -------------------------------------------------------------------------------- /lib/fnalibs/osx/libFAudio.0.dylib: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wattsyart/fna-wasm/991a838d42044af2aa3c64ba8d4dd6eb0c89a194/lib/fnalibs/osx/libFAudio.0.dylib -------------------------------------------------------------------------------- /lib/fnalibs/osx/libFNA3D.0.dylib: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wattsyart/fna-wasm/991a838d42044af2aa3c64ba8d4dd6eb0c89a194/lib/fnalibs/osx/libFNA3D.0.dylib -------------------------------------------------------------------------------- /lib/fnalibs/osx/libMoltenVK.dylib: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wattsyart/fna-wasm/991a838d42044af2aa3c64ba8d4dd6eb0c89a194/lib/fnalibs/osx/libMoltenVK.dylib -------------------------------------------------------------------------------- /lib/fnalibs/osx/libSDL2-2.0.0.dylib: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wattsyart/fna-wasm/991a838d42044af2aa3c64ba8d4dd6eb0c89a194/lib/fnalibs/osx/libSDL2-2.0.0.dylib -------------------------------------------------------------------------------- /lib/fnalibs/osx/libtheorafile.dylib: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wattsyart/fna-wasm/991a838d42044af2aa3c64ba8d4dd6eb0c89a194/lib/fnalibs/osx/libtheorafile.dylib -------------------------------------------------------------------------------- /lib/fnalibs/osx/libvulkan.1.dylib: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wattsyart/fna-wasm/991a838d42044af2aa3c64ba8d4dd6eb0c89a194/lib/fnalibs/osx/libvulkan.1.dylib -------------------------------------------------------------------------------- /lib/fnalibs/vulkan/icd.d/MoltenVK_icd.json: -------------------------------------------------------------------------------- 1 | { 2 | "file_format_version" : "1.0.0", 3 | "ICD": { 4 | "library_path": "../../../MacOS/osx/libMoltenVK.dylib", 5 | "api_version" : "1.1.0" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/.env: -------------------------------------------------------------------------------- 1 | DOCKER_BUILDKIT=1 -------------------------------------------------------------------------------- /src/FnaWasm.sln: -------------------------------------------------------------------------------- 1 |  2 | Microsoft Visual Studio Solution File, Format Version 12.00 3 | # Visual Studio Version 16 4 | VisualStudioVersion = 16.0.32510.428 5 | MinimumVisualStudioVersion = 10.0.40219.1 6 | Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "FnaWasm", "FnaWasm\FnaWasm.csproj", "{D9DF7A01-46B0-4C2C-847A-5ED2B842D3C1}" 7 | EndProject 8 | Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "FNA.Core", "..\lib\FNA\FNA.Core.csproj", "{A7826979-BC80-4AAB-B130-74FEE345AC92}" 9 | EndProject 10 | Global 11 | GlobalSection(SolutionConfigurationPlatforms) = preSolution 12 | Debug|Any CPU = Debug|Any CPU 13 | Debug|x64 = Debug|x64 14 | Release|Any CPU = Release|Any CPU 15 | Release|x64 = Release|x64 16 | EndGlobalSection 17 | GlobalSection(ProjectConfigurationPlatforms) = postSolution 18 | {D9DF7A01-46B0-4C2C-847A-5ED2B842D3C1}.Debug|Any CPU.ActiveCfg = Debug|Any CPU 19 | {D9DF7A01-46B0-4C2C-847A-5ED2B842D3C1}.Debug|Any CPU.Build.0 = Debug|Any CPU 20 | {D9DF7A01-46B0-4C2C-847A-5ED2B842D3C1}.Debug|x64.ActiveCfg = Debug|x64 21 | {D9DF7A01-46B0-4C2C-847A-5ED2B842D3C1}.Debug|x64.Build.0 = Debug|x64 22 | {D9DF7A01-46B0-4C2C-847A-5ED2B842D3C1}.Release|Any CPU.ActiveCfg = Release|Any CPU 23 | {D9DF7A01-46B0-4C2C-847A-5ED2B842D3C1}.Release|Any CPU.Build.0 = Release|Any CPU 24 | {D9DF7A01-46B0-4C2C-847A-5ED2B842D3C1}.Release|x64.ActiveCfg = Release|Any CPU 25 | {D9DF7A01-46B0-4C2C-847A-5ED2B842D3C1}.Release|x64.Build.0 = Release|Any CPU 26 | {A7826979-BC80-4AAB-B130-74FEE345AC92}.Debug|Any CPU.ActiveCfg = Debug|x64 27 | {A7826979-BC80-4AAB-B130-74FEE345AC92}.Debug|x64.ActiveCfg = Debug|x64 28 | {A7826979-BC80-4AAB-B130-74FEE345AC92}.Debug|x64.Build.0 = Debug|x64 29 | {A7826979-BC80-4AAB-B130-74FEE345AC92}.Release|Any CPU.ActiveCfg = Release|x64 30 | {A7826979-BC80-4AAB-B130-74FEE345AC92}.Release|x64.ActiveCfg = Release|x64 31 | {A7826979-BC80-4AAB-B130-74FEE345AC92}.Release|x64.Build.0 = Release|x64 32 | EndGlobalSection 33 | GlobalSection(SolutionProperties) = preSolution 34 | HideSolutionNode = FALSE 35 | EndGlobalSection 36 | GlobalSection(ExtensibilityGlobals) = postSolution 37 | SolutionGuid = {E09A6A46-5BA3-44DB-AA40-17E1FC05EF5E} 38 | EndGlobalSection 39 | EndGlobal 40 | -------------------------------------------------------------------------------- /src/FnaWasm/.dockerignore: -------------------------------------------------------------------------------- 1 | FnaWasm.csproj -------------------------------------------------------------------------------- /src/FnaWasm/FnaWasm.csproj: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Exe 5 | net6.0 6 | enable 7 | AnyCPU;x64 8 | 9 | 10 | 11 | 12 | x86\%(RecursiveDir)%(Filename)%(Extension) 13 | PreserveNewest 14 | 15 | 16 | x64\%(RecursiveDir)%(Filename)%(Extension) 17 | PreserveNewest 18 | 19 | 20 | osx\%(RecursiveDir)%(Filename)%(Extension) 21 | PreserveNewest 22 | 23 | 24 | lib\%(RecursiveDir)%(Filename)%(Extension) 25 | PreserveNewest 26 | 27 | 28 | lib64\%(RecursiveDir)%(Filename)%(Extension) 29 | PreserveNewest 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /src/FnaWasm/Program.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.IO; 3 | using System.Runtime.InteropServices; 4 | 5 | namespace FnaWasm 6 | { 7 | static class Program 8 | { 9 | [DllImport("kernel32.dll", CharSet = CharSet.Unicode, SetLastError = true)] 10 | [return: MarshalAs(UnmanagedType.Bool)] 11 | private static extern bool SetDllDirectory(string lpPathName); 12 | 13 | [STAThread] 14 | private static void Main(string[] args) 15 | { 16 | // https://github.com/FNA-XNA/FNA/wiki/4:-FNA-and-Windows-API#64-bit-support 17 | if (Environment.OSVersion.Platform == PlatformID.Win32NT) 18 | { 19 | SetDllDirectory(Path.Combine( 20 | AppDomain.CurrentDomain.BaseDirectory, 21 | Environment.Is64BitProcess ? "x64" : "x86" 22 | )); 23 | } 24 | 25 | using (WasmGame g = new WasmGame()) 26 | { 27 | g.Run(); 28 | } 29 | } 30 | } 31 | } -------------------------------------------------------------------------------- /src/FnaWasm/WasmGame.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.Xna.Framework; 2 | 3 | namespace FnaWasm 4 | { 5 | class WasmGame : Game 6 | { 7 | private readonly GraphicsDeviceManager graphics; 8 | 9 | public WasmGame() 10 | { 11 | graphics = new GraphicsDeviceManager(this); 12 | } 13 | 14 | protected override void Draw(GameTime gameTime) 15 | { 16 | graphics.GraphicsDevice.Clear(Color.CornflowerBlue); 17 | } 18 | } 19 | } --------------------------------------------------------------------------------