twix/raylib
1
0
Fork 0
mirror of https://github.com/raysan5/raylib.git synced 2026-04-12 01:59:09 -04:00
Code Issues Packages Projects Releases Wiki Activity

Added some notes from my recent attempts to port an FPS game to web. Mostly concerned with frame timing and mouse motion.

Farbs
2026-02-12 11:42:56 +11:00
parent 18383ce583
commit 53ffd67b4f
1 changed files with 37 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
Working-for-Web-(HTML5).md

@ -322,4 +322,41 @@ Q: Why don't I see the changes I compiled being applied?
A: Your web browser may be caching the game; you need to clear the cache. In most browsers the shortcut Shift+F5 or Ctrl+F5 will fully reload the page.
Q: Can I interact with the browser?
A: Yes! If you include emscripten.h then you can call [inline JavaScript](https://emscripten.org/docs/api_reference/emscripten.h.html#c.EM_ASM). There are a family of EM_ASM macros that return values like integers (EM_ASM_INT) and doubles (EM_ASM_DOUBLE).
Q: Why does my game stutter or run at different speeds using ASYNCIFY and WindowShouldClose?
A: WindowShouldClose waits for a fixed period of time (16ms in Raylib 5.5, 12ms in 5.6) in addition to the time required to run your code, which means it's not synchronized with monitor updates. Instead of using WindowShouldClose you can build a custom wait routine using the following resources:
* [emscripten_sleep](https://emscripten.org/docs/api_reference/emscripten.h.html#c.emscripten_sleep)
* [inline JavaScript](https://emscripten.org/docs/api_reference/emscripten.h.html#c.EM_ASM)
* [Performance.now](https://developer.mozilla.org/en-US/docs/Web/API/Performance/now)
* [requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame)
Q: Jerky and slow mouse movement with DisableCursor
A: This seems to have two causes:
1. RayLib only reports the most recent mouse event, however a browser might send several of these in a frame. In the RayLib function EmscriptenMouseMoveCallback try replacing the following two lines
CORE.Input.Mouse.previousPosition.x = lockedMousePos.x - mouseEvent->movementX;
CORE.Input.Mouse.previousPosition.y = lockedMousePos.y - mouseEvent->movementY;
with
CORE.Input.Mouse.previousPosition.x -= mouseEvent->movementX;
CORE.Input.Mouse.previousPosition.y -= mouseEvent->movementY;
2. By default some browsers (notably Chrome) send large mouse movement spikes unless you specifically request raw inputs. Since Emscripten doesn't send this flag you can sneak it in by adding the following script to your shell html file
HTMLElement.prototype._requestPointerLock = HTMLElement.prototype.requestPointerLock;
HTMLElement.prototype.requestPointerLock = function(options)
{
try
{
return this._requestPointerLock({ unadjustedMovement: true });
}
catch( error )
{
return this.requestPointerLock();
}
}
**Please, feel free to add here your FAQ/Issues to help others!!!**