I’m starting to move my gamedev experiments from native to HTML5. From my initial investigations this looks like it’ll be quite the shift from my usual Rust/C++ workflows. I want to document how concepts map between traditional native platforms and HTML5. This post covers the motivations for the move, and what topics I want to tackle first.
Background
I like to play with video game technology and techniques, and usually that’s through either C++ with SDL/OpenGL or Rust with winit/wgpu. So it’s been easy to whip up something, build it, and publish a windows binary for whoever wants to see what I’m working on.
But a couple of months ago I ditched Windows to start daily driving Linux. It’s put a spanner in the works. Local dev is fine, everything I use has cross platform support. And from the playing games perspective I can play most of my library thanks to steam/wine/proton. But I’m not making Windows binaries any more, so sharing the work has gotten a bit harder.
In previous game jams, and from just browsing itch.io, it was clear that HTML5 games provide an extremely low barrier to the conumer, even lower than native games built for the player’s platform.
There are engines and frameworks I could use that would let me build games for both native platforms and HTML5 - Unity, Godot, various Haxe libs, and many many more. But since I enjoy playing with the core tech of games I prefer to stay low level, so that I’m free to explore without fighting an engine/framework’s biases or opinions.
I could also use emscripten to cross compile native SDL code to HTML5. That would let me use things like SDL, or things
from libc like fopen. Emscripten would abstract away the details of mapping from HTML5 concepts to traditional gamedev
APIs. But I like being close to the platform, and working with it directly. If I’m going to target HTML5, I want to
actually use HTML5 and understand the workings of the platform.
Initial Topics
I’m going to be following the path I would take to make a simple 2D SDL game, and figure out how to translate them HTML5. So I suspect the following will be the first ports of call:
- Basic Graphics
- Window creation
- Clearing the screen
- Filling a rect
- Input / Update
- Update loop
- Mouse events
- Keyboard events
- Gamepad events
- Filesystem R/W
- Reading a file
- Writing a save game
- Sprite Graphics
- Loading images
- Rendering images
- Image formats
- Packaging / Loading
- Preloading game assets
- Bundling data
- Audio
- Playing sound effects
- Playing music
- Mixing audio
- Font Rendering
- Loading fonts
- Rendering fonts
- Networking
- RPC style network calls
- Real time multiplayer
- Deploying as native
I’ll update this post with links to the posts as I tackle each topic.
The goal is to try to get a good sense of how to best approach the subject in the way that naturally fits the platform. I’m going to assume a vague familiarity with game and web tech terms and techniques as I write the posts, but I’ll be providing background reading where possible.