Just a bit of friendly feedback. On my Android phone, the game didn't work in Firefox or Firefox Focus for me (the browsers I use normally). Music sounded good and initial screen looked good, but touching the screen had no effect. On Samsung Internet it worked fine. If MelonJS is handling the mouse/touch events, maybe all games are affected.
I think in the past I've fixed this by doubling the resolution. More precisely - detecting device pixel density and setting the canvas size based on that.
Are you playing on a phone or using a high DPI monitor? By default HTMLcanvas (which most game engines use to handle text) does not take into account high DPI scaling (I would guess due to performance).
This isn't inherit to JS game engines, but I will say text quality is not usually something that game devs focus on unless text is important to their particular game.
The text is blurry for me even on a standard DPI monitor that just happens to be large. For some reason the canvas resolution is still significantly lower than the display resolution and then being stretched.
I think canvas kept the "1 px is 1/96th an inch as reported by the browser not a display pixel" convention primarily for consistency as that's how the px unit worked on everything else in the browser.
"Web libraries (react, etc)" are just using HTML and CSS / the standard DOM for rendering instead of Canvas. You don't need to use any "library" to render in that way, it's built into the browser.
My most recent web game uses both standard DOM and Canvas for rendering different parts of the UI and text, and both look equally good to me. You do have to have set up the Canvas rendering correctly, especially for sharper displays like Apple Retina displays with higher pixel densities, but when done properly it looks very sharp and has no issue IMO.
As long as you don't read your writes and use transform for animations it won't cost you more than 0.5ms to 1ms per frame (could it be better? Sure. But developer productivity is important.)
I use react in my game platform bloxd.io - which I work full time on - and I couldn't be happier
Just took at look a bloxd. Pretty cool! I want to make my own io game. I think the browser game market is under served as far as quality games are concerned, and doesn’t seem saturated compared to all the other platforms.
Would you be able to give any advice on netcode/multiplayer solutions? I like working with low level rendering libraries (canvas, Kha/Haxe) but I am wondering if it is better to use an engine versus libraries, or even just rolling my own solution with web sockets?
no need to roll your own solution. If you want to ship a game, go high level :D
For web native rendering pixijs is good for 2d (and phaser is good also a good entry level). For 3d theres threejs/babylonjs.
There's also unity, which some browser games use but it has downsides on web (large build sizes for one)
None of the networking solutions will give you unreal engine netcode developer productivity (and that includes ones for unity). I use colyseus, it doesnt solve everything but will save you some work
Re saturation, it definitely depends on the genre, web is its own market. What type of game are you thinking of making?
My guess is that this would be caused by rendering text into a canvas and then scaling the canvas to fit the window. That example is rendering at 640x960 regardless of the screen size.
Text rendering quality is not as bad as it used to be, pretty much on par with DOM. In any event, if you do not scale canvas resolution by devicePixelRatio, the result will be blurry on most devices these days.
This reminded me of my implementation for a university course where you played by tilting your head to the left and right with the help of an accelerometer embedded earbud. Everyone got nauseous after a couple runs but it was very fun indeed :)
These demos highlight the pro and cons of the various input devices. This melonjump game is much harder to play with a touchpad than with a mouse. The platformer demo isn't, but that's mostly a keyboard game. The whack-a-mole game is much much easier with a touchscreen than with a mouse or a touchpad.
More here https://www.melongaming.com/en/Games