Watch

tiger tiger tiger 8c22e68c2a

WASM examples (+ backports of new official examples) (#344 )

* chg: New build system that uses the officially distributed binaries, bumped version to 8.0.0, simplified git workflow, removed deprecated OpenGL 1.1 functionality.

* chg: Modernize CI workflow, enable SourceLink

- Bump workflow actions to latest majors (Node 24); drop deprecated softprops/action-gh-release@v1
- Trigger push builds on main instead of master
- Create local nuget feed dir before pack (fixes NU1301)
- Enable Microsoft.SourceLink.GitHub for debugging symbols (ref PR #340)

* fix: centralized version data in Directory.build.props, and fixed various interop details that had incorrect function signatures

* chore: updated readme

* fix: version the native extract marker and chain download via DependsOnTargets

The .extracted marker now includes the raylib package name, so bumping
TargetRaylibTag re-extracts the new archive instead of silently keeping
(and packing/copying) the previous version's files.

_PrepareNativeLibrary and _StageWasmNative now depend directly on
_DownloadAndExtractInternal instead of CallTarget-ing it; dependency
targets run in the same project instance, so the resolved properties
(RaylibPackageName etc.) propagate naturally.

* fix: let the binding build for browser-wasm on both net8.0 and net10.0

The net8-era wasm workload (Microsoft.NET.Runtime.WebAssembly.Sdk 8.0.x,
auto-imported for RID browser-wasm) treats every browser-wasm project as
a wasm app: it forces OutputType=Exe after project evaluation (CS5001
for a classlib) and hooks its app-bundle build after Build, which errors
because a library has no assemblies to bundle. Opt Raylib-cs out via
DisableAutoWasmBuildApp (props time, before the workload defaults its
trigger) and pin OutputType back to Library in Directory.Build.targets
(evaluated after the workload props, so the assignment wins). net10's
wasm SDK needs neither workaround.

* chore: readme updated

* chg: simplifying build logic - a simple line in the documentation should save us the code here

* fix: Wrong signature of FrameBufferComplete

* chore: readme update

* feat: samples default to local project reference, and can optionally use the nuget package

* feat: backporting existing raylib-cs examples and new official raylib examples to WASM, adopting raylib's original code style

* chore: readme, gitignore, and targets backport.

* fix: Examples.csproj runs the download task when building locally

* feat: backporting existing raylib-cs examples and new official raylib examples to WASM, adopting raylib's original code style

* chore: readme, gitignore, and targets backport.

* chore: clean up linter warnings

* feat: html harness focuses the example and allows quick navigation with J/K instead.

* chore: readme mentions the property to use nuget vs. the local project reference

* feat: replaced the J/K navigation with good old HTML buttons

* chore: run dotnet format scoped default (was previously scoped to just 'style')

2026-07-30 18:34:34 +01:00

4.3 KiB

Raw Blame History

Examples/Web — raylib-cs in the browser (WebAssembly)

Runs the raylib examples in the browser via WebAssembly, with a dropdown and Prev/Next buttons to switch between them. It proves the Raylib-cs NuGet package's browser-wasm support end-to-end: the package's buildTransitive targets link the shipped raylib.a into the .NET wasm runtime.

The browser-wasm configuration only activates when publishing with RuntimeIdentifier=browser-wasm; normal solution builds don't need the wasm-tools workload.

Prerequisites

.NET 10 SDK
dotnet workload install wasm-tools
Raylib-cs (works with the local project, or nuget if MSBuild property <UseRaylibCsPackage> is true

Build

dotnet publish Examples -f net10.0 -r browser-wasm -c Release
# -> Examples/bin/Release/net10.0/browser-wasm/AppBundle/

Toolchain caveat

If the link step fails with wasm-opt: Unknown option '--enable-bulk-memory-opt', the installed wasm-tools workload is out of sync with the SDK (stale workload band or a system EMSDK on PATH); fix with dotnet workload update. As a safety net, Examples.csproj defaults browser-wasm publishes to unoptimized native linking; an optimized publish can override those properties.

Run

WebAssembly must be served over HTTP (not file://):

dotnet serve -d Examples/bin/Release/net10.0/browser-wasm/AppBundle    # dotnet tool install -g dotnet-serve
# or:  npx http-server Examples/bin/Release/net10.0/browser-wasm/AppBundle

Open the printed URL and use the Example dropdown or Prev/Next buttons to switch examples.

Canvas scaling modes

The render buffer stays fixed at 800x450; display scaling is CSS-only. Pick with the Scale dropdown (or ?scale= query param):

native (default): exact 800x450 CSS pixels.
integer: largest whole-number multiple that fits, centered with letterboxing (pixel-perfect).
fit: fills the viewport preserving aspect ratio (can be fractional, less crisp).

Scaling is computed in device pixels and converted back to CSS via devicePixelRatio, so the modes behave consistently across OS scale and browser zoom. The status bar shows the live numbers (DPR, CSS size, backing size, scale): integer should stay crisp at any OS scale or zoom, and native should always report Scale 1.00.

How it works

A browser can't run raylib's blocking while (!WindowShouldClose()) loop (it would freeze the page), so frames are driven from JavaScript:

Host.Main() calls InitWindow once; main.js then populates the dropdown and selects the first example via Host.SetExample, so init failures surface in the on-page error banner.
main.js binds the page <canvas> to the runtime and calls Host.UpdateFrame() from a requestAnimationFrame loop paced to the current example's TargetFps (raylib's own limiter busy-waits and would peg the main thread). The Host methods it calls are [JSExport].
On switch, Host.SetExample unloads the previous example, resets the cursor to visible, and applies the next TargetFps. Cursor hiding and ConfigFlags are not honored in the browser. If Init or Update throws, the example is unloaded and an error banner is shown.
Each example is a single .cs file implementing IExample (Init / Update / Unload); the host owns the window, so examples never call InitWindow/CloseWindow. Platform differences (e.g. GLSL 100 vs 330) are handled inline with #if BROWSER guards, not separate files.

Adding more examples

Examples are auto-discovered by reflection (ExampleRegistry.DiscoverAll) — no list to edit. Drop a new .cs file in the matching category folder implementing IExample, splitting the original monolithic Main as:

Main() { <setup>; while(!WindowShouldClose()){ <body> } <cleanup> }
  ->  Init()  { <setup, minus InitWindow/SetTargetFPS> }   // loop-spanning locals become fields
      Update(){ <body> }                                   // keep BeginDrawing..EndDrawing
      Unload(){ <cleanup, minus CloseWindow> }

Keep the standalone static Main() as a thin driver so the example still runs on its own.

If an example can't run on single-threaded wasm, add its type to DesktopExcludedFromBrowser in ExampleRegistry.cs; BrowserOnly is the inverse list. Assets under resources/ are bundled into the wasm virtual filesystem automatically.

4.3 KiB Raw Blame History